2015-06-29 3 views
7

मैं तो जब आप # पूर्ण-चौड़ाई या # निश्चित-चौड़ाई क्लिक करें यह आपके अगले आगमनकैसे मैं इस स्क्रिप्ट में कैश स्टाइलशीट परिवर्तन करने के लिए कुकी जोड़ सकता हूँ

पर आपके विचार याद होगा इस स्क्रिप्ट के लिए एक कुकी जोड़ने की जरूरत
<button id="full-width">GO FULL WIDTH</button> 
<button id="fixed-width">GO FIXED WIDTH</button> 

$(document).ready(function() { 

    $("#full-width").click(function() { 

     $('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />'); 

    }); 

    $("#fixed-width").click(function() { 

     $('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove(); 

    }); 

}); 

मुझे यह कुकी मिली जो पहले से ही मेरी साइट पर दूसरी स्क्रिप्ट के लिए थी, लेकिन मुझे इस बारे में कोई जानकारी नहीं है कि इसे ऊपर लिपि के लिए कैसे इंस्टॉल किया जाए।

function setCookie(name, value, days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
     var expires = "; expires=" + date.toGMTString(); 
    } 
    else var expires = ""; 
    document.cookie = name + "=" + value + expires + "; path=/; domain=.myfantasyleague.com"; 
} 

function getCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') c = c.substring(1, c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); 
    } 
    return null; 
} 

function deleteCookie(name) { 
    createCookie(name, "", -1); 
} 
+2

न स्टाइलशीट स्वैप उन्नत बनाया। बस दो कक्षाएं बनाएं और jquey addClass और removeClass फ़ंक्शन और स्वैप कक्षाओं का उपयोग करें। यह ठीक काम करेगा। सीएसएस फ़ाइलों को पेज लोड पर लोड किया जाना है, उन्हें बदलना गतिशील कभी काम नहीं करेगा। यही कारण है कि हम उन्हें दस्तावेज़ के अंत में शामिल नहीं करते हैं। एचटीएमएल सामग्री – Ila

+0

से पहले शामिल होने पर ही काम करता है जब आप दृश्य ग्लिच का जोखिम रखते हैं तो वे वास्तव में उन्हें स्वैप करते हैं, यह है :) – myTerminal

+0

जब उपयोगकर्ता एक अलग लेआउट का चयन करता है, तो कुकी में उस विकल्प को स्टोर करें।प्रत्येक पृष्ठ लोड के लिए, जांच करें कि कुकी मौजूद है या उस विकल्प का मूल्य भी है, और जब कोई निश्चित स्थिति पूरी हो जाती है तो वैकल्पिक स्टाइलशीट डालें। – Terry

उत्तर

4

मुझे लगता है कि कुकीज़ इस के लिए एक सा overkill रहे हैं और वास्तव में आवश्यक नहीं हैं। यदि आप अन्य विभिन्न कारणों से कुकीज़ का उपयोग नहीं करना चाहते हैं तो आप localStorage के साथ यह एक अच्छा तरीका कर सकते हैं।

https://jsfiddle.net/4bqehjfc/3/

