CODEWITHSUNDEEP
javascriptjquerycssresponsive-design
ok1ha
ok1ha

Reputation: 637

Responsive Site - Load html based on dimensions

Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.

Basically I want the site to show a different top menu on a phone.

Upvotes: 0

Views: 310

Answers (4)

Waiting for Dev...
Waiting for Dev...

Reputation: 13037

The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.

If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:

http://detectmobilebrowsers.com/

Upvotes: 1

imjared
imjared

Reputation: 20554

Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.

There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.

Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.

Upvotes: 2

PrimosK
PrimosK

Reputation: 13918

I agree with @Kolink's comment..

But if you want to do this anyway I would suggest enquire.js.

You will be able to do something like this:

enquire
.register("screen and (max-width:50em)", function() { 
    // Load top menu content 1 via AJAX.
    // Show content menu 1
})
.register("screen and (max-width:40em)", function() {
    // Load top menu content 2 via AJAX.
    // Show content menu 2
});

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.

Upvotes: 1

Related Questions