CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Suika
Suika

Reputation: 660

Assign php variable value based on anchor/element clicked

So currently, I have three divs sliding horizontally to each other. Each div is on full width. My mark up is something like this:

<div id="menu">
    <a href="#block1">Go to block 1</a>
    <a href="#block2">Go to block 2</a>
</div>

<div id="block1">
    <?php
        $page = 'block1';
        //code to display corresponding content for block 1
    ?>
    <a href="#menu">Go back to menu</a>
</div>

<div id="block2">
    <?php
        $page = 'block2';
        //code to display corresponding content for block 2
    ?>
    <a href="#menu">Go back to menu</a>
</div>

With my current slider purely based on this fiddle - http://jsfiddle.net/webtiki/wtvaJ/2/ - what happens is that from the menu, when you click the link to go to block 2, it would slide through block 1 first before block 2.

Now this is supposedly okay, but the content for this will be expanding soon and I'm worried that when the block div count is more than four, it wouldn't look nice to slide through all three blocks first before arriving to block 4.

What I thought was something that would just get the value of the anchor clicked and change my markup to something like this:

<div id="menu">
    <a href="#block1">Go to block 1</a>
    <a href="#block2">Go to block 2</a>
</div>

<div id="block1">
    <?php
        switch ($page) {
            case 'block1':
                //code to display corresponding content for block 1
                break;
            case 'block2':
                //code to display corresponding content for block 2
                break;
        }
    ?>
    <a href="#menu">Go back to menu</a>
</div>

I also thought about changing the anchor to buttons to pass on the variable like this perhaps

<input type="button" value="block1" onClick="javascript:location.href = '#block1'" />

But of course, that redirects to the page itself (#block1) and not slide like when anchors are used

Any ideas? Thanks.

Upvotes: 1

Views: 349

Answers (2)

Parkash Kumar
Parkash Kumar

Reputation: 4730

Is this what you want? DEMO

Changes:

var a = $(this).attr('href');
$('.page').hide();
$(a).toggle('slide');

Upvotes: 1

morels
morels

Reputation: 2105

One of the most rapid edits in order to keep the same code and save time is to shorten the animation time keeping clean the slide action:

$('.wrapper').animate({marginLeft: margin},50);

You can also have a dynamic descrescent animation time like:

$('.wrapper').animate({marginLeft: margin},1000/(pagenumber*5));

Upvotes: 1

Related Questions