I'm having difficulty getting a navbar and a slider to work together. The problem is when it is in mobile view. If you click on the menu icon the menu item slide in from the side but the top ones are appearing stacked underneath the slideshow.
Here is a sample of it posted on my domain test page. http://ecfleming.com/test/index.html
I have tried using a z-index in the CSS as well as few other things. I suspect it might be something in the JavaScript, but I can not figure out what. Does anyone have any ideas of what I can try to fix this?
For a quick fix, you can add .cycle-slideshow { z-index:-1 }
Try not to hard code the height value of div id="header"
Fix the mobile view by removing the height 185px.
Related
Ive got a hamburger nav element that is white most of the site has a dark background, but a couple of sections have light backgrounds.
What im trying to do is if the hamburger nav is over one div keep its css one way, if its over another div change its css.
Ive been trying to get this to work by calculating how much the page has scrolled using $document.scrollTop() and there by working out where the hamburger nav would be, but there a 2 issues with this :
1) its not very automated and each time new content is added to the page and the sections get longer it will have to be recalculated
2) Some of the section heights are set responsibly so knowing the height of section in advance and the hamburgers position in relation to them is not possible.
Any idea how this could be done ?
Ive made a JSfiddle here : https://jsfiddle.net/kd1x7jk4/1/
I believe what you are describing is collision detection.
There is a library that can help here:
http://sourceforge.net/projects/jquerycollision/
I am having some problems with getting the slider to display right. I have it setup and working, however, I need the slider to slide behind my nav bar on the top of my page. It goes right over the top and that prevents the site from being used. Someone please help! I have tried changing z-index to a different number to get this to work. Any ideas?
http://test.mountaintopwebdesign.com/
Alright, I've pretty much hit rock bottom with this one. This mobile site keeps generating horizontal scroll bars every time I hover over a working link. When the navigation drawer is out, it ends up overriding the overflow property, which is breaking my site. Overflow:hidden; isn't really doing anything for me.
I have no idea where the issue is coming from, so all I can do is link the site and hope someone way smarter than me can help figure it out. In the meantime, is there any sort of jQuery hack to completely disable horizontal scrolling? I would even be okay with disabling scrolling all together when the nav drawer is out.
Heres the site http://www.helloimmatt.com
It's still in very rough shape, but resize down to mobile and pull out the nav drawer to see the issue. Thanks in advance, I'm stumped.
You can use following:
body {
overflow-x: hidden;
}
or
$("body").css("overflow-x", "hidden");
Also, you can try diable using JQuery (or javascript, if you like)
I made jsfiddle with example for you: http://jsfiddle.net/Kvn7t/1/
I have created a menu on my website that is suppose to stick to the top of the screen as you scroll down the page, It works perfectly, but there is one problem. I cannot click any were on the top 50% of the screen making the website unusable. http://streamportal.comuv.com/StreamPortal/Test.html this is a test copy (not the true site). can someone take a look at this and tell me what to do? If you need any more info from me please let me know.
This is what I a using to make the menu stay stick while scrolling, thanks to the help of gfrobenius, `http://jsfiddle.net/wHF97/
Remove this:
<div style="height:1000px"> //Remove the height
</div>
It's the div after id="cssmenu"
I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});