So I have this code that whenever a page is onLoad, the user is not able to click any of the links unless it has finished loading the page in a specific region.
// note: this events are for the specific li tags of this.ui.liLink
'events' : {
'click #ui.catalogTab' : 'showCatalogsTabView',
'click #ui.transcriptTab' : 'showTranscriptsTabView',
'click #ui.facilitationTab' : 'showFacilitationTabView'
},
'ui' : {
'liLink' : '.catalog-menu > ul > li'
},
'enableTabClick' : function () {
this.ui.liLink.removeClass( 'disabled' );
this.ui.liLink.unbind( 'click.select' );
},
'disableTabClick' : function () {
this.ui.liLink.addClass( 'disabled' );
this.ui.liLink.bind( 'click.select', false );
}
this is working perfectly on desktop but when I use it on mobile devices, .bind() is not working and does not disable the event listener for click events. How do I do it on mobile?
So I finally solved my problem. In mobile, the event you have to listen for is touchstart. So I added it to my current code.
'enableTabClick' : function () {
this.ui.liLink.removeClass( 'disabled' );
this.ui.liLink.unbind( 'click.select touchstart' );
},
'disableTabClick' : function () {
this.ui.liLink.addClass( 'disabled' );
this.ui.liLink.bind( 'click.select touchstart', false );
},
It may be because in mobile devices there are not such events "click". Try mobile events - "tap" or "drag" for example. I think that problem in it.
Related
Anyway, I got this button that is supposed to open my nav.
HAML:
%button#nav-toggle{ :navigate => 'false' } Menu
HTML:
<button id='nav-toggle' navigate='false'>Menu</button>
And I'm binding two clicks on it like this:
jQuery
$(document).ready(function(){
$("#nav-toggle[navigate='false']").click(function(){
console.log("opening nav");
$("#nav-toggle").attr('navigate','true');
$( "#masthead" ).animate({
height:'100vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("first done");
}
}
);
});
$("#nav-toggle[navigate='true']").click(function(){
console.log("closing nav");
$("#nav-toggle").attr('navigate','false');
$( "#masthead" ).animate({
height:'10vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("second done");
}
}
);
});
});
For some reason, when I click the button for the second time (When its navigate-attribute is set to true, it still launches the first event of those two.
What am I missing here?
Full code here: Codepen
You need to delegate the event.
Take a look at this
http://codepen.io/anon/pen/jAjkpA?editors=1010
You need to bind the event to a parent in this case the .hamb-container.
Here's a link to understand how delegation and event bubbling works https://learn.jquery.com/events/event-delegation/.
Basically as a summary:
When an event is triggered it bubbles the event all the way up to your root HTML tag.
That is good for when you want to add dynamic content or in your case pick out an attribute that changes dynamically.
So how do we bind to dynamic content? Simple. We surround them with a static container and bind to that instead. Additionally, we let JQuery know what the dynamic content will be. So Jquery will listen for an event on the static element and check if it actually originated from the element you were looking for.
Something like this
$( "#staticAncestor" ).on( "click", "#DynamicContent", function( event ) {
});
Hope this helps. Happy coding!
For some reason, when I click the button for the second time (When its navigate-attribute is set to true, it still launches the first event of those two.
What am I missing here guys and girls?
You missed nothing.
An event is bound to an element not to a property/attribute.
Because .click a shortcut for .on( "click", handler ):
.on( events [, selector ] [, data ], handler ): Attach an event handler function for one or more events to the selected elements
So, you can change your code like:
$(function () {
$("#nav-toggle[navigate='false']").click(function(){
console.log("opening nav");
var attr= ($("#nav-toggle").attr('navigate') == 'false' ? false : true);
$("#nav-toggle").attr('navigate',!attr);
if (!attr) {
$( "#masthead" ).animate({
height:'100vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("first done");
}
}
);
} else {
$( "#masthead" ).animate({
height:'10vh',
}, {
duration: 1000,
queue: false,
done: function() {
console.log("second done");
}
}
);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id='nav-toggle' navigate='false'>Menu</button>
I am trying to add a hover event listener to the code below so that when I hover over the link tag, it triggers the action to expand the submenu. I tried hover and mouseover and neither worked. Click seems to work fine though, Im not sure what I am doing wrong.
Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {
var trigger = el.querySelector( 'a' );
if( self.touch ) {
``trigger``.addEventListener( 'touchstart', function( ev ) {
self._openMenu( this, ev ); } );
}
else {
trigger.addEventListener( 'click', function( ev ) { self._openMenu( this, ev ); });
}
});
window.addEventListener('resize', function( ev ) {
self._resizeHandler();
});
trigger.addEventListener('click', function(ev) {
self._openMenu(this, ev);
});
Write
trigger.addEventListener('mouseover', function(ev) {
self._openMenu(this, ev);
});
Replace click event by mouseover event
Don't punish yourself like this. Use a library like jQuery to attach eventhandlers to elements. Mouseover and hover are both supported by jQuery. Don't reinvent the wheel and build upon existing solutions like bootstrap to implement basic functionality like expanding a submenu.
I'm trying to add a class of "active" to the current slide in carouFredSel, and I can't get it to work. The closest I could get it to work was to add it on the first slide, using trigger("currentVisible"), but it doesn't update.
Help! Thanks :)
So far, I used this function ( it doesn't work on page load though and it seems to be a lot of code for that simple task)
Maybe someone has an idea how to simplify this and also make it work on page load
function highlight( items ) {
items.filter(":eq(1)").addClass("active");
}
function unhighlight( items ) {
items.removeClass("active");
}
$('#foo').carouFredSel({
scroll : {
onBefore: function( data ) {
unhighlight( data.items.old );
},
onAfter : function( data ) {
highlight( data.items.visible );
}
},
});
Here's an update that should work fine on page load and scroll:
Here are more details about the trigger event.
var $highlight = function() {
var $this = $("#foo");
var items = $this.triggerHandler("currentVisible"); //get all visible items
$this.children().removeClass("active"); // remove all .active classes
items.filter(":eq(1)").addClass("active"); // add .active class to n-th item
};
$('#foo').carouFredSel({
scroll : {
onAfter : $highlight
},
onCreate : $highlight
});
scroll : {
onAfter : $highlight
}
solved my issue
JS:
function handDrag(dragHand)
{
if(dragHand ==true)
{
//live query to auto bind the drag function to all elements of the cardsHand class even auto generated ones
$('#playerHand')
.livequery('mouseenter', function(e){
$('img.playerCardsHand').draggable
({
zIndex: 1000,
revert: 'invalid',
stack: '.playerCardsHand',
selectedCard: 'widget',
addClasses: 'false',
disabled : false
});
});
}
else
{
$('img.playerCardsHand').draggable({ disabled: true });
}
}
function swapCards()
{
handDrag(true);
}
function ready()
{
handDrag(false);
}
Basically I call swapCards() I want to be able to drag my cards around the screen and drop them.
I then hit ready and it calls the ready() method.
I then want my cards to no longer be draggable.
However now it keeps them draggable. I have tried removing the disabled: false to the swapCards draggable initialization but when I do that when I try and re-enable the draggable using
handDrag(true);
it won't re-enable the dragging.
Any ideas?
The syntax appears to be as follows:
$('img.playerCardsHand').draggable( "disable" );
See http://api.jqueryui.com/draggable/#method-disable
You might also need to enable it the next time you call handDrag(true);
if(dragHand ==true)
{
$('img.playerCardsHand').draggable( "enable" );
// etc
I'm trying to detect the scroll event in Android browser (my specific version is 2.1, but U want it to work also on older versions). This seems impossible!
I first tried this:
document.addEventListener('scroll', function(){ alert('test'); }, false);
But nothing is triggered (except when the page load).
I thought: well, let's be crazy and emulate it by :
1. Detecting touchend
2. Polling the window.pageYOffset so we know when the window stops scrolling
3. Manually trigger a user function I want on scroll.
Unfortunately, the touchend event doesn't look to be triggered either... in fact, when we don't scroll and only tap the screen (touchstart + touchend), it works. As soon as we scroll the page in between (touchstart + touchmove + touchend), it breaks everything.
Now my most basic example only contains this:
document.addEventListener('touchend', function(){ alert('test'); }, false);
But the alert doesn't show up when we scroll with the finger and release the touch...
Does anyone has a suggestion?
Thanks.
You may want to crawl the source for JQuery Mobile, it supports android browsers and has scroll event listeners.
Or at least they say it does in the docs. :p
Here's the source
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
// iPhone triggers scroll after a small delay; use touchmove instead
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};