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() { ... });
Related
My jquery function works fine on local, but once I add it to my WP footer and upload, nothing.
There are a lot of scripts on this page, the but the script I'm trying to make work is this:
jQuery(document).ready(function($){
$("li.accordion").on('click',function() {
$('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});
Jquery is loaded and working, but this script won't function.
Any ideas?
EDIT: Thanks, but it wasn't the stray '
I seemed to be having a cache issue on the site, which has been updated now. Still having the problem.
EDIT2: Removed a link
Your site has a syntax error on it. There is a quote at the end of your JavaScript which may well be causing it to not execute.
jQuery(document).ready(function(){
jquery("li.accordion").click(function() {
jquery('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});' <--- quote here
Ok, you've fixed that now, and all the JavaScript is working, but I can see the next issue that prevents the menu from showing is a CSS rule with !important. (It's overriding the style="display:block" attribute on the mega-sub-menu that is added via JQuery).
So after doing a little more googling, I came up with this answer:
jQuery(function($){
$('li.accordion').click(function() {
$('.mega-sub-menu', this).slideToggle('fast', function() {});
}).click();
});
Here we simulate the click so that the accordion starts out closed and I don't need to add any more CSS to anything.
I added important to the CSS earlier to overcome the inline style — like an idiot, not realizing that the jquery was adding the inline style (I think that's what I did anyway, it was inappropriately late.)
I need help with the next issue. In my code, to toggle some fields I'm using
<a onclick="$('#toggledFormId').toggle()" >Presss</a>
and for me everything was fine, but get issue during the test on other computers. Nothing happends, no errors, no alerts, no toggling.
I know that it's because my version of Chrome is the last one, and on the test computers older, but I need to find universal solution.
I tried this
<script>
$('#hrefId').click(function()
{
$('#toggledFormId').toggle();
});
</script>
this
<script>
$('#hrefId').on('click', function(){
$('#toggledFormId').toggle();
});
</script>
both of this variant by using classes(not id) and some other similar, not to comlicated variants, but with no results.
I will be grateful for any suggestion, especially if it works ^_^
There might be various reasons why it won't work on older chrome versions.
You simply made a spelling mistake with your ids => check your spelling and avoid duplicate ids
One or more closing tags in your markup are missing(if so, chrome attempts to
close them and often miserably fails.).
=> check your markup and try again.
Your items are being added dynamically. In this case try:
$( "body" ).on( "click", "#hrefId", function() {
$('#toggledFormId').toggle();
});
Funny, but non of methods that were purposed didn't work untill...
AdBlock and other similar programs do not let the fields open up. Maybe they think that toggle part of the form is spam or something like this, so after they were disabling suggested solutions started work.
Thank you everyone for help.
The following function fades out properly but does not fade in. I got it from this question (thank you Jacob) when looking for a solution. It works in the jsfiddle, just not in my app. I do not have turbolinks enabled (it really toys too hard with my app). Could that be the reason?
Any ideas?
<script>
$(function() {
$('.alert').delay(500).fadeIn('normal', function() {
$(this).delay(1500).fadeOut();
});
});
</script>
In the question you meant the '#flash' element has display:none initially in its css style; Make sure you got that line in you application.css.
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()
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