/* * Author: Tom Pryor * Version: 0.1 * Date: 04/16/2010 * Copyright: 2010 da Vinci Interactive * * Name: Button Maker States * Description: Allow all level of users to quickly and easily produce a high quality button image online, and save their states, with modern browsers, and no plugins. * Technology: HTML, CSS, and JavaScript */ /* * Automatically Remember Button States * * When first visiting this page, record all default states (3) to the localstorage hash * On subsequent visits, restore styles, per state, from data stored in the local storage hash * Allow users to revert to default style on any state, or all states. * */ /* http://dhruvbird.com/stickylinks/pagedata.php?key=0f678a178d1e2de5ac7b69556bb4c16c4b48bd78ad2ff1.12039051 */ //localStorage.setItem('border-radius', '20'); //var myKey = "border-radius"; // alert("Your user is: " + localStorage.getItem(myKey)); // accessing it // alert("Hello " + localStorage.userName); // another way of accessing the variable // localStorage.removeItem('userName'); /* * Create a hash for each button default state */ /* DEFAULT BUTTON STYLES */ var trackedButtonStyles = new Array(); trackedButtonStyles['font-family'] = '"goudy-bookletter-1911-1", "goudy-bookletter-1911-2", "Baskerville", "Georgia", serif'; trackedButtonStyles['border'] = '1px solid rgba(0, 0, 0, 1.0)'; trackedButtonStyles['padding'] = '0px'; trackedButtonStyles['width'] = '200px'; trackedButtonStyles['height'] = '60px'; trackedButtonStyles['margin'] = '0 auto'; trackedButtonStyles['color'] = 'white'; trackedButtonStyles['font-size'] = '40px'; trackedButtonStyles['text-shadow'] = '-1px -1px 1px rgba(0, 0, 0, .46)'; //rgba(0, 0, 0, 0.457031) -1px -1px 1px; trackedButtonStyles['text-align'] = 'center'; trackedButtonStyles['overflow'] = 'hidden'; trackedButtonStyles['cursor'] = 'pointer'; trackedButtonStyles['-moz-border-radius'] = '10px'; /* FF1+ */ trackedButtonStyles['-webkit-border-radius'] = '10px'; /* Saf3+, Chrome */ trackedButtonStyles['border-radius'] = '10px'; /* Opera 10.5, IE 9 */ trackedButtonStyles['-moz-background-image'] = '-moz-linear-gradient(top, #000000, #FFFFFF)'; /* FF3.6 */ trackedButtonStyles['-webkit-background-image'] = '-webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(1, #FFFFFF))'; /* Saf4+, Chrome */ trackedButtonStyles['background-image'] = 'gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 0, 0)), to(rgb(255, 255, 255)))'; trackedButtonStyles['background-color'] = 'black'; trackedButtonStyles['-moz-box-shadow'] = '2px 2px 4px rgba(0,0,0,0.6)'; /* FF3.5+ */ trackedButtonStyles['-webkit-box-shadow'] = '2px 2px 4px rgba(0,0,0,0.6)'; /* Saf3.0+, Chrome */ trackedButtonStyles['box-shadow'] = '2px 2px 4px rgba(0,0,0,0.6)'; /* Opera 10.5, IE 9.0 */ trackedButtonStyles['transform'] = 'scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStyles['-webkit-transform'] = 'scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStyles['-moz-transform'] = 'scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStyles['gradientState'] = 1; trackedButtonStyles['button-lable'] = "My Button"; trackedButtonStyles['transform-origin'] = '0% 0%'; trackedButtonStyles['position'] = 'relative'; /* OVER BUTTON STYLES */ var trackedButtonStylesOver = new Array(); trackedButtonStylesOver['font-family'] = '"goudy-bookletter-1911-1", "goudy-bookletter-1911-2", "Baskerville", "Georgia", serif'; trackedButtonStylesOver['border'] = '1px solid rgba(0,0,0, 1.0)'; trackedButtonStylesOver['padding'] = '0px'; trackedButtonStylesOver['width'] = '200px'; trackedButtonStylesOver['height'] = '60px'; trackedButtonStylesOver['margin'] = '0 auto'; trackedButtonStylesOver['color'] = '#ffffff'; trackedButtonStylesOver['font-size'] = '40px'; trackedButtonStylesOver['text-shadow'] = '-1px -1px 1px rgba(0, 0, 0, .46)'; //rgba(0, 0, 0, 0.457031) -1px -1px 1px; trackedButtonStylesOver['text-align'] = 'center'; trackedButtonStylesOver['overflow'] = 'hidden'; trackedButtonStylesOver['cursor'] = 'pointer'; trackedButtonStylesOver['-moz-border-radius'] = '10px'; /* FF1+ */ trackedButtonStylesOver['-webkit-border-radius'] = '10px'; /* Saf3+, Chrome */ trackedButtonStylesOver['border-radius'] = '10px'; /* Opera 10.5, IE 9 */ trackedButtonStylesOver['-moz-background-image'] = '-moz-linear-gradient(top, #000000, #FFFFFF)'; /* FF3.6 */ trackedButtonStylesOver['-webkit-background-image'] = '-webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(1, #FFFFFF))'; /* Saf4+, Chrome */ trackedButtonStylesOver['background-image'] = 'gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 0, 0)), to(rgb(255, 255, 255)))'; trackedButtonStylesOver['background-color'] = 'black'; trackedButtonStylesOver['-moz-box-shadow'] = '4px 4px 6px rgba(0,0,0,0.6)'; /* FF3.5+ */ trackedButtonStylesOver['-webkit-box-shadow'] = '4px 4px 6px rgba(0,0,0,0.6)'; /* Saf3.0+, Chrome */ trackedButtonStylesOver['box-shadow'] = '4px 4px 6px rgba(255,0,0,0.6)'; /* Opera 10.5, IE 9.0 */ trackedButtonStylesOver['transform'] = 'scale(1.02) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStylesOver['-webkit-transform'] = 'scale(1.02) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStylesOver['-moz-transform'] = 'scale(1.02) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStylesOver['gradientState'] = 1; trackedButtonStylesOver['button-lable'] = "My Button"; trackedButtonStylesOver['transform-origin'] = '0% 0%'; var trackedButtonStylesClick = new Array(); trackedButtonStylesClick['font-family'] = '"goudy-bookletter-1911-1", "goudy-bookletter-1911-2", "Baskerville", "Georgia", serif'; trackedButtonStylesClick['border'] = '2px solid rgba(0,0,0, 1.0)'; trackedButtonStylesClick['padding'] = '0px'; trackedButtonStylesClick['width'] = '200px'; trackedButtonStylesClick['height'] = '60px'; trackedButtonStylesClick['margin'] = '0 auto'; trackedButtonStylesClick['color'] = '#ffffff'; trackedButtonStylesClick['font-size'] = '40px'; trackedButtonStylesClick['text-shadow'] = '-1px -1px 1px rgba(0, 0, 0, .46)'; //rgba(0, 0, 0, 0.457031) -1px -1px 1px; trackedButtonStylesClick['text-align'] = 'center'; trackedButtonStylesClick['overflow'] = 'hidden'; trackedButtonStylesClick['cursor'] = 'pointer'; trackedButtonStylesClick['-moz-border-radius'] = '10px'; /* FF1+ */ trackedButtonStylesClick['-webkit-border-radius'] = '10px'; /* Saf3+, Chrome */ trackedButtonStylesClick['border-radius'] = '10px'; /* Opera 10.5, IE 9 */ trackedButtonStylesClick['-moz-background-image'] = '-moz-linear-gradient(top, #000000, #FFFFFF)'; /* FF3.6 */ trackedButtonStylesClick['-webkit-background-image'] = '-webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(1, #FFFFFF))'; /* Saf4+, Chrome */ trackedButtonStylesClick['background-image'] = 'gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 0, 0)), to(rgb(255, 255, 255)))'; trackedButtonStylesClick['background-color'] = 'black'; trackedButtonStylesClick['-moz-box-shadow'] = '2px 2px 4px rgba(81,100,115,0.0)'; /* FF3.5+ */ trackedButtonStylesClick['-webkit-box-shadow'] = '2px 2px 4px rgba(81,100,115,0.0)'; /* Saf3.0+, Chrome */ trackedButtonStylesClick['box-shadow'] = '2px 2px 4px rgba(81,100,115,0.0)'; /* Opera 10.5, IE 9.0 */ trackedButtonStylesClick['transform'] = 'scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStylesClick['-webkit-transform'] = 'scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStylesClick['-moz-transform'] = 'scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg)'; trackedButtonStylesClick['gradientState'] = 1; trackedButtonStylesClick['button-lable'] = "My Button"; trackedButtonStylesClick['transform-origin'] = '0% 0%'; trackedButtonStylesClick['position'] = 'relative'; /* * Create a hash for each default paragragh state */ var trackedParaStyles = new Array(); trackedParaStyles['display'] = 'table-cell'; trackedParaStyles['font-size'] = '40px'; trackedParaStyles['height'] = '60px'; trackedParaStyles['overflow'] = 'hidden'; trackedParaStyles['padding'] = '0px'; trackedParaStyles['vertical-align'] = 'middle'; trackedParaStyles['width'] = '200px'; var trackedParaStylesOver = new Array(); trackedParaStylesOver['display'] = 'table-cell'; trackedParaStylesOver['font-size'] = '40px'; trackedParaStylesOver['height'] = '60px'; trackedParaStylesOver['overflow'] = 'hidden'; trackedParaStylesOver['padding'] = '0'; trackedParaStylesOver['vertical-align'] = 'middle'; trackedParaStylesOver['width'] = '200px'; // trackedParaStylesOver['color'] = 'red'; var trackedParaStylesClick = new Array(); trackedParaStylesClick['display'] = 'table-cell'; trackedParaStylesClick['font-size'] = '40px'; trackedParaStylesClick['height'] = '60px'; trackedParaStylesClick['overflow'] = 'hidden'; trackedParaStylesClick['padding'] = '0'; trackedParaStylesClick['vertical-align'] = 'middle'; trackedParaStylesClick['width'] = '200px'; // alert(trackedButtonStyles['position']); // alert(trackedButtonStylesOver['position']); // alert(trackedButtonStylesClick['position']); /* * An array of all styles we record for the button div */ var trackedStyles = new Array("-moz-box-shadow", "background-color", "background-image", "border", "color", "text-shadow", "-moz-border-radius-topleft", "-moz-border-radius-topright", "-moz-border-radius-bottomright", "-moz-border-radius-bottomleft", "-webkit-border-top-right-radius", "-webkit-border-top-left-radius", "-webkit-border-bottom-right-radius", "-webkit-border-bottom-left-radius", "cursor", "font-family", "font-size", "height", "margin-top", "margin-right", "margin-bottom", "margin-left", "overflow", "padding-top", "padding-right", "padding-bottom", "padding-left", "position", "text-align", "width"); /* * An array of all styles we record for the button lable */ var trackedButtonPStyles = new Array("display", "font-size", "height", "overflow", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin-top", "margin-right", "margin-bottom", "margin-left", "vertical-align", "width") /* * record an individual state */ function recordState(state, key, value) { alert("record this state: " + state); // var arLen = trackedStyles.length; // for (var i = 0, len = arLen; i < len; ++i) { // myComputedStyles += trackedStyles[i] // } // alert() } /* * retrieve an individule style */ function retriveState(state, key) { alert("retrive this state: " + state); } //localStorage.setItem('border-radius', '20'); // var myKey = "border-radius"; // alert("Your user is: " + localStorage.getItem(myKey)); // accessing it // alert("Hello " + localStorage.userName); // another way of accessing the variable // localStorage.removeItem('userName'); /* * Create a hash that tracks what states are available */ var availableStates = new Array(); availableStates["default"] = "default"; availableStates["over"] = "over"; availableStates["click"] = "click"; /* * Create an Array that tracks what states are available */ var states = new Array("default", "over", "click", "default-P", "over-P", "click-P"); /* * Set the current state */ var currentState = availableStates['default']; /* * Init States * * On first load, check to see if any states have been stored locally * * If there are no states recorded, record all default state styles in local storage * * Else retrieve recorded styles and apply them to the appropriate HTML elements * */ initStates(); function initStates() { var arLen = localStorage.length; // alert('Total local storgae items = ' + arLen); /* * if we have styles recorded lets apply them all to the html element for the default state */ if (arLen > 0) { // alert('we got something in local storage'); var statesArrayLen = states.length; for (var i = 0, len = statesArrayLen; i < len; ++i) { var myState = states[i]; // getAllStyles(myState); if (localStorage.hasOwnProperty(myState)) { // alert('localStorage has key ' + myState); switch (myState) { case 'default': //document.write("Finally Friday"); // recordDefaultStylesForDefaultState(); // applyStylesForDefaultState(); break; case 'over': //document.write("Super Saturday"); // recordDefaultStylesForOverState(); break; case 'click': //document.write("Sleepy Sunday"); // recordDefaultStylesForClickState(); break; case 'default-P': //document.write("Finally Friday"); // recordDefaultStylesForDefaultState(); // applyStylesForDefaultState(); break; case 'over-P': //document.write("Super Saturday"); // recordDefaultStylesForOverState(); break; case 'click-P': //document.write("Sleepy Sunday"); // recordDefaultStylesForClickState(); break; default: //document.write("I'm looking forward to this weekend!"); } } else { // alert("doesn't have key " + myState); // var d = new Date(); // theDay = d.getDay(); switch (myState) { case 'default': //document.write("Finally Friday"); recordDefaultStylesForDefaultState(); // applyStylesForDefaultState(); break; case 'over': //document.write("Super Saturday"); recordDefaultStylesForOverState(); break; case 'click': //document.write("Sleepy Sunday"); recordDefaultStylesForClickState(); break; case 'default-P': //document.write("Finally Friday"); recordDefaultParaStylesForDefaultState(); break; case 'over-P': //document.write("Super Saturday"); recordDefaultParaStylesForOverState(); break; case 'click-P': //document.write("Sleepy Sunday"); recordDefaultParaStylesForClickState(); break; default: //document.write("I'm looking forward to this weekend!"); } } } } else { // alert('we got nuttn in storage'); /* * Record Default Button Styles for all states */ recordDefaultStylesForDefaultState(); recordDefaultStylesForOverState(); recordDefaultStylesForClickState(); /* * Record Default Para Styles for all states */ recordDefaultParaStylesForDefaultState(); recordDefaultParaStylesForOverState(); recordDefaultParaStylesForClickState(); /* * Apply Default Styles for Default State */ applyStylesForDefaultState('default'); } } // Create a new StyleSheet instance var sheet = new StyleSheet(); var elementHover = ""; var tagHover = ""; $(document).ready(function() { /* ONLY USE FOR DEBUGING */ /* recordDefaultStylesForDefaultState(); recordDefaultStylesForOverState(); recordDefaultStylesForClickState(); recordDefaultParaStylesForDefaultState(); recordDefaultParaStylesForOverState(); recordDefaultParaStylesForClickState(); */ applyStylesForDefaultState('default'); applyStylesForDefaultParaState('default'); // addDefaultStates(); addButtonStates(); addParaStates(); // Create a stylesheet for the new elements and add it to the page (replaces it if one already exists) addInlineStyleSheet(sheet); }); function applyStylesForDefaultParaState(myState){ // alert("Apply Default Styles for Default Para State"); // var el = document.getElementById('myLable'); // el.style['display'] = 'table-cell'; // div#myButton var myLocalStorageKey = ""; for (var key in trackedParaStyles) { myLocalStorageKey = myState + "-P-" + key; // alert(myState + ": " + key + " = " + localStorage.getItem(myLocalStorageKey)); // var myRule = key + ": " + localStorage.getItem(myLocalStorageKey); var myRule = localStorage.getItem(myLocalStorageKey); var myKey = '"' + key + '"'; // alert(myState + ": " + key + " = " + localStorage.getItem(myLocalStorageKey)); // alert(myState + ": " + key + " = " + myRule); var params = {}; // check to see if gradient state is enabled $("#myButtonLable").css(key, myRule); // el.style[key] = myRule; } // alert(myState + ": " + key + " = " + myRule); // $("#myButtonLable").css(key, '300px'); //$("p#myButtonLable").css("width", "600px"); } function applyStylesForDefaultState(myState) { // alert("Apply Default Styles for Default State"); // div#myButton var myLocalStorageKey = ""; var bkgImage = ""; // alert(myState); for (var key in trackedButtonStyles) { myLocalStorageKey = myState + "-" + key; // alert(myState + ": " + key + " = " + localStorage.getItem(myLocalStorageKey)); // var myRule = key + ": " + localStorage.getItem(myLocalStorageKey); var myRule = localStorage.getItem(myLocalStorageKey); var myKey = '"' + key + '"'; var params = {}; // params[key] = myRule; // params['width'] = "200px"; // By using var params = {}; params[variable] = 100; animate(params); // $("div#myButton").css(params); // $("div#myButton").css({ // width: "300px" // }); // $("div#myButton").css("width", "600px"); // bkgImage = key.replace("-webkit-", ""); // bkgImage = key.replace("-moz-", ""); // if(bkgImage === "background-image" || key === "background-image"){ if(/background-image/.test(key)){ // alert("BKG Image = " + bkgImage); // check to see if gradients are enabled var myGKey = myState + "-gradientState"; var gstate = localStorage.getItem(myGKey); // alert(gstate); // alert("GSTATE for " + myState + ", key = " + key + " is " + gstate); if(gstate > 0){ // alert("APPLY GRADIENT = " + key + ", " + myRule); $("div#myButton").css("background-image", myRule); }else{ // alert("DONT APPLY GRADIENT = " + key + ", " + myRule); $("div#myButton").css("background-image", 'none'); } }else{ // alert("APPLY RULE = " + key + ", " + myRule); $("div#myButton").css(key, myRule); } //{ // opacity: 0.5 //} // $("div#myButton").css({key: localStorage.getItem(myLocalStorageKey)}); } } function getAllStyles(myState) { // we track all styles in an array, so we will iterate over the array to get the styles var myLocalStorageKey = ""; for (var key in trackedButtonStyles) { myLocalStorageKey = myState + "-" + key; alert(myState + ": " + key + " = " + localStorage.getItem(myLocalStorageKey)); } } /* * Record default styles for each button state */ function recordDefaultStylesForDefaultState() { // alert("Loading Styles for Default State"); localStorage['default'] = "1"; for (var key in trackedButtonStyles) { localStorage.setItem('default-' + key, trackedButtonStyles[key]); } } function recordDefaultStylesForOverState() { // alert("Loading Styles for Over State"); localStorage['over'] = "1"; for (var key in trackedButtonStylesOver) { localStorage.setItem('over-' + key, trackedButtonStylesOver[key]); } } function recordDefaultStylesForClickState() { // alert("Loading Styles for Click State"); localStorage['click'] = "1"; for (var key in trackedButtonStylesClick) { localStorage.setItem('click-' + key, trackedButtonStylesClick[key]); } } /* * Record default styles for each para state */ function recordDefaultParaStylesForDefaultState() { // alert("Loading Para Styles for Default State"); localStorage['default-P'] = "1"; for (var key in trackedParaStyles) { localStorage.setItem('default-P-' + key, trackedParaStyles[key]); } } function recordDefaultParaStylesForOverState() { // alert("Loading Para Styles for Over State"); localStorage['over-P'] = "1"; for (var key in trackedParaStylesOver) { localStorage.setItem('over-P-' + key, trackedParaStylesOver[key]); } } function recordDefaultParaStylesForClickState() { // alert("Loading Para Styles for Click State"); localStorage['click-P'] = "1"; for (var key in trackedParaStylesClick) { localStorage.setItem('click-P-' + key, trackedParaStylesClick[key]); } } // retriveState(currentState); // currentState = availableStates["over"]; // recordState(currentState); function addButtonStates() { // Create a CSS element to set colour to green // var elementBasic = new StyleSheetElement("color", "#00ff00"); // Attach the CSS element to the CSS description for "a" // var tagA = sheet.addElementToTag("a", elementBasic); // Set the order of the tag for "a" // tagA.order = 2; var myLocalStorageKey = ""; var bkgImage = ""; var myState = "over"; for (var key in trackedButtonStylesOver) { myLocalStorageKey = myState + "-" + key; var myRule = localStorage.getItem(myLocalStorageKey); myRule += " !important"; // bkgImage = key.replace("-webkit-", ""); // bkgImage = key.replace("-moz-", ""); // if(bkgImage === "background-image"){ if(/background-image/.test(key)){ // alert("BKG Image = " + key); // $("div#myButton").css(bkgImage, myRule); // check to see if gradients are enabled var myGKey = myState + "-gradientState"; var gstate = localStorage.getItem(myGKey); if(gstate > 0){ elementHover = new StyleSheetElement(key, myRule); }else{ elementHover = new StyleSheetElement("background-image", 'none !important'); } }else{ // $("div#myButton").css(key, myRule); elementHover = new StyleSheetElement(key, myRule); } tagHover += sheet.addElementToTag("div#myButton:hover", elementHover); } myState = "click"; for (var key in trackedButtonStylesClick) { myLocalStorageKey = myState + "-" + key; var myRule = localStorage.getItem(myLocalStorageKey); myRule += " !important"; // bkgImage = key.replace("-webkit-", ""); // bkgImage = key.replace("-moz-", ""); // if(bkgImage === "background-image"){ if(/background-image/.test(key)){ // alert("BKG Image = " + bkgImage); // $("div#myButton").css(bkgImage, myRule); // check to see if gradients are enabled var myGKey = myState + "-gradientState"; var gstate = localStorage.getItem(myGKey); if(gstate > 0){ elementHover = new StyleSheetElement(key, myRule); }else{ elementHover = new StyleSheetElement("background-image", 'none !important'); } }else{ // $("div#myButton").css(key, myRule); elementHover = new StyleSheetElement(key, myRule); } tagHover += sheet.addElementToTag("div#myButton:active", elementHover); } // Create a CSS element to set colour to red // var elementHover = new StyleSheetElement("color", "#ff0000"); // Attach the CSS element to the CSS description for "a:hover" // var tagHover = sheet.addElementToTag("p:hover", elementHover); // Set the order of the tag for "a:hover", will appear beore "a" // tagHover.order = 1; // Create a stylesheet for the new elements and add it to the page (replaces it if one already exists) } function addParaStates() { // Create a CSS element to set colour to green // var elementBasic = new StyleSheetElement("color", "#00ff00"); // Attach the CSS element to the CSS description for "a" // var tagA = sheet.addElementToTag("a", elementBasic); // Set the order of the tag for "a" // tagA.order = 2; var myLocalStorageKey = ""; var bkgImage = ""; var myState = "default"; for (var key in trackedParaStyles) { myLocalStorageKey = myState + "-" + key; var myRule = localStorage.getItem(trackedParaStyles); myRule += " !important"; // bkgImage = key.replace("-webkit-", ""); // bkgImage = key.replace("-moz-", ""); // if(bkgImage === "background-image"){ if(/background-image/.test(key)){ // alert("BKG Image = " + bkgImage); // $("div#myButton").css(bkgImage, myRule); // check to see if gradients are enabled var myGKey = myState + "-gradientState"; var gstate = localStorage.getItem(myGKey); if(gstate > 0){ elementHover = new StyleSheetElement(key, myRule); }else{ elementHover = new StyleSheetElement("background-image", 'none !important'); } }else{ // $("div#myButton").css(key, myRule); elementHover = new StyleSheetElement(key, myRule); } tagHover += sheet.addElementToTag("p#myButtonLable", elementHover); } var myState = "over"; for (var key in trackedParaStylesOver) { myLocalStorageKey = myState + "-" + key; var myRule = localStorage.getItem(myLocalStorageKey); myRule += " !important"; // bkgImage = key.replace("-webkit-", ""); // bkgImage = key.replace("-moz-", ""); // if(bkgImage === "background-image"){ if(/background-image/.test(key)){ // alert("BKG Image = " + bkgImage); // $("div#myButton").css(bkgImage, myRule); // check to see if gradients are enabled var myGKey = myState + "-gradientState"; var gstate = localStorage.getItem(myGKey); if(gstate > 0){ elementHover = new StyleSheetElement(key, myRule); }else{ elementHover = new StyleSheetElement("background-image", 'none !important'); } }else{ // $("div#myButton").css(key, myRule); elementHover = new StyleSheetElement(key, myRule); } tagHover += sheet.addElementToTag("p#myButtonLable:hover", elementHover); } myState = "click"; for (var key in trackedParaStylesClick) { myLocalStorageKey = myState + "-" + key; var myRule = localStorage.getItem(myLocalStorageKey); myRule += " !important"; // bkgImage = key.replace("-webkit-", ""); // bkgImage = key.replace("-moz-", ""); // if(bkgImage === "background-image"){ if(/background-image/.test(key)){ // alert("BKG Image = " + bkgImage); // $("div#myButton").css(bkgImage, myRule); // check to see if gradients are enabled var myGKey = myState + "-gradientState"; var gstate = localStorage.getItem(myGKey); if(gstate > 0){ elementHover = new StyleSheetElement(key, myRule); }else{ elementHover = new StyleSheetElement("background-image", 'none !important'); } }else{ // $("div#myButton").css(key, myRule); elementHover = new StyleSheetElement(key, myRule); } tagHover += sheet.addElementToTag("p#myButtonLable:active", elementHover); } // Create a CSS element to set colour to red // var elementHover = new StyleSheetElement("color", "#ff0000"); // Attach the CSS element to the CSS description for "a:hover" // var tagHover = sheet.addElementToTag("p:hover", elementHover); // Set the order of the tag for "a:hover", will appear beore "a" // tagHover.order = 1; // Create a stylesheet for the new elements and add it to the page (replaces it if one already exists) }