I am using jQuery.LocalScroll plugin to allow my website visitors to navigate my site with a smooth scrolling effect. It's working great with original header menu. But I am trying to function with cloned header. Here is the code:
$('.sf-menu').localScroll({lazy: true});
if($('header.header-sticky').length == 0) {
$('[data-sticky-header="true"]').before($('[data-sticky-header="true"]').clone().addClass("header-sticky"));
}
An here is the HTML Markup
<header class="op_style" data-sticky-header="true">
<div class="clearfix header-desktop">
<div class="large-3 medium-3 columns">
<div class="site-logo">
<h1>Logo</h1>
</div>
</div>
<div class="large-9 medium-9 columns">
<nav class="main-nav">
<ul id="menu-for-one-page-portfolio" class="sf-menu right">
<li>Home</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
Try to use .clone(true) - it clones an element with all event handlers to it
Related
I am trying to create my custom full width menu using a simple hover function but my problem is as soon the mouse move out of the menu the subdiv also hides.
Can you help me with my code?
Here's my nav
HTML
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
JS
$('#open-block-menu').hover(function() {
$('.top-block').slideDown();
}, function() {
$('.top-block').slideUp();
});
Instead of hover method, you could use mouseenter and mouseleave as below, so every-time when mouseenters it show below menus and on mouse pointer leave below menu hides again.
$('#open-block-menu').on("mouseenter",function() {
$('.top-block').slideDown();
});
$('.top-block').on("mouseleave",function() {
$(this).slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
Try to change ur markup like this:
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
</li>
</ul>
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});
Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.
Merged with scrollTo/localscroll.js not working at all.
hey I was just trying to use this javascript plugin but it won't work for some reason..
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
</div>
js:
$(document).ready(function() {
$('#menu').localScroll();
});
you can see it live here: www.djhighpotentials.nl