Response title
This is preview!
Move this topic
ThemeSwitcher + Cookie
in Using jQuery UI
•
12 years ago
Hi Guys,
I was able to implement the themeswticher with some of my own themes,
by following another post here. The only issue I'm having is that the
cookie isn't saving out the theme. So when I close the browser, the
theme goes back to default. Is there something I'm missing?
Replies(3)
Re: ThemeSwitcher + Cookie
12 years ago
Could you let us know what browser you're using and also verify that
you have cookies enabled?
A quick test shows the switcher saving a cookie on my browsers.
You might try the switcher in this demo to make sure it's saving state
for you as well: http://filamentgroup.com/examples/daterangepicker_v2/
Thanks
Leave a comment on scottjehl's reply
Re: ThemeSwitcher + Cookie
12 years ago
I have them enabled. I have downloaded the script and altered as I
needed (only added 1 theme, duplicated code exactly as other themes)
and am running it locally versus over the google library. It switches
fine, but doesn't save if I close the browser. Have tested in IE7,
IE8, Safar 4, Safari 3. Only browsers my organization uses internally
are those two.
I will try the source for the one you have provided and get back to
you.
My current code is below.
/* jQuery plugin themeswitcher
---------------------------------------------------------------------
*/
$.fn.themeswitcher = function(settings){
var options = jQuery.extend({
loadTheme: null,
initialText: 'Switch Theme',
width: 150,
height: 200,
buttonPreText: 'Theme: ',
closeOnSelect: true,
buttonHeight: 14,
cookieName: 'jquery-ui-theme',
onOpen: function(){},
onClose: function(){},
onSelect: function(){}
}, settings);
//markup
var button = $('<a href="#" class="jquery-ui-themeswitcher-
trigger"><span class="jquery-ui-themeswitcher-icon"></span><span
class="jquery-ui-themeswitcher-title">'+ options.initialText +'</
span></a>');
var switcherpane = $('<div class="jquery-ui-themeswitcher"><div
id="themeGallery"> <ul> <li><a href="../css/themes/data/jquery-
ui.css"> <img src="../css/themes/screens/theme_30_data_default.png"
alt="DATA" title="DATA" /> <span class="themeName">DATAGROUP</span>
</a></li> <li><a href="../css/themes/ui-lightness/jquery-ui.css">
<img src="../css/themes/screens/theme_30_ui_light.png" alt="UI
Lightness" title="UI Lightness" /> <span class="themeName">UI
lightness</span> </a></li> <li><a href="../css/themes/ui-darkness/
jquery-ui.css"> <img src="../css/themes/screens/
theme_30_ui_dark.png" alt="UI Darkness" title="UI Darkness" /> <span
class="themeName">UI darkness</span> </a></li> <li><a href="../css/
themes/smoothness/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_smoothness.png" alt="Smoothness" title="Smoothness" />
<span class="themeName">Smoothness</span> </a></li> <li><a
href="../css/themes/start/jquery-ui.css"> <img src="../css/themes/
screens/theme_30_start_menu.png" alt="Start" title="Start" /> <span
class="themeName">Start</span> </a></li> <li><a href="../css/themes/
redmond/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_windoze.png" alt="Redmond" title="Redmond" /> <span
class="themeName">Redmond</span> </a></li> <li><a href="../css/
themes/cupertino/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_cupertino.png" alt="Cupertino" title="Cupertino" /> <span
class="themeName">Cupertino</span> </a></li> <li><a href="../css/
themes/south-street/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_south_street.png" alt="South St" title="South St" /> <span
class="themeName">South Street</span> </a></li> <li><a href="../
css/themes/blitzer/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_blitzer.png" alt="Blitzer" title="Blitzer" /> <span
class="themeName">Blitzer</span> </a></li> <li><a href="../css/
themes/humanity/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_humanity.png" alt="Humanity" title="Humanity" /> <span
class="themeName">Humanity</span> </a></li> <li><a href="../css/
themes/hot-sneaks/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_hot_sneaks.png" alt="Hot Sneaks" title="Hot Sneaks" />
<span class="themeName">Hot sneaks</span> </a></li> <li><a href="../
css/themes/excite-bike/jquery-ui.css"> <img src="../css/themes/
screens/theme_30_excite_bike.png" alt="Excite Bike" title="Excite
Bike" /> <span class="themeName">Excite Bike</span> </a></li>
<li><a href="../css/themes/vader/jquery-ui.css"> <img src="../css/
themes/screens/theme_30_black_matte.png" alt="Vader" title="Vader" /
> <span class="themeName">Vader</span> </a></li> <li><a
href="../css/themes/dot-luv/jquery-ui.css"> <img src="../css/themes/
screens/theme_30_dot_luv.png" alt="Dot Luv" title="Dot Luv" /> <span
class="themeName">Dot Luv</span> </a></li> <li><a href="../css/
themes/mint-choc/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_mint_choco.png" alt="Mint Choc" title="Mint Choc" /> <span
class="themeName">Mint Choc</span> </a></li> <li><a href="../css/
themes/black-tie/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_black_tie.png" alt="Black Tie" title="Black Tie" /> <span
class="themeName">Black Tie</span> </a></li> <li><a href="../css/
themes/trontastic/jquery-ui.css"> <img src="../css/themes/screens/
theme_30_trontastic.png" alt="Trontastic" title="Trontastic" />
<span class="themeName">Trontastic</span> </a></li> <li><a
href="../css/themes/swanky-purse/jquery-ui.css"> <img src="../css/
themes/screens/theme_30_swanky_purse.png" alt="Swanky Purse"
title="Swanky Purse" /> <span class="themeName">Swanky Purse</
span> </a></li> </ul></div></div>').find('div').removeAttr('id');
//button events
button.click(
function(){
if(switcherpane.is(':visible')){ switcherpane.spHide(); }
else{ switcherpane.spShow(); }
return false;
}
);
//menu events (mouseout didn't work...)
switcherpane.hover(
function(){},
function(){if(switcherpane.is(':visible')){$(this).spHide();}}
);
//show/hide panel functions
$.fn.spShow = function(){ $(this).css({top: button.offset().top +
options.buttonHeight + 6, left: button.offset().left}).slideDown(50);
button.css(button_active); options.onOpen(); }
$.fn.spHide = function(){ $(this).slideUp(50, function()
{options.onClose();}); button.css(button_default); }
/* Theme Loading
---------------------------------------------------------------------
*/
switcherpane.find('a').click(function(){
updateCSS( $(this).attr('href') );
var themeName = $(this).find('span').text();
button.find('.jquery-ui-themeswitcher-title').text
( options.buttonPreText + themeName );
$.cookie(options.cookieName, themeName);
options.onSelect();
if(options.closeOnSelect && switcherpane.is(':visible'))
{ switcherpane.spHide(); }
return false;
});
//function to append a new theme stylesheet with the new style
changes
function updateCSS(locStr){
var cssLink = $('<link href="'+locStr+'" type="text/css"
rel="Stylesheet" class="ui-theme" />');
$("head").append(cssLink);
if( $("link.ui-theme").size() > 3){
$("link.ui-theme:first").remove();
}
}
/* Inline CSS
---------------------------------------------------------------------
*/
var button_default = {
fontFamily: 'Trebuchet MS, Verdana, sans-serif',
fontSize: '11px',
color: '#666',
background: '#eee url(http://jqueryui.com/themeroller/
themeswitchertool/images/buttonbg.png) 50% 50% repeat-x',
border: '1px solid #ccc',
'-moz-border-radius': '6px',
'-webkit-border-radius': '6px',
textDecoration: 'none',
padding: '3px 3px 3px 8px',
width: options.width - 11,//minus must match left and right padding
display: 'block',
height: options.buttonHeight,
outline: '0'
};
var button_hover = {
'borderColor':'#bbb',
'background': '#f0f0f0',
cursor: 'pointer',
color: '#444'
};
var button_active = {
color: '#aaa',
background: '#000',
border: '1px solid #ccc',
borderBottom: 0,
'-moz-border-radius-bottomleft': 0,
'-webkit-border-bottom-left-radius': 0,
'-moz-border-radius-bottomright': 0,
'-webkit-border-bottom-right-radius': 0,
outline: '0'
};
//button css
button.css(button_default)
.hover(
function(){
$(this).css(button_hover);
},
function(){
if( !switcherpane.is(':animated') && switcherpane.is(':hidden') ){ $
(this).css(button_default); }
}
)
.find('.jquery-ui-themeswitcher-icon').css({
float: 'right',
width: '16px',
height: '16px',
background: 'url(http://jqueryui.com/themeroller/themeswitchertool/
images/icon_color_arrow.gif) 50% 50% no-repeat'
});
//pane css
switcherpane.css({
position: 'absolute',
float: 'left',
fontFamily: 'Trebuchet MS, Verdana, sans-serif',
fontSize: '12px',
background: '#000',
color: '#fff',
padding: '8px 3px 3px',
border: '1px solid #ccc',
'-moz-border-radius-bottomleft': '6px',
'-webkit-border-bottom-left-radius': '6px',
'-moz-border-radius-bottomright': '6px',
'-webkit-border-bottom-right-radius': '6px',
borderTop: 0,
zIndex: 999999,
width: options.width-6//minus must match left and right padding
})
.find('ul').css({
listStyle: 'none',
margin: '0',
padding: '0',
overflow: 'auto',
height: options.height
}).end()
.find('li').hover(
function(){
$(this).css({
'borderColor':'#555',
'background': 'url(http://jqueryui.com/themeroller/
themeswitchertool/images/menuhoverbg.png) 50% 50% repeat-x',
cursor: 'pointer'
});
},
function(){
$(this).css({
'borderColor':'#111',
'background': '#000',
cursor: 'auto'
});
}
).css({
width: options.width-30,
height: '',
padding: '2px',
margin: '1px',
border: '1px solid #111',
'-moz-border-radius': '4px',
clear: 'left',
float: 'left'
}).end()
.find('a').css({
color: '#aaa',
textDecoration: 'none',
float: 'left',
width: '100%',
outline: '0'
}).end()
.find('img').css({
float: 'left',
border: '1px solid #333',
margin: '0 2px'
}).end()
.find('.themeName').css({
float: 'left',
margin: '3px 0'
}).end();
$(this).append(button);
$('body').append(switcherpane);
switcherpane.hide();
if( $.cookie(options.cookieName) || options.loadTheme ){
var themeName = $.cookie(options.cookieName) || options.loadTheme;
switcherpane.find('a:contains('+ themeName +')').trigger('click');
}
return this;
};
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set
cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' ||
options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 *
60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use
expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and
options.domain
// in the following expressions, otherwise they evaluate to
undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) :
'';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value),
expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we
want?
if (cookie.substring(0, name.length + 1) == (name +
'=')) {
cookieValue = decodeURIComponent(cookie.substring
(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
Leave a comment on guest's reply
Re: ThemeSwitcher + Cookie
12 years ago
Okay so I tried using the default, without my customizations, like the
actual link from jquery.com and it still doesn't work. But I have
another cookie object on my page and that one works.
Leave a comment on guest's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to guest's discussion
Statistics
- 3 Replies
- 896 Views
- 0 Followers