In this tutorial I will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.
Step 1: The HTML
First, we need to create our basic HTML file and save it as index.php:
view plaincopy to clipboardprint?
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Style Switcher</title>
6. <?php
7. // Checks for, and assigns cookie to local variable:
8. if(!empty($_COOKIE[ istyle])) $style = $_COOKIE[ istyle];
9. // If no cookie is present then set style as "day" (default):
10. else $style = woulday;
11. ?>
12.
13. <!-- StyleSheet -->
14. <link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />
15.
16. <!-- jQuery -->
17. <script type="text/javascript" src="js/jquery.js"></script>
18.
19. <!-- Our plugin -->
20. <script type="text/javascript" src="js/styleswitcher.jquery.js"></script>
21.
22. </head>
23. <body>
24. <div id="container">
25. <h1>Style-Switcher Example</h1>
26. <ul id="nav">
27. <li><a href="#">Home</a></li>
28. <li><a href="#">About</a></li>
29. <li><a href="#">Services</a></li>
30. <li><a href="#">Products</a></li>
31. <li><a href="#">Links</a></li>
32. <li><a href="#">Contact</a></li>
33. </ul>
34. <div id="banner"></div>
35. <div id="content">
36. <h2>NETTUTS Tutorial Example</h2>
37. <p>Page content...</p>
38. </div>
39. <div id="foot">
40. <p>Footer stuff...</p>
41. </div>
42.
43. <!-- StyleSheet selection: -->
44. <div id="style-switcher">
45. <h4>Choose your style:</h4>
46. <ul>
47. <li id="day"><a href="style-switcher.php?style=day">Day</a></li>
48. <li id="night"><a href="style-switcher.php?style=night">Night</a></li>
49. </ul>
50. </div>
51.
52. </div>
53.
54. <script type="text/javascript">
55. $(#style-switcher a).styleSwitcher(); // Calling the plugin...
56. </script>
57.
58. </body>
59. </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Style Switcher</title>
<?php
// Checks for, and assigns cookie to local variable:
if(!empty($_COOKIE[ istyle])) $style = $_COOKIE[ istyle];
// If no cookie is present then set style as "day" (default):
else $style = woulday;
?>
<!-- StyleSheet -->
<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Our plugin -->
<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>
</head>
<body>
<div id="container">
<h1>Style-Switcher Example</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="banner"></div>
<div id="content">
<h2>NETTUTS Tutorial Example</h2>
<p>Page content...</p>
</div>
<div id="foot">
<p>Footer stuff...</p>
</div>
<!-- StyleSheet selection: -->
<div id="style-switcher">
<h4>Choose your style:</h4>
<ul>
<li id="day"><a href="style-switcher.php?style=day">Day</a></li>
<li id="night"><a href="style-switcher.php?style=night">Night</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(#style-switcher a).styleSwitcher(); // Calling the plugin...
</script>
</body>
</html>
You will see that there is some PHP up there just below the title attribute in the head. It is very simple - all it does is check for a cookie called "style" - if it exists then it assigns it to the local variable (also called "style") and if the cookie doesn exist, it assigns the default theme ("day") to the $style variable. This variable is then echoed out within the href attribute of the link element (href="css/<?php echo $style ?>.css"). You will see that the style-switcher div is included above in our HTML. There is no need to add this using JavaScript because the method we are using will allow the style-switcher to work when JavaScript is disabled. The two links (night & day) take the user to a file called style-switcher.php with an appended query string specifying the corresponding theme (e.g. href="style-switcher.php?style=day"). I have also called the a jQuery plugin called styleSwitcher. This has not been developed yet (well, it will have by the time you read this), so hold on! ... We will be writing this plugin in step 4 of this tutorial.
Step 2: The CSS
Now, we need to create a couple of CSS StyleSheets for our HTML. I have decided to create just two StyleSheets - one will have the theme of "Day" and the other will have the theme of "Night" and I have named them appropriately. (day.css & night.css)
The Day theme:
The Night theme:
It is best to start with one style and then copy across all the selectors to the alternative StyleSheet - and then all that needs changing are the various CSS rules and declarations. Obviously you can have as many StyleSheets as you want but in this tutorial we are using two for illustrative purposes. Plus night and day go well together as a duo!
day.css:
view plaincopy to clipboardprint?
1. #dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
2.
3. /* Quick Reset */
4. body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
5. margin: 0;
6. padding: 0;
7. border: none;
8. list-style: none;
9. font-weight: normal;
10. }
11.
12. /* General / Header */
13. body {background: #98beeb url(../img/day-body-bg.jpg) repeat-x; }
14. #container {
15. width: 60%;
16. margin: 0 auto;
17. min-width: 400px;
18. max-width: 800px;
19. position: relative;
20. }
21. h1 {
22. text-align: left;
23. text-transform: uppercase;
24. color: white;
25. font-size: 1.4em;
26. padding: 45px 30px 10px 30px;
27. }
28.
29. /* Navigation */
30. #nav {
31. padding: 5px 5px 0 0;
32. overflow: hidden;
33. }
34. #nav li {display: inline;}
35. #nav a {
36. float: left;
37. color: #6195ce;
38. font-weight: bold;
39. text-decoration: none;
40. padding: 3px 6px;
41. margin-left: 5px;
42. background: white;
43. }
44. #nav a:hover {color: #2c5a8c;}
45.
46. /* Banner */
47. #banner {
48. height: 125px;
49. background: url(../img/day-banner.jpg) center;
50. border: 5px solid white;
51. clear: both;
52. }
53.
54. /* Content Area */
55. #content {
56. border: 10px solid white;
57. background: white;
58. color: #2c5a8c;
59. margin: 5px 0;
60. }
61. #content a {font-weight: bold;}
62. #content a:hover {text-decoration: underline;}
63. h2 {
64. padding: 0.3em 0;
65. font-size: 1.4em;
66. }
67. p {padding: 0.3em 0;}
68.
69. /* Footer */
70. #foot {
71. background: white;
72. color: #1f3a57;
73. text-align: center;
74. border: 10px solid white;
75. clear: both;
76. }
77. #foot a {
78. text-decoration: none;
79. font-weight: bold;
80. color: #2c5a8c;
81. }
82. #foot a:hover {text-decoration: underline;}
83.
84. /* Style-Switcher */
85. #style-switcher {
86. position: absolute;
87. width: 100%;
88. top: 0;
89. left: 0;
90. rightright: 0;
91. height: 34px;
92. background: #79a3cc url(../img/day-ss-bg.jpg);
93. border-bottom: 1px solid white;
94. }
95. #style-switcher ul {
96. border-right: 1px solid white;
97. float: rightright;
98. }
99. #style-switcher h4 {
100. display: inline;
101. color: #153c67;
102. font-weight: bold;
103. line-height: 34px;
104. padding: 0 10px;
105. float: left;
106. border-left: 1px solid white;
107. }
108. #style-switcher li {display: inline;}
109. #style-switcher li a {
110. float: left;
111. line-height: 26px;
112. color: white;
113. background: #90a6bb;
114. text-decoration: none;
115. padding: 0 13px;
116. display: inline;
117. margin: 4px 4px 4px 0;
118. }
119. #style-switcher li a:hover {background: #3a5a7c;}
#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-weight: normal;
}
/* General / Header */
body {background: #98beeb url(../img/day-body-bg.jpg) repeat-x; }
#container {
width: 60%;
margin: 0 auto;
min-width: 400px;
max-width: 800px;
position: relative;
}
h1 {
text-align: left;
text-transform: uppercase;
color: white;
font-size: 1.4em;
padding: 45px 30px 10px 30px;
}
/* Navigation */
#nav {
padding: 5px 5px 0 0;
overflow: hidden;
}
#nav li {display: inline;}
#nav a {
float: left;
color: #6195ce;
font-weight: bold;
text-decoration: none;
padding: 3px 6px;
margin-left: 5px;
background: white;
}
#nav a:hover {color: #2c5a8c;}
/* Banner */
#banner {
height: 125px;
background: url(../img/day-banner.jpg) center;
border: 5px solid white;
clear: both;
}
/* Content Area */
#content {
border: 10px solid white;
background: white;
color: #2c5a8c;
margin: 5px 0;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
padding: 0.3em 0;
font-size: 1.4em;
}
p {padding: 0.3em 0;}
/* Footer */
#foot {
background: white;
color: #1f3a57;
text-align: center;
border: 10px solid white;
clear: both;
}
#foot a {
text-decoration: none;
font-weight: bold;
color: #2c5a8c;
}
#foot a:hover {text-decoration: underline;}
/* Style-Switcher */
#style-switcher {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 34px;
background: #79a3cc url(../img/day-ss-bg.jpg);
border-bottom: 1px solid white;
}
#style-switcher ul {
border-right: 1px solid white;
float: right;
}
#style-switcher h4 {
display: inline;
color: #153c67;
font-weight: bold;
line-height: 34px;
padding: 0 10px;
float: left;
border-left: 1px solid white;
}
#style-switcher li {display: inline;}
#style-switcher li a {
float: left;
line-height: 26px;
color: white;
background: #90a6bb;
text-decoration: none;
padding: 0 13px;
display: inline;
margin: 4px 4px 4px 0;
}
#style-switcher li a:hover {background: #3a5a7c;}
night.css:
view plaincopy to clipboardprint?
1. #dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
2.
3. /* Quick Reset */
4. body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
5. margin: 0;
6. padding: 0;
7. border: none;
8. list-style: none;
9. font-weight: normal;
10. }
11.
12. /* General / Header */
13. body {
14. font-family: Calibri,"Arial Narrow",Arial,Sans-Serif;
15. background: #072952 url(../img/night-body-bg.jpg) repeat-x;
16. }
17. #container {
18. width: 60%;
19. margin: 0 auto;
20. min-width: 400px;
21. max-width: 800px;
22. position: relative;
23. }
24. h1 {
25. text-align: left;
26. text-transform: uppercase;
27. color: white;
28. font-size: 1.4em;
29. padding: 45px 30px 10px 30px;
30. font-family: "Times New Roman", Times, serif;
31. }
32.
33. /* Navigation */
34. #nav {
35. padding: 5px 5px 0 0;
36. overflow: hidden;
37. }
38. #nav li {display: inline;}
39. #nav a {
40. float: left;
41. color: #010e2e;
42. font-weight: bold;
43. text-decoration: none;
44. padding: 8px 6px 3px 6px;
45. font-size: 0.8em;
46. text-transform: uppercase;
47. font-weight: 700;
48. margin-left: 5px;
49. background: white url(../img/night-nav-bg2.jpg) repeat-x;
50. }
51. #nav a:hover {color: #2c5a8c;}
52.
53. /* Banner */
54. #banner {
55. height: 125px;
56. background: url(../img/night-banner.jpg) center;
57. border: 5px solid white;
58. clear: both;
59. }
60.
61. /* Content Area */
62. #content {
63. color: white;
64. margin: 20px 0;
65. padding: 5px 0;
66. border-top: 4px double white;
67. border-bottom: 4px double white;
68. font-family: "Times New Roman", Times, serif;
69. }
70. #content a {font-weight: bold;}
71. #content a:hover {text-decoration: underline;}
72. h2 {
73. padding: 0.3em 0;
74. font-size: 1.4em;
75. }
76. p {padding: 0.3em 0;}
77.
78. /* Footer */
79. #foot {
80. color: white;
81. font-size: 0.8em;
82. clear: both;
83. }
84. #foot p {
85. text-align: center;
86. padding: 0;
87. }
88. #foot a {
89. text-decoration: none;
90. font-weight: bold;
91. color: white;
92. }
93. #foot a:hover {text-decoration: underline;}
94.
95. /* Style-Switcher */
96. #style-switcher {
97. position: absolute;
98. width: 100%;
99. top: 0;
100. left: 0;
101. rightright: 0;
102. height: 34px;
103. }
104. #style-switcher ul {float: left;}
105. #style-switcher h4 {
106. display: inline;
107. color: white;
108. font-weight: bold;
109. line-height: 34px;
110. padding: 0 10px;
111. float: left;
112. }
113. #style-switcher li {display: inline;}
114. #style-switcher li a {
115. float: left;
116. line-height: 34px;
117. color: white;
118. text-decoration: none;
119. padding: 0 4px;
120. margin-left: 5px;
121. display: inline;
122. }
123. #style-switcher li a:hover {
124. background: white;
125. color: #13181c;
126. background: white url(../img/night-ss-bg.jpg) repeat-x left bottombottom;
127. }
#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-weight: normal;
}
/* General / Header */
body {
font-family: Calibri,"Arial Narrow",Arial,Sans-Serif;
background: #072952 url(../img/night-body-bg.jpg) repeat-x;
}
#container {
width: 60%;
margin: 0 auto;
min-width: 400px;
max-width: 800px;
position: relative;
}
h1 {
text-align: left;
text-transform: uppercase;
color: white;
font-size: 1.4em;
padding: 45px 30px 10px 30px;
font-family: "Times New Roman", Times, serif;
}
/* Navigation */
#nav {
padding: 5px 5px 0 0;
overflow: hidden;
}
#nav li {display: inline;}
#nav a {
float: left;
color: #010e2e;
font-weight: bold;
text-decoration: none;
padding: 8px 6px 3px 6px;
font-size: 0.8em;
text-transform: uppercase;
font-weight: 700;
margin-left: 5px;
background: white url(../img/night-nav-bg2.jpg) repeat-x;
}
#nav a:hover {color: #2c5a8c;}
/* Banner */
#banner {
height: 125px;
background: url(../img/night-banner.jpg) center;
border: 5px solid white;
clear: both;
}
/* Content Area */
#content {
color: white;
margin: 20px 0;
padding: 5px 0;
border-top: 4px double white;
border-bottom: 4px double white;
font-family: "Times New Roman", Times, serif;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
padding: 0.3em 0;
font-size: 1.4em;
}
p {padding: 0.3em 0;}
/* Footer */
#foot {
color: white;
font-size: 0.8em;
clear: both;
}
#foot p {
text-align: center;
padding: 0;
}
#foot a {
text-decoration: none;
font-weight: bold;
color: white;
}
#foot a:hover {text-decoration: underline;}
/* Style-Switcher */
#style-switcher {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 34px;
}
#style-switcher ul {float: left;}
#style-switcher h4 {
display: inline;
color: white;
font-weight: bold;
line-height: 34px;
padding: 0 10px;
float: left;
}
#style-switcher li {display: inline;}
#style-switcher li a {
float: left;
line-height: 34px;
color: white;
text-decoration: none;
padding: 0 4px;
margin-left: 5px;
display: inline;
}
#style-switcher li a:hover {
background: white;
color: #13181c;
background: white url(../img/night-ss-bg.jpg) repeat-x left bottom;
}
This is not really a CSS tutorial so I won be delving into any of the above, but if you have any questions then please feel free to ask them in the comments section. And yes, I know that min-width is not supported in older browsers! ;)
Step 3: style-switcher.php
This is where we write the core functionality of the style switcher. It is actually just a few lines of very basic PHP code. You should create a new file called "style-switcher.php" and copy the following into it:
view plaincopy to clipboardprint?
1. <?php
2. $style = $_GET[ istyle];
3. setcookie("style", $style, time()+604800); // 604800 = amount of seconds in one week
4. if(isset($_GET[js])) {
5. echo $style;
6. } else {
7. header("Location: ".$_SERVER[HTTP_REFERER]);
8. }
9. ?>
<?php
$style = $_GET[ istyle];
setcookie("style", $style, time()+604800); // 604800 = amount of seconds in one week
if(isset($_GET[js])) {
echo $style;
} else {
header("Location: ".$_SERVER[HTTP_REFERER]);
}
?>
So, what the above code does is assign the "style" GET variable to a local $style variable. In other words it will take the value of the style property within the query string (style-switcher.php?style=day). It then sets a cookie (for one week) called "style" - we will be able to retrieve this cookie on our main index.php with the code shown in step 1 (remember that little chunk of PHP in the head?). Next, it checks to see if "js" is appended to the query string. If it is then we know that JavaScript (which we have yet to write) has requested this PHP script. The else condition occurs when a user does not have JavaScript enabled and redirects the user to the referrer (i.e. the page they just came from) - this will become clearer once we have written the jQuery stuff!
Step 4: The jQuery stuff
You can, if you want, stop right here!... The solution thus far will work perfectly, but as I stated in the intro we are going to make it even cooler with some jQuery awesomeness! Not only are we going to allow the user to change their theme without refreshing the page but we are also going to add a really cool fading effect... I mean, what type of jQuery tutorial would this be if there was no fading!?!? Obviously this is all possible without having to create a plugin but I thought it would be a good learning experience for all you, plus it allows us to adapt or transfer the code quickly and easily. First off, let is create a file called "styleswitcher.jquery.js". Making a new plugin in jQuery is extremely simple; all it takes is the following code:
view plaincopy to clipboardprint?
1. jQuery.fn.styleSwitcher = function(){
2. // The code goes here...
3. }
jQuery.fn.styleSwitcher = function(){
// The code goes here...
}
So, first we want to specify what happens when one of the StyleSheet links are clicked on (those within div#style-switcher):
view plaincopy to clipboardprint?
1. /* "this" refers to each instance of the selected element,
2. * So, if you were to call the plugin like this:
3. * $(a).styleSwitcher(); then the following would occur
4. * when clicking on any anchor within the document:
5. */
6.
7. $(this).click(function(){
8. // We are passing this element object through to the
9. // loadStyleSheet function.
10. loadStyleSheet(this);
11. // And then we are returning false.
12. return false;
13. });
/* "this" refers to each instance of the selected element,
* So, if you were to call the plugin like this:
* $(a).styleSwitcher(); then the following would occur
* when clicking on any anchor within the document:
*/
$(this).click(function(){
// We are passing this element object through to the
// loadStyleSheet function.
loadStyleSheet(this);
// And then we are returning false.
return false;
});
loadStyleSheet:
Now we need to write the loadStyleSheet function:
view plaincopy to clipboardprint?
1. function loadStyleSheet(obj) {
2.
3. // Append new div to body:
4. $(ody).append(<div id="overlay" />);
5.
6. // Give body a height of 100% (to fix IE6 issue):
7. $(ody).css({height:100%});
8.
9. // Select newly created div and apply some styles:
10. $(#overlay)
11. .css({
12. display:
one,
13. position: absolute,
14. top:0,
15. left: 0,
16. width: 100%,
17. height: 100%,
18. zIndex: 1000,
19. background: lack url(img/loading.gif) no-repeat center
20. })
21.
22. // Now fade in the div (#overlay):
23. .fadeIn(500,function(){
24.
25. // The following will happen when the div has finished fading in:
26.
27. // Request PHP script (obj.href) with appended "js" query string item:
28. $.get( obj.href+&js,function(data){
29.
30. // Select link element in HEAD of document (#stylesheet) and change href attribute:
31. $(#stylesheet).attr(href,css/ + data + .css);
32.
33. // Check if new CSS StyleSheet has loaded:
34. cssDummy.check(function(){
35.
36. // When StyleSheet has loaded, fade out and remove the #overlay div:
37. $(#overlay).fadeOut(500,function(){
38. $(this).remove();
39. });
40. });
41. });
42. });
43. }
function loadStyleSheet(obj) {
// Append new div to body:
$(ody).append(<div id="overlay" />);
// Give body a height of 100% (to fix IE6 issue):
$(ody).css({height:100%});
// Select newly created div and apply some styles:
$(#overlay)
.css({
display:
one,
position: absolute,
top:0,
left: 0,
width: 100%,
height: 100%,
zIndex: 1000,
background: lack url(img/loading.gif) no-repeat center
})
// Now fade in the div (#overlay):
.fadeIn(500,function(){
// The following will happen when the div has finished fading in:
// Request PHP script (obj.href) with appended "js" query string item:
$.get( obj.href+&js,function(data){
// Select link element in HEAD of document (#stylesheet) and change href attribute:
$(#stylesheet).attr(href,css/ + data + .css);
// Check if new CSS StyleSheet has loaded:
cssDummy.check(function(){
// When StyleSheet has loaded, fade out and remove the #overlay div:
$(#overlay).fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
I hope the comments explained it sufficiently. The more attentive of you will have noticed that we are calling a currently undefined function (cssDummy.check()). Don worry because that is the next step...
cssDummy:
We need a way of testing whether a StyleSheet has loaded. If it has loaded then we can make the overlay div disappear, but if it hasn we have to keep on checking until it does load. I did a bit of searching around the net and found a reliable way of testing such a thing. It involves testing for the computed width of a dummy element. The width of this element will be defined in the CSS - and so the computed width of the element will only equal the width defined in the CSS when the StyleSheet has loaded. I hope you now understand why we had to include that "#dummy-element" rule in each CSS file... So, here it is:
view plaincopy to clipboardprint?
1. var cssDummy = {
2. init: function(){
3. // Appends "dummy-element" div to body:
4. $(<div id="dummy-element" style="display:none" />).appendTo(ody);
5. },
6. check: function(callback) {
7.
8. // Checks if computed with equals that which is defined in the StyleSheets (2px):
9. if ($(#dummy-element).width()==2) callback();
10.
11. // If it has not loaded yet then simple re-initiate this
12. // function every 200 milliseconds until it had loaded:
13. else setTimeout(function(){cssDummy.check(callback)}, 200);
14. }
15. }
var cssDummy = {
init: function(){
// Appends "dummy-element" div to body:
$(<div id="dummy-element" style="display:none" />).appendTo(ody);
},
check: function(callback) {
// Checks if computed with equals that which is defined in the StyleSheets (2px):
if ($(#dummy-element).width()==2) callback();
// If it has not loaded yet then simple re-initiate this
// function every 200 milliseconds until it had loaded:
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
And, right at the end of our plugin we are going to call the cssDummy.init function:
cssDummy.init();
We are done! The entire plugin now looks like this:
view plaincopy to clipboardprint?
1. jQuery.fn.styleSwitcher = function(){
2. $(this).click(function(){
3. loadStyleSheet(this);
4. return false;
5. });
6. function loadStyleSheet(obj) {
7. $(ody).append(<div id="overlay" />);
8. $(ody).css({height:100%});
9. $(#overlay)
10. .css({
11. display:
one,
12. position: absolute,
13. top:0,
14. left: 0,
15. width: 100%,
16. height: 100%,
17. zIndex: 1000,
18. background: lack url(img/loading.gif) no-repeat center
19. })
20. .fadeIn(500,function(){
21. $.get( obj.href+&js,function(data){
22. $(#stylesheet).attr(href,css/ + data + .css);
23. cssDummy.check(function(){
24. $(#overlay).fadeOut(500,function(){
25. $(this).remove();
26. });
27. });
28. });
29. });
30. }
31. var cssDummy = {
32. init: function(){
33. $(<div id="dummy-element" style="display:none" />).appendTo(ody);
34. },
35. check: function(callback) {
36. if ($(#dummy-element).width()==2) callback();
37. else setTimeout(function(){cssDummy.check(callback)}, 200);
38. }
39. }
40. cssDummy.init();
41. }
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
loadStyleSheet(this);
return false;
});
function loadStyleSheet(obj) {
$(ody).append(<div id="overlay" />);
$(ody).css({height:100%});
$(#overlay)
.css({
display:
one,
position: absolute,
top:0,
left: 0,
width: 100%,
height: 100%,
zIndex: 1000,
background: lack url(img/loading.gif) no-repeat center
})
.fadeIn(500,function(){
$.get( obj.href+&js,function(data){
$(#stylesheet).attr(href,css/ + data + .css);
cssDummy.check(function(){
$(#overlay).fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
var cssDummy = {
init: function(){
$(<div id="dummy-element" style="display:none" />).appendTo(ody);
},
check: function(callback) {
if ($(#dummy-element).width()==2) callback();
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init();
}
We can now call the jQuery plugin like this:
$(#style-switcher a).styleSwitcher();
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.
Be the first ... |Add your comment.
Your Comment ...
Name (required)
Email (required, hidden)
Website