I have Flexslider working nicely. However, I needed it to slide under a navigation bar so set it's margin-top to -75px and it's div.flexslider z-index to -2. Looks great but now the next/prev arrows don't fly in and the click navigation doesn't work. It's just an automatic slide show right now. If I remove the z-index setting, it works but shows over the top of the nav bar.
It's sitting in a site using bootstrap 3 :-
<div class="row">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/garden.jpg" />
</li>
<li>
<img src="images/house.jpg" />
</li>
</ul>
</div>
</div>
In Chrome there are no errors thrown in the dev tools. In Firefox, the slider disappears altogether unless the browser window is reduced in size.
What else do I need to adjust to allow the prev/next and slide navigation to work with the z-index set or is there another way?
The answer turned out to be removing the z-index:-2 on the flexslider. Then to push the nav over the top of it, had to add position:relative AND z-index:10. So the position:relative was the key to the solution.
Hope this helps someone else.
Craig
Related
I have two sticky navbars, the first white one from Wordpress with its own sticky function, and the black one below is html/css-only (no bootstrap), and it has a strange movement on mobile, it's hard to explain so let me show you:
When I first load the page, it looks good like this:
But when I scroll down, even if just a little bit, the black navbar kind of bounces suddenly and very quickly and makes the content "jump". I have no idea why this is happening since there is no bug when loading the webpage from a computer! It's only a matter of mobile phones. :S
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 0) {
jQuery('#navbar_reservas').addClass('navbar-fixed');
}
if (jQuery(window).scrollTop() <= 0) {
jQuery('#navbar_reservas').removeClass('navbar-fixed');
}
});
CSS
.navbar-fixed {
top: 60px;
z-index: 1000;
position: fixed;
width: 100%;
}
HTML
<div id="navbar_reservas">
<div id="reservas_left">
<div class="nav-item_reservas" id="inner_reservas_left">
<a id="dudas" href="tel:55555555">
¿Dudas?
<br />555 555 555 </a>
</div>
</div>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
</div>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="unoul">
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>
From what I can see you only add the position: fixed when scrollTop is not 0. That will create a new stacking context when the class is applied. That means it'll no longer be "visible" to the elements around it in terms of positioning. And as such the content below it will jump up to fill the gap.
If you know the height of the navbar already, there is a really simple solution:
When the navbar do not have the navbar-fixed class, apply position: absolute on it so it's always in its own stacking context. Then add the height of the navbar as top padding/margin to the content below it.
If you do not know the height:
You'll need to do the same as above, but calculate the height of it with JavaScript on load. If it changes height on say resize or you have some dynamically changing content, you'll need to make sure to update the height used for the above method when those events happen.
If you can work with relatively new code:
There is a CSS property for all this! position: sticky combined with top: 0 Will make the navbar stick to the top of the screen when it otherwise would scroll up behind the viewport.
However, browser support isn't very impressive:
http://caniuse.com/#feat=css-sticky
I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.
I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.
I use materializecss to create a slider.
However the image is full width, but not full height(its more than full height, so i get scrollbars). What do i need to change to make the slider fill out my screen with no scrollbars? I also use $('.slider').slider({full_width: true});
<div class="navbar-fixed">
<!-- some stuff-->
</div>
<div class="container-fluid">
<div class="carousel carousel-slider center">
<a class="carousel-item"><img class="responsive-img" src="http://lorempixel.com/800/400/food/1"></a>
</div>
</div>
If you just want to hide scrollbars then add
overflow: hidden;
To container which is having the scroll
Are you using the correct JavaScript?
On Materialize's site (I've used Materialize before, and thought something looked off about your code) it has this as the way to initialize a slider as "full_width:"
$('.carousel.carousel-slider').carousel({full_width: true});
In fact, your slider doesn't even have the .slider class; it only has .carousel-slider and .carousel.
I'm thinking if you use the above JavaScript you should be alright.
You can see sample code from here Sample code
The Goal:
When top menu hover, top menu and sub menu must open
when sub menu hover, top menu and sub menu must stay opened
when mouse out both top menu and submenu menus must close
I tried many times and searched for solutions but cant achieve.
Also I cant put sub menu under a element. Because when a shrinks(gets wither) the sub menu relatively changes its position. It's not compatible for me.
<div class="menu-item"><i class="halflings white cog"></i> <span>Link One</span>
<div style="height:0;position:absolute;">
<div class="sub-menu" data-hover='false'>
<div>Sub Link</div>
<div>Sub Link</div>
<div>Sub Link</div>
<div>Sub Link</div>
</div>
</div>
</div>
You are using closing sub-menu's code:
$(this).parent().find('.sub-menu').css({display: "none"})
.stop(true, false).animate({width:'0',height:'0',opacity:1},'fast');
in the wrong place. You can close it just after hover is false (like is in the another hover function). Then, invert this 'if' logic:
if(!$(this).parent().find('.sub-menu').data('hover'))
to:
if($(this).parent().find('.sub-menu').data('hover'))
and for end just add this 'if' after the another 'if':
if(!$(this).parent().find('.sub-menu').is(':visible')){
$(this).stop(true, false).animate({width:'15px'},'fast');
}
Here is the fiddle: http://jsfiddle.net/a8yZb/52/
Finally I solved this issue, by using these functions:
setTimeout();
clearTimeout();
The solution is here: http://jsfiddle.net/a8yZb/55/
My new home page has a position fixed header at the top of the page and the container holding the content scrolls up underneath that.
Theres a text box that on the left which I want to fix so that its always visible when the rest of the content scrolls up.
The container which holds all copy is positioned relative with auto margins so that it sits central onscreen.
I haven't been able to find code online that will enable me to keep the div in the container and therefore obey the central alignment of the container, but be fixed below the header while the rest of the container scrolls.
Any ideas how I could do this please? Is it javascript or CSS?
Any help would be greatly appreciated.
I have tried putting the text box and header in one div together, but then the content gets pushed down. I read that floating should work but doesn't. I have looked at 'sticking' the text box to the bottom of the header div, but can't seem to get that to work.
See www.broadleydesign.co.uk/test3
NB. Apologies if the header isn't stuck at the top in IE on your machine; I haven't sorted any workaround yet. There should be a white space at the top with the logo and top links in. The images should scroll up underneath that. I haven't got a pc to check it!
You need to move the ul into the head section and give it position: fixed css, not position: absolute. See my example below using your code:
<div id="header-cont">
<h1><img src="images/background/logo.jpg" alt="Broadley Design, Graphic design and image production"></h1>
<div id="home">
<ul id="titles">
<li>home
</li>
<li>profile
</li>
<li>contact
</li>
</ul>
<ul id="sideheads">
<li class="firstsub">
<img src="images/headings/broadley_design_co.png" alt="">
</li>
<li><span class="bold"> Diane Broadley</span>
</li>
<ul class="sublistwider">
<li>A freelance graphic designer specialising in print, providing a one
<br>to one service, design solutions and production to ensure that your business gets into the hands of the people who
<br>matter to you.</li>
<li>Working both directly with small businesses, designers and publishers
<br>in the South West.</li>
</ul>
</ul>
</div>
</div>
Give the position:fixed css property to the target div.
<div class="fixed">Fixed Text</div>
and style it as:
.fixed {
position: fixed;
top:10px;
left:10px;
}
DEMO
I have suggested a jQuery(javascript) plugin HERE
There are various JQuery plugins that can help you do what you want.
This functionality is called as "sticky scroll"