Develop Reference

onclick="$('#id').toggle()" didn't work, need to rewrite for Chrome older versions

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.

Wordpress & jQuery Responsive Navigation

I have a problem with the wordpress and with Jquery.
I have this code to show and hide a responsive navigation on the left :
$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});
It works with my website without Wordpress, but once in Wordpress, it seems that half of the code works : the creation of the cross to close the menu except that the menu does not appear.
Can you enlighten me on some points?
The script is loaded, are there a faster and easier way to transform the code with jquery and toogle () ?
It can only be a trouble about code but why it does not work anymore once on Wordpress ?
Thanks a lot for your help, before asking the question I tried many things. ^^

If it works with any of your websites means the code is good, just you might have conflicts in your css, so include your css which is menu related last, and if it doesn't work either, post your css code, so we could see better what's going on, and there is not need for so much code. Initialize your menu without class .open , in your html and use JQUERY:
$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});

jQuery comes with wordpress in non-conflict mode , to make sure everything works you should use jQuery variable instead of the $ variable.
you can alternatively do the following
jQuery(document).ready(function($) {
// $ variable can be used here
$('.menu').on('click', function() {
if ($('.responsive__menu').hasClass('is-open')) {
$('.respons__menu').removeClass('is-open');
$('.menu').removeClass('is-active');
} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');
}
});
});

How unfocus on jQuery for is(':focus')

Sorry for my poor English.
I'm using jQuery plugin slick. It contain some code
_isSlideOnFocus =_.$slider.find('*').is(':focus');
...
if(_isSlideOnFocus) {
//some code that i don't want to execute
}
Plugin gives ability to execute callback right before upper code will execute. So i can unfocus elements, but i don't know how.
In browser console right before upper code i try
_.$slider.find('*').blur();
_.$slider.find('*').each(function() {$(this).blur()});
_.$slider.find('*').trigger('blur');
but it don't work's.
i try in console
_.$slider.find(':focus'); //empty jQuery object
_.$slider.find('*').each(function() {
console.log($(this).is(':focus')); //false for all elements
});
_.$slider.find('*').is(':focus') //but this one returns true
Even if I try
_.$slider.find('*').each(function() {
if($(this).is(':focus')) {
$(this).blur();
console.log($(this).is(':focus'));
}
});
console logs true, so as I can see blur is not working for is(':blur')
How can i blur all elements in $slider? Thank's for help
Here the fiddle. My code in the end of js block. Subject plugin code is in the Slick.prototype.activateADA function in the end of plugin.

I have found the solution. I was using the old jQuery version 1.7. After updating jQuery to 1.9 blur works.

I did this:
$('.ui-slider-handle').blur();

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

Javascript issue with easyslider

First visit this page and hover your mouse over the menu:
http://milabalami.com/saved/2/index.php
Then visit this Wordpress page where I have implemented the exact same code:
http://milabalami.com
When you hover your mouse over the Wordpress menu, you will see that the slider does not show up. Why? I can see that the page gives an error stating:
$ is not a function
http://miladalami.com/wp-content/themes/sandbox/js/custom.js
Why is that? Its the exact same code that worked perfectly on the other page. I dont understand why it is giving that error on the Wordpress page, and not on the other one where the slider works. Anyone that could assist me in solving this puzzle?
Puzzle solved by Yi Jiang.

It looks like somewhere along the way, the $ got overridden. You can still use your code, however, by using jQuery instead of $ -
jQuery(document).ready(function($) {
$("#featured").easySlider({
speed: 400
});
$("#menu ul li a[class!='current']")
.css( {backgroundPosition: "200px 2px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 2px)"}, {duration:400})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(200px 2px)"}, {duration:400})
})
});
It's a stopgap measure, however. You should combine all your code into a single file, instead of separating them out like they are right now, and reduce your dependency on plugins.