I have trouble in getting materialze.js and fullpage.js working together. Here is an jsfiddle to demonstrate the problem. Fullpage.js is setup to jump in responsive mode at 640px. In normal-mode (641px and above) everythings works as expected. In responsive-mode everythings works fine, as long the Slideout-Menu (materialize.js) is not used. After the Slideout-Menu is been used, mouse-scrolling stopped completely. While keyboard-scrolling works fine.
See jsfiddle.net
materialize markup
<nav id="nav">
<ul id="sidenav" class="side-nav">
<li data-menuanchor="a">a</li>
<li data-menuanchor="b">b</li>
<li data-menuanchor="c">c</li>
<li data-menuanchor="d">d</li>
<li data-menuanchor="e">e</li>
</ul>
<ul id="quick-links" class="right">
<li data-menuanchor="b">b</li>
<li data-menuanchor="c">c</li>
</ul>
<ul>
<li><a id="sidenav-toggle" data-activates="sidenav" href="#!">menu</a></li>
</ul>
</nav>
fullpage markup
<div id="fullpage">
<div id="sa" class="section">a</div>
<div id="sb" class="section">b</div>
<div id="sc" class="section">c</div>
<div id="sd" class="section">d</div>
<div id="se" class="section">e</div>
</div>
materialized js
$("#sidenav-toggle").sideNav({
closeOnClick: true
});
fullpage js
$('#fullpage').fullpage({
menu: '#nav',
anchors: ['a', 'b', 'c', 'd', 'e'],
normalScrollElements: '#nav',
paddingTop: 0,
paddingBottom: 0,
responsiveWidth: 640
});
Materialize menu is somehow removing the overflow: visible; property applied to the body element by fullpage.js on responsive mode.
Just add it again when closing the menu:
$(document).on('click', '.drag-target', function(e) {
//in responsive mode?
if($('.fp-responsive').length){
$('body').css('overflow', 'visible');
}
});
Reproduction online
Related
Im trying to make my accordion collapse on click on the next tab, I am having problems. I believe the code is correct, the tabs open. but if i click on tab 2 tab 1 remains open.
also the arrows are not pointing down if tab is open.
HTML
<ul class="aside-nav d-all grey-border ">
<li class="aside-open-close active">
<a class="aside-opener" href="#">tab1</a>
<div class="slide">
content
</div>
</li>
<li class="aside-open-close ">
<a class="aside-opener" href="#">tab2</a>
<div class="slide">
content
</div>
</li>
<li class="aside-open-close ">
<a class="aside-opener" href="#">tab3</a>
<div class="slide">
content
</div>
</li>
</ul>
JQUERY
// open-close init
function initOpenClose() {
jQuery('.open-close, .aside-open-close').openClose({
activeClass: 'active',
opener: '.opener, .aside-opener',
slider: '.slide',
animSpeed: 400,
effect: 'slide'
});
jQuery('.nav').openClose({
activeClass: 'active',
opener: '.nav-opener',
slider: '.nav-slide',
animSpeed: 400,
effect: 'slide'
});
jQuery('#nav .drop').each(function(){
var holder = jQuery(this);
var opener = holder.children('a');
var drop = holder.children('.drop-holder');
opener.on('click', function(e){
e.preventDefault();
holder.toggleClass('hover');
});
jQuery('body').on('click', function(e){
if(holder.hasClass('hover') && !jQuery(e.target).closest(holder).length) holder.removeClass('hover')
});
});
}
If you set your [ul] tag as accordion it works fine
Adding this
$('.aside-nav').accordion();
Working fiddle
I'm using jQuery lightSlider as image slider. I want to have sliders inside bootstrap pills (one slider per pill). Nevertheless, I have found the following situation: In the first pill the slider is OK. In the second pill the slider content is not displayed (resizing the window brings up the slider content!). I don't see how to solve this problem. Any help will be sincerely appreciated.
My (simplified) html:
<div>
<ul class="nav nav-pills">
<li class="active"> <a data-toggle="pill" id="pill1" href="#s1">Pill 1</a>
</li>
<li> <a data-toggle="pill" id="pill2" href="#s2">Pill 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-12 tab-pane fade in active" id="s1">
<ul id="slider-1">
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
<li>
<p>tree</p>
</li>
</ul>
</div>
<div class="col-md-12 tab-pane fade active" id="s2">
<ul id="slider-2">
<li>
<p>uno</p>
</li>
<li>
<p>dos</p>
</li>
<li>
<p>tres</p>
</li>
</ul>
</div>
</div>
The javascript:
function initSlider(sliderId) {
$('#'+sliderId).lightSlider({
item:2,
loop:false,
slideMove:1
});
}
initSlider('slider-1');
initSlider('slider-2');
And the Jsfiddle reproducing the problem: https://jsfiddle.net/sedtjchs/4/
Thank you for your help!
Problem: You are trying to call lightSlider on the content(#s2) which was already hidden so plugin can not calculate height, width(and etc) on that element.
Add active class to the second .panel-pane.
Jsfiddle
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
I have the same problem, but the Alex's solution doesn't work for me as my tab wrapper doesn't have a fixed height so it will show blank gap under the 1st tab at the first load.
The Thành Nguyễn's solution is working for me. Basically it's refreshing the slider everytime you click on the tab navigation, so then LightSlider will be able to calculate the active container height.
Here's the complete script :
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#slider-2').lightSlider({
item:4,
loop:false,
slideMove:2,
pager: false,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
speed:600,
responsive : [
{
breakpoint:480,
settings: {
item:2,
slideMove:1
}
}
]
}).refresh();
});
});
I decided to use an HTML5up template (Verti => here) as the basis for a WordPress theme for a client. The client needed me to deploy early, so the site is live=> here. The side navigation doesn't work on IOS/ safari, or Chrome on an iPhone. Those are the only browsers with problems
Here's the javascript called in the footer:
$('.banner').unslider({
arrows: true,
fluid: true,
dots: true,
fade:true
});
// Find any element starting with a # in the URL
// And listen to any click events it fires
$('a[href^="#"]').click(function() {
// Find the target element
var target = $($(this).attr('href'));
// And get its position
var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};
// jQuery will return false if there's no element
// and your code will throw errors if it tries to do .offset().left;
if(pos) {
// Scroll the page
$('html, body').animate({
scrollTop: pos.top,
scrollLeft: pos.left
}, 1000);
}
// Don't let them visit the url, we'll scroll you there
return false;
});
$("#mygallery").justifiedGallery({
rowHeight : 160
});
And here's the navigation:
<div id="header-wrapper">
<header id="header" class="container">
<!-- Logo -->
<div id="logo">
<h1>Culinary Craft</h1>
<span>Catering Co.</span>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current">Home</li>
<li>
Services
<ul>
<li>
Services
<ul>
<li>Catering</li>
<li>Liquid Catering</li>
<li>Weddings and Corporate Events</li>
</ul>
</li>
<li>Planning</li>
<li>Execution</li>
<li>Menus</li>
</ul>
</li>
<li>About
<ul>
<li>Why Culinary Craft?</li>
<li>Our Executive Team</li>
<li>Frequently Asked questions</li>
<!--<li>Orange County</li>-->
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
I'm trying to figure out why the nav wouldn't work, but only for these specific browsers.
Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});
I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});
As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa
I have my template file for home page, Home-template.php, and in it I have a sliding menu html.
This is my script for sliding menu:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("fast");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("fast");
});
$(".toggle a").click(function () {
$(".toggle a").toggle();
});
e.preventDefault();
});
and both jquery and this script are loaded on the page but the slide effect doesnt work, its only poping up and down without effect.
Any help?
here is html code:
<div id="panel">
<nav id="main-menu">
<ul>
<li>Home</li>
<li>About me</li>
</ul>
</nav>
</div>
<div class="toggle"><a id="close" style="display: none;position: absolute;right:5px;top:5px;" class="close" href="#"></a></div>
<div class="toggle" style="position: absolute;right:10px;top:10px;"><a id="open" class="open" href="#"></a></div>
here is a link of a page:
http://pavlovic.com/about-me/
Well for one the e is not defined and secondly I'm not sure how you are including your js so
you should read this: http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/
try the following code which works for me
$(this).effect('slide', { direction: 'down'}, 500);
for the slide effect to work in wordpress along with jquery file the jquery-effects-core and jquery-effects-slide has to be also loaded.
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-slide');
this code also works:
$('#test').effect( "slide", "right" );