color-switcher.js
2.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* Styles Switcher */
window.console = window.console || (function(){
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
jQuery(document).ready(function($) {
"use strict"
$("ul.colors .color1" ).click(function(){
$("#colors" ).attr("href", "css/colors/preset.css" );
return false;
});
$("ul.colors .color2" ).click(function(){
$("#colors" ).attr("href", "css/colors/blue.css" );
return false;
});
$("ul.colors .color3" ).click(function(){
$("#colors" ).attr("href", "css/colors/turquoise.css" );
return false;
});
$("ul.colors .color4" ).click(function(){
$("#colors" ).attr("href", "css/colors/orange.css" );
return false;
});
$("ul.colors .color5" ).click(function(){
$("#colors" ).attr("href", "css/colors/wisteria.css" );
return false;
});
$("ul.colors .color6" ).click(function(){
$("#colors" ).attr("href", "css/colors/alizarin.css" );
return false;
});
$("#color-style-switcher .bottom a.settings").click(function(e){
e.preventDefault();
var div = $("#color-style-switcher");
if (div.css("left") === "-145px") {
$("#color-style-switcher").animate({
left: "0px"
});
} else {
$("#color-style-switcher").animate({
left: "-145px"
});
}
})
$("ul.colors li a").click(function(e){
e.preventDefault();
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
})
});
//Inject Necessary Styles and HTML
jQuery('head').append('<link rel="stylesheet" id="colors" href="css/colors/preset.css" type="text/css" />');
jQuery('head').append('<link rel="stylesheet" href="css/color-switcher.css" type="text/css" />');
// jQuery('body').append('' +
// '<div id="color-style-switcher">' +
// '<div>' +
// '<h3>Color Palette</h3>' +
// '<ul class="colors">' +
// '<li><a class="color1 active" href="#"></a></li>' +
// '<li><a class="color2" href="#"></a></li>' +
// '<li><a class="color3" href="#"></a></li>' +
// '<li><a class="color4" href="#"></a></li>' +
// '<li><a class="color5" href="#"></a></li>' +
// '<li><a class="color6" href="#"></a></li>' +
// '</ul>' +
// '</div>' +
// '<div class="bottom"> <a href="#" class="settings"><i class="lni-cog"></i></a> </div>' +
// '</div>' +
// '');