jQuery Unslide - Touch doesn't work - javascript

I already solved this, and I'm only posting to help others save some time.
I am using unslider for a business website, a website I'm making responsive, so the feature of adding touch support to the slider is appealing. Unfortunately it doesn't work straight out of the box, as the author claims.

UPDATE
The unslider plugin I used, was outdated. I downloaded it from unslider.com where I first found it( it's still an outdated version there), hence I had the difficulties.
If you need to get the latest version, go to: https://github.com/idiot/unslider/
And if you want to see my issue report: https://github.com/idiot/unslider/issues/69
The problem is that the author hasn't updated his project in 4 months, and since then the swipe event has been moved from $.event.swipe to $.event.special.swipe.
The problem occurs in line 108 of the unslider plugin, where it test for the existence of the swipe plugin.
108: if($.event.swipe) {
109: this.el.on('swipeleft', _.prev).on('swiperight', _.next);
Just change it to:
108: if($.event.special.swipe) {
109: this.el.on('swipeleft', _.prev).on('swiperight', _.next);
It's an easy fix, but will take some googling to figure out.
If you want to be sure it will work with earlier versions, you can do this:
108: if($.event.special.swipe || $.event.special.swipe) {
109: this.el.on('swipeleft', _.prev).on('swiperight', _.next);
But I don't recommend that.
Also, the author doesn't mention this, but the swipe plugin page does, you need to include jquery.event.move in addition to jquery.event.swipe in your scripts.
I hope this helped someone :)
To answer the comment below:
Remember to include all files, in the right order, and remember all of them:
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.event.move.js"></script>
<script type="text/javascript" src="/scripts/jquery.event.swipe.js"></script>
<script type="text/javascript" src="/scripts/unslider.min.js"></script>

This didn't work for me, but after extensive tweaks I got it to work smoothly. I blogged step by step what I did, but not why.
http://frazer.livejournal.com/21898.html
I hope that helps, especially people new to drupal.
In short - I added this to my page and I got responsive movement:
var wrap = jQuery(".slides_wrap"),
slides = wrap.find(".img_slide"),
width = slides.width();
slides
.on("move", function(e) {
// Move slides with the finger
// banner has moved -100% when one slide to the right
var left = 100 * e.deltaX / width;
wrap[0].style.left = parseInt(wrap[0].style.left.replace("%", ""))+left+"%";
})
.on("moveend", function(e) {
setTimeout(function(){
var left = parseFloat(wrap[0].style.left.replace("%", ""));
var left_rounded = Math.round(left/100)*100;
if(left%100!=0){
jQuery(".slides_wrap").animate({"left":left_rounded + "%"});
}
},800);
});

As of today (November 2014) it seems the swipe functionality was replaced by move. The plugin's url is http://stephband.info/jquery.event.move/ . Just import this one instead of swipe.
I hope someone find this useful. Had to check the commits to found out.

I am bumping on this subject as I am a real noob and had trouble to install the Jquery.event.swipe.js module
It's now solved, but here a few things noobs like me would make sure to check :
make sure you have both github.com/stephband/jquery.event.move.js and github.com/stephband/jquery.event.swipe.js in your projet folder
make a reference to those 2 files in your html file
make sure you have the unslider.js file in your projet folder as well (I had the unslider.min.js file instead which wasn't complete enough to make the swipe plugins work)
No extra javascript code is necessary in the html file, it should work with the above (at least it did for me)
both very good free tools, thanks to the coders

Related

Self-Replicating Scammer Spammer - Randomizing Popup Positioning (Chrome)

Self-Replicating Popup WORKS! However in CHROME the popups just stack on top of each other. WAS looking for assistance on how to make them appear at random positions. Have edited question now that it's solved.
To give you an idea, here is the code I WAS using to make the popup replicate itself (JS only, I don't need to show you how to implement full-page YT videos):
<script type="text/javascript">
window.onload = function(){ window.open("file:///C:/Windows/System32/popup.html", "", "width=300, height=200") }
window.onunload = function(){ window.open("file:///C:/Windows/System32/popup.html", "", "width=300, height=200") }
</script>
The idea is that the popup is just a HTML file hidden in the VM (hence why no JQuery, AJAX, etc).
Finally: I would really appreciate the help. Whoever is the first to post the best solution gets best answer, and shoutout in credits of the released app and future YT videos (demos and DIY tutorials). Also be kind, web dev isn't my strong suit!! Thanks guys.
NOTE ABOUT ANSWER: Syntax has slight mistake at the end (I didn't even notice at first took me about 10 minutes of staring at it scratching my head to notice.
window.open('about://blank', '', 'width=300, height=200, top='+(Math.random()*screen.height)+', left='+(Math.random()*screen.width)+'')
It's exactly the same as the answer supplied by Villa7_ but you missed the [ + ' ' ] in between the two parentheses at the end, and for some reason dreamweaver (I know, leave me alone) kept flagging up a syntax error whenever I added the semicolons...
Thank you though, this was EXACTLY what I was asking for :) for some reason I can't give a vote though, only select your answer. Will give you the shoutouts I promised :) Very simple, love it!
random position:
window.open('about://blank', '', 'width=300,height=200,top='+(Math.random()*screen.height)+',left='+(Math.random()*screen.width));

$ionicScrollDelegate.scrollTop() doesn't allow me to scroll up manually after it scrolls down my list

I have a problem with using $ionicScrollDelegate.scrollTop()
I need to scroll down my book list to appropriate book after going out from the reader. I desided to use $ionicScrollDelegate.scrollTop() for this purpose.
It works, but I cannot scroll up my list manually after that.
Maybe someone knows why it happens.
Here is my code:
$timeout(function(){
var BooksListScroll = $ionicScrollDelegate.$getByHandle('BooksListScroll');
$location.hash("main" + $rootScope.currentBookCode);
BooksListScroll.scrollTop(true);
}, 500);
If you are using android platform to do a test, remove the 'true' value on the function. Ex:
BooksListScroll.scrollTop(true);
to
BooksListScroll.scrollTop();
Do a try.. IOS is working fine with the scroll animation but on android the scroll animation make the view freeze! Weird! :(
UPDATE (SOLUTION):
Okay I found the solution.. It seem we need to set 'jsScrolling: true' instead of by default is 'jsScrolling: false' for android.
Please modified/edit this on 'ionic-angular.js'
Hope it help others :)

Override js-events

It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.
Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}

jQuery library interfering with Javascript for navbar & filterable portfolio small issue - bootstrap 3

Ok so I've spent the past 3 days trying to figure this out and Im so close! I actually went back and forth between a couple tutorials for the filterable portfolio and ended up using:
http://www.evoluted.net/thinktank/web-development/jquery-quicksand-tutorial-filtering
Now Im having a couple of issues here.
jsfiddle: http://jsfiddle.net/VeaK9/
Issue 1: I have a .js file to make my navbar stay fixed to the top of the page after you scroll past the hero unit. Now this file works, but when I include the .js library required for my filterable portfolio neither the portfolio section works OR the navbar!
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
And the code for the navbar is:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});
Issue 2: Now the second issue is the big one (something small for someone else out there lol) so of course in the tutorial I used for the portfolio, bootstrap was not used! And I didn't want to copy all of the css from the tutorial so I tried to make it work with bootstrap and I ran into this issue, there is an extra space on the left of the images and they actually overlap each other a little bit and pop out of the container!
Can anyone take a second and check this out? Please lol thank you guys!!
Looks like your quicksand plugin was using a very old version of jQuery that was incompatible with the other one you were using. So we simple use the Jquery Migrate Plugin and we are good to go.
So I removed the old version of jquery you were using with that plugin and added this at the end of your HTML:
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
Here is the fiddle with it working!
http://jsfiddle.net/hKvCN/
Answer to your second question
I'm not sure if I entirely understand the second question but here is a swing.
Try changing:
<div class="container portfolio">
to
<div class="container-fluid portfolio">
And let me know if that is the behavior you want

jQuery .click(function() not working in IE7

Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D
Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>
I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?
The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D
I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });

Categories

Resources