var fullWidth = function() { 
     $('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />'); 
    }, 
    fixedWidth = function() { 
     $('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove(); 
    }; 

$("#full-width").click(function() { 
    localStorage.setItem('width', 'full-width'); 
    fullWidth(); 
}); 

$("#fixed-width").click(function() { 
    localStorage.setItem('width', 'fixed-width'); 
    fixedWidth(); 
}); 

if (localStorage.getItem('width') == 'fixed-width') { 
    fixedWidth(); 
} else if (localStorage.getItem('width') == 'full-width') { 
    fullWidth(); 
} 

महत्वपूर्ण बिट है: localStorage.setItem() और localStorage.getItem()

localStorage is well supported और कुकीज (कुछ उद्देश्यों के लिए) के लिए एक अच्छा साफ विकल्प प्रदान करता है लेकिन इसकी अपनी सीमा भी है। here देखें।

नोट करने के लिए एक महत्वपूर्ण बात यह है कि इस तरह स्टाइलशीट स्विच करना आप स्टाइलशीट प्राप्त करने के दौरान अनस्टाइल सामग्री के चमक में जा रहे हैं जो बहुत अच्छा नहीं है। आप सीएसएस क्लास को जोड़ने के लिए localstorage का उपयोग करना चाहेंगे और शैलियों को इस तरह बदल सकते हैं यदि आपके पास ऐसा करने में लचीलापन है।

+0

पर आपका विचार याद रखेगा यह सही है, लेकिन मुझे कोई समस्या है। जिस सर्वर पर मैं इसे लोड कर रहा हूं वह अजीब है। इसमें उस पृष्ठ के आधार पर सर्वर के लिए 2 आईडी हैं जिन पर आप क्लिक करते हैं। सर्वर यूआरएल स्ट्रिंग www.thissite.com और football.thissite.com। मैंने आपकी विधि का उपयोग किया और बहुत अच्छा काम करता है, लेकिन आपको उनके लिए यूआरएल स्ट्रिंग दोनों पर दृश्य सेट करना होगा। कोई भी तरीका जो पूरे डोमेन thissite.com को कवर करेगा? – MShack

+0

जब मैंने लाइन लिखी 'इसकी अपनी सीमाएं हैं' यह एक था जो मुझे दिमाग में था! सबडोमेन में 'लोकल स्टोरेज' एक मुद्दा है जिसे मैंने अच्छी तरह से अनुभव किया है। उम्मीद है कि यह आपको शुरू कर देगा: https://github.com/ofirdagan/cross-domain-local-storage - आपको एक आईफ्रेम और ऐसे का उपयोग करना होगा। –

+0

इसके अलावा आपने उपरोक्त टिप्पणी में 'thissite.com' का उपयोग कर अपने डोमेन को मुखौटा किया है लेकिन इसके ऊपर आपके कुकी कोड स्निपेट में दिखाई दे रहा है। बस एक एफवाईआई आप चाहते हैं कि यह अस्पष्ट हो। –

0

इस पर विचार:

HTMLStyleElement.disabled

सच के साथ करता है, तो स्टाइलशीट अक्षम किया गया है झूठे नहीं तो एक बूलियन मूल्य है, और।

(source) आप निम्न कर सकते हैं:

<style id="first" disabled >@import url(/a.css);</style> 
<style id="second" >@import url(/b.css);</style> 

और कोड:

$("#first-on").click(function() { 
    $("#second")[0].disabled = true; 
    $("#first")[0].disabled = false; 
}); 
+0

मुझे मौजूदा स्क्रिप्ट में कुकी जोड़ने की ज़रूरत है, मुझे स्विच करने के लिए किसी अन्य तरीके की आवश्यकता नहीं है। धन्यवाद – MShack

+0

"मौजूदा स्क्रिप्ट में कुकी जोड़ने के लिए" क्या है? –

+0

मुझे इस स्क्रिप्ट में एक कुकी जोड़ने की ज़रूरत है ताकि जब आप # पूर्ण-चौड़ाई या # निश्चित-चौड़ाई पर क्लिक करें तो यह आपकी अगली विज़िट – MShack

0

यदि आप में से कुछlocalStorage के साथ चलाते हैं, तो नीचे दिया गया यह नमूना आपके द्वारा प्रदान किए गए कुकी कार्यों के साथ काम करता है।

ध्यान दें कि प्रारंभिक फ्लैश को कम/निकालने के प्रयास में हम कोड के प्रारंभिक भाग के लिए jQuery का उपयोग करने से बचेंगे, अगर किसी को लेआउट कुकी पूरी चौड़ाई पर सेट किया गया हो तो अनुभव किया जा सकता है।

मैं भी अपने बटन एक छोटे :)

<!doctype html> 
<html> 
<head> 
    <title>Cookiesheet</title> 

    <script> 
    var layoutcookiename = 'layout_cookie'; //just in case you want to rename the cookie for your layout 
    var layoutcookiedays = 30; //how many days do you want the cookie to last for 
    var mycookiedomain = '.nitrografixx.com'; //add a period in front of your domain name here to include it for all subdomains 

    var layoutcookie = getCookie(layoutcookiename); //Get the stored cookie if any 

    //Assuming the default layout will be fixed width 
    var currentlayout = (layoutcookie === null || layoutcookie === 'fixed') ? 'fixed' : 'full'; 
    //If default is to be full width, uncomment and use this if statement instead of the preceding line 
    //var currentlayout = (layoutcookie === null || layoutcookie === 'full') ? 'full' : 'fixed'; 

    if (currentlayout === 'full') { 
     document.write('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />'); 
    } 

    //We only need the function to get cookies up here 
    function getCookie(name) { 
     var nameEQ = name + "="; 
     var ca = document.cookie.split(';'); 
     for (var i = 0; i < ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0) == ' ') c = c.substring(1, c.length); 
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); 
     } 
     return null; 
    } 
    </script> 
</head> 
<body> 

<!-- Dynamic button text for initial load --> 
<button id="layout-switch"><script>if (currentlayout === 'fixed') { document.write('GO FULL WIDTH'); } else { document.write('GO FIXED WIDTH'); }</script></button> 

<!-- The rest of the javascript that can occur on document ready --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#layout-switch').click(function() { 
     if (currentlayout === 'fixed') { 
      $('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />'); 
      $(this).html('GO FIXED WIDTH'); 
      currentlayout = 'full'; 
     } else { 
      $('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove(); 
      $(this).html('GO FULL WIDTH'); 
      currentlayout = 'fixed'; 
     } 

     setCookie(layoutcookiename, currentlayout, layoutcookiedays); 
    }); 
}); 

function setCookie(name, value, days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
     var expires = "; expires=" + date.toGMTString(); 
    } 
    else var expires = ""; 
    document.cookie = name + "=" + value + expires + "; path=/; domain=" + mycookiedomain; 
} 

function deleteCookie(name) { 
    createCookie(name, "", -1); 
} 
</script> 
</body> 
संबंधित मुद्दे

 संबंधित मुद्दे