Trigger inside Jquery and different parts of content - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Trigger inside Jquery and different parts of content

toplisek

8:49 am on Jan 31, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I have set trigger and like to
1. have many DIV elements NOT only panel.
2. change of this CLICK and its trigger into mouse OVER

How to solve this. I'm posting the following working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>

</head>

<body>

<div class="panel">
<img src="images/banner.jpg" width="670" height="560" border="0" alt="" />

</div>
<a class="trigger" href="#"></a>

</body>
</html>

ZakAltF4

4:04 pm on Jan 31, 2012 (gmt 0)

10+ Year Member

You can use .mouseover() ... It's a shortcut for the .trigger('mouseover') method.

$('.t_class').mouseover(function() {
$(".panel").toggle("slow");
//more class calls/your other functions/actions here
});

I don't know that I would use the class name trigger if I didn't have to as it is reserved in Javascript, it's just good practice not to use reserved names ...

toplisek

10:01 am on Feb 1, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

$(document).ready(function(){
$(".trigger").mouseover(function(){
$(".panel").toggle("slow");
$(this).toggleClass("active");
return false;
});
});

this works as mouse over. How to set X (close) image on the right hand side when it is trigger executed? When I go back to the same start area it will be closed. Need also X image on the right hand side.

ZakAltF4

9:51 pm on Feb 1, 2012 (gmt 0)

10+ Year Member

I use an image placed in an absolutely positioned DIV and then according to your code you could do a .click() to toggle the element ...

toplisek

6:42 am on Feb 2, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

So, it will work:
$(".panel1").toggle("slow");
$(".panel2").toggle("slow");
$(".panel3").toggle("slow");

and image:
<img src="wre" border="0" alt="" class="trigger" width="24" height="24" />
<img src="wre" border="0" alt="" class="" width="24" height="24" />
<img src="wre" border="0" alt="" class="" width="24" height="24" />

$(document).ready(function(){
$(".trigger").mouseover(function(){
$(".panel1").toggle("slow");
$(".panel2").toggle("slow");
$(".panel3").toggle("slow");
$(this).toggleClass("active");
return false;
});
});

How to set $(".trigger").mouseover(function(){ when you have many panels like 1,2,3...

toplisek

10:52 am on Feb 21, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Need help. Please reply.