So basically I'm using a template for my site and adjusting accordingly. The site defines the menu-bar to be hidden on start and it appears on scroll down.
The text and menu button however, always appear on start. I cant understand how I can also tell the text (email and phonenumber) to stay hidden with the rest of the menu-bar.
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
/* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');
/* TOP Menu Stick */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){
$('#sticky-header').addClass("sticky");
}
else{
$('#sticky-header').removeClass("sticky");
}
});
/* meanmenu */
$('#mobile-nav').meanmenu({
meanMenuContainer: '.basic-mobile-menu',
meanScreenWidth: "767"
});
/* hamburgers menu option */
$('.hamburger').on('click', function() {
$(this).toggleClass('is-active');
$(this).next().toggleClass('nav-menu-show');
});
$(document).on('scroll',function(){
$(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties
})
.makescroll{height:1000px;}
.hamburger-menu{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
<div class="makescroll">Extended scroll</div>
</div>
</div>
</div>
</div>
</div>
</header>
Related
I have a web page that uses Bootstrap. In this page, I am using the Collapse component to toggle visibility of some elements. In each collapse component, I have some links and buttons. If a user clicks one of these links or buttons, I do NOT want the related content to expand collapse.
I have a Fiddle here, which contains the following:
<div class="container">
<div class="row" data-toggle="collapse" data-target="#parent1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
</div>
Somehow the event seems to be going up the chain even though I'm returning false in the event handlers. I'm not sure how to remedy this. Any help is appreciated it.
You just need to move "collapsing attributs" to the h2 rather than the div container that include you links, like that:
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2 data-toggle="collapse" data-target="#parent1">Parent 1</h2>
</div>
<div class="col-xs-8">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
</div>
You must remove the toggle attributes of each row and start the effect manually with JavaScript, then prevent the <button> and <a> elements from taking any action.
All your code would look like this
HTML
<div class="container">
<div class="row row1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
JavaScript
$(document).ready(function(e) {
//on click in row1 class init toggle effect
$(".row1").on("click", function(){
//collapse content
$("#parent1").collapse('toggle');
});
$("div.row2").click(function(){
$("#parent2").collapse('toggle');
});
$("div.row3").click(function(){
$("#parent3").collapse('toggle');
});
//on click in button or a return false
$("button, a").on("click", function(){
return false;
});
});
I'm trying to make the navigation sidebar on my website move down with the browser view via Bootstrap's Affix plugin however it refuses to follow the view and just stays at the top.
This is the structure I have for my HTML:
<div id="page-wrapper">
<div class="container">
<div class="row">
<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
<div class="col-xs-2" id="navigation-wrapper">
<div class="inner">
<div class="row">
<div class="col-xs-12">
<img src="images/me.png" alt="Liam Potter" id="picture-me" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-10" id="content-wrapper">
<div class="inner">
</div>
</div>
</div>
</div>
<div id="page-push"></div>
</div>
<footer>
<div class="container">
</div>
</footer>
Source: https://jsfiddle.net/tbejd5en/1/
Any thoughts?
You can just add a position:fixed to your id #navigation-affix and add col-xs-offset-2 to your id #content-wrapper
div#navigation-affix {
position: fixed !important;
}
Here is fiddle: https://jsfiddle.net/tbejd5en/5/
You can just add a position:fixed to your id #navigation
HTML
<div class="row">
<div class="col-xs-12">
<div id="navigation">
Home
Portfolio
</div>
</div>
</div>
CSS
div#navigation {
text-align: right;
padding-top: 10px;
position: fixed;
}
DEMO
https://jsfiddle.net/tbejd5en/2/
I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
I have taken dump of bootstrap3 for menubar.
Its working fine, onclick of main-menu it is displaying sub menu-items.
But what i want is, on hover of main-menu sub menu-items should be displayed.
Following is code of onclick working menu bar:
<div class="jumbotron">
<div class="container">
<p class="lead">Grid Example</p>
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Yamm Megamenu
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">Grid<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</li>
</ul>
</li>
<!--
<With>Offsets </With>
-->
<li class="dropdown yamm-fw">Offset<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
</div>
</li>
</ul>
</li>
<!--
<Aside>Menu </Aside>
-->
<li class="dropdown yamm-fw">Aside<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3"><br>
<h3>3</h3><br>
</div>
<div class="col-sm-9"><br>
<h3>9</h3><br>
</div>
</div>
</li>
</ul>
</li>
<!--
<Nesting>Menu </Nesting>
-->
<li class="dropdown yamm-fw">Nesting<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-12">12
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript is as following:
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
can any one help me out to resolve this.
Thanks in advance.
Try This one:
<script>
$("#nav li").hover(
function(){
$(this).children('ul').hide();
$(this).children('ul').slideDown('slow');
},
function () {
$('ul', this).slideUp('slow');
});
</script>
and make your as like this
<ul id="nav">
I want to stick a div on top when scrolling the window.
Looks like Magellan of Foundation provides similar behavior. But I want to stick my custom elements(the div with attribute data-magellan-expedition="fixed") on top instead of Sub-Nav in Magellan's example.
<body>
<!-- Header and Nav -->
<nav id="nav" class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Foundation Magellan
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Sitemap</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active" >Item1</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>Login</li>
</ul>
</section>
</nav>
<!-- End Header and Nav -->
<!-- Main Feed -->
<div data-magellan-expedition="fixed" >
<div id="calendar" class="row">
<dl id="calendar-per-day" class="sub-nav">
<script>
someCodeToCreateCalendar();
</script>
</dl>
<hr>
</div>
<div class="row">
<div class="large-12 columns">
<div id="baidumap"
style="height:300px; overflow: hidden; margin: 0;"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns">
<p>
very long content can be scrolled............
</p>
</div>
<div class="large-3 columns">
<div class="row">
<div class="large-11 large-centered columns">
<h4>Right side content</h4>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-5 columns">
<p>© 2013 All Rights Reserved</p>
</div>
<div class="large-7 columns">
<ul class="inline-list right">
<li>About</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is full my code to try my thought. I want the calendar and map always stick on top when scrolling the window. But it does not work at all. Does anybody know how to do it?
Use CSS
.div-to-stick {
postion:fixed;
}
This will stick it to the top of the page on scroll.