469,935 Members | 1,653 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,935 developers. It's quick & easy.

Having trouble with j-query.

Hi all,

I've been working on my personal portfolio website and been struggling a lot because of J-query. Since my j-query level is not like master.. I usually modify existing j-query plugins to meet my needs and this time I'm trying to combine both accordion plugin and slideshow plugin.

I used the tutorial for accordion from this website -
http://acrisdesign.com/2010/03/jquery-tutorial-toggle-effect-on-hoverclick

also used the tutorial for slideshow from this website - http://sorgalla.com/jcarousel

These two j-query plug-ins work fine when they're not combined together but when I combined two plug-ins and implemented on my website they don't work properly.

This is the page where I'm having trouble. http://jsikcom.ipage.com/portfolio-test3.htm

once you click the banner in the middle, it expands but the slide show function doesn't work properly.

Can anyone help me out??

Here is the html code
Expand|Select|Wrap|Line Numbers
  1.  
  2. <script type="text/javascript" src="jquery.js"></script>
  3. <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
  4. <script type="text/javascript">
  5.     $(document).ready(function(){
  6.         //Hide the tooglebox when page load
  7.         $(".contentbox").hide();
  8.         //slide up and down when click over heading 2
  9.             $(".affiliates a").click(function(){
  10.         // slide toggle effect set to slow you can set it to fast too.
  11.         $(this).next(".contentbox").slideToggle("normal");
  12.         return false;
  13.         });
  14.     });
  15. </script>
  16.  
  17.  
  18. <script type="text/javascript">
  19. jQuery(document).ready(function() {
  20.     jQuery('#mycarousel').jcarousel({
  21.                 scroll: 1,
  22.                 width: 557,
  23.                 height: 221,
  24.                 visible: 1,
  25.                 animation:600,
  26.                 wrap:"both"
  27.     });
  28.      $(".image").fadeIn(1900);
  29. });
  30.  
  31.  
  32. $(function() {  
  33. $('a').click(function() {  
  34. $('.image').fadeOut(1500);  
  35. setTimeout('window.location = url', 1500);
  36. });  
  37. }); 
  38.  
  39. </script>
  40. <link href="_css/style.css" rel="stylesheet" type="text/css" />
  41. <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
  42. </head>
  43.  
  44. <body>
  45.  
  46. <div class="container">
  47.   <div class="header">
  48.       <div class="logo"><a href="index.html"><img src="_image/logo.png" width="248" height="146" alt="Logo" /></a></div>
  49.       <div class="menu">
  50.        <ul>
  51.         <li><a href="about.html" class="about">ABOUT</a></li>
  52.         <li><a href="portfolio.html" class="portfolio">PORTFOLIO</a></li>
  53.         <li><a href="blog.html" class="blog">BLOG</a></li>
  54.         <li><a href="contact.html" class="contact">CONTACT</a></li>
  55.        </ul>
  56.       </div>  
  57.       </div>  
  58.  
  59.   <div class="content">
  60.     <div class="title"><img src="_image/portfolio.png" width="795" height="71" alt="Product designer" /></div>
  61.      <p>&nbsp;</p>   
  62.  
  63.     <div class="affiliates">
  64.         <a href="#" class="p1"><img src="_image/project01.jpg" alt="" /></a>
  65.         <div class="contentbox">
  66.  
  67.   <ul id="mycarousel" class="jcarousel-skin-tango">
  68.     <li><img src="img/picture1.jpg" width="557" height="281" alt="" /></li>
  69.     <li><img src="img/picture2.jpg" width="557" height="281" alt="" /></li>
  70.     <li><img src="img/picture3.jpg" width="557" height="281" alt="" /></li>
  71.   </ul>
  72.  
  73.     </div>
  74.  
  75.         <!--Content Here--></div>
  76.     </div>
  77.  
  78.  
  79.     <!-- end .content --></div>
  80.  
  81.  
  82.  
  83.   <div class="footer">
  84.     <p>Copyright</p>
  85.     <!-- end .footer --></div>
  86.   <!-- end .container --></div>
  87. </body>
  88. </html>
  89.  
Oct 20 '10 #1
3 1336
JKing
1,206 Expert 1GB
You have a javascript error on line 35 of the code you posted.

setTimeout('window.location = url', 1500);
That is the offending line and the error is "url is undefined".

I'm going to assume you need to replace url with an actual url on your site.
Oct 20 '10 #2
jaesik
1
Hi Jking,

I actually removed the line 35 because it's not important to main function but it still fails to work.
Oct 20 '10 #3
JKing
1,206 Expert 1GB
Can you be more specific as to what is and isn't working and how it should be working?
Oct 21 '10 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by ed | last post: by
2 posts views Thread by Stu | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.