Solved

Jquery functions and variables

Posted on 2012-03-29
7
390 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
ID: 37781079
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
ID: 37781091
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
ID: 37781155
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 Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

Author Comment

by:Refael
ID: 37781283
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
ID: 37792973
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
ID: 37821875
Thank you!
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

685 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