https://myelectrical.com/Portals/_default/Skins/QuickStart/js/demo-scripts.js

1/* These scripts are not necesary for template functionality, they are only for demo purpose. */
2/* =========================================== Icons Switch 48px*/
3$('#icn48switch #icn48black, #icn48switch #icn48white, #icn48switch #icn48gray, #icn48switch #icn48default').click(function(){
4	$('#icn48switch a').removeClass('active');//remove active class from color switcher
5	$(this).addClass('active');//add "active" class to this(clicked)
6	
7	//remove other clases at icons, but leave only default
8	$('#icons48demo_list em[class^=icn48_]').removeClass('icn48black');
9	$('#icons48demo_list em[class^=icn48_]').removeClass('icn48gray');
10	$('#icons48demo_list em[class^=icn48_]').removeClass('icn48white');
11	
12	_thisID = $(this).attr('id');//Get id from color switcher menu(currently clicked)
13	if(_thisID != 'icn48default'){//if is not this id then...
14		$('#icons48demo_list em[class^=icn48_]').addClass($(this).attr('id'));//...convert this in a class and attribute it to icons
15	}
16	
17	if(_thisID == 'icn48white'){//if show icons are white make demo background dark
18		$('#icons48demo_list').css('background-color', '#333333');//make bg dark
19	}else{
20		$('#icons48demo_list').css('background-color', '');//change to default bg
21	}
22	
23	return false;//prevent browser to access the link(#)
24});
25
26$('#icons48demo_list em').click(function(){
27	$(this).css('background-color', '#ddd');//set a background color for currently clicked icon
28	_thisClass = $(this).attr('class');//get the class
29	_thisHTMLcode = $('pre#icn48addit_class').html();//get the html inside of "pre"
30	
31	$('pre#icn48addit_class').html(_thisHTMLcode + '&lt;em class="' + _thisClass + '"&gt;&lt;/em&gt;<br />');//add html inside of "pre", but keep existing
32	
33	return false;//prevent browser to access the link(#)
34});
35
36/* =========================================== Icons Switch 72px*/
37$('#icn72switch #icn72black, #icn72switch #icn72white, #icn72switch #icn72gray, #icn72switch #icn72default').click(function(){
38	$('#icn72switch a').removeClass('active');//remove active class from color switcher
39	$(this).addClass('active');//add "active" class to this(clicked)
40	
41	//remove other clases at icons, but leave only default
42	$('#icons72demo_list em[class^=icn72_]').removeClass('icn72black');
43	$('#icons72demo_list em[class^=icn72_]').removeClass('icn72gray');
44	$('#icons72demo_list em[class^=icn72_]').removeClass('icn72white');
45	
46	_thisID = $(this).attr('id');//Get id from color switcher menu(currently clicked)
47	if(_thisID != 'icn72default'){//if is not this id then...
48		$('#icons72demo_list em[class^=icn72_]').addClass($(this).attr('id'));//...convert this in a class and attribute it to icons
49	}
50	
51	if(_thisID == 'icn72white'){//if show icons are white make demo background dark
52		$('#icons72demo_list').css('background-color', '#333333');//make bg dark
53	}else{
54		$('#icons72demo_list').css('background-color', '');//change to default bg
55	}
56	
57	return false;//prevent browser to access the link(#)
58});
59
60$('#icons72demo_list em').click(function(){
61	$(this).css('background-color', '#ddd');//set a background color for currently clicked icon
62	_thisClass = $(this).attr('class');//get the class
63	_thisHTMLcode = $('pre#icn72addit_class').html();//get the html inside of "pre"
64	
65	$('pre#icn72addit_class').html(_thisHTMLcode + '&lt;em class="' + _thisClass + '"&gt;&lt;/em&gt;<br />');//add html inside of "pre", but keep existing
66	
67	return false;//prevent browser to access the link(#)
68});
69
70$('#reset_icnPre').click(function(){
71	$('pre#icn48addit_class, pre#icn72addit_class').html('');
72	$('#icons48demo_list em, #icons72demo_list em').css('background-color', '');
73	return false;//prevent browser to access the link(#)
74});
75
76/* =========================================== Icons tooltip*/
77$('#icons48demo_list em,#icons72demo_list em').tooltip({
78	delay: { show: 300, hide: 100 }
79});