Welcome to WebmasterWorld Guest from 54.226.147.190

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 5+ Year Member



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)



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 5+ Year Member



$(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)



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 5+ Year Member



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 5+ Year Member



Need help. Please reply.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month