Solved

Jquery functions and variables

Posted on 2012-03-29
7
385 Views
Last Modified: 2012-04-08
Hello Experts,

I am trying to learn how to write functions in Jquery in order to write less (lines of codes).
For example,  this code below:

#places-1 - I have 15    e.g. #places-1, #places-2 #places-3 ....... #places-15
#mb-1 - I also have 15 e.g. #mb-2, #mb-2, #mb-3 ....... #mb-15

Here is a code below i can write for each a block (15 blocks) or i can finally learn how to use variables and functions?

Can you please show me using this example so i can learn?

$('#places-1').mouseenter(function(){

		$('#standort-img').stop().fadeTo(300, 0.7);
		$('#mb-1').addClass('mb-zindex');
		$('#mb-1').stop().animate({width: 32, height: 32, paddingBottom:4}, 400);		
		
		}).mouseleave(function() {
		$('#mb-1').stop().animate({width: 17, height: 16, paddingBottom:0}, 400);
		$('#mb-1').removeClass('mb-zindex');
		$('#standort-img').stop().fadeTo(300, 1.0);
		});

Open in new window

0
Comment
Question by:Refael
  • 3
  • 2
7 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
Comment Utility
U can do this couple of ways...


1) Using ID
  $('#places-1, #places-2, #places-3').mouseenter(function(){
  //Your code
});

2) Using class

Add the class  to all places then your code will be
$('.placeClass').mouseenter(function(){
  //Your code
});

where placeClass is css class name for your places

like

<div id="places-1" class="placeClass">
0
 

Author Comment

by:Refael
Comment Utility
Hi sonawanekiran

I think you misunderstood the question?
I cannot have all the #places-1 in one the mouseenter function as each deals with a different #mb-1. Look above!
0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 200 total points
Comment Utility
Sorry for the same. You can try something like this


 for (var i=1; i<= 15;i++)
 {
   
   $('#places-' + i).mouseenter(function(){
     
   $('#standort-img').stop().fadeTo(300, 0.7);
    $('#mb-' + i).addClass('mb-zindex');
    $('#mb-' + i).stop().animate({width: 32, height: 32, paddingBottom:4}, 400);  
   
    }).mouseleave(function() {
    $('#mb-' + i).stop().animate({width: 17, height: 16, paddingBottom:0}, 400);
    $('#mb-' + i).removeClass('mb-zindex');
    $('#standort-img').stop().fadeTo(300, 1.0);
  });
 
 
   
 }
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Refael
Comment Utility
Hi sonawanekiran, Thank you!

That's strange the fadeTo for the #standort-img works but the animation does not work.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 300 total points
Comment Utility
1) use hover
2) give places a class and add the function to th class
3) get the id of the corresponding MB from the id of the places
 
var mb = $("#mb"+ $(this).attr("id").replace("places",""));

and
4) chain the event

$('.places').hover(function() {
  $('#standort-img').stop().fadeTo(300, 0.7);
  var mb = $("#mb"+ $(this).attr("id").replace("places",""));
  mb.addClass('mb-zindex').stop().animate({width: 32, height: 32, paddingBottom:4}, 400);
}            
,function (){
  $('#standort-img').stop().fadeTo(300, 1.0);
  var mb = $("#mb"+ $(this).attr("id").replace("places",""));
  mb.removeClass('mb-zindex').stop().animate({width: 17, height: 16, paddingBottom:0}, 400);
});
0
 

Author Closing Comment

by:Refael
Comment Utility
Thank you!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now