jquery html update working on computer but not on smartphone - javascript

I'm using following-like code on my website
<span class="box">
<noscript>
<img src="images/imagebox.png">
</noscript>
</span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
$(document).ready(function() {
$('span.box').html('<img src="images/imagebox.png">');
$(document).on('click','span.box', function(){
// rest of code
});
});
as you can see, i built it the way if the client has javascript, the content of is replaced by without link so it's more interactiv for the client and if the client has no javascript, he still has with the link the way he can still make the necessary action...
While this works perfectly without any trouble on the computer, on smartphone (at least mine), it doesn't work but i don't know why... actually, on my smartphone, i can't see the and can't do any action as if it wouldn't have javascript while it has... I have android 2.1 on my smartphone...
Do you know any solution or workaround for this, the way i can have this and necessary action ability even on smartphone?
Thanks in advance for your help!
EDIT: I finally opted for a solution like in JavaScript function in href vs. onclick

All mobile devices don't handle click events.. should be:
$('<img />').attr('src', 'images/imagebox.png').appendTo('span.box').bind('click touchstart', function() {
// handle click / touch
});
also see this post about double trgiggering issue in some touch enabled devices:
How to bind 'touchstart' and 'click' events but not respond to both?

try to use
$(document).on('pageinit', function(){}); or $(document).on('mobileinit', function(){}); instead of
$(document).ready(function(){});

Related

NivoSlider - Disable Right Click

I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery

JQuery .click() event, very odd behavior in IE 8&9

I've created a video gallery which loads a Youtube video via swfobject, based on the element's data attributes. It functions quite well in all browsers, except IE. The strange behavior I am seeing doesn't make sense.
The markup for each thumbnail is as follows:
<li>
<div class="movie-image">
<a class="" data-videotitle="Title" data-videoid="$node.contribution('video')" href="http://www.youtube.com/watch?v=41ZskpgQqZ4">
<img class="video-link" data-videotitle="Title" data-videoid="41ZskpgQqZ4" src="http://img.youtube.com/vi/41ZskpgQqZ4/default.jpg" alt="Title">
<h5>Title</h5>
</a>
</div>
</li>
With this javascript binding the event:
$('.video-link').click(function(){
player.setVideo(this.getAttribute("data-videoid"), true);
player.setTitle(this.getAttribute("data-videotitle"));
window.event.returnValue = false; //IESUX
if(window.event.stopPropagation) window.event.stopPropagation();
window.event.cancelBubble = true;
//Yes, there's a lot of redundancy here. None has worked.
return false;
})
Now, here's the weird part: When I click a link in any browser except IE, the event works fine.
However, in IE, if I click on the h5 element, everything works fine. If I click on the image, however, the browser navigates to the thumbnail. Which is really odd, since that's not even the target of the link.
EDIT: I forgot to mention, I am stuck using JQuery 1.4.2 on this particular webpage.
Edit 2: Well... crap. I just tried putting together a fiddle to show the problem, but the fiddle is working fine, even with the old version of JQuery.
jQuery wraps the event object and gives it methods that do what you're trying to do only better:
$(".video-link").click(function (e) {
player.setVideo(this.getAttribute("data-videoid"), true);
player.setTitle(this.getAttribute("data-videotitle"));
e.stopPropagation();
e.preventDefault();
});
Note that return false is explicitly left out -- you don't need it.
My guess is that IE is either throwing some sort of error that stops the JS execution and ends up following the link, or the default action is not properly being stopped.

jQuery 1.7.2: .on() works on one page and doesn't work on another

I've the following piece of code which works on one page and doesn't work on another though html markup is the same on both pages:
JS
$("#books_list").on('click', '.load-more-books', function(event) {
// Some stuffs
});
Html
<div id="book_list">
...
</div>
More books
Even after entering JS code in Chrome Browser console events not bound.
Can anyone help me with this, what am I doing wrong?
Thanks,
Sultan
The selector you specified means that .load-more-books needs to be a descendant of #book_list for this to work.
Upgrade to jQuery 1.8.1 and see the results

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() { ... });

how to handle any javascript load finished event using jquery

I have a blog. I'm insert yahoo pipe. I need to remove yahoo pipe icon after script load finish.
script is here>>
<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.1.js">
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true}
</script>
My code is here>>
$("script[src=http://l.yimg.com/a/i/us/pps/listbadge_1.1.js]").load(function(){
$(".ybf").hide();
});
But this don't work.
How to handle script load finish?
Something like this should work.
$("DOM ITEM TO LOAD SCRIPT INTO").load(
"http://l.yimg.com/a/i/us/pps/listbadge_1.1.js",
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true},
function(){
$(".ybf").hide();
});
);
look under the examples:
http://docs.jquery.com/Ajax/load
This should get you started for Firefox 3+
$('.ybf').live('DOMAttrModified', function() {
if ($(this).css('display') !== 'none')
$(this).css('display', 'none');
});
I would look into the propertychange event for IE, but I didn't have any luck combining that event with the jQuery live events, probably because they don't bubble. There may be another way to work around this however.
Good luck!
EDIT: You might want to look into the liveQuery plugin for jQuery. It looks to have more functionality and you may be able to get live binding to the 'propertychanged' event that IE supports.

Categories

Resources