I don't know how to change a div's class by using JS on an other page. To specify, it will be like the class on page-A should change depending the JS changes on page-B.
(If you click on a box in page-B, the content on page-A should change.)
You can only amend the DOM of the page which is currently loaded. If you want to change a different page based on an action in a previous one you'd need to persist the state of the user's interactions and then amend the other page when it loads. To do that you can use localStorage, sessionStorage, session, cookies, or AJAX to store information on the server.
Related
I have created two buttons and I am able to change my stylesheet once I click on these buttons. However when I go to the next page on my website the stylesheet reverts back to the original and does not stay how the user set it. I was wondering how this would be tackled...
Store preferred style in a cookie or localStorage.
If you use a cookie then you can set proper one at server which would prevent style flash.
Alternatively use script when page loads to read cookie or localStorage and append preferred stylesheet to <head> accordingly
Both methods are easy to research
I've been developing a site which makes use of a button to toggle it's whole appearance between positive & negative themes for the background/navbar/text color, depending on what the user prefers. I've done the home page with a simple toggleClass method:
$(document).ready(function(){
$('.switchButton').click(function(){
$('.mainBg').toggleClass("bg-inv");
});
});
How can I make it so that when the user loads any other page of the website, it will open with the theme chosen previously (as in, if the page you're in is on negative, all of them will be negative until you change to positive)? I plan to insert a switch on every single page, but having to flick it every time you'd want to use the second theme is very annoying. I'd thought about an IF jquery function, but am not sure how to use it between different pages.
HTTP is stateless. This means that data between connections is not saved, and every request is a fresh one based on the code on the server.
If you want to save data across requests, you will have to save it in a place that is not dependent of the request. This can be either in a in a cookie, a session variable, in a database or you can use localstorage.
You can only access the cookie from JavaScript directly, so that would be your easiest bet.
You could save the value in a cookie and load it in each page so that it persists between pages.
On Home page you can store the value in sessionStorage and on every page you can retrieve the value from sessionStorage variable.
$(document).ready(function(){
$('.switchButton').click(function(){
$('.mainBg').toggleClass("bg-inv");
sessionStorage.class = "bg-inv";
});
});
On every page you can check the variable
$(document).ready(function(){
if(typeof(Storage) !== "undefined") {
$('.mainBg').addClass(sessionStorage.class);
}
});
let's assume you make a variable called class; . Now in the toggleClass function write class=a where a is the variable you pass to toggleClass, bg-inv in this case. Now you can save class in your localStorage by localStorage['class'] =class and retrieve it whenever required using localStorage['class'] or localStorage.getItem('class') Hope this helps!
I have a site that you can specify which items on the page that should be shown using this jquery:
$('.container h1 a').click(function () {
$('.container').not($(this).parents()).hide();
$(this).css({'text-decoration' : 'none',
'cursor' : 'default'
});
});
But then when I refresh the page the jquery functions that took place are removed
Javascript works on the client side, thanks to the browser. It can modify the current page, but any change will be erased as soon as you reload the page (you get its original content from the server). If you need to restore those changes as "user preferences", use PHP cookies to store information about how each user changes his interface. This way, when you reload the page next time, you can execute the required Javascript functions to restore the user's view.
You could use Ajax to store the user preferences from Javascript, asynchronously.
http://www.w3schools.com/ajax/
Here is W3Schools' Ajax tutorial, you should learn about it. When a user changes his preferences on your page, remember it using a PHP cookie (http://php.net/manual/en/features.cookies.php). When the page is reloaded, check the cookie's content, and execute necessary Javascript functions to restore the user's interface.
Edit : Didn't know about http://www.electrictoolbox.com/jquery-cookies/ which allows you to store a cookie from jQuery without using Ajax and additional PHP scripts. Lars Ebert's solution could be lighter indeed, but the general idea is the same.
The css-properties are only modified temporarily. They are not permanent and are gone when you refresh the page. To remember the hidden elements, you would have to use a cookie. You can use this jQuery-plugin to store a cookie.
In this cookie, you can store the id of the hidden element each time the user clicks to hide one element. On page-load, you simply read the cookie and re-hide the elements the user has hidden!
So, I want to change the display style of one of my divs, here's the code in my javascript:
document.getElementById("header1").style.display='none';
Now the problem... header1 is a div id on a different page, but I want to affect that from selecting an option on the current page. How do I go about doing that so that the header1 will be hidden when I go onto the next page?
Thank you in advance!
You cannot change the properties of an element that has not been loaded into the browser yet. You would have to use a cookie or the querystring to tell you to hide the element when the page is loaded.
Edit
You can redirect to a new page using the following javascript. Note: everything following the ? is part of the querystring.
// Redirect without querystring
window.location = "http://www.mySite.com/default.html"
// Redirect with querystring
window.location = "http://www.mySite.com/default.html?hide=true"
// Redirect with multiple values in querystring
window.location = "http://www.mySite.com/default.html?hide=true&test=1"
Check out get-query-string-values-in-javascript to see how to retrieve querystring values through javascript.
You could pass the value to the next page in a hidden form field or possibly via the url then when that page loads use that value to set the desired value on the page.
how about carrying the value/selection to the other page using local/session storage, or even indexDB, if you have a lot of information to carry or you are carrying across multiple pages. saves having unneeded POSTS and removes the need for any server side code
I can set the background color of the current page using:
document.body.style.background='red';
Is there any way I can set the color of a page from another page?
Note: I can set the color when a page contains frames. In this case, consider the scenario similar to two different tabs of a browser.
Yes, providing:
You have a reference to the other page (such as the return value of window.open)
The page is on the same origin
Then just use said reference.
John K's comment is a good solution. If you're loading the other page synchronously (ie full page load, not AJAX) then obviously you're going to have to maintain the state between pages. The very nature of HTTP is pretty stateless, so a query-string is a nice simple solution for persisting data such as a background colour.
If you are trying to set apge background color using javascript, you can document.body.style.backgroundColor in your js code.
And if you want to set the bgcolor of a page from another page you need to use query string and pass the color in a variable to the other page and set the other page background color using that variable value on page load or whatever way you want.
seems only if you have opener.