I am working with the latest version of Flexslider from Woo Themes and Bootstrap 3.3.5.
I am wondering if there is functionality for swiping with the mouse pointer? It has left and right arrows and touch swipe, but I can't seem to find anything based on swiping with the mouse pointer from a PC/laptop.
This is all that I currently have so far:
<div class="flexslider">
<ul class="slides">
<li style="background-color: aqua;">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
<li style="background-color: yellow;">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
</ul>
</div>
And my JavaScript code:
$(document).ready(function () {
$('.flexslider').flexslider({
animation: "slide",
pauseOnHover: true,
slideshowSpeed: 3000,
after: function () {
$('.flexslider').resize();
}
});
});
I have looked through the docs but can't find anything.
I did that years ago, so not shure it will still work on most recent release of Flexslider; anyway maybe i will point you in the right direction...
Basically you should add a drag event to flexslider, so:
1) first of all implement the jquery.event.drag plug in
2)in jquery.flexslider.js add a block to support the new event, like this:
if (vars.drag) {
slider.bind('drag', function(event, delta) {
event.preventDefault();
var target = (delta.deltaX < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, vars.pauseOnAction);
});
}
you can easily find where to place it just finding where the other events support are, like this:
if (vars.mousewheel) {
...
}
if (vars.drag) {
...
}
3) Add the event to the defaults ones:
$.flexslider.defaults = {
...
drag: false,
...
}
4) Finally activate it when you call the Flexslider instance in your HTML page:
$('.flexslider').flexslider({
animation: 'slide',
...
...
drag: true
});
Related
Trying to get this script to work (basically want the user to scroll the html page I made, and when it reaches a certain point, to have the text change colour).
Here's what I've done so far:
jQuery(document).ready(function(){
if(jQuery(window).scrollTop() > 20){
jQuery(".changeme").addClass("changeme2");
}
});
The css:
.changeme{
height: 300px;
}
.changeme2{
color: blue;
}
and the HTML:
<html>
<head>
<title>Scroll effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="scroll.js"></script>
</head>
<body>
<div class="changeme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="changeme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="changeme">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Its something very simple, but I cant get it to work. Any ideas?
The code is working perfectly but you are not detecting the document on the scroll, use below code snippet for reference.
<script>
jQuery(document).ready(function(){
jQuery(document).scroll(function(){
if(jQuery(window).scrollTop() > 20){
jQuery(".changeme").addClass("changeme2");
}
});
});
</script>
First, get an updated version of jQuery if you can. And the shorter $ instead of jQuery can also make it much easier to use jQuery.
To do something when you interact with the page you should listen for events. In this case listen for the scroll event. You can listen for events with the on method.
$(document).ready(function() {
let $window = $(window);
let $changeMe = $('.changeme');
$window.on('scroll', function() {
if ($window.scrollTop() > 20) {
$changeMe.addClass('changeme2');
} else {
$changeMe.removeClass('changeme2');
}
});
});
I am using GSAP. I am getting the issue on the smooth scroll.
I have two pages. home.php and aboutus.php. I have one menu and I am adding dynamically on all the pages.
I am on the home page and if I click on contactus then smooth scroll is working and my URL is http://localhost:8080/example/smoth1.php#contactus
Now my issue is, I am on aboutus page and when I click on contactus i am getting the URL http://localhost:8080/example/aboutus.php#contactus
It's not redirecting on the homepage because I have contactus section on the home page.
I tried <li>Contactus</li> but then my smothscroll not wokring.
Would you help me out in this?
$(document).ready(function() {
var controller1 = new ScrollMagic.Controller();
controller1.scrollTo(function(target) {
TweenMax.to(window, 3, {
scrollTo: {
y: target - 65, // scroll position of the target along y axis
autoKill: true, // allows user to kill scroll action smoothly
},
ease: Cubic.easeInOut
});
});
// Bind scroll to anchor links
$(document).on("click", ".smothscrollclass a[href^='#']", function(e) {
var id = $(this).attr("href");
if ($(id).length > 0) {
e.preventDefault();
// trigger scroll
controller1.scrollTo(id);
// If supported by the browser we can also update the URL
if (window.history && window.history.pushState) {
history.pushState("", document.title, id);
}
};
});
});
.col1 {
min-height: 1000px;
}
<div>
<ul class="main_list smothscrollclass">
<li>Home</li>
<li>Contactus</li>
<li>Aboutus</li>
</ul>
</div>
<div class="col1" id="home">
<h2>Home</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="col2" id="contactus">
<h2>Contactus</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>
How can I replicate the effect used on Apple's 5k iMac website where scrolling down gives the effect of zooming out? Here is the site:
http://www.apple.com/imac-with-retina/
This will do it for most browsers:
window.onmousewheel= function(e) {
e.preventDefault();
if((e.wheelDelta || -e.detail) < 1) {
document.body.style.zoom--;
}
else {
document.body.style.zoom++;
}
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Can someone tell me how to scroll the content.
For example I have a link like this
content3
When the user click that link I would like to scroll the content to div content3.
Can someone tell me how to do this using jQuery?
Here is my full code.
<div class="container">
<div class="nav">
<ul>
<li><a class="active" href="#">content1</a></li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>
</div>
<div id="content">
<div id="content1" class="content1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content2" class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content3" class="content3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content4" class="content4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
You don't need jQuery to do this - simply use href="#content3" to scroll to the element with an id of "content3".
Using scrollTop :
Example :
<a scrollTo="content3" href="#">click me to scroll to the div "content3"</a>
$(document).ready(function(){
$('a').on('click',function(){
$("#container").animate({ scrollTop: $('#'+$(this).attr('scrollTo')).offset().top }, 1000);
});
});
jQuery has scrollTop and scrollLeft methods to do this.. if it is merely vertical scrolling, then scrollTop(yVal) will do the trick
http://api.jquery.com/scrollTop/
Don't know what you are attempting to do, but go check out wowslider.com
Using the $('body').scrollTop atribute like so:
$('#button1').click(function(){
var element = $('#content1'),
elemTop = element.offset().top, // You get the element top to know where to move the window
windowTop = elemTop + 20; // You can add some pixels so the element dont be shown on the very edge
$("html, body").animate({
scrollTop: windowTop // Animate the change so it doesnt seem invasive
}, "fast");
}
});
Try this...
$('a').on('click', function (){
$('html,body').animate({
scrollTop: $('#'+$(this).text()).offset().top},
'slow');
});
See this JsFiddle Example
Greetings...
Based on your markup it appeared you wanted to use the anchor text to determine where to scroll. If you click the content1 link it will scroll you to <div id="content1">.
$('.nav ul li a').click(function(){
$('html, body').animate({
scrollTop: $('#' + $(this).text()).offset().top
}, 2000);
});
Heres a fiddle as an example: http://jsfiddle.net/ZG3zh/
In order to scroll with HTML you need to set the href of the anchor #+'id of element' you are scrolling to.
Example:
I want to scroll to <div id="scrollHere">Hello World</div>
using an anchor tag or a use the code, Click Me!
I'd really like to be able to "activate" / "open" a Zurb Foundation Accordion via the URL with the accordion pane in questions hash.
So like example.com/page#accordion1
Is this possible already with Foundation or is it easy to implement? I honestly haven't got a clue :-/
Thanks in advance for any help given!
You can do this by adding an unique attribute to each accordion title <div class="title" data-ref="panel-1"> In this case I added a data-ref attribute. Then you will need to add some jQuery to look at the hash and if it is a accordion panel, then click that panel.
HTML
<ul class="accordion">
<li class="active">
<div class="title" data-ref="panel-1">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-2">
<h5>Accordion Panel 2</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title" data-ref="panel-3">
<h5>Accordion Panel 3</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
jQuery
jQuery(function() { // Document ready shorthand
// Get the hash and remove the #
var hash = window.location.hash.replace('#', '');
if (hash != '') {
// Cache targeted panel
$target = $('.title[data-ref="' + hash + '"]');
// Make sure panel is not already active
if (!$target.parents('li').hasClass('active')) {
// Trigger a click on item to change panel
$target.trigger('click');
}
}
});
View in action
Edit code
One note: When in jsfiddle edit the hash will not work. Need to view in the full mode.
UPDATE
If you want to have a link that opens up a panel and updates hash. You will need to add a specific class to the link. In my example I add panel-btn
HTML
Goto Panel 2
jQuery
$('.panel-btn').click(function(e){
// Get the links href and remove the #
target_hash = $(this).attr('href').replace('#','');
// Click targeted panel
$('.title[data-ref="' + target_hash + '"]').trigger('click');
// Update hash, so that if page is refreshed, target panel will open
window.location.hash = target_hash;
// Stop all default link functionality
return false;
});
Updated jsfiddle view
Updated jsfiddle code
If you are looking for more of a history thing when each panel is clicked. You will need to add a click event to each .title and get its data-ref and change the hash to that, like this:
$('.title').click(function(){
// Get the data-ref
hash = $(this).attr('data-ref');
// Set hash to panels hash
window.location.hash = hash;
});
If you are using Foundation 5:
Foundations Accordion has a custom event click.fndtn.accordion you can use. It will take care of the proper open/closed states:
jQuery(document).ready(function($) {
var hash = window.location.hash;
if (hash != '') {
$('[data-accordion] [href="' + hash + '"]').trigger('click.fndtn.accordion');
}
});
See the example here, it will programatically open the second tab upon page load by detecting a window hash (simulated by a dummy hash in the code):
http://jsfiddle.net/ynyrrm99/
Link to the page without setting the a link to data-tab or any other settings. As of foundation 5.5.1 it will parse the uri with a hash on page load... meaning it doesn't matter how you set the originating link.
Set a variable to the hash in the URL, give the content panel div the same id as in your hash. Then add a class of .active to the panel with the same id as your link.
if(window.location.hash) {
var hash = window.location.hash;
$( hash ).addClass( "active" );
}