How to load jQuery before CSS code?
Question
I am developing a blog where the visitor can change the background color by clicking on one of the 5 buttons.
$(function(){
//Verificando se já existe algum esquema de cor selecionado
var esquemaCor = parseInt(getCookie("cor_de_fundo"));
switch(esquemaCor){
case 1:
$('body').css('background-color','#0A0A0A');
break;
case 2:
$('body').css('background-color','#766777');
break;
case 3:
$('body').css('background-color','#EEE6EE');
break;
case 4:
$('body').css('background-color','#9F00A9');
break;
case 5:
$('body').css('background-color','#420668');
break;
default:
$('body').css('background-color','#9F00A9');
}
$('#cor_01').click(function(){
setCookie('cor_de_fundo', 1);
$('body').css('background-color','#0A0A0A');
});
$('#cor_02').click(function(){
setCookie('cor_de_fundo', 2);
$('body').css('background-color','#766777');
});
$('#cor_03').click(function(){
setCookie('cor_de_fundo', 3);
$('body').css('background-color','#EEE6EE');
});
$('#cor_04').click(function(){
setCookie('cor_de_fundo', 4);
$('body').css('background-color','#9F00A9');
});
$('#cor_05').click(function(){
setCookie('cor_de_fundo', 5);
$('body').css('background-color','#420668');
});
});
The standard color is purple blog.
background: # 9F00A9
When the user changes the background color of the button event works perfectly. The problem is by the time he navigates between pages of the blog. Before charging the color he has selected, for example the black background color is first loaded after the purple to black. (Take the test blog: www.obovio.com.br ) How do I always carry first color that the user selected?
4 answers
solution1
1 2013-09-24 00:37:31
As you have it, $(foo) (where foo is a function ) means "wait until document is loaded before invoking foo ". If you don't do this, you can't guarantee that your HTMLElements exist. However, if you move the invocation to a <script> which is after/a child of the Node , you should be able to safely assume it exists by the time the code is invoked.
For example, as your function only uses the <body> element, give it the name foo and then do
<body>
<script type="text/javascript">
foo();
</script>
<!-- rest of body contents -->
</body>
This will mean it is invoked as soon as possible, at a time when it is safe to assume it will not throw an error.
solution2
0 ACCPTED 2013-09-24 01:34:37
Say this is your html
<body>
<script>
$( document ).ready(function() {
//by assigning this to a function you ensure the page has loaded and it exists before you call it too early
backgroundColour(getCookie("cor_de_fundo"));
});
</script>
</body>
And this is your new function: function backgroundColour(cookie) {
//Verificando se já existe algum esquema de cor selecionado
var esquemaCor = parseInt(cookie);
//This way there is never a risk of auto-default unless the cookie is empty, but this is option, can probably keep using default anyway
if(!esquemaCor) {
$('body').css('background-color','#9F00A9');
}
else {
switch(esquemaCor){
case 1:
$('body').css('background-color','#0A0A0A');
break;
case 2:
$('body').css('background-color','#766777');
break;
case 3:
$('body').css('background-color','#EEE6EE');
break;
case 4:
$('body').css('background-color','#9F00A9');
break;
case 5:
$('body').css('background-color','#420668');
break;
}
$('#cor_01').click(function(){
setCookie('cor_de_fundo', 1);
$('body').css('background-color','#0A0A0A');
});
$('#cor_02').click(function(){
setCookie('cor_de_fundo', 2);
$('body').css('background-color','#766777');
});
$('#cor_03').click(function(){
setCookie('cor_de_fundo', 3);
$('body').css('background-color','#EEE6EE');
});
$('#cor_04').click(function(){
setCookie('cor_de_fundo', 4);
$('body').css('background-color','#9F00A9');
});
$('#cor_05').click(function(){
setCookie('cor_de_fundo', 5);
$('body').css('background-color','#420668');
});
});
Edit: changing my answer because I've just realised your background is set separate to background-colour.
Why don't you simply put this in your head tag (below the stylesheet):
<script>
if (getCookie("cor_de_fundo")) {
$('body').css('background','url("http://4.bp.blogspot.com/-SZodpKgdjwk/UkCj20gd4XI/AAAAAAAADZk/tIAmBbkoecU/s1600/square_bg.png") repeat');
}
</script>
That way, if cookie is set, you get your dots, but you lose that purple. So this problem never occurs?
It looks like your logic may be wrong.
You are saying "put in purple background with dots. If there is a cookie, put in background-colour over background with dots.
Instead, why don't you say "if there is a cookie, put in background colour with dots, if there is no cookie, put in background colour purple with dots."
At the moment you say "set background to url with colour purple, then if there is a cookie, change the colour"
solution3
0 2013-09-24 05:20:50
Sounds like you want history api, to prevent loading the whole page again? http://diveintohtml5.info/history.html
That examples doesn't require any page-reload: http://diveintohtml5.info/examples/history/casey.html
solution4
0
Have you tried using the localstorage to save the background color
$(function(){
if(localStorage.bgcolor==undefined)
localStorage.bgcolor="white" //default color that appears first time
$('body').css('background-color',localStorage.bgcolor);
$('#cor_01').click(function(){
localStorage.bgcolor = "#0A0A0A";
$('body').css('background-color',localStorage.bgcolor);
});
$('#cor_02').click(function(){
localStorage.bgcolor = "#766777"
$('body').css('background-color',localStorage.bgcolor);
});
// similar code for other buttons
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.