I am building a phonegap application with iscroll used for scrolling. I am facing a problem when I dynamically append controls to a div and show/hide the div on click. The div shows up and then hides automatically. I have given the code samples below. Would greatly apperciate any help.
First I tried with scroll.refresh() alone, but since it did not work, I tried destroying and recreating according to a forum post in google. But, it does not work either.
HTML
<div class="wrapper" id="wrapper">
<main class="content" id="scroller">
<ul>
<li>
<span id="usertype-link">
</span>
<div class="b-preferences__select b-preferences__select--type" id="search-user-type-div">
</div>
</li>
</ul>
</main>
</div>
JS
$('#search-user-type-div').hide();
$('#usertype-link').bind('click', function () {
if ($('#search-user-type-div').is(":visible")) {
$('#search-user-type-div').hide();
$('#usertype-link').removeClass('open').addClass('close');
}
else {
$('#search-user-type-div').show();
$('#usertype-link').removeClass('close').addClass('open');
}
//scroll.refresh();
searchpreferences.rebuildScroll();
})
rebuildScroll: function () {
scroll.destroy();
scroll = null;
scroll = new iScroll('wrapper', { vScrollbar: true, hScrollbar: false, vScroll: true, hScroll: false, onBeforeScrollStart: null });
//setTimeout(function () {
scroll.refresh();
//}, 0);
}
Any help would be appreciated.
Priyan
I don't have an exact solution, but I recommend to use the most recent version of iScroll (v5). It was totally rebuild and maybe fixes your problem.
Related
I bought this theme a while back and have been chopping it up and modifying it to add/remove functionality. There is this slidein menu that appears on the page once a link is clicked from the navbar menu. The issue is that there is an X button to close the menu that is supposed to toggle/remove a class from the #btn-offcanvas-menu element when it is clicked (#btn-close-canvasmenu is clickable element); it works on the desktop but not the responsive mobile site. The only way it is toggled/removed on mobile is if the original link is clicked again. I have looked at the below questions here, and several others, including trying to use the closest/find options but nothing seems to work. What am I missing?
Desired behavior: the isLeft class should toggle/be removed when the #btn-close-canvasmenu link is clicked. It is on desktop but not mobile.
Javascript not working on mobile but works on desktop.
JavaScript - removeClass not working?
ToggleClass and RemoveClass not working
JQuery - ToggleClass/AddClass/RemoveClass
How to toggle class of closest element jquery toggle class on closest span
This is relevant portion of the index page...
<li id="recent-mobile"><!-- this is hidden by CSS on desktop -->
<a id="btn-offcanvas-menu" href="#">Recent Results</a>
</li>
<li id="recent-results"><!-- this is hidden by CSS on mobile -->
<div class="header-buttons pull-right hidden-xs hidden-sm">
<div class="navright-button">
<i class="fa fa-bars"> Recent Results</i>
</div>
</div>
</li>
<!-- Menu OffCanvas right begin -->
<div class="navright-button">
<div class="compact-menu-canvas" id="offcanvas-menu">
<h3>menu</h3><a id="btn-close-canvasmenu"><i class="fa fa-close"></i></a>
<nav>
<ul class="clearfix">
<li>Home</li>
<li>Features</li>
<li>Pages</li>
<li>Portfolios</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<!-- Menu OffCanvas right close -->
This is the relevant portion of the javascript compact.js file...
$("#btn-close-canvasmenu").on("click", function() {
$("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300), $("a#btn-offcanvas-menu").removeClass("isLeft")
});
$(document).on("click", "#btn-offcanvas-menu, #btn-offcanvas-menu-mobile", {} , function(a){
var id = $(this).attr('id');
if (id === "btn-offcanvas-menu-mobile") {
$("#btn-close-canvasmenu").toggleClass("mobile");
}
return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300) : $("#offcanvas-menu").stop().animate({
right: "0px"
}, 300), $(this).toggleClass("isLeft"), false
});
EDIT (fixed 2/16/20): I edited the js file file to reflect this updated function: $("#btn-close-canvasmenu").on("click", function()
Essentially, what fixed it was changing the selector from #btn-offcanvas-menu to a#btn-offcanvas-menu. Not sure why that worked as opposed to using closest/find method but once I did, it toggled/removed the class on both desktop and mobile correctly. If anyone has anything thoughts on why the a made the difference with the selector, I'd appreciate the feedback as I am not an expert on js/jQuery. Otherwise, this can be considered closed.
Changing the selector in the compact.js file from #btn-offcanvas-menu to a#btn-offcanvas-menu fixed the issue and while this worked, it was the wrong way to correct the issue as connexo pointed out due to the duplicate ids.
The correct way to resolve this was to change the mobile navbar itself so I could use an id specifically for the mobile that only appeared there.
<nav id="mobile-menu" class="site-mobile-menu hidden-lg hidden-md">
<ul>
<li id="recent-mobile">
Recent Results
</li>
</ul>
</nav>
Next I changed the js function that populated the html for the mobile menu to use prepend instead of append so it populated everything above the Recent Results link...
$("#desktop-menu > ul").children().clone().prependTo($("#mobile-menu > ul")), $("#show-mobile-menu").on("click", function() {
$(this).toggleClass("clicked"), $("#mobile-menu > ul").stop(true, true).slideToggle()
});
Then I tweaked the js function to toggle the class to mobile for the #btn-close-canvasmenu if the selector was #btn-offcanvas-menu-mobile to be used later...
$(document).on("click","#btn-offcanvas-menu,#btn-offcanvas-menu-mobile", {} , function(a){
var id = $(this).attr('id');
if (id === "btn-offcanvas-menu-mobile") {
$("#btn-close-canvasmenu").toggleClass("mobile");
}
return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300) : $("#offcanvas-menu").stop().animate({
right: "0px"
}, 300), $(this).toggleClass("isLeft"), false
});
Finally, I tweaked the js function that closed the menu to check the class to determine which id to toggle the isLeft class for...
$(document).on("click","#btn-close-canvasmenu", {} , function(a){
var id = $(this).attr('id');
if ($(this).hasClass("mobile")) {
var container = $("#btn-offcanvas-menu-mobile");
$("#btn-close-canvasmenu").toggleClass("mobile");
} else {
var container = $("#btn-offcanvas-menu");
}
$("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300), container.removeClass("isLeft")
});
I'm working on this theme and I wanted to create this simple nav that would fadeIn on click and fadeOut on click.
<div id="mobile-nav">
<a class="exit"></a>
<div class="logo"></div>
<div class="center">
<li class="skincare">Skincare</li>
<li class="makeup">Makeup</li>
<li class="kits">Kits</li>
<li class="help">Help</li>
</div>
</div>
<script>
$(function() {
$('.exit').click(function(){
$('#mobile-nav').fadeOut();
});
}
</script>
However it doesn't seem to work when I try it out. Other types of script like swiper.js works, but this simple script doesn't work. Is there anything wrong with what I'm doing? I've been checking for errors and jQuery is loading as well.
Live preview here - http://magazine.eldecosmetics.com/
It should be
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClass('fadedOut');
});
});
Your code is
$(function() {
$$('.exit').invoke('observe', 'click', function() {
$('#mobile-nav').toggleClassName('fadedOut');
});
}
In Magento try to avoid jquery conflicts you must use jQuery instead of $ symbol.
For example i have mentioned the correct coding
jQuery(function(){
$$('.exit').invoke('observe', 'click', function() {
jQuery('#mobile-nav').toggleClass('fadedOut');
});
});
Hope it will helps to you guys.
I'm new here and new to JavaScript and JQuery.
I've been working on a little script to get a part of my page switching videos from Youtube.
The problem I have is when a thumbnail has the class of 'selected' added I want to disable the click function to stop the video reloading - is there a simple way around this?
I attempted to put another bit of JQuery in to find the item with the 'selected' class and return false but I know this is wrong because that will stop the default browser behaviour and not the click event.
Also I'd be very grateful for explanations on code suggestions and also suggestions to improve/streamline my JQuery code.
Thanks in advance!
HTML:
<iframe id="vid" width="980" height="551" src="http://www.youtube.com/embed/hziG9Nr6KHU?&rel=0&controls=4&wmode=transparent&modestbranding=1&rel=0&showinfo=1" frameborder="0" allowfullscreen></iframe>
<ul id="videos">
<li id="one">
<a class="selected" href="http://www.youtube.com/embed/hziG9Nr6KHU?&rel=0&controls=2&wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
<img src="http://placehold.it/320x180" />
<span class="AGreg">Vid1</span>
</a>
</li>
<li id="two" class="left">
<a href="http://www.youtube.com/embed/V1bFr2SWP1I?&rel=0&controls=2&wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
<img src="http://placehold.it/320x180" />
<span class="AGreg">Vid12</span>
</a>
</li>
<li id="three" class="left">
<a href="http://www.youtube.com/embed/XLgYAHHkPFs?&rel=0&controls=2&wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
<img src="http://placehold.it/320x180" />
<span class="AGreg">Vid3</span>
</a></li>
</ul>
CSS:
iframe#vid{width:980px;height:551px;}
.selected img{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}
#videos .cursorD a{cursor:default!important}
#videos a:hover img{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}
ul#videos{margin:20px 0;padding:0;}
ul#videos img{}
ul#videos li{float:left;width:320px;}
ul#videos li.left{margin:0 0 0 10px}
JQUERY:
$(document).ready(function(){
$("ul#videos li a").click(function(){
$("iframe").attr("src", $(this).attr("href"));
$(this).closest('ul#videos').find('.selected').removeClass('selected');
$(this).parent().addClass('selected cursorD');
return false;
})
});
CODEPEN: http://codepen.io/PixelsPencil/pen/uljzy
You could remove the event handler on the clicked video like you want to, but that requires a bit of code. An easier and (i.m.h.o. more elegant) solution is to adjust your selector / event handler hookup so it only gets executed on elements that do not have the class "selected":
$(document).ready(function(){
$("ul#videos li a:not('.selected')").click(function(){
$("iframe").attr("src", $(this).attr("href"));
$(this).closest('ul#videos').find('.selected').removeClass('selected');
$(this).parent().addClass('selected cursorD');
return false;
})
});
I have to confess, I didn't test it and I'm not 100% sure on the evaluation priority of :xyz() type selectors. To be more certain of what is happening, you could either change the single selector to a selector chain:
$("ul#videos").find("li").find("a:not('.selected')").click( ... );
or even better, hook the event handler to a parent object, but only have it trigger on distinct elements (also expressed through a selector):
$("ul#videos").on("click", "li a:not('.selected')", function() { ... });
This has the added charm that the handler will automatically work for lis that are added after wiring the event handler.
This seemed to work - asked a few people for help and a colleague came up with this still not sure why/how this works but it does.
var VideoLoader = {
registerClickHandlers: function() {
$("ul#videos li a").click(VideoLoader.showSelectedVideo);
},
showSelectedVideo: function() {
if(!VideoLoader.checkVideoIsAlreadyPlaying(this)) {
$("iframe").attr("src", $(this).attr("href"));
$(this).closest('ul#videos').find('.selected').removeClass('selected cursorD');
$(this).parent().addClass('selected cursorD');
}
return false;
},
checkVideoIsAlreadyPlaying: function(clickedObject) {
return $(clickedObject).parent().hasClass("selected");
}
};
$(document).ready(VideoLoader.registerClickHandlers);
Updated my Codepen here: http://codepen.io/PixelsPencil/pen/uljzy
thanks for replying again! I've had a play and put something up on jsfiddle but think it's more broke now than it ever was haha. When I click something with notselected class all thumbs change class and when I click a selected class the video loads in the parent instead of switching the attr in the iframe - any ideas where I've gone wrong?? jsfiddle.net/wvPnA
I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,
The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree
You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here
This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()
Program: Eclipse (Phonegap)
Phone: HTC Desire (2.2.2)
I've been playing around with the iscroll plugin for some time now but it seems i can't get it to work. When i test it in both the android emulator and my phone it keeps scrolling back to the the top. Also the LogCat gives the following line:
"Miss a drag as we are waiting for webcore's response for touch down"
Javascript:
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('scroll-content', { snap:true, momentum:false, hScrollbar:false, vScrollbar:false});
setTimeout(function () { theScroll.refresh() }, 0);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
HTML:
<div id="wrapper">
<div id="main-content">
<div id="pages">
<div id="map" class="current">
</div>
<div id="camera">
<button class="camera-control" onclick="capturePhoto();">Capture Photo</button>
<div style="text-align:center; margin:20px 0 0 0;">
<img id="cameraPic" src="" style="width:50%; height: 50%;"/>
</div>
</div>
<div id="buzz">
<div id="scroll-content">
<ul id="your-tweets"></ul>
</div>
</div>
<div id="info">
<p>Informatie Evident</p>
</div>
</div>
</div>
</div>
I'm populating the list with tweets called in with JSON. Hope somebodey can help!
The full iScroll syntax is: iScroll(element_id, object options).
Options are here.
Among the options we have bounceLock (if set to true the scroller stops bouncing if the content is smaller than the visible area. Default value is false).
Hope this is what you were searching for
To keep it from scrolling to the top you will need to create the scroll object after the first time you "show" your element. To dynamically add data to this element and maintain a proper scroll with scrolling bars, you can use the following script after each time you add data to the list:
var myScroll = null; //set this initially
// Check if scroll has been created, if so, destroy and recreate
if (myScroll != null){
myScroll.destroy();
}
myScroll = new iScroll('call-list', { desktopCompatibility: true, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true });