How to change css of the element from another page using jquery?

Question

Please, help me! I have two html pages. There is a button on the first page and a div on the second page. So, when I click the button, I want it to open the second page in the same window and change the background of the div.

Here is my code :

$(".button").on("click",function(){

    window.location.href="secondPage.html";
    $("div").css({background: "red"})

});

Any suggestions?

I don't see how there's anyway to do this other than appending something to the URL and having code on the second page react to it. Or something in a cookie or session. The second page has no idea how you got there otherwise. — mellis481
– mellis481, Commented Nov 21, 2014 at 14:22
The JavaScript on your fist page will no longer be able to execute when the second page has loaded. To do this you will need a way of persisting your intent from one page to the next with something like a cookie or parameter in the URL. — Sam Greenhalgh
– Sam Greenhalgh, Commented Nov 21, 2014 at 14:24

empiric · Accepted Answer · 2014-11-21 15:28:26Z

1

You can do something like:

First page

$(".button").on("click",function(){

    localStorage.setItem('button', 'clicked');
    window.location.href = "secondPage.html";

});

Second page

if(localStorage.getItem('button') === 'clicked'){
    $("div").css({backgroundColor: "red"});
}

To remove the Item in the localStorage-Object (if the background should not be changed conditionally) use:

localStorage.removeItem('button');

Small Demo

Reference

Note: the localStorage-Object is only available in IE Version > 7. The other major-browser will work.

edited Nov 21, 2014 at 15:28

answered Nov 21, 2014 at 14:26

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ashwath Over a year ago

AFAIK With local storage, web applications can store data locally within the user's browser. So after click if user directly access the secandpage.html what will happen??? It still find the item and make the div red isn't it??

empiric Over a year ago

@Ashwath If the div should not be red after the button is clicked once, you can remove the localStorage in an page unload-event or similar

Ashwath Over a year ago

Right... I think you edited your answer now. :-) initially removeitem was missing so asked... Thank you.. :-)

empiric Over a year ago

@im1dermike yes you're right, I forget to mention that, but it's described in the reference, too. I edited my post to make that clear.

Ashwath · Accepted Answer · 2014-11-21 14:29:10Z

0

Use query string... When you click the button along with URL pass a query string window.location.href="secondPage.htm?src=btnClickl";

And in second page.HTML look for SRC query string. If pressent , change the div color...

Good luck...

answered Nov 21, 2014 at 14:29

Ashwath

4073 silver badges10 bronze badges

Comments

Eduardo Vélez · Accepted Answer · 2014-11-21 14:42:40Z

0

The code should be placed on second page, and from that call the object "Parent" to ask whether it is null or not, in this case, if it is null, you can validate using the HREF property of the PARENT object to see if it is correct page and then change the color of the DIV.

Code in second HTML like to:

$(document).ready(function() {
if (windows.document.parent != null)
{
$("div").css({background: "red"});
}
});

answered Nov 21, 2014 at 14:42

Eduardo Vélez

1931 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to change css of the element from another page using jquery?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related