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
Related
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.
I am creating a page that lets the user chose colours and various elements on the page will adopt the new colour. For example boxes to show the colour scheme selected. I've been using the code $('').css('background_colour',.....) and it works great.
The problem I have now is I made an example webpage which should use these various colours in the relevant sections of the page. For example, main text, background colour, etc. I can't use what I have been doing because none of the changes save and when I click the link that opens the example page it only shows the original colours I put in its CSS file. I figured the method I'm using doesn't isn't actually rewritting the CSS file because when I reload the page where the user selects colours every goes back to default.
If anyone can point me to places to read or suggest the best approach to changing the CSS file that is for a different page AND allows for those changes to be saved I would really help me out.
Hope my description makes sense
Thanks
You can use either cookies or html5 localstorage to store client preferences for your website.
It's plenty of different libraries on the Internet which can help you in this task.
Cookies libraries
https://code.google.com/p/cookies/
https://github.com/ScottHamper/Cookies
Localstorage library
http://www.jstorage.info/
I would suggest cookies if you need to read user preferences from your server side.
Otherwise you can go for localstorage.
if you want to use colors in relevant pages, you have to save your color change events in database or in sessions or in cookies.
Otherwise you can not save changes. Because web page is rendered again when you refresh the page.
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!
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.
I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation