Welcome to WebmasterWorld Guest from 54.196.84.221

Forum Moderators: open

Message Too Old, No Replies

Trigger inside Jquery and different parts of content

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1004
votes: 0


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>
4:04 pm on Jan 31, 2012 (gmt 0)

New User

joined:Jan 12, 2012
posts: 38
votes: 0


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 ...
10:01 am on Feb 1, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1004
votes: 0


$(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.
9:51 pm on Feb 1, 2012 (gmt 0)

New User

joined:Jan 12, 2012
posts: 38
votes: 0


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 ...
6:42 am on Feb 2, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1004
votes: 0


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...
10:52 am on Feb 21, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 1004
votes: 0


Need help. Please reply.