I have a horizontal menu that sticks to the top of web browser after you scroll past it. To make it happen i'm using javascript (jquery). Now i want to hide that menu and show mobile menu at certain resolution, but when i give "display: none" to menu classes, it only hides original menu.
If i set .original or .menu to "display:none" it hides original static menu, and fixed menu sticks to the top of web browser immediately (you don't have to scroll).
Setting .cloned to "display:none" doesn't do anything.
How to get rid of that fixed menu ?
Script:
<script>
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
CSS:
#media screen and (max-width:960px){
.cloned {
display: none;
}
.original {
display: none;
}
.menu {
display: none;
}
#navi {
display: none;
}
#content {
width: 90%;
}
}
EDIT:
jsfiddle: https://jsfiddle.net/765kadoj/3/
The reason it is happening is because your javascript is overriding your css after it has been set. You have two options:
You need to write some javascript to change the css to display: none for the .cloned class when the screen is smaller than 960px.
You can use the !important override, which would look like this:
.cloned { display: none !important; }
However, I would strongly suggest using option 1, since the !important override typically isn't the best practice. For more information on !important, see this article.
Related
I am creating a little menu on a side, with HTML, CSS and Javascript, and I want it to fade in when the user scrolled under the header. This was working perfectly well until I tried to improve the responsive part of my website design.
I changed the menu from display: block; to display: flex; since screen size can change and I want all the lines of my menu to always fill the whole menu. I just changed my code a little bit in the .js script like so:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600) {
$('#menu').css('display','flex');
} else {
$('#menu').css('display','none');
}
}
The problem is that the transition is not smooth anymore. I used fadeIn() and fadeOut() methods from jQuery to do so with display: block;, but I don't have the same fading effect with the direct .css method.
I already tried those things:
Add a transition: 1s; in my #menu id in CSS. Didn't fix it.
#menu {
z-index : 3;
position : fixed;
display: none;
flex-direction : column;
justify-content : space-around;
width : 15%;
height : 50%;
right : 1.5%;
top : 20%;
font-size : 24px;
transition : 3s;
}
Keep the .fadeIn() and .fadeOut() methods, and add the .css changes after those. Didn't fix it.
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600) {
$('#menu').fadeIn();
$('#menu').css('display','flex');
} else {
$('#menu').fadeOut();
}
}
I don't know what else I could try. I searched for various solutions, but most of them are talking about the .css method itself, not the fading effect I am looking for.
i haven't tested,but you try to 'flag' that makes (document).scroll run once.
because your code, case y =700 then do $(document).scroll run, case y=701, case y=702???
var flag=false;
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600 && flag==false) {
$('#menu').fadeIn();
$('#menu').css('display','flex');
flag=true;
} else if(y<=600 && flag==true) {
flag=false;
$('#menu').fadeOut();
}
}
I am trying to make a navbar where brand image can be relocated when scrolling down like the example shown on http://www.agilent.com/home
I know how to addclass using jquery, but I don't know how to add an image when scrolling down or is there any other method to make this effect happen.
How can I achieve this effect? Thanks in advance!
You need to use two images. One on the heading and one on the nav.
This snippet will detect if the navbar is on top and add sticky class to a nav element.
$(window).scroll(function() {
if ($(window).scrollTop() > $("nav").offset().top) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
});
When the nav element uses sticky class, it should display the nav logo.
nav .logo {
display: none;
}
nav.sticky {
position: fixed;
top: 0;
}
nav.sticky .logo {
display: inline;
}
jsfiddle demo
I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
I have nav implemented with Superfish navbar, as in this example:
http://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/
I have only needed the first level, as in this jsfiddle: http://jsfiddle.net/v1c09us9/
Now, the problem is that if there are like 10 items in the sub menu, the menu items start moving down. I want the menu items to stay in one line and use a small arrow to move right.
I managed to make the menu items appear horizontally by making their parent ul overflow x scrollable.
.sf-navbar li ul{
white-space: nowrap;
width: 100%;
overflow-x: scroll;
}
.sf-navbar > li > ul > li {
display: inline-block;
}
The jsfiddle is showing this implementation. The problem is that now it has a scrollbar which I want to hide, but can't find a way to do it. Also, it breaks the hack I am using to make the menu responsive which I found in this thread, third answer How to make superfish dropdown menu responsive?
I'd like to know if there is any way I can hide the scrollbar and add an arrow to scroll the items, keeping it responsive. Or is there a better alternative to superfish? I searched a lot but couldn't find a good alternative which has the same feature, where the menu is shown as a line instead of a dropdown.
Thanks
Okay, so I have given this a good old try. Basically I have hidden the scroll bar, made it sit inside of the navigation and used some JQuery to scroll the items in the navigation with hovering and still be responsive. You may need to tinker to get it exactly to how you want.
JSFiddle
CSS
.sf-navbar > li > ul {
/* removed min width that was here */
overflow:hidden;
}
/*altered*/
.sf-navbar li ul{
width: 100%;
overflow-x: hidden;
}
.sf-navbar > li > ul > li {
display: inline-block;
}
/*added*/
.sf-navbar li ul:hover { overflow-x:hidden }
JS
$.fn.scrollList = function (delay) {
delay = delay || 2000;
var animateList = function ($list) {
//get first child
var $first = $list.children('li:first');
var width = $first.outerWidth(true);
//animate first two off the screen
$first.animate({
'margin-left': $list.width() * -1
},
// on animation complete
function () {
//reset and move to the end of the list
$(this).css('margin-left', 0).add($(this).next()).appendTo($list);
//start again after delay
setTimeout(function () {
animateList($list)
}, delay);
});
};
return this.each(function () {
var $that = $(this)
setTimeout(function () {
animateList($that);
}, delay);
});
};
$('.sf-menu ul').scrollList();
I am having trouble making my website responsive, I have done it for all of the pages and just need to finish off with my navigation.
It can be seen at www.christierichards.co.uk/gcc_website/index.php
Basically when the window is resized down to 635px the nav ul disappears and a menu icon appears, in the CSS at this point the nav ul has been set to display:none. What I need to happen here is that when you click on the menu icon the navigation is set to display block and slides down the entire page to reveal the nav (I hope that makes sense!) This technique is used with a lot of responsive sites nowadays but I cant for the life of me figure out how to do it!
I hope somebody can help me! Thank you
try this>>>
CSS:
ul > li {
width: 24.5%; /*important*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*important*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*important*/
HTML:
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
<li>NAV4</li>
</ul>
This resizes depending on browser size. Please comment back. http://jsfiddle.net/S4TcF/ The text can be center align vertically and horiziontaly please comment back for that
You need to do 2 things -
1.Hang an event on the menu button to open/close the nav (I see you're using jQuery, so you can set
$("#pull").on("click", function(){
$("#nav-bg").toggleClass("vertical")});
2.Set the CSS definition to match the class you're adding - something like:
div#nav-bg.vertical {
height: auto;
background: blue;
}
.vertical ul {
display: block;
}
.vertical nav li {
display: block;
float: none;
}
.vertical nav li a {
display: block;
}
.vertical nav {
background: blue;
}
Add onClick event for #pull and toggle the display on #nav-bg ul using jQuery slideUp/slideDown method.
You would need to load it with a display set to none as you are doing now but using one class, let's name it ".hide", then use a jQuery click function to switch to a ".show" class which has the display set to block.
CSS looks like this:
.show {display:block;}
.hide {display:none;}
jQuery:
$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});
Here is a working fiddle:
http://jsfiddle.net/22sSj/6/
you use a variable that is not defined within the loading of the page your #pull is not visible during a page load that the size of the window is bigger than 635 so the variable var pull = $('#pull'); isn't defined, and change of the window width wouldn't give you any change besides the other style you've got for the bar.
so i recommend you'll try to change the script so it would listen to the window width and will execute this function only when the window width is smaller or equal to 636px.
var winWidth = $(window).width();
$(window).rezise(function(){
if(winWidth <= 635){
addPull();
}
});
function addPull(){
menu = $('nav ul');
menuHeight = menu.height();
$(document).on('click','#pull' function(e) {
e.preventDefault();
menu.slideToggle();
});
}
$(document).ready(function(){
if(winWidth <= 635){
addPull();
}
});