When I use your page from your computer when you hover the mouse over the menu, I received a menu to select the language.
The same thing I want to do when using the hand on the smartphone.
I am Trying to use this Hammer.js, but it does not work. Below my code.
$(document).ready(function(){
var languageToChange = $('.lang-list a');
var change = Hammer(languageToChange).on('tap', function(event){
alert(event);
});
});
You should detect width of the screen and if it is under 780px than use tap, otherwise use hover event. Bootstrap can help you a lot making resposive site. If you don't want to use it try something like this:
function desktopEvent( text ){
alert( "Desktop:" + text );
}
function mobileEvent( event ){
alert( "Mobile" + text );
}
$(document).ready(function(){
var languageToChange = $('.lang-list a');
var change;
if ( $(document).width() < 780){
change = Hammer(languageToChange).on('tap', mobileEvent( event ));
} else {
change = Hammer(languageToChange).on('mouseover', desktopEvent( event ));
}
});
Related
I'm trying to make an extension that selects a shoe size, and hits the add to cart button on page load. I've done the latter, but selecting the shoe size does not work (I've tried selecting the li element). I'm assuming its more complicated than that but I havent been able to figure it out. website
Here's my code:
function addToCart() {
$( "#buyingtools-add-to-cart-button" ).click();
}
function addSize() {
if ($("select[name='skuAndSize']").length) {
$("option[name='skuId']").click()
alert($("option[name='skuId']").val())
}
}
$(document).ready(function() {
addSize();
addToCart();
// alert("HELLO")
}
);
EDIT:
function addSize() {
if ($("select[name='skuAndSize']").length) {
$('div[class*=exp-pdp-size-dropdown-container] > ul > li:nth-child(3)').mouseup();
alert($('div[class*=exp-pdp-size-dropdown-container] > ul > li').html());
}
}
$(document).ready(function() {
addSize();
// addToCart();
// alert("HELLO")
}
);
Edit: (credit to Troy Wray) because you are writing a Chrome extension, you'll need to trigger the mouseup event using vanilla JS like so:
var mouseUpEvent = document.createEvent("MouseEvents");
mouseUpEvent.initEvent("mouseup", true, true);
var el = $("li.nsg-form--drop-down--option:nth-child(4)")[0];
el.dispatchEvent(mouseUpEvent);
======================
Answer below does not apply to Chrome extension:
Fiddled around with it and it looks like the dropdown is listening to the mouseup event as opposed to click event on the li, so you'll want to do something like this:
$(selectedLi).mouseup();
For example, something like this:
$("li.nsg-form--drop-down--option:nth-child(4)").mouseup(); // selects 8.5
I am building a mobile web app where the page is set to responsive through screen width and height. I am facing one issue here. In a mobile, if I click any input field, the screen size changes due to mobile keypad in some browsers. In this case I don't want the screen to resize. Where as the screen has to resize when we rotate screen. Your help will be greatly appreciated. Below is the part of code I am using for that.
function pageresponsive() {
$('body').css('width', window.screen.width);
$('body').css('height', window.screen.height);
}
pageresponsive();
var input_click_status = 0;
$("input").click(function() {
input_click_status = 1;
});
$( "input" ).focus(function() {
input_click_status = 1;
});
//This might not work as resize event will be set at the time of page load
if(input_click_status == 0) {
$(window).resize(function() {
pageresponsive(true);
});
}
Try this solution
var isFocused = $("input").is(":focus")
for version 1.6+ of jquery
$("selector").is(":focus")
:Focus
you can check by two way:
you can bind an event on input.
var is_focused = false;
jQuery('input').bind('focus', function(){
is_focused = true;
/* you can write code what ever you want to do on focus.*/
});
or
there is one more function:
var is_focused = jQuery("input").is(":focus")
I have a <ul> that when clicked, toggles the visibility of another <ul>. How can I attach an event to the body of the page when the <ul>s are revealed so that the body will hide the <ul>.
I am new to writing these sorts things which bubble, and I cannot figure out why what I have done so far seems to work intermittently. When clicked several times, it fails to add the class open when the secondary <ul> is opened.
And of course, there may be an entirely better way to do this.
$(document).on('click', '.dd_deploy', function (e) {
var ul = $(this).children('ul');
var height = ul.css('height');
var width = ul.css('width');
ul.css('top', "-" + height);
ul.fadeToggle(50, function () {
//add open class depending on what's toggled to
if (ul.hasClass('open')) {
ul.removeClass('open');
} else {
ul.addClass('open');
}
//attach click event to the body to hide the ul when
//body is clickd
$(document).on('click.ddClick', ('*'), function (e) {
e.stopPropagation();
//if (ul.hasClass('open')) {
ul.hide();
ul.removeClass('open')
$(document).off('click.ddClick');
// }
});
});
});
http://jsfiddle.net/JYVwR/
I'd suggest not binding a click event in a click event, even if you are unbinding it. Instead, i would do it this way:
http://jsfiddle.net/JYVwR/2/
$(document).on('click', function (e) {
if ( $(e.target).is(".dd_deploy") ) {
var ul = $(e.target).children('ul');
var height = ul.css('height');
var width = ul.css('width');
ul.css('top', "-" + height);
ul.fadeToggle(50, function () {
//add open class depending on what's toggled to
if (ul.hasClass('open')) {
ul.removeClass('open');
} else {
ul.addClass('open');
}
});
}
else {
$('.dd_deploy').children('ul:visible').fadeOut(50,function(){
$(this).removeClass("open");
})
}
});
If you need to further prevent clicking on the opened menu from closing the menu, add an else if that tests for children of that menu.
You dont' really need all that code. All you need is jquery's toggle class to accomplish what you want. simple code like one below should work.
Example Code
$(document).ready(function() {
$('ul.dd_deploy').click(function(){
$('ul.dd').toggle();
});
});
Firstly, you are defining a document.on function within a document.on function which is fundamentally wrong, you just need to check it once and execute the function once the document is ready.
Secondly why do you want to bind an event to body.click ? it's not really a good idea.
Suggestion
I think you should also look at the hover function which might be useful to you in this case.
Working Fiddles
JSfiddle with click function
JSfiddle with hover function
I have javascript in my page and I use there the click event. The problem is that in ie the clicking doesnt't hapen right away, but only after the hole javascript has gone through.
Then it fires that click event!
I would need it to hapen right away, before the other javascript-code!
$(document).ready(function() {
// sorting the list
var myLink = document.getElementById('header3');
myLink.click();
// scrolling the list to where the modified row is
if ('${rowId}') {
var row = $('#row-${rowId}');
row.addClass("highlight");
var scrollParent = ((jQuery.browser.msie) ? row.parent().parent().parent()[0] : row.parent()[0]);
row[0].scrollIntoView(false);
if (scrollParent.scrollTop > 0)
scrollParent.scrollTop = scrollParent.scrollTop + (scrollParent.clientHeight / 2);
}
}
That sorting should happen before scrolling! In ie the clicking happens after scrolling and then the scrolling is in wrong place.
In Firefox this works!
Can you help me on this?
Assuming (never a good thing) that the code that is executing before the click event code is the code you enter here below the click() call, why don't you refactor that to a function and make it part of the code that happens when you call the click() code?
Try this. Place your code in a separate function and trigger that function within the click.
$(function(){
function yourfunction(event)
{
//code to be executed after the click
// scrolling the list to where the modified row is
if ('${rowId}') {
var row = $('#row-${rowId}');
row.addClass("highlight");
var scrollParent = ((jQuery.browser.msie) ? row.parent().parent().parent()[0] : row.parent()[0]);
row[0].scrollIntoView(false);
if (scrollParent.scrollTop > 0)
scrollParent.scrollTop = scrollParent.scrollTop + (scrollParent.clientHeight / 2);
}
return false;
}
});
$(document).ready(function() {
// sorting the list
$('#header3').click(yourfunction);
});
Hope it helps,
Cumps
I'm using YUI to add drag drop support to a div. It also responds to clicks. Unfortunately, the click behavior takes effect even after a drag drop operation. Here's a code snippet:
// Create a DOM object for the group tag.
div = document.createElement('div');
div.className = 'group';
div.onclick = function() { beginEditName(); }
container.appendChild(div);
// Enable drag/drop for the group tag.
dragdrop = new YAHOO.util.DD(div);
dragdrop.scroll = false;
dragdrop.on('dragEvent', function(ev) { onDrag(ev); });
dragdrop.on('endDragEvent', function(ev) { onEndDrag(ev); });
dragdrop.setXConstraint(0,0);
Click is supposed to edit text, while drag drop is supposed to move the tag. However, the onclick event is firing so that text editing begins after the tag is moved.
I could code around the problem, but is there a more direct YUI way of differentiating a simple click from a drag drop?
Michael,
http://ericmiraglia.com/yui/demos/ddclick.php
View the source, and let me know (ericmiraglia at yahoo dot com) if you have any further questions on this.
Modification. I will copy the code here, this way if this guy take off the code from his server people will be able to check the source.
var beingDragged = false;
var dd = new YAHOO.util.DD("drag");
dd.subscribe("mouseDownEvent", function(e){
beingDragged = false;
});
dd.subscribe("startDragEvent", function(e) {
beingDragged = true;
});
dd.subscribe("mouseUpEvent", function(e) {
if(beingDragged) {
alert("dragged")
} else {
alert("clicked");
}
})