I'm trying to write a piece of code that will add a scrollbar to a div if the expanded content is taller than the window height.
The html is roughly structured like this:
<nav class="col-md-2 col-sm-3 no-padding">
<div class="nav-container">
<div class="tocify1">
<ul class="tocheader nav nav-list">
<li class="multi flex-container active-top"><a class="open"><i class="fa fa-caret-right fa-rotate-90" aria-hidden="true"></i></a>Top Link</li>
<ul id="" class="tocsubheader nav nav-list">
<li class="active">Link 1</li>
<li class="">Link 2</li>
</ul>
</li>
</ul>
And the Css:
.nav-container{position: fixed;}
Here is the relevant code:
windowheight = $(window).height();
$('.open').click(function() {
$(this).parent().next('.tocsubheader').slideToggle().promise().done(function(){
sidenav = $('.tocify1').height();
if (windowheight < sidenav){
$('.tocify1').css({'height': windowheight, "overflow-y" : "scroll"});
}
else{
$('.tocify1').css({'height':'100%', "overflow-y" : "hidden"});
}
});
});
This works when one toggle is clicked, however when one toggle is open and another is clicked the sidenav height defaults to a seemingly arbitrary number less than the window height.
Any help would be appreciated.
Thank you.
Related
This list is horizontal in the mobile view - using display:inline-block and its scrollable.
<ul>
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li>About us</li>
<li>Last button</li>
</ul>
You can't see the last button because you need to scroll to it, what I want to happen is when you click on " About US " it scrolls to its location and then you will see " Last Button "
Basically scroll in the X axis to the element clicked.
You can use an anchor to "focus" the div. I.e:
<ul id="ulList">
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li id="about">About us</li>
<li>Last button</li>
</ul>
and then use the following javascript:
location.href = "#";
location.href = "#about";
You can use a library if needed Check jQuery.ScrollTo,
Edited :
var about= document.getElementById('about');
var top = about.offsetTop;
// Now we tell the div to scroll to that position using scrollTop:
document.getElementById('ulList').scrollTop = top;
Try using bootstrap scrolling Nav module:
JavaScript
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
<ul id="ulList" class="navbar-nav ml-auto" style="z-index:1;">
<li>Home<li>
<li>Accounts<li>
<li>Contact US<li>
<li id="about">About us</li>
<li>Last button</li>
</ul>
<div class="about" id="ulList">
<div class="container">
test
</div>
</div>
I have a problem with changing the position of an element using margin-top property.Element is inside bootstrap navigation end the problem is that it changes the margin on scroll properly,but whan I scroll page back to top,it doesnt change margin-top back to hire value.Here is my code:
JS
$(".flags").css("margin-top", "24px");
$(window).scroll(function(){
var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();
var menuMmainScroll = $(".navbar-nav>li>a").offset().top - $(window).scrollTop();
if(menuMmainScroll === 68) {
$(".flags").css("margin-top", "24px");
}
else /**if(menuMmainScroll < 10)**/ {
$(".flags").css("margin-top", "10px");
}
console.log(menuMmainScroll);
});
<div class="menu_main">
<div class="navbar yamm navbar-default">
<div class="navbar-header">
<div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1" > <span>Menu</span>
<button type="button" > <i class="fa fa-bars"></i></button>
</div>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
<nav>
<ul class="nav navbar-nav">
<li class="dropdown">Home
<ul class="dropdown-menu" role="menu">
<li>Forside</li>
<li class="active">Ny til Yoga</li>
<li><a href="#holdplan" data-scroll>Holdplan</a></li>
<li><a href="#priser" data-scroll>Priser</a></li>
<li><a href="#kontakt" data-scroll>Kontakt</a></li>
<li>Butik</li>
<li>Medlem log ind</li>
</ul>
</li>
<li>Holdplan</li>
<li>Priser</li>
<li>Ny til yoga</li>
<li class="dropdown">Om Yoga
<ul class="dropdown-menu" role="menu">
<li>Mysore metode</li>
<li>Om Astanga yoga</li>
<li>About</li>
<li>Services</li>
<li>Services</li>
<li>Services</li>
</ul>
</li>
<li>Mysore </li>
<li>Studiet</li>
<li>Butik</li>
<li><div class="dropdown-toggle flags"> !!!!!!!!!!!!!!!!!!!!!!
<a href="#" class="flag-link"><img src="UK_flag.png" alt="English">
</a>
<a href="#" class="flag-link"><img src="DK_flag.png" alt="Danish">
</a>
</div> !!!!!!!!!!!!!!!!!!</li>
</ul>
</nav>
</div>
</div>
I have put ! at the beginning and end of troublesome part in HTML
Basicly in the beggining there is another menu on top of this one(whan page isnt scrolled,but whan the scrolling starts this menu takes over top position and stays fixed at the top.Now the problem is that I am using div with to images inside two links that are not display properly inline,but inline with some 24px above others in its own field,hoping this makes any sence.
thanks for any help guys.
Try editing the code in your scroll function to the below:
var menuMmainScroll = $(window).scrollTop();
if(menuMmainScroll === 0) {
$(".flags").css("margin-top", "24px");
}
else {
$(".flags").css("margin-top", "10px");
}
Added some jquery to make one div that is in my index (master page) the full height as any content in any view. Basically, match div height of one to div height of another. My jquery code is:
var divHeight = $('.rightSide').height();
$('.tabNav').css('min-height', divHeight+'px');
This is applying to this html:
<div class="col-md-2 tabNav">
<ul class="tabTitle">
<p>Project tools</p>
<li class="tabCont">Welcome</li>
<li class="tabCont">Experiments</li>
<li class="tabCont">Interview Notes</li>
</ul>
<ul class="tabTitle">
<p>Hypothesis worksheets</p>
<li class="tabCont">Problem phase</li>
<li class="tabCont">Solution phase</li>
<li class="tabCont">Service phase</li>
<li class="tabCont">Growth phase</li>
</ul>
</div>
<div ui-view class="rightSide">
</div>
Notice that the div with angular directive ui-view has the class of "rightSide"? Why does this not give me the results I am after?
you javascript is OK, you're actually missing content in the .rightside div.
once you put should be ok. check this out: https://jsfiddle.net/Lqx6jp7q/1/
var divHeight = $('.rightSide').height();
$('.tabNav').css('min-height', divHeight+'px');
I have this irritating problem when I toggle a menu in smartphone view the menu stays hidden when resized to desktop view.
So when the window reaches width of about 905px I want to remove the effect of the toggle and show the navigation from hidden to shown.
I am not sure how to fix this as I've no knowledge of JQuery
Here is my code
<div id="menu">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About us</li>
<li class="remove-margin">Contact us</li>
</ul>
</nav>
</div>
<script type="text/javascript">
$(window).resize(function(){
if ($(window).width() >= 905){
}
})
$("#menu").addClass("responsive").before('<div id="three-lines"><i class="material-icons">menu</i></div>');
$("#three-lines").click(function(){
$("#menu").slideToggle('fast');
})
</script>
Just show the element when the condition is reached.
$(function() {
$("#menu").addClass("responsive")
.before('<div id="three-lines"><i class="material-icons">menu</i></div>');
$("#three-lines").click(function() {
$("#menu").slideToggle('fast');
})
addEventListener("resize", function() {
if (innerWidth >= 905) {
$("#menu").show();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<nav>
<ul>
<li>Home
</li>
<li>Services
</li>
<li>About us
</li>
<li class="remove-margin">Contact us
</li>
</ul>
</nav>
</div>
UPDATE
Using media queries
#media screen and (min-width: 905px) {
#menu{
display: block;
}
}
I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.
Here's the code
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
And the javascript :
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}
I think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?
First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.
Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.
$('li.nav-list_item a, .nav-title').on('click', function(e){
e.preventDefault();
var el = $(this);
el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
el.parent().find('> .dropdown, > ul').toggle();
});
#nav-list .nav-list_item {
display: block;
}
#nav-list .nav-list_item .dropdown{
display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.