I would like to create a sidenavigation bar simply for the different sections on one of my scroll intensive webpages. What I would like to do is have the navigation bar indicate which part of a site is being viewed. An example of this is http://www.ifc.com/back-to-portlandia/#welcome. The navigation bar on the right with the six circular buttons labled 1 through six actually each turn orange when that corresponding part of the website is being viewed.
How would I do that?
So here's what I did for you. I made many slide and with their height I can know when the user change of slide. When he does that, I remove the class .current and I put it to the next li. For the moment, it only works when you're scrolling down, but with some adjustment you could easily do the samething while the user scroll up.
Here's the fiddle
My Javascript look like this :
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.navigation li:eq('+newSlide+')').addClass('current');
}
});
Related
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
Below is my code and I'm trying to recreate this effect: (http://hideo-html5-css3-bootstrap-website-template.little-neko.com/files/index.html) [When you scroll down the navigaiton bar changes to half size and with some transparency or something like that.] Any ideas to remake it?
Code: http://pastebin.com/r0pS4AYD
Ps: My code has nothing special and I just want a point/direction to make it.
When the user scolls to an specific position, or in your case when he begins to scroll, you can add an class via jQuery.
Look here for more information:
Leave menu bar fixed on top when scrolled
(Code is taken from the post in the link)
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
it is the best when you create an fiddle with your code, so other people can easy modify your code and see whats going on there..
I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels
I have a div with a scroll bar which displays 15 months with 3 of the min each row, When the page loads I want to fix the scroll bar position to 2nd row as shown in my screenshot.As in the scroll bar should to be fixed to the position shown in my screenshot as opposed to top of the div.The reason for this requirement is we are displaying previous 3 months, but the user should see the current month when the page loads. I hope I have made it clear
I am using
<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">
Can you guys please help?
Thanks,
Adarsh
You need to use JavaScript for this:
<!--
Place this script before closing </body> tag so that
DOM (HTML elements tree) is already built when the script is running
-->
<script>
// create a closure to not pollute global scope
!function () {
// cache reference to keyDates element
var keyDates = document.getElementById('key_dates');
// set scroll to the height of one row
keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>
Here is the documentation of element.scrollTop
If you are using jQuery, you do it like this (and here are the docs);
<script>
$('#key_dates').scrollTop( 150 );
</script>
An example with jQuery: http://jsfiddle.net/gryzzly/CjdwX/
It seems I can't demonstrate this properly with jsfiddle, but here is a sample of code which works if you test it in a browser. Using anchors on each row, we can anchor the window to a specified location either using href or the url.
For example, if you implemented this code at www.address.tld/calendar, to show row two, you'd enter www.address.tld/calendar#row2.
You can use only an anchor on row two, and you could place it either statically or programmatically depending on your needs. It's a pretty straight forward solution, but some people don't like the hash and anchor name being in the url. It doesn't bother me.
I usually have no problems with making CSS sprites, but this one has got me stumped...and I'm not sure how to solve it. Basically I have a navigation sprite that looks like this:
I'm using the standard convention of laying them out in <li> tags such like:
<li class="welcome">welcome</li>
And then applying CSS to adjust the background position:
#navigation li.welcome a {
width:155px;
background-position:-0px -46.5px; }
Of course I didn't think of this, but the problem happens on hover. Since you can only define "square" areas, when you hover over an element, the "blue" hover state is being carried over to the next navigation item.
I then thought that I'd have to make individual images for each item... but that wouldn't work quite right either because of the overlapping arrow sections.
Maybe I have to seperate out the "in between" arrow seperators? I'm really not sure.
I'm stumped here. Any ideas?
I think you're right about having to cook up a 'clever' image which covers all your requirements.
It's difficult to explain in words, here's a link to an example: http://www.alistapart.com/d/sprites/ala-blobs2.html
Here's the link to how it's done (scroll down to 'Irregular shapes') : http://www.alistapart.com/articles/sprites
Could you recreate the sprite so that the navigation buttons are stacked vertically? Then it seems you could use negative left margins to fit the buttons together. This way, the negative space on the left side of the button would be empty, rather than have an arrow tip in it, so on hover, the cavity would remain transparent.
Instead of one row of "active" sprites, create two and activate them alternatively, i.e.:
active > inactive > active > inactive ...
inactive > active > inactive > active ...
This way, you can always cut a sprite; you just have to add to the Y value if the index of your element is "odd" (index & 1 == 1).
You could extend your sprite and replace the hover state with 5 separate lines of hover state, each one having only a single blue button with a separate hover state position for each item. The files size shouldn't be too much greater.