homepage Welcome to WebmasterWorld Guest from 107.20.25.215
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




msg:4412608
 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:4412698
 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




msg:4413014
 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:4413254
 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




msg:4413391
 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




msg:4419920
 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