I have created a site where the user can change the image of a page from 4 available imges(which works fine), but when you go to another page, the image changes back to the default.
I'm new at Javascript and trying to create an if else statement but I can't seem to get it to work.
This is something I am after:
if (currentpage == body.style.backgroundImage="url('image1.png')")
{
allotherpages == body.style.backgroundImage="url('image1.png')";
}
else if (currentpage == body.style.backgroundImage="url('image2.png')")
{
allotherpages == body.style.backgroundImage="url('image2.png')";
}
I would appreciate any help or a point in the right direction. Thank you.
You want to save the current user's background when he changes page?
Use cookies to save the current background or store it in a database
Set the background
Save it
When you change page, load the saved background
Save the background name in cookie for exemple:
$.cookie("currentBackground", "image1.png");
When you load your page:
$(document).ready(function(){
var currentBackground = $.cookie("currentBackground");
});
Related
I referred to this thread to get a transparent div to display on top of the web site content and make it disappear when clicking on it...
however, when someone visits a page within the site and they click on the home button they are displayed the transparent div again...
is there a way to have the div appear only one time and do not appear again after they close it?
The best way to do is by setting a cookie. On this way, you can hide it forever, or hide it for a specified time.
document.cookie = "transparentdivShow = false";
And now you can check if this cookie exists, and if so, don't show the div:
if(document.cookie.indexOf("transparentDivShow") >= 0) {
return true; // Don't show it
} else {
return false; // Show the div
}
As the above poster mentioned, you could use a cookie. Alternatively, you could use HTML5 Local Storage! Local Storage allows data to be stored locally within a user's browser.
In this instance, you could have something like a clickcounter that counts to see if the clickcounter is greater than 1. If it is greater than 1, give the div a hidden attribute or just get rid of it.
if (sessionStorage.clickcounter) {
<div hidden> You can't see me. I'm invisible. </div>
} else {
sessionStorage.clickcounter = 1;
<div visible> Hi! I'm not transparent. </div>
}
I hope that this helps. Here's a page with more information on it as well!
http://www.w3schools.com/html/html5_webstorage.asp
What I'm trying to accomplish is the following.
I have a link on my website, however I want to change that link after every 5 visits or "page refreshes" by the user and have this loop.
So for example you visit my site and the download button links to a site called "www.site1.com". You refresh my site 5 times and the download button link changes to "www.site2.com". If you refresh it for a 6th time it goes back to the original.
I have not been able to find anything searching through forums that shows what i'm trying to accomplish here. I was just experimenting with a window.onload and setInterval function that changes the link every 5 seconds. Anyway to easily transition this from every 5 seconds to every 5 page visits?
window.onload = function() {
function changeURL(){
document.getElementById("link").href = "www.site1.com";
}
setInterval(changeURL, 5000);
}
You probably want to use JavaScript localStorage or sessionStorage for this. Below is an example of your code using localStorage
Example
window.onload = function()
{
if (localStorage.visits)
{
//If the value is in local storage increase it's value
localStorage.visits = Number(localStorage.visits) + 1;
}
else
{
//If the value isn't in local storage set it to 0
localStorage.visits = 0;
}
//Check if the number of visits is greater than 5 and set the link accordingly
if(localStorage.visits > 5)
{
document.getElementById("link").href = "www.site2.com";
}
else
{
document.getElementById("link").href = "www.site1.com";
}
}
This will only work if their browser supports localStorage. One thing to note as well, the value will not reset if they close the browser page. If you want it to reset when the page is closed, that's what sessionStorage is for.
One more thing to note: The user can clear localStorage by clearing the browser data. If you wanted something that would be even more persistent I don't believe there's a JavaScript only solution (feel free to correct me if I'm wrong about this!)
Please see the code below which is generated on the server side:
tc.Attributes.Add("onclick", "location.reload(); this.style.backgroundColor='olivedrab'; open('PrimaryNominalAjax.aspx?USN=" & CStr(objDR("USN")) & "&Requester=" & strUserName & "&Status=" & CStr(intReviewStatus) & "&Reason=-1&Review=" & lngReview & "','_blank','')")
When the user clicks on the link on the client side the code reaches the server side page load event in: PrimaryNominalAjax.aspx before it refreshes the current webpage. Why is this?
location.reload() does not block the execution of other javascript. So if it takes say, 5 seconds to reload a page, animations etc can continue.
Are you trying to get your site to: Reload, then change color, then open another page? I don't think you will be able to accomplish this using the method you have above. Once the page reloads, it has lost all knowledge of state from before it was reloaded. So after the reload, the page wont know that the tc button was clicked.
You are probably better navigating to the current page with a url parameter
location.href = location.href + "?button=tc";
Then in the onload event, check if that value is in the URL, then change the background color and open the second page. Something along the lines of:
if(location.search === "button=tc")
{
// change color
// open page
}
My js app is an advent calendar where users can open a 'door' on or before today's so the div background image changes.
I would like to set up a cookie so when they return the following day the divs still have the background image in place.
I have set up the cookie and door open code but I'm not sure how to integrate the cookie into the door open function. Any help would be appreciated, many thanks.
Link to App: http://p3.katecooperuk.com
Door Open - select Random background image from Array:
$('.doors').click(function () {
if (today.getMonth() !== 11) {
return;
}
// Check if the date is tomorrow or later
if (+($(this).attr('id').split('dec')[1]) > day) {
// Show image telling user to come back
$(this).css('background-image', 'url(/images/come_back.png)');
return;
}
// Otherwise it is today or earlier
// Select Random Image
var doorImage = getRandomImage(calendarImg);
// Change background image of door that was clicked
$(this).css('background-image', doorImage);
});
Cookie
//on document ready, checks if the cookie is set, and if so, sets the background with it's value
$(function(){
if($.cookie('background-image') != null){
$(this).css('background-image', $.cookie('background-image'));
}
});
// Set cookie
$(function() {
$(this).css('background-image', doorImage);
$.cookie('background-image', doorImage);
});
W3Schools have a great newbie tutorial on cookies here
Basically, what you want to do is set the cookie value to the date it was created and whatever other parameters you want to set when the user comes back (such as the id's of the background images.) Then when the user enters your site you check to see if they have a cookie. If they do, check its date parameter. If it's not today (this is really easy to check with JavaScript) then use your extra parameters to set whatever background you want.
Make sure that whenever they change their backgrounds you reset your cookie data to the current backgrounds.
Hope this helps!
*
From you code, I'm having a hard time understanding exactly what it is you're trying to achieve. Also, I'm looking at your site and I don't see any saved cookies.. Try starting with a simple example, 1 door and 1 cookie. Then do a simple check to see if your cookie is working, for example, set a specific background when a cookie is detected and another if not. Once you successfully manage your cookie you can start making it more complex with more data in it.
On a page, there is a button. When the button is clicked, a dropdown shows up. The dropdown contains an image. The problem is that the image is not fetched until the user clicks the button.
$("#my_button").click(function(){
$("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />");
});
I'd like to fetch the image when the page loads so it's ready to go when the user clicks the dropdown. How can I do this? I was thinking I could insert the image into the page with display:none set, so it'll get in the cache, or is there a way to load in when the document loads in jQuery?
This is for a Chrome extension, if it makes any difference. I suppose I could put the image in the extension (and that would be faster), but I'm still curious if it's possible to load the image using JS.
Thanks,
Kevin
Yes. Just define it as a new image in the ready() call of the page:
$(document).ready( function() {
var preload = new Image();
preload.src = "http://mysite.com/image.jpg";
});
Then when you use it, it will already be in the browser's cache. You can use the variable or just reference it the same way you already are.
You could preload each image...
$(document).ready(function() {
(new Image()).src = '/path/to/myImage.jpg';
});