I need some help with this jQuery code. The code below works fine but i tried to use $.each instead and its not working.
$(document).ready( function(){
$('#pull').click( function(event){
event.stopPropagation();
$('#pf').slideToggle();
});
$('#pullo').click( function(event){
event.stopPropagation();
$('#pt').slideToggle();
});
$('#pullc').click( function(event){
event.stopPropagation();
$('#pc').slideToggle();
});
$(document).click( function(){
$('#pt').hide();
$('#pf').hide();
$('#pc').hide();
});
});
The code below is not working for me, please help
var pul = ["#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"];
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
});
Make your collection object instead of array:
Here is Demo
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
Try this,
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
$(document).ready( function(){
$.each(pul, function(i, v){
$(i).click( function(event){
event.stopPropagation();
$(v).slideToggle();
});
$(document).click(function(){
$(v).hide();
});
});
});
You have two ways you can solve this. Either make your array as 2D array:
var pul = [
["#pull", "#pt"],
["#pullo", "#pf"],
["#pullc", "#pc"]];
And you can do $(v[0]).click(... instead of $(i).click(.... And $(v[1]).hide(); instead of $(v).hide();.
Or, you can convert it to an object like others have suggested:
var pul = {"#pull":"#pt","#pullo":"#pf", "#pullc":"#pc"};
Right now, you have an invalid object and an invalid array.
Related
I want the user to go to this URL: domain.com/index.php#index This operation occurs:
$("#index").click(function(){
$(".active").removeClass("active");
$("li#index").addClass("active");
$(".loading").show(1000);
$(document).ready(function() {
$('#wrapper').fadeOut('slow', function(){
$('#wrapper').load("indexs.php", function(){
$(".loading").hide(1000);
$('#wrapper').fadeIn('slow');
});
});
});
});
You may be looking for window.location.hash. This could be implemented, in your example, by doing something like this, assuming you want the value of the hash to affect your jquery selectors.
var hash = window.location.hash;
$(hash).click(function(){
$(".active").removeClass("active");
$("li" + hash).addClass("active");
$(".loading").show(1000);
$(document).ready(function() {
$('#wrapper').fadeOut('slow', function(){
$('#wrapper').load("indexs.php", function(){
$(".loading").hide(1000);
$('#wrapper').fadeIn('slow');
});
});
});
});
I got this code, which works fine, until I change '.1' too colselect. I guess its because it gets the value too late and when I want to use colselect it haven't registered. Does anyone have any ideas on how to solve this?
$(document).ready(function() {
var colSelect;
$('.test2').mousedown( function(){
colSelect = '.' + $(this).attr('id');
});
$( '#1' ).resizable(
{handles:'e'},
{alsoResize: '.1'} // <- here I would like too change '.1' to colselect
);
});
Updated:
$(document).ready(function() {
var colSelect;
$('#one').on('mouseover' ,mousedwn);
function mousedwn(){
colSelect = '.' + $(this).attr('id');
resize(colSelect);
}
$('#one').on('mouseout' ,function(){
$('#one').off('mouseover' ,mousedwn); //prevent memory leaks
});
});
function resize(para){
$( '#1' ).resizable(
{handles:'e'},
{alsoResize: para}
);
}
Working Fiddle
I'am trying to change the class of some input elements during some mouse events but only mouseover and mouseout events are working, what can be the reason of this problem ?
$(document).ready(function(){
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
});
Try to use the code :
$(this).attr('class', '');
or
$(this).attr('class', 'myClass');
and you can too
$(this).addClass('myClass');
$(this).removeClass('myClass');
$(document).ready(function(){
var classname= 'bright';
/*Can create a variable so that you can use it later. By creating variable we can avoid searching in entire dom again*/
var formElement = $(".registerFormElements");
/*Used chaining*/
formElement.on( "mouseover focus", function() {
$(this).addClass(classname);
})
.on( "mouseout blur", function() {
$(this).removeClass(classname);
});
});
You can use addClass() and removeClass()
$(this).removeClass(); //It clears all classes
$(this).addClass('MyClass');
you could bind many events and look at the event.type and toggle the class you want:
$(document).ready(function(){
$('.registerFormElements').on('focus mouseenter mouseleave blur', function(e) {
var element = $(this);
var shouldHaveBright = e.type === 'focus' || e.type === 'mouseenter';
var hasFocus = element.is(':focus');
element.toggleClass('bright', shouldHaveBright || hasFocus);
});
});
It seems to be working for me. Check your class names don't have typos in them. Also, by focus do you mean tab to the input? This is what triggers focus events.
See my fiddle:
http://jsfiddle.net/AdqzA/
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
Your Jqueries might be conflicting :-
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.registerFormElements').mouseover(function(){
this.className='bright';
});
$j('.registerFormElements').mouseout(function(){
this.className='';
});
$j('.registerFormElements').focus(function(){
this.className='bright';
});
$j('.registerFormElements').blur(function(){
this.className='';
});
});
I want to bind a jquery function on a click of a anchor link tag, but do not know how it can be bind, i am using ASP.net MVC with Ajax and want to show data with the help of Ajax. Please give some suggestions to bind the below function on a link click.. Thanks..
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li>#item.Id<li>
}
</ul>
This is your fixed code: {be aware, i'm not your browser's console...}
$(document).ready(function () {
$("a.ShowTable").click(function (e) {
var url = this.href;
$.get(url, {}, function (data) {
$('#dtable').html(data);
});
e.preventDefault();
});
});
first add jQuery file on your script
then write below code
$(document).ready(function(){
$(document).on("click","a.ShowTable,"function(e){
e.preventDefault();
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
});
});
you can use bind
$(document).ready(function(){
$( "a.ShowTable" ).bind( "click", function() {
var url=this.href;
$get(url,{},function(data){
$('#dtable').html(data)
});
e.preventDefault();
});
});
$(document).ready(function(){
$("a.ShowTable").click(function(e){
var url=$(this).attr(href);
$.get(url,{},function(data){
$('#dtable').html(data)
)};
e.preventDefault();
});
<ul>
#foreach(var item in Model)
{
<li><a href='#Url.Action("Index","Home",new {id=item.Id})' class='ShowTable'>#item.Id</a><li>
}
</ul>
I've got this:
http://jsfiddle.net/G3VjC/
which is simply:
$(document).ready(function() {
$(document).on('click','#btn',function(){
console.log('ran btn');
});
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
});
But when clicking the button is run the btn JS and the container JS (see console log).
How can I separate them?
thanks
use stopPropagation()
$(document).on('click','.meee',function(e){ // add event as argument
console.log('ran btn');
e.stopPropagation()
});
Try this
$(document).ready(function() {
$(document).on('click','#containerdiv',function(){
console.log('ran div');
});
$(document).on('click','.meee',function(){
console.log('ran btn');
return false;
});
});
Demo
Or try this:
$(document).ready(function() {
$('#containerdiv').click(function(){
console.log('ran div');
});
$('.meee').click(function(e){
e.stopPropagation();
console.log('ran btn');
});
});
As chumkiu already said, just use stopPropagation()
$(document).on('click','#btn',function(e){
e.stoppropagation();
var target = $(e.target);
if(!target.attr('id') == 'btn'){
e.preventDefault();
$(target.find("#btn)).trigger("click")
}
//any additional logic if the target was of the intended type.
});