I'm trying to have a slideshow with next / previous buttons. I'm using NivoSlider for the cool transitions, and raphaelJS for animated next / previous buttons. My only issue is that there is no built in way to give an element to Nivoslider that represents the next button. Because my element is a triangle that animates I need someway to let NivoSlider know that I want $(triangle.node) to represent next & previous. The library is private (I think that's how you express that) so it can't see the triangle.node global. Any ideas?
Add this code before you initialize Nivo Slider and replace the parameters with your triangleNodePrev / Next. This has the advantage of disabling the default action on your links so that if you use href="#" the browser doesn't scroll back to the top of the page.
$('#previousButton, #nextButton').on('click', function (e) {
// Prevent the link from being followed
e.preventDefault();
// Initialize variables
var buttonId = this.id,
buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';
// Trigger the slider button
$('.nivo-directionNav').find(buttonClass).click();
});
$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})
That should do it
but in any case the commands you need are
$(".nivo-directionNav .nivo-prevNav").click()
and
$(".nivo-directionNav .nivo-nextNav").click()
<script type='text/javascript'>
$(document).ready(function() {
jQuery("#previousButton').click(function (e) {
e.preventDefault();
jQuery(".nivo-directionNav .nivo-prevNav").click();
});
jQuery("#nextButton').click(function (e) {
e.preventDefault();
jQuery(".nivo-directionNav .nivo-nextNav").click();
});
});
</script>
Related
$("#run_anim").click(function(){
var box = $('.anim_box')
box.show()
//going to add more this is just for testing
})
On my site (torin.eschweb.com) I am trying to make an animation and so far all I have is the part to make the div show when you press the button but nothing is showing up.
Please wrap adding event listener to a jQuery ready method
$(document).ready(function() {
$("#run_anim").click(function(){
var box = $('.anim_box')
box.show()
//going to add more this is just for testing
});
});
I got JPanelMenu working on a button click, using the methodology described in the manual.
I am using two Hammer.JS actions on my mobile webapp, swipe right to return to the index page, and would like to use swipeleft to show the menu.
Here is the Hammer code, with the JPanelMenu trigger.
This does activate the menu, however, once the menu is closed, and then reopened with another swipe, the width of the menu appears to have doubled and filled with whitespace, the width increases with each subsequent activation.... Any ideas?
<script type="text/javascript">
var hammer = $('body').hammer();
hammer.on('swipeleft', function(event) {
var jPMx = $.jPanelMenu();
jPMx.on();
jPMx.trigger(true);
});
</script>
Commenting out the jPmx.on() seemed to fix this, to allow both swipe and click a button to activate the menu.
<script type="text/javascript">
var hammer = $('body').hammer();
hammer.on('swipeleft', function(event) {
var jPMx = $.jPanelMenu();
// jPMx.on();
jPMx.trigger(true);
});
</script>
I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
Do you know any dropdown menu scripts out there written in plain javascript, but not relying on jQuery?
I know how to achieve this with CSS, but I'd also like to add a nice fade effect and make it wait 1 second after the mouse is outside the menu, then close it if the mouse doesn't come back within the menu area.
I think I could implement the fade effect using the CSS "transition" property, but I have no clue on how to add the delay on mouseOut
I like this one, it's only 1.2 KB, the code is simple to modify:
http://www.scriptiny.com/2008/11/drop-down-menu/
You can change the time by modifying the "t" variable.
You could use the transition-delay-property and do the following:
remove the "delay-class", when the user enters the menu
add the "delay-class" when the user leaves the menu
See: https://developer.mozilla.org/en/CSS/transition-delay
Or you could do it like this (note: just pseudo code):
var timer = null;
function onenter() {
showSubMenu();
clearTimeout(timer);
timer = null;
}
function onleave() {
overMenu = false;
timer = setTimeout( function () { hideSubMenu(); } , 1000 );
}
UPDATE:
I was able to get my scroller working as desired but I feel like I have hacked around the actual issue and would love it if anyone has a more solid answer, I've updated and noted in the snippets below the new jQuery I'm using.
I'm using iScroll-4 (http://cubiq.org/iscroll-4) for an iPad/Android web app, everything's working perfectly with the swipes and scrolling but I have a table of contents at the beginning of the app that allows users to jump to specific areas of the scroller --
I'm using the iScroll function scrollToElement(element, duration) in order to jump to the different areas. Also using scrollToPage(page, duration) to allow the user to manually navigate forward and backward one page at a time.
While watching the console logs the currPageX variable updates when I navigate with the scrollToPage function and when I swipe, but when using the scrollToElement the currPageX variable does not update.
Therefore if I jump to an element and then navigate forward with scrollToPage('next', 0) it will go backwards and navigate me to the next page after the table of contents.
I have tried using the scroll.refresh() function after scrollToElement, before, putting the function inside a timeout, etc. and I can't figure out why the currPageX is not updating.
Here's a snippet of the jQuery code that I'm using the two different functions:
// TO NAVIGATE FORWARD AND BACKWARDS
$('span.control').on('click', function() {
var slideDir = $(this).attr('data-dir');
if (slideDir == 'prev') {
var tehPg = tehScroll.currPageX-1;
} else if (slideDir == 'next') {
var tehPg = tehScroll.currPageX+1;
}
tehScroll.scrollToPage(tehPg, 0);
return false;
});
// TO JUMP FROM CONTENTS
$('li[data-page="toc"] span').on('click', function() {
var toPage = $(this).attr('data-page');
tehScroll.scrollToElement('li[data-page="'+toPage+'"]', 800);
// ADDED THE FOLLOWING LINE TO MANUALLY SET currPageX after scrolling!
tehScroll.currPageX = $('#slides li[data-page="'+toPage+'"]').index();
return false;
});
Did you consider using jquery-mobile-iscrollview widget plug-in? - there is a function scrollToPage(pageX, pageY, time), works well for me...
best
M