Solved

Jquery functions and variables

Posted on 2012-03-29
7
388 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery 10 20
jqury 17 30
Select case on click 3 16
Create an automated page index 9 17
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

803 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