Change URL AND CSS when an element is clicked

Question

Basically, I have several pages on my website where I am using PHP to include the content in the page, and using jQuery to "switch" between the content by setting the display in CSS to "none" or "block". However, I am struggling to get it to work in the main page with the menu. So I need when the user clicks on the appropriate link, the page will change to the page where the content is contained, but also apply the appropriate CSS as to display the appropriate content. So far I have (URL blocked out):

<script type="text/javascript">
    $(document).ready(function(){
        $('#ourMissionMenu').click(function() {
                window.location = 'http://beta.***.com/aboutUs.php';
                $('#rightReplace').css({
                  "display":"none"
                  });
                  $('#ourHistory').css({
                  "display":"none"
                  });
                  $('#meetTeam').css({
                  "display":"none"
                  });
                  $('#communityOutreach').css({
                  "display":"none"
                  });
                  $('#connectUs').css({
                  "display":"none"
                  });
                  $('#blog').css({
                  "display":"none"
                  });
                   $('#ourMission').css({
                  "display":"block"
                  }); 
        });
});


</script>

You can just use show or hide instead of changing the display property. — cambraca
– cambraca, Commented Jan 23, 2012 at 17:55
Your script will stop when the page is changed to "aboutUs.php". You can control the data that will display in the server side... — user800014
– user800014, Commented Jan 23, 2012 at 17:56
The "aboutUs" page loads... but not the CSS. Thanks for the tip on display. — mdance
– mdance, Commented Jan 23, 2012 at 18:00

Jeff B · Accepted Answer · 2012-01-23 18:01:43Z

1

If you change the location of the window, all javascript from the current page will cease. You cannot expect javascript from one page to control content on another page. This would be a massive security violation.

You need the javascript to run on "aboutUs.php", or dynamically load the aboutUs content into your current page. Or, better still, have aboutUs.php have the correct css in the first place.

answered Jan 23, 2012 at 18:01

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

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

5 Comments

mdance Over a year ago

The CSS on aboutUs is correct. Basically the the links on the menu on index.php link to different content within aboutus, which I originally set to change using javascript and css.

Jeff B Over a year ago

This is where you should leverage php and not javascript. You should have aboutUs.php accept a parameter which triggers changes to the css. I.e. you would call window.location = 'http://beta.***.com/aboutUs.php?source=index';. Your php would then change the css based on the value of source, for instance.

Jeff B Over a year ago

In other words, php is all about dynamic content, so why act like your content will be static, instead of letting it be dynamic?

mdance Over a year ago

I believe you would be right. However, how can I do this in PHP?

Jeff B Over a year ago

Best asked in a new question... but looks like you have already: stackoverflow.com/questions/8977065

Paul Grime · Accepted Answer · 2012-01-23 17:57:53Z

0

Can't aboutUs.php just link to a CSS file that has the correct styles? Why do they need to be set in Javascript?

It also looks like the css() calls will be applied to the current page, and not the target page.

answered Jan 23, 2012 at 17:57

Paul Grime

15.1k4 gold badges39 silver badges59 bronze badges

2 Comments

mdance Over a year ago

This menus is on the "index.php" and the content I need to display is on the "aboutUs.php" page. So I need to load the aboutUs page, THEN change the css to "show" the proper content.

mdance Over a year ago

How can I apply the CSS to the page I need?

Jasper · Accepted Answer · 2012-01-23 18:02:28Z

Once you change the window.location property, the browser will redirect the user to the specified URL and the execution of JavaScript will stop immediately.

So your .css() function calls are not being run but that doesn't matter much because they would be altering the DOM on the current page, not the next page.

Those .css() function calls need to be run on the next page, something like this:

First Page --

$(function(){
    $('#ourMissionMenu').click(function() {
        window.location = 'http://beta.***.com/aboutUs.php';
    });
});

Second Page (aboutUs.php) --

$(function(){
    $('#rightReplace').css({
        display:"none"
    });
    $('#ourHistory').css({
        display:"none"
    });
    $('#meetTeam').css({
        display:"none"
    });
    $('#communityOutreach').css({
        display:"none"
    });
    $('#connectUs').css({
         display:"none"
    });
    $('#blog').css({
        display:"none"
    });
    $('#ourMission').css({
        display:"block"
    });
});

But this would be pretty strange if you are dynamically building the aboutUs.php page. You might as well leverage your use of PHP and set the display of the element with PHP instead of JavaScript (which is client-side, meaning it requires the user's browser to do work).

Jasper · Accepted Answer · 2012-01-23 18:14:20Z

0

On top of what Paul and Sérgio mentioned, you can concoct the selectors like below rather than multiple blocks.

$('#rightReplace,#ourHistory,#meetTeam,#communityOutreach,#connectUs,#blog,#ourMission').hide();

edited Jan 23, 2012 at 18:14

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

answered Jan 23, 2012 at 18:02

Liam

2,83725 silver badges36 bronze badges

3 Comments

Jeff B Over a year ago

Or: $('#rightReplace,#ourHistory,#meetTeam,#communityOutreach,#connectUs,#blog,#ourMission').hide()

mdance Over a year ago

Thanks for the cleanup. Im new to web dev.

Liam Over a year ago

You got it better ... bingo. I have now updated the masterpiece :)

Collectives™ on Stack Overflow

Change URL AND CSS when an element is clicked

4 Answers 4

5 Comments

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related