Question

When my site is using the mobile css the navigation becomse so long, that the user dose not see the conctent unless they scroll down.

I then want to change the navigations urs to link to divs so it’s jumps right down to the content

exsampel:

When @media only screen and (min-width: 480px) is in use the navigations links have the url

site1.php#content

site2.php#content

site3.php#content

When @media only screen and (min-width: 992px) is in use

site1.php

site2.php

site3.php

How should i do this? PHP og jQuery ?

I lookt at this code:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Will it be possible to modify this in a way so it wil work i my case?

Answer 1

If you are setting the name of the element that you wish for the page to scroll to, we can do.

$(function(){
    var hash = (window.location.hash) ? window.location.hash : null;
    if(null !== hash){
        //now I don't know how the markup is designed, so we'll just use `id`
        $(window).scrollTop($('[id='+hash+']').scrollTop());
    }
});

On page load, we create a variable called hash, we see if the hash is present, if it is, we use the hash value, otherwise, we null it. In our conditional, we tell the window to scroll until the window reaches the to of the element we define as the value, which for our example, is the id of an element matching the hash value.

Now, I don’t know how you generate the variable content, there must be some attribute within your <a> element that contains the value you want. If you show me how you plan to reference the element, I will connect the missing links.

Edit — in response to your comment.

$('.main-menu a').prop('href', function(a,b){
    return b+'#content';
});

Here’s your jsFiddle — Check the console so you don’t have to waste time in specting.

Edit #2 — In response to mobile detection.

Instead of using media queries, I use user agent sniffing. It’s a pretty common technique. The guys over at http://detectmobilebrowsers.com/ provide a script we can use to check the user agent for the presence of many known and popular mobile devices.

Check the jsFiddle out over here.

Simply take the large block of code and place it in a flie like `mobileDetect.js’.

Anything below the //comments is an implementation of the code I’ve written above, and is placed accordingly in the conditional statement. I tested this on a few devices, and it works well.