Changing CSS with JS and saving change - javascript

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.

Related

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

Wordpress Customiser Refresh Issues

OK, I have been working with the customiser now for a number of days and one issue seems to be persisting, it may be the way I am thinking about this but can not see a solution in the API.
Basically I have a solid working set of controls and panels and have live updates working for things like colour pickers and text updates however I want to use settings like a full width setting for example that allows me to insert a php ternary operator to check if a theme_mod is a certain value and insert some text, php or css to make the change.
Obviously these changes are not being reflected in the preview window as it does not reload the entire page so logical operations are not showing until I have saved and done a manual reload of the page, I know I can not simply reload the iFrame but I am not sure what I can do.
Hopefully I have explained this well enough, many thanks in advance.

Using ExitAPI in a HTML5 ad banner with parameters

I have created a banner for Adwords, using HTML5 with a form element, which accepts few inputs, like your preffered color, type, etc.
The whole banner is not clickable, only the submit button, which I achieved by adding "onclick="ExitApi.exit()"" to the button.
All of this works fine, but now my question is, how flexible is this ExitApi?
Whenever I click the submit button, I want to append the generated parameters to the final url, which is set through AdWords.
Using the adwords preview I can see that during the redirect the last parameter is 'adurl' which contains my final destination.
Editing this manually and just typing in the parameters helps me achieve what I want, but how would I be able to append using the ExitApi js library, if that's even possible?
I also tried using a CTA through GWD using something like 'gwd.actions.gwdDoubleclick.exitOverride('gwd-ad', 'clickTag', 'http://example.com/index.php?some=var'+params, true, true);', which hasn't worked and is also limiting as it forces the developer to set the url through the banner.
Any ideas are appreciated!
Thanks,
Edvinas
If anyone is stuck on this aswell, just an update.
I have contacted Google Adwords Support about this and here's their response:
Unfortunately, multiple exit URLs are not supported in the AdWords environment. Doubleclick, on the other hand, can handle them.
https://support.google.com/webdesigner/answer/4450409
There are many nice components in GWD which could use different URLs, but they can't be deployed in AdWords.

Setting web page background color

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.

dynamically change css for site using liquid template language vars in rails app

So i have a rails 3 sort of site builder app and i am using liquid language so site owners can customize their own site.
At the moment when a site owner uses one of our themes they get a layout html, and a css file with liquid variables in them.
They then also get a settings form that changes the values that are referenced by liquid inside the css file.
I now want to show the settings form at the top of the site owners site view so that they can see as they change the for example color picker of background color and the sites actual background color changes as well.
I cant figure out how to do this instantly as i cant save the new color to database and then re-render the css file with the new liquid values using a color picker as wont be fast enough. So i need a way to change the css on front end and somehow reference what i have changed and up date the database when the user clicks save changes.
Any help / examples / experiences on how to do this would be much appreciated.
thanks a lot in advance
Rick
You can use jQuery's .css() method. So just have a .keypress() on a input field where people can change the width for example and everytime they press a key in there, your .css() updates in real time.

Categories