$('.slideArrow').toggle(function (event) {
//some code
}, function (event) {
//some code
});
This works fine for content which are loaded on page-load.But the same function does not work for content loaded with ajax.It just does not intercept the click.
What should I do?
In an other scenario,i faced a same problem(not for toggle,for click) and sorted it this way.I dont know what to do for toggle?
$('.common-parent').on('click','.target-of-click',function(){
//some code
})
The flag method :
var flag = false;
$(document).on('click', '.slideArrow', function(event) {
if (flag) {
// do one thing
}else{
// do another thing
}
flag = !flag;
});
the data method
$(document).on('click', '.slideArrow', function(event) {
if ( $(this).data('flag') ) {
// do one thing
}else{
// do another thing
}
$(this).data('flag', !$(this).data('flag'));
});
Related
I find it very complex to create a separate menu for mobile/small screen devices, so I decided to go with the main one, however my goal is to display all the links by default (when loading the page), actually the user needs to click on a small icon to display the dropdowdown links, it's very popular practise and most users are comfortable with that however my client insist on showing all links without clicking on anything.
I managed to hide that icon but I'm stuck because I cannot display those links anymore, is there a way to activate that onClick function by default? Or maybe disable dropdown secondary list on mobile?
The code below is navigation:
NavigationView.prototype.initialize = function() {
this.$el.on('click', (function(_this) {
return function(e) {
if (!$(e.target).closest('.navigation').length) {
return _this.$('.navigation .open').removeClass('open');
}
};
})(this));
this.$el.on('focus', '.header-navigation-link.primary-link', (function(_this) {
return function() {
var $menuWrapper;
$menuWrapper = $(_this.$el.find('.has-dropdown.open'));
if ($menuWrapper.length) {
return $menuWrapper.toggleClass('open', false);
}
};
})(this));
return this.$el.on('focus', '[data-is-dropdown] .secondary-link', (function(_this) {
return function(event) {
var $target;
$target = $(event.currentTarget);
return $target.parents('.has-dropdown').toggleClass('open', true);
};
})(this));
};
NavigationView.prototype.toggleNavigation = function(e) {
var $target;
$target = $(e.target);
if ($target.parents().hasClass('has-dropdown')) {
e.preventDefault();
return $target.parent().toggleClass('open');
}
};
return NavigationView;
What I'm trying to change is that ToggleClass; active by default so don't need to click on icon to show secondary-list
I believe this is the syntax you are looking for:
this.$el.on('click', myFunction); //runs myFunction onclick
function myFunction() {
//display dropdown code here
}
myFunction(); //runs myFunction onload
I want to make a button that toggles a new class when it's clicked, then when that new class is clicked, it sets goAway to true. Here's what I'm using, does anyone notice something that would prevent this? It works in all other onclick functions that have the line: goAway = true;
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
goAway = true;
});
});
I have also tried this below, but neither seem to work...
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
window.onbeforeunload = null;
});
});
You can try either one of this.
First one:
$(window).unbind('onbeforeunload');
Second one:
window.onbeforeunload = false;
I hope this works for you.
Update:
I noticed you placed onbeforeunload function inside click function.
Once try by placing this function out side of click function.
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
Finally! I figured it out. Attached a JavaScript onClick event to the element set to toggle with jQuery ;)
The html button:
<button onclick="removeWarning()">This is the button</button>
Then the rest:
<script>
var goAway = false;
$("button").click(function(){
$(this).toggleClass('MyNewClass');
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
function removeWarning(){
if ($("button").hasClass('MyNewClass')){
goAway = true;
}
}
</script>
I'm using the iteminvokedHandler and was wonder if there is a better way to interact with the listView.
Currently using this:
WinJS.UI.processAll(root).then(function () {
var listview = document.querySelector('#myNotePad').winControl;
listview.addEventListener("iteminvoked", itemInvokedHandler,false);
function itemInvokedHandler(e) {
e.detail.itemPromise.done(function (invokedItem) {
myEdit();
});
};
});
The problem is that everytime I click on the listview myEdit() is run and propagates within the listview. I was wondering how to do it once and stop invoking listview until I am done with myEdit? Is there a simpler way to handle such a situation as this?
Simple yet hard to see when you have a mind block and forget some of the basics (yes yes I'm still learning):
var testtrue = true;
WinJS.UI.processAll(root).then(function () {
var listview = document.querySelector('#myNotePad').winControl;
listview.addEventListener("iteminvoked", itemInvokedHandler,false);
function itemInvokedHandler(e) {
e.detail.itemPromise.done(function (invokedItem) {
if (testtrue === true){
myEdit();
}
});
};
});
In myEdit:
function myEdit() {
var theelem = document.querySelector(".win-selected #myNotes");
var gestureObject = new MSGesture();
gestureObject.target = theelem;
theelem.gestureObject = gestureObject;
theelem.addEventListener("pointerdown", pointerDown, false);
theelem.addEventListener("MSGestureHold", gestureHold, false);
function pointerDown(e) {
e.preventDefault();
e.target.gestureObject.addPointer(e.pointerId);
}
function gestureHold(e) {
if (e.detail === e.MSGESTURE_FLAG_BEGIN && test === true) {
e.preventDefault();
editNotes();
} else {
}
console.log(e);
}
theelem.addEventListener("contextmenu", function (e) {
e.preventDefault();}, false); //Preventing system menu
};
function editNotes() {
//The Code I wish to execute
return test = false;
};
What I needed was a conditional statement so that it would run if true and not if false. That same test needed to be done in the gestureHold otherwise it would continue to fire myEdit on the invoked item because of the way the gesture is attached to the item the first time it is run.
I am trying to execute some code that has a callback when clicking on specific links. The callback is to click the link again, but on the second pass, the method returns true to follow normal behavior. But for some reason, it's not working? I use clickedLink for proper scope. In the event callback, this was referring to window.
UPDATE
For a little more clarity, I agree normally this wouldn't be an optimal solution, but I am using Google's Tag Manager to monitor eCommerce traffic. I am trying to make sure product clicks get pushed to their dataLayer, and using their event callback to resume normal behavior. More info here: https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks
This is my updated method based on the answers below, but it still doesn't work.
var shopCartBtnClicked = false;
var clickedLink;
jQuery('#pdp_add_cart, .add_to_cart_button').click(function(e) {
if (shopCartBtnClicked === true) {
shopCartBtnClicked = false; //I make it here just fine
} else {
e.preventDefault();
clickedLink = this;
var pdp = false;
if (mmProduct) {
//On detail page
mmProduct.qty = jQuery('input[name="quantity"]').val();
pdp = true;
} else {
//on a shopping page
mmProduct = findProductClicked(this);
mmProduct.qty = 1;
}
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'USD',
'add': {
'products': [{
'name': mmProduct.name,
'id': mmProduct.id,
'price': mmProduct.price,
'quantity': mmProduct.qty
}]
}
},
'eventCallback': function () {
//Are we on a product detail page with a form, or just a shopping page with a link?
if (pdp) {
jQuery('form.cart').submit(); //This part works just fine
} else {
mmProduct = null;
shopCartBtnClicked = true;
$(clickedLink).trigger('click'); //This doesn't
}
}
});
}
});
Its not very well done, but this should work:
var shopCartBtnClicked = false;
var clickedLink;
jQuery('.add_to_cart_button').click(function(e) {
if (shopCartBtnClicked === true) {
shopCartBtnClicked = false;
// dont return, just let javascript handle this one
} else {
// only execute when you have not set it to true
e.preventDefault();
clickedLink = this;
shopCartBtnClicked = true;
$(clickedLink).trigger('click');
}
});
I do have to wonder why you don't just execute your other logic first and then not prevent default anyway.
Taking #somethinghere's answer, your code can further be simplified to improve readability:
var shopCartBtnClicked = false;
jQuery('.add_to_cart_button').click(function(e) {
if( shopCartBtnClicked ) {
shopCartBtnClicked = false;
// dont return, just let javascript handle this one
} else {
// only execute when you have set it to true
e.preventDefault();
shopCartBtnClicked = true;
this.click();
}
});
Or, as suggested by #Regent:
var shopCartBtnClicked = false;
jQuery('.add_to_cart_button').click(function(e) {
shopCartBtnClicked = !shopCartBtnClicked;
if( shopCartBtnClicked ) {
e.preventDefault();
this.click();
}
});
OK guys, thank you for helping me get there. Normally, all of the other answers would work great, but for this specific tag manager instance, it appears (for some unknown reason), document.location works in the event callback fine here. This works.
It's weird because I used $(this).('form.cart').submit(); in a callback earlier in the code.
'eventCallback': function () {
//Are we on a product detail page with a form, or just a shopping page with a link?
if (pdp) {
jQuery('form.cart').submit();
} else {
mmProduct = null;
document.location = $(clickedLink).attr('href');
//$(clickedLink).trigger('click');
}
}
I want to make a infinite scroll page, but I have a problem.
My loadElements works with $.get, like this:
loadElements: function() {
// fades out page
$.get(//..).done(function() {// fades in page});
}
And scrolling:
$(window).scroll(function() {
Functions.loadElements();
});
What I want is to run Functions.loadElements(); once on scroll, wait for the // fades in page, then reenable scrolling again. I tried bind/unbind, but with no success. How can I achieve this?
EDIT:
I tried using bind and unbind like this:
$(window).scroll(function() {
Functions.loadElements();
$(window).unbind('scroll');
}
and in loadElements:
loadElements: function() {
// fades out page
$.get(//..).done(function() {// fades in page; $(window).bind('scroll'); });
}
But it didn't work.
I can't give you a solution exactly. but try something like this. You can maintain a status with a globle variable.
var isLoading = false;
$(window).scroll(function(e) {
if( !isLoading )
{
Functions.loadElements();
isLoading = true;
}
e.preventDefault();
}
loadElements: function() {
// fades out page
$.get(//..).done(function() {// fades in page; isLoading = false; });
}
Maybe instead of rebinding the scroll function that contains the logic, try binding a function that "disables" scrolling and then remove this function once your content is ready to scroll again. You could use jquery namespace events for this
Try with
$(window).scroll(function() {
Functions.loadElements();
$(window).bind('scroll.StopScroll', function (e) {
e.preventDefault(); e.stopImmediatePropagation();
});
}
And then in the .done unbind it
$(window).unbind('scroll.StopScroll');
I'd do it with the get promise
var waiting;
$(window).scroll(function(e) {
if(waiting){
e.preventDefault();
return;
}
Functions.loadElements().then(function(){
waiting = false;
});
waiting = true;
});
and return the get promise from loadElements
loadElements: function() {
// fades out page
return $.get(...).done(function() {...});
}