Question

I have a block following my menu buttons, to indicate which one is active. Is there a way to keep the block’s location after a refresh?
As of now the location gets reseted when I press a link in a subpage.

jquery code:

$( "button",document.body ).click(function(){
    var offset = $(this).offset();
    var offsetBody = $("body").offset();
  $( "#block" )
     .animate({
    left: (offset.left - offsetBody.left) 
  }, 200);
});

Answer 1

Jquery is a client-side script. When you reload a page or navigate to a new page you request the information from the server, meaning that all client-side data is lost.

There would however, depending on you precise problem, be a number of solutions.

1. If you are only interested in the location of the block on each page individually then you could code some element in the mark-up to have an attribute value equal to something, check this value upon loading if the DOM and move the block accordingly.

2. You could use client-side cookies to store a value and upon loading of the DOM check this variable and animate the block accordingly.

3. You could use an AJAX call to set a server-side variable in PHP and use this variable to dynamically create the element in 1.

Would any of these three solutions work do you think? I can go in to more detail if you can tell me more precisely how you would like to accomplish this.

For method 1.

Use the JQuery .attr() method such that;

Markup

<meta name="description" content="home" />

JQuery

var page = $('meta[name=description]').attr("content");
if (page == "home") {
    // you know where it should be
} else if (page == "account") {
    // you know where it should be
}

However I’m a little concerned this isn’t exactly the functionality you want, is it?

For method 3

Markup

<?php
    session_start();
    $pos = $_SESSION['position'];
    echo '<meta name="description" content="' . $pos . '" />'
?>

JQuery

var position;
// perform animation stuff and store position in the variable
// make a post() request after the position has changed
$.post("position.php", { pos: position } );

PHP position.php

<?php
    session_start();
    $_SESSION['position'] = $_POST['pos'];
?>