Dynamic Breadcrumbs using sections of page for hierarchy - javascript

Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.

I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.

Related

Linking paginated articles to sidebar

My google fu is currently letting me down so I thought I'd ask here for some help..
I have a page that has a single article on it (url.com/article/article-headline). When you scroll down the page using jQuery it loads the next article and changes the url (url.com/article/next-article-headline).
My issue is, I have a left hand sidebar which has a list of all the articles. What I'd like to happen is to have the current article highlighted. So when you scroll down the page and the next article loads the next sidebar article title is highlighted etc etc.
If you need an example of what I mean you can see it in action on time.com
http://time.com/4010146/smartphones-dinner/ (scroll down the page and watch the URL and sidebar)
I'm really struggling to find what it's called in order to do a proper search. I guess it's something similar to scrollspy but I'm not sure. Are there any plugins that exist for this?
You need to add data-attributes to your sidebar and the article section at the main content. With the help of which you could determine the article title.
Using jQuery then add a class named "active" which would determine the current article is active and style the "active" class later just for the sidebar.
Example: .sidebar-article.active { color: #f00; }
IF you need a solution you need to also provide appropriate HTML structure and jQuery code with the help of fiddle. So that rest of the code snippet we could provide and also not harm your current code base.

Javascript loading content when scrolled to section

I had a question about a particular feature i wanted to build with javascript/jQuery.
An example of the feature can be seen in the site below:
http://nicolasbouliane.com/
If you scroll to the Example section, you can see how the content is loaded in when you get to the section and it has a transition (slides in)
How would i create something like this, or perhaps there are scripts out there?
Regards
This can be easily done using skrollr.js
https://github.com/Prinzhorn/skrollr
typical usage as simple as :
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
where data-number represents current scroll position.
you may also wanna try:
http://johnpolacek.github.io/superscrollorama/

changing active class in twitter bootstrap to the current page that user clicks on in the navigation bar

I am sure the answer to this question has been answered many times. In fact, I've been reading tons of threads regarding this question, but I still have no clue how to go about doing this. If you can help me with a very simple way of implementing the code, that would be awesome. I am a complete newbie at this, and have very little, if not, zero, knowledge of javascript.
I have a simple fixed navigation bar (of about 5 links) on the top of the site I'm currently building, using twitter bootstrap. This is a one-page scrollable website.
In twitter bootstrap, there is a class on the first link. This class is "active". It's there by default.
I'm assuming this is the key to highlighting the links when a user clicks on one of the links in the navbar, ie. when the user scrolls to a certain section on the 1-page website, the corresponding navigation link gets highlighted.
I think I need to add some javascript to get this working. Or maybe I can get this working without javascript?
What do I do? Please help...
If you can get an example up on jsfiddle, that would be great too.
What I need help with specifically:
1) I need to incorporate smooth-scrolling on the website (which I can kinda do, using something I've searched for online, but would prefer to have a complete solution to this including the points below).
2) When user scrolls down or up my 1-page website, the navigation links changes color, according to the section they're in.
3) When user clicks on one of these navigation links, the link remains highlighted while the user reads that section of my website.
4) If I need to use javascript, do I write the javascript at the bottom of my HTML code, above the body tag? Or should I create a new .js file?
5) I need to stress that I'm a complete newbie, and that I'm using the current version of twitter bootstrap.
Ok.
download http://flesler.blogspot.com/
download http://github.com/davist11/jQuery-One-Page-Nav
Call js
jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>
});
Add id="top-nav" to your nav

Running jQuery Mobile on only a section of a page by id?

How to I apply jQuery Mobile only to a certain section of my page specified by element id?
Since it runs when the script is loaded, how do I limit it to only part of a page?
If I am not wrong then you want to apply css or style on certain div or another container.
Refer Below links.
StackOverflow And JQUERY MOBILE
I hope this both links will help you.

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.
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.
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.
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
});
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/

Categories