Submenu go away from menu when scroll page - javascript

I have a problem with position of submenu, when I open page submenu is positioned well but problem is when I scroll page and than try to open submenu it is out of position.
live demo
.has-sub.parent .wrapper {
position: fixed;
z-index:500;
}
I know that this problem is caused by use of position:fixed but if I try to change that than submenu is shown behind content div, I tried to fix that with z-index, but it didn't help, any suggestion would be great.

To be honest your fiddle is a bit of a mess... You can't use a fixed position for your submenu. You should use "absolute" position.
I add this to your CSS to modifed a bit all your nav bar:
.horizontalni li {position:relative;}
.navigation {z-index:100; ;}
.has-sub.parent .wrapper {position: absolute;}
.horizontalni {overflow:visible;max-width:100%}
body {margin:0; padding:0; overflow:hidden;}
and here you have your modified example: http://jsfiddle.net/gtw781sv/1/
Hope it can help you a bit.
Edited: change overflow:hidden to overflow:auto in "body" if you want to check it with scroll-bars

Hi Check the demo here
http://jsfiddle.net/adarshkr/gtw781sv/4/
Changes done in CSS
.horizontalni .has-sub .has-sub1 .wrapper{left:100%} /* Updated code */

Related

Removing IE's scrollbar

First of all, I don't want to just remove it, I want to ensure that there is still scrolling capabilities there also.
This is because I would like to have a 'slide show' affect on the website, where you can click 'next' and before, however with the scroll bar there, you can just go through it.
I have hidden the scrollbar in other browsers using:
::-webkit-scrollbar {
display: none;
}
for webkit browsers and overflow: -moz-scrollbars-none; for Firefox. However, when it comes to IE, I can't find anything to simply hide it.
I found these on the internet:
scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:;
I thought by changing the colour to transparent, it would disappear, but it did not (just reverts back to normal).
Is there a way I can simply hide the scrollbar (simply like display:none or something else), in IE? I am open to css and js options.
jsFiddle of problem
NOTE: Adding overflow:hidden; stops the page from going past the second div when clicking the a tag.
See here for fiddle using your current code
Try this trick
body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}
It offsets a scrollable div so its vertical scrollbar is outside the viewable area.
I have similar problem, I don't need scroll bars on main page, but i have to have inside of my page content like in div's and span's.
So I found solution like this:
body {
-ms-overflow-style: none;
}
div, span {
-ms-overflow-style: auto;
}

Scroll to bottom not working

Need help, why is my scrolltop not working on this sample
I dont know why..using the code everything works fine. But updating the css the scrolltop is not working.:( what should i do to fixed this? is the problem cause by my css style?
i used this but it won't scroll at the bottom of the div..
$(document).ready(function() {
alert('scroll must happen');
$('#message_container').scrollTop($('#message_container')[0].scrollHeight);
$('.topbox').html('just sample');
});
There is no visible scrolling happening because the element you're trying to scroll isn't overflowing; it's all displayed. The scrollbar is for the <body> element and not the <div> you're trying to scroll.
You can make it work if you give #message_container a height e.g.
#message_container {height:100px;}
Alternatively, use absolute positioning tricks, for example in this demo. (The initial "undoes" CSS, I used it to keep code short. See MDN)
#container, #head, #body, #foot{
position: absolute;
top:0;left:0;right:0;bottom:0;
}
#head {
bottom: initial;
height:50px;
}
/* position so it get's your desired size*/
#body {
top:50px;
bottom:50px;
overflow-y: scroll;
}
#foot {
top: initial;
height:50px;
}
You have to set 2 things:
Overflow for the div,
Some height, even percentage one (to make it more flexible).
If you don't set any height at all the div will expand and then there is nothing to scroll, in this case the only scroll bar you get is of the document itself (body).
I added a height and overflow property to your CSS and now it works as expected.
jsFiddle
CSS added:
#message_container {
overflow-y:auto;
overflow-x:hidden;
height:300px;
}

Javascript page animation scrollTo

I'm looking for some advice on how to animate a page. I'm doing some sort of a full page slider but I would also like to scroll down to other divs when the nav links are clicked. I currently have it working for "Home" but it is scrolling the whole page and the nav bar disappears (I would like this to stay fixed).
Also, I would like these divs hidden until they are called by the .click function.
Here is the scrollTo JS:
$(function() {
// when you click the link w/ a id of home'
$('#home').click(function() {
// scroll to the DIV w/ an ID of 'homeDiv'
$.scrollTo( '#homeDiv', 800, {easing:'swing'} );
});
});
Complete code:
http://jsfiddle.net/hvYzm/3/
The scrollTo library isn't linked up in the jsFiddle.
Any advice greatly appreciated. I'm a newb to this so i'm sure a lot of this stuff can be done in a better way :)
Your nav bar needs to have a fixed position if you want it to move as you scroll:
nav {
padding-left: 16%;
margin-bottom: 10px;
text-align: left;
border-bottom-style:solid;
border-width:1px;
background: transparent;
position:fixed;
z-index:1000;
}
http://jsfiddle.net/3ZLt7/

Centering on hover tooltip-style sub-nav isn't working

As you can see here; http://bit.ly/sifpz9, when hovering over "whats new" or "accessories" in the primary nav, the tooltip-style sub-nav dropdown centers perfectly. However, when you hover over "clothing", it's not centered.
I've tried repositioning, however it just doesn't work for that nav "clothing" without ruining the other two.
Is there a better solution or a fix?
Thank you!
This is pretty easily achieved using the following CSS.
#top-menu ul ul {
margin-left: -87.5px;
left: 50%;
}
We use a minus margin of 87.5px because your width of the ul is 175px thus giving us half the width of the ul, we then move it left 50% so that it is in the middle of you li's anchor tag.
I hope this makes sense. Any problems leave a comment and I will get back to you.
Actually, it's just a coincidence that the submenu is centered for "What's new" and "Accessories", but they actually looks centered. The problem is that you're doing it wrong, defining a left style position fixed to -31px for the inner submenus.
But since those submenus have fixed width, you can rely on it using an old trick:
#top-menu ul ul {
left: 50%;
margin-left: -88px;
}
This moves the submenus to the center of the <li> element, and then back to the left of half (more or less) of its size.

Jquery drop down menu, how to position within my container div

I've got a fixed position menu at the top of my page, inside it is a div with the menu items and a .container class in order to center and limit the width. I can't seem to figure out how to limit my drop down menu to stay with in the .container class width limits. It keeps going off towards the right and will be cut off depending on page widths. Any help is really appreciated.
http://jsfiddle.net/rKaPN/47/
http://jsfiddle.net/rKaPN/51/
Changed:
//fixed so submenu will be relative to menuitem
.menu ul li{
padding:0;
float:left;
position:relative;
}
//if a rightmenu, float right instead of left
li.menu-right.drop-down ul{
display:block !important;
position:absolute;
right:0;
}
You'll probably need to make sure that your .container is using a percentage based width.
Your menu is floating to the right of the container... so if the container is set to 500px, but your browser is 400px, your menu is going to get cut off.

Categories

Resources