homepage Welcome to WebmasterWorld Guest from 54.197.110.151
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Trigger inside Jquery and different parts of content
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4412606 posted 8:49 am on Jan 31, 2012 (gmt 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>

 

ZakAltF4



 
Msg#: 4412606 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4412606 posted 10:01 am on Feb 1, 2012 (gmt 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.

ZakAltF4



 
Msg#: 4412606 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4412606 posted 6:42 am on Feb 2, 2012 (gmt 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...

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4412606 posted 10:52 am on Feb 21, 2012 (gmt 0)

Need help. Please reply.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved