CODEWITHSUNDEEP
javascripthtmlcss
Bundyboy
Bundyboy

Reputation: 161

How to update css style from one page to another in JavaScript

I have two pages: index.php and app.php

on first page (index.php) are placed elements for which I want to change css style value like font size. so on first page is located: .options-parameters-inputelement.

on the second page (app.php) is my options panel with inputs where i can input font size value for the desired element. in this case input is textarea #heretype

please see the code:

<div id="one">
<div class="options-parameters-input">
This is testing
</div>
</div>
<br /><br /><br /><br /><br /><br /><br />
<table width="750" border="1" cellspacing="3" style="float:left;">
  <tr>
    <td>Type font size</td>
    <td><textarea id="heretype"></textarea></td>
  </tr>
</table>


$("#heretype").on("keyup",both);

function both(){
$(".options-parameters-input").css("fontSize", this.value + "px");
}

jsfiddle example: http://jsfiddle.net/gxTuG/106/

My problem is how to transfer new css style value from one page (app.php) to another (index.php) ? because inputs are located in app.php page while desired elements are in index.php.

I hope you can help me

Thank you

Upvotes: 0

Views: 125

Answers (3)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

You can't update css of one page using javascript code from another page. Although what you could do is have an identifier to be shared between the pages. That could be lets say a url param saying index.php?fontsize=10 and app.php?fontsize=10.

Then you can get the value of the param fontsize in your code on either pages and set it to the desired value and pass it around using javaScript.

You can have a default value for the fontsize at starting of the app or have a check saying if param fontsize exists or not in your javaScript code.

Follow this answer of mine.

Alternatively you can make use of localStorage -> Window.localStorage() or cookies -> Document.cookie().

I would suggest going by either the URL param method or setting a localStorage object fontSize and update it whenever needed if you don't want to go with server side code and push the value of fontsize in db.

Upvotes: 0

Xymanek
Xymanek

Reputation: 1389

As James Monger said, this isn't directly possible. However you can save the changes via PHP (to session or to database). Then when the user opens index.php a different <style>...</style> will be generated based on the saved setting. The setting can be saved by using a form or an ajax call (more complicated).

You can also write to a cookie directly from JavaScript and read it on another page

Upvotes: 0

Maths RkBala
Maths RkBala

Reputation: 2195

You can achieve two ways:

Server side: You can stored the value in database(permanent). Then next page you can apply in css.

Client side: You can stored the value in query parameter, cookie or local storage(temporary). Then next page you can apply in css.

Upvotes: 1

Related Questions