I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
Related
What is the easiest way to show/hide a div outside the tab content when on that specific tab only? My current example shows but I could not make it hide again.
Plunker: http://plnkr.co/edit/E6dK5C9ZxVQaicQgfS4w?p=preview
<div class="border" ng-show="aboutTabActive == true">Show me when the "About Tab" is clicked.</div>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home" ng-click="aboutTabActive=false">Home</a></li>
<li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
</ul>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Vad gör vi?
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>Drift</h3></li>
<!-- Typography -->
<li><i class="glyphicon glyphicon-cloud"></i> Kapacitetstjänst</li>
<li><i class="glyphicon glyphicon-flash"></i> Kommunikation</li>
<li><i class="glyphicon glyphicon-road"></i> Managed server</li>
<li><i class="glyphicon glyphicon-eye-open"></i> Övervakning</li>
<!-- End Components -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<ul class="nav navbar-nav">
I´ve seen a few other questions in this topic, but the don´t answer mine.
Is it possible to put a delay to the dropdown when the marker is not in the dropdown area. (Just to prevent clients to fall of the menu).
Thankful for answers.
my dropdown menu in navbar works fine when the browser is maximized but if i resize the browser to a mobile size then the dropdown menu does not show up as well as the menu button toggled up. here is my navbar code with dropdown. I am using bootstrap 3.when i clicked EBBL the dropdown menu does not show up and the whole navbar menu is toggled up.
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="<?php echo site_url('home/index')?>">BCTF</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse ">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/index')?>">Home</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_about')?>">About</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_open_butterfly_park')?>">Open Butterfly Park</a>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>About EBBL</li>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
</ul>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_biography')?>">Biography</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_gallery')?>">Gallery</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I want to move the text "MENU" to the center and the glyphicon to the center as well, putting the glyphicon to the left of "MENU", but when I move "MENU" to the center, it covers everything to the left and right in the entire navbar and I can barely click the glyphicon anymore.
And my second question is,
how do I get rid of this margin or gap or whatever it is?:
Navbar:
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
<div class="container">
<div class="navbar-header" id="oneDiv">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
<span class="glyphicon glyphicon-menu-hamburger" style="color:white"></span>
</button>
<font color="white">MENU</font>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse" align="center">
<ul class="nav navbar-nav" id="firstOne">
<li>Design Process</li>
<li>Profile</li>
<li>Contact Info</li>
</ul>
<ul class="list-inline" id="secondOne">
<li><img src="facebook.png" hspace="30"></li>
<li><img src="twitter.png" hspace="30"></li>
<li><img src="instagram.png" hspace="30"></li>
</ul>
</div>
</div><!-- End Container img src="twitter.png"-->
</nav><!-- End navbar -->
My navbar has a dropdown menu in it that will not toggle when a user navigates to a page with the affix.js functionality on it. I'm building this in Visual Studio 2012, so its a master/content page setup. On any other page, the navbar works fine, so I assume it has to do with affix.js because it is the only differing element.
Master navbar:
<nav class="navbar navbar-default" id="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home.aspx">
<img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Products & Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Consulting</li>
<li>Filler</li>
<li>Product Documentation</li>
</ul>
</li>
<li class="dropdown">
Company <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</li>
<li>Customer Portal</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On the content page, I added an extra reference to my jquery and bootstrap .js files in the header because I was getting an exception that jquery was not defined. The .js files are also referenced at the bottom of the master page.
Content page:
<script type="text/javascript">
$(document).ready(function () {
$('#sidebar').affix({
offset: {
top: 245
}
});
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
});
</script>
<div class="container" id="top">
<div class="row">
<div class="col-lg-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
//<li><a>side bar content</a></li>
</ul>
</div>
<div class="col-lg-9">
//content
</div>
</div>
Not too sure whats going on. I wonder if anyone else has had this problem. Any help would be appreciated.
I took the javascript references out on the content page. I solved my issue with the dropdown list by taking the jquery script in the content page header and inserting it into the code of the master page below the javascript references.