I am coding up a page and i have a jquery slider on it called all in one slider. I have chosen to put a fixed nav at the top which is always visable during scrolling. problem is when i scroll past the slider the slider is above the nav.
I have tried positioning etc but it is not working and z-index:1000;
thanks!
try setting the z-index of the slider negative:
#slider {
z-index:-99;
}
set the z-index for nav positive. make sure that they are in the same div as well, otherwise it won't work
Related
I am removing horizontal scroll bar completely from bottom. I tried this below ways.
1st way
Hide html horizontal but not vertical scrollbar
This way is working when the page is first loaded. But when I click on the UI. Bottom scroll bar is appeared but not scrollable and disabled. So UI shrinks slightly and disabled scrollbar is shown at the bottom.
2nd way
::-webkit-scrollbar {
display: none;
}
::-moz-scrollbar {
display: none;
}
::-o-scrollbar {
display: none;
}
This removed all scroll bar from UI. Not even the vertical scroll bar is shown. Even onclick, neither vertical nor horizontal scroll bar is shown.
Is there a way to remove horizontal scroll bar completely in this way ?Not even shown when the UI is clicked.
By bottom scroll-bar, I assume you are referring to the horizontal scrollbar. This appears when you have content that overlaps the width of your element.
As a best practice, you should align your content so it's viewable without horizontal scrolling. You might even want to include some padding to make it easier on the eyes.
But if it's required, you can set the overflow-x property and set to hidden.
With the hidden property, the content is clipped, scrolling is disabled and the scrollbar doesn't appear.
http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.
In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.
Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.
It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}
I'm trying to get responsive menu working on Metis Admin
http://demo.onokumus.com/metis/
When the screen width is less than 768px, the side menu buttons get smaller which is fine but for the submenus it seems to expand to the right and it's invisible. It's position absolute and I've tried increasing z-index but it still does not show up.
I can see using css inspector that the submenu list is still there and working.
Is there a way to make it displayable?
There is an overflow:hidden in your main.css line 399.
Remove this
#menu {
/*other styles*/
overflow: hidden; /*remove this line*/
}
Now it should work as expected.
I'm recently facing a dilemma with my new Wordpress site.
I'm wondering how to keep a part of my header image visible when i'm scrolling down in the page.
For now, my header image is 75% of the page height, but when i'm scrolling down, the image disapear as it should be.
But what i want, is that a certain part of it, let's say 20%, stay visible at the top in a "fixed" position.
So, to resume in pictures :
What i have without scrolling :
http://i.stack.imgur.com/2NxcQ.jpg
What i would like to have when scrolling down :
http://i.stack.imgur.com/nwoQw.png
I don't know if i'm clear enough, though, thanks to everyone who will try to help me on this !
You can use a jquery plugin like sticky:
<div class="top">Content</div>
<div class="header"></div>
<div class="content">
....
</div>
Then for CSS, you apply your image:
.header
{
background-image: url('http://placekitten.com/200/300');
height:300px;
width: 100%;
}
Then in your js, you can use the sticky plugin:
$(".header").sticky({topSpacing:-250});
Notice the negative number on the spacing offset, which allows most of the image to be scrolled.
Example fiddle: http://jsfiddle.net/CZYav/2/
I have a demo here: http://jsbin.com/ubolos/1/edit
Just keep tracking you scrolled distance and modify the background property of the div when you find that user has scroll too far down. No other plugins of jQuery needed.
I know how to hide scroll bar. But without a scroll bar, I would like to scroll whatever there is to scroll.
This is what I did, it hides initially, and as mouse hovers, vertical scroll bar shows.
div#LogoStrip{
height:600px;
overflow:hidden;
}
div#LogoStrip:hover{
overflow-y:scroll;
overflow-x:hidden;
}
But on hover, I don't want to see scrollbar but still would like to scroll the text/images that are present there, using wheel or two small buttons, 1 at top and 1 at bottom.
div#LogoStrip{
height:600px;
overflow:hidden;
}
+ javascript
can you help with Javascript/jQuery ?
You could use jQuery to implement your own custom scroll bar using jScrollPane or another similar plugin.
If you really want to code this yourself (and I would again caution against it), you can look through the jScrollPane code. The basic idea is that you have a div within a div, one will hid the contents of the other when set to an offset. You have to capture the scroll wheel event and change that offset.