JavaScript - Help With My Jquery Code Please
please help with my code below: i want to use the .live() function of jquery without having to use the click or mouse/up/down event but maybe with load or ready event when my page load. or when a feature is dropped in the droppable area. see the code below please
$(".product img").draggable({ containment: 'document', opacity: 0.6, revert: 'invalid', helper: 'clone', zIndex: 100 }); $("div.content.drop-here").droppable({ drop: function(e, ui) { var param = $(ui.draggable).attr('src'); if($.browser.msie && $.browser.version=='6.0') { param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/); param = param[1]; } /*****the code below***** ***to use the live function when the page load or when this droppable ****function happens automatically not with a click event *****/ $(".product img").live('click', function(){alert("formclicked");}); addlist(param); } }); Similar TutorialsSo, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance This code works in all browsers, Safari, Chrome, Firefox, but not IE 8 in which I'm testing right now for version. The code is below: Code: <script type="text/javascript"> $(document).ready(function() { $('#form_{picture_id}').ajaxForm(function() { $(function() { setTimeout(function() { $("#picture_description").show('blind', {}, 800) }, 1000); setTimeout(function() { $("#picture_description").hide('blind', {}, 800) }, 11000); }); }); }); </script> What am I doing wrong. The code simply calls the form, then shows a DIV via BLIND then hides it using the same effect. The picture_id in {} is simply smarty PHP. Any help is much much appreciated! Hi, Am using jQuery to hide/show rows of a table (courtesy of http://www.jankoatwarpspeed.com). Problem is I need the jQuery to respond to just the arrow (see example) not the whole row which at the moment is all clickable. Can anyone look at the jQuery and propose what needs to change to make that happen please. Example at http://www.jankoatwarpspeed.com/exam...pandable-rows/ Here's the jQuery: Code: <script type="text/javascript"> $(document).ready(function(){ $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); $("#report tr.odd").click(function(){ $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); }); //$("#report").jExpand(); }); </script> Many thanks in advance, Jock I am using a jQuery slider on a website but the code comes up with invalid, is there any wat to get around this without using a div tag? Thanks for any help on this: Line 26, Column 27: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript"> $(document).ready(function() { $('#slider') .before('<div id="buttons">') .cycle({ fx: 'fade', pager: '#buttons' }); }); </script> Hello! I've been fighting with a jQuery slider all day, and it's going nowhere because admittedly I have extremely limited jQuery knowledge. I am really hoping that someone here is better at this than I am and can tell me why I see a list of the items that should be in the slider stacked up on top of each other rather than seeing the actual slider. Here is the functions.php code. All CSS is in place, but I can copy/paste the stylesheet if necessary as well. If this isn't an appropriate forum for this, can you point me in the right direction? I don't even know which way is up anymore!!! Code: <?php /* HEADER SCRIPTS */ function headscript() { global $post; if (function_exists('is_products_page')){ if ( get_post_type() == 'wpsc-product' || is_products_page() ) return; } ?> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3270175-9']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> <script type="text/javascript" src="http://www.claritymind.com/js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider2").easySlider({ auto: true, continuous: true, pause: 6000, speed: 800, nextId: "slider1next", prevId: "slider1prev" }); }); </script> <script type="text/javascript"> $(function () { $('a#testbutton').hover(function() { $(this).fadeTo("fast", 1); }, function() { $(this).fadeTo("fast", .85); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $("#slider1").easySlider({ numeric: true, auto: true, continuous: true, pause: 9000, speed: 700, }); }); </script> <?php } /* PAGE SPECIFIC CSS TWEAKS */ function home_head() { if (is_home() || is_front_page()) { ?> <style type="text/css"> .custom .headline_area {display:none;} </style> <style type="text/css"> .custom .servnav {display:none;} </style> <?php } } function nonhomepagecss(){ if (!is_home() && !is_front_page()) { ?> <style type="text/css"> .custom #sidebars{margin-top:15px;background:none;} body.custom {background-color:#f5f6f7;} .custom #content_area {background-color: #F5F6F7;} .custom .post_box{padding-top:30px;} .custom #content_box{ margin: 30px auto; width: 960px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: white; box-shadow: 3px 3px 3px #CCC; -moz-box-shadow: 3px 3px 3px #CCC; -webkit-box-shadow: 3px 3px 3px #CCC; border-top: 1px solid #E8E8E8; border-left: 1px solid #E8E8E8; font-family: 'Lucida Grande', 'Lucida Grande Unicode', Helvetica, Verdana, sans-serif; padding-bottom: 30px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; } </style> <?php } } function new_servicespage() { if (is_page('services') || is_page('30')) { ?> <style type="text/css"> .custom .topnav {display:none;} .custom .servnav {display:block;} </style> <div id="content"> <div class="post_box"> <div class="headline_area"> </div> Example text will go here. </div> </div> <div id="sidebars"><span class="newcallout1h4"> <table> <tr> <div style="vertical-align:top;"> <td width="275"><img src="http://cm.deviantwebdesign.com/wp-content/uploads/2012/03/VideoPlace.jpg" height="180" width="260"> </div> <td width="330"><div style="margin-left: 30px;"> <font color="#000000" font size="4">HEADLINE TEXT</font> <ul> <font color="#000000" font size="3"> <li>Bullet 1 - Example text goes here.</li> <li>Bullet 2. Ut enim ad minim veniam, quis nostrud exercitation.</li> <li>Bullet 3. Duis aute irure dolor in reprehenderit in voluptate velit esse.</li> </font> </ul> </div></td> <td width="275"><div style="margin-left: 30px;"> <script type="text/javascript" src="//moon-ray.com/v2.4/include/formEditor/genjs.php?html=true&uid=p2c6497f5&version=1"></script> </div></td> </tr> </table> </span> <?php thesis_build_sidebars(); ?> </div> <?php } } add_action('thesis_hook_custom_template', 'new_servicespage'); /* NAVIGATION MENU */ function navmenuarea(){ ?> <div class="topnav"> <div style="width:960px;margin-left:auto;margin-right:auto;"> <div style="float:left;"> <a href="http://claritymind.com/"><img alt="clrity-logo" src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" style="position:relative;left:0px;" /></a> </div> <div style="float:right;padding-top:11px;"> <ul id="navlist"> <li><a href="http://claritymind.com/services">Services</a></li> <li><a href="http://claritymind.com/next-step">Next Steps</a></li> <li><a href="http://claritymind.com/about">About</a></li> <li><a href="http://claritymind.com/free-articles">Free Stuff</a></li> <li><a href="http://claritymind.com/clients">Clients</a></li> <li><a href="http://claritymind.com/events">Events</a></li> <li><a style="color:#BCFC3D;" href="http://claritymind.com/products">Store</a></li> </ul> </div> </div> </div> <?php } /* FEATURED AREA */ function lowermenu(){ if (is_page()) { ?> <div class="clear"></div> <div style="width:100%;height:5px;"></div> <div class="pagecentered"> <div class="newcallout1"> </div> </div> <div style="width:100%;height:15px;"></div> <?php } } /* REGISTER SIDEBARS FOR CUSTOM SIDEBARS */ if (function_exists('register_sidebar')) { $sidebars = array(1,2, 3, 4, 5, 6, 7, 8, 9, 10); foreach($sidebars as $number) { register_sidebar(array( 'name' => 'Side ' . $number, 'id' => 'side-' . $number, 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>' )); } } function sidebartabs(){ if (function_exists('is_products_page')){ if ( get_post_type() == 'wpsc-product' || is_products_page() ) return; } ?> <div style="width:100%;height:25px;"></div> <div class="tabcontainer"> <ul class="tabs"> <li><a href="#tab1">Popular</a></li> <li><a href="#tab2">Latest</a></li> <li><a href="#tab3">Topics</a></li> <li><a href="#tab4">Links</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="padding-right:0px;"> <a href="http://www.claritymind.com/next-step/" style="border:0;padding:0;margin:0;"><img src="http://www.claritymind.com/wp-content/uploads/2012/01/Master-Your-Mindset.png" alt="Change Your Mindset with Clarity Mind Coaching" style="border:0;padding:0;margin:0;" /></a> <div class="clear"></div> </div> <div id="tab2" class="tab_content"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 6') ) : ?> <?php endif; ?> </div> <div id="tab3" class="tab_content"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 7') ) : ?> <?php endif; ?> <div class="clear"></div> </div> <div id="tab4" class="tab_content"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 8') ) : ?> <?php endif; ?> </div> </div> </div> <div class="clear"></div> <?php } add_action('thesis_hook_before_sidebars', 'sidebartabs'); function home_pagecustom() { if (is_home() || is_page(4217)) { ?> <div style="height:0px;width:0px;position:relative;left:294px;z-index:999;"> <div style="width:356px;height:1px;background:#efefef;"></div> <div style="width:356px;padding-top:2px;"><span class="nqheading">Featured from the Blog</span></div> </div> <div id="slider1"> <ul> <?php query_posts($query_string . '&cat=-3,-8&posts_per_page=5'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <div class="post"> <div style="width:279px;margin-right:15px;float:left;"> <?php $post_image = thesis_post_image_info('image'); echo $post_image['output']; ?> </div> <div style="width:356px;float:right;padding-top:20px;"> <div style=height:300px;overflow:hidden;"> <!-- Display the Title as a link to the Post's permalink. --> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="entry"> <?php the_excerpt(); ?> </div> </div> <div style="width:356px;height:2px;"></div> <span class="readstory"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Continue Reading Post →</a> </div> <div class="clear"></div> </div> <!-- closes the first div box --> </li> <?php endwhile; else: ?> <p>Sorry, no posts matched your criteria.</p> <?php endif; ?> </ul> </div><!-- close slider1 --> <?php wp_reset_query(); ?> <div style="width:650px;margin-top:10px;"> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Lifestyle Design</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=37&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Love & Relationships</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=39&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third last"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Personal Growth</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=226&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="clear"></div> </div> <div class="newcallout"> <h4 class="newcallouth4"><a href="http://www.claritymind.com/soul-affirmation-music-for-better-outcomes/">Browse Affirmation Music for Sale!</a></h4> </div> <div style="width:650px;margin-top:30px;"> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Awareness</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=15&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Meditation</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=40&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third last"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Spirituality</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=61&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="clear"></div> <br /><br /><br /><br /> </div> <?php } } add_action('thesis_hook_before_content', 'home_pagecustom'); /* CUSTOM FOOTER */ function newfooter(){ ?> <div style="width:100%;height:80px;"></div> <div style="width:100%;background:#000000;" class="footernew1"> <div style="width:100%;height:0px;position:relative;top:-132px;z-index:-1;"> <div style="background:url(http://www.claritymind.com/wp-content/uploads/2011/03/mountainback2.jpg) bottom repeat-x;height:132px;width:100%;"></div> </div> <div class="pagecentered" style="padding-top:15px;"> <div class="one_third"> <img src="http://www.claritymind.com/wp-content/uploads/2011/03/certification1.jpg" alt="certification" /> <div style="width:100%;height:3px;border-bottom:1px dotted #444;"></div> <br /> <img src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" alt="Clarity Mind Logo" /><br /> 20 Ravenscroft Drive Asheville, NC 28801<br /> 404-NOW-MIND (404-669-6463)<br /> Skype: KenLad1 </div> <div class="one_third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 9') ) : ?> <?php endif; ?> </div> <div class="one_third last"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 10') ) : ?> <?php endif; ?> </div> <div class="clear"></div> <div style="height:20px;width:100%;"></div> <span style="font-size:10px;color:#fff;">Copyright © Clarity Mind, LLC. All Rights Reserved. Reproduction without permission prohibited.</span> </div> </div> <?php } function format_gridview_desc($description){ if (strlen($description) > 175) $description = substr ( $description , 0 , 175 )."..."; echo $description; } /* create new side bar for music player - this will only be displayed on the product page */ register_sidebar(array( 'name'=> 'Music Player', 'id' => 'music_player', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); Hi all, Just a quick question please, i'm a javascript & jquery newbie and need a little advice to what is probably an easy problem to fix. I'm trying to get this jquery product rotator to work. It advances automatically every 5 seconds with the following code: (there's 8 buttons below and above the main content window, clicking a button swaps the divs in the content window) $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); All i need it to do is to advance automatically as above but also advance the slider when a user hovers/mouse over a button, so the relevant content is displayed in the main window. The code to the whole slider is below, minus the CSS. A demo of the slider is he http://demo.webdeveloperplus.com/fea...ontent-slider/ Many thanks. <!-- Links to Jquery. Do not touch --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <div> <!-- This Week's Offer Product Viewer Code Starts Here --> <script> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); </script> <center> <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/homepage/button1.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/homepage/button2.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/homepage/button3.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/homepage/button4.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/homepage/button5.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="/homepage/button6.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-7"><a href="#fragment-1"><img src="/homepage/button7.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="/homepage/button8.jpg" width="187" height="125" alt="" /></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/about-us-main.gif" width="760" height="500" alt="" /> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button3.jpg" width="760" height="500" alt="" /> <div class="info" > <center><h2>Content </h2></center> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button4.jpg" width="760" height="500" alt="" /> </div> <!-- Fifth Content --> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Sixth Content --> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button6.jpg" alt="" width="760" height="500" /> </div> <!-- Seventh Content --> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button7.jpg" alt="" width="760" height="500" /> </div> <!-- Third Content --> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button8.jpg" alt="" width="760" height="500" /> </div> </div> hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
This post will contain a few guidelines for what you can do to get better help from us. Let's start with the obvious ones: - Use regular language. A spelling mistake or two isn't anything I'd complain about, but 1337-speak, all-lower-case-with-no-punctuation or huge amounts of run-in text in a single paragraph doesn't make it easier for us to help you. - Be verbose. We can't look in our crystal bowl and see the problem you have, so describe it in as much detail as possible. - Cut-and-paste the problem code. Don't retype it into the post, do a cut-and-paste of the actual production code. It's hard to debug code if we can't see it, and this way you make sure any spelling errors or such are caught and no new ones are introduced. - Post code within code tags, like this [code]your code here[/code]. This will display like so: Code: alert("This is some JavaScript code!") - Please, post the relevant code. If the code is large and complex, give us a link so we can see it in action, and just post snippets of it on the boards. - If the code is on an intranet or otherwise is not openly accessible, put it somewhere where we can access it. - Tell us any error messages from the JavaScript console in Firefox or Opera. (If you haven't tested it in those browsers, please do!) - If the code has both HTML/XML and JavaScript components, please show us both and not just part of it. - If the code has frames, iframes, objects, embeds, popups, XMLHttpRequest or similar components, tell us if you are trying it locally or from a server, and if the code is on the same or different servers. - We don't want to see the server side code in the form of PHP, PERL, ASP, JSP, ColdFusion or any other server side format. Show us the same code you send the browser. That is, show us the generated code, after the server has done it's thing. Generally, this is the code you see on a view-source in the browser, and specifically NOT the .php or .asp (or whatever) source code. I'm not sure if I'm in the right place or not, but I am in desparate need of some help. I have this code: Code: <script type="text/javascript"> $(document).ready(function(){ $('#add').click(function() { alert('test'); }); $("form#exercise").submit(function() { // we want to store the values from the form input box, then send via ajax below var activity = $('#activity').attr('value'); $.ajax({ type: "POST", url: "newActiveProc.php", data: "activity="+ activity +"&func=search", success: function(activity){ $("span#results").html(activity); } }); return false; }); }); </script> As you can see by the highlighted portion, the user is alerted once they make a selection. It should go something like this: [Add to table] Football [Add to table] Basketball [Add to table] Baseball Once they click the 'add to table' button, their selection should be added to a table that is at the bottom of the page. So far, all I've been able to do is generate an alert box, but I know thats not right. Any information anyone has would be helpful. Thanks in advance. Hi All, i have an autosuggest feature on my site where the user searches for a product and as they type it lists matching products from my database. here is the javascript/jquery code Code: $(document).ready(function(){$(document).click(function(){$("#ajax_response").fadeOut('slow');});$("#keyword").focus();var offset=$("#keyword").offset();var width=$("#keyword").width()-2;$("#ajax_response").css("left",offset.left);$("#ajax_response").css("width",width);$("#keyword").keyup(function(event){var keyword=$("#keyword").val();;if(keyword.length) {if(event.keyCode!=40&&event.keyCode!=38&&event.keyCode!=13) {$("#loading").css("visibility","visible");$.ajax({type:"POST",url:"/ajax_server.php",data:"data="+keyword,success:function(msg){if(msg!=0) $("#ajax_response").fadeIn("slow").html(msg);else {$("#ajax_response").fadeIn("slow");$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');} $("#loading").css("visibility","hidden");}});} else {switch(event.keyCode) {case 40:{found=0;$("li").each(function(){if($(this).attr("class")=="selected") found=1;});if(found==1) {var sel=$("li[class='selected']");sel.next().addClass("selected");sel.removeClass("selected");} else $("li:first").addClass("selected");} break;case 38:{found=0;$("li").each(function(){if($(this).attr("class")=="selected") found=1;});if(found==1) {var sel=$("li[class='selected']");sel.prev().addClass("selected");sel.removeClass("selected");} else $("li:last").addClass("selected");} break;case 13:$("#ajax_response").fadeOut("slow");$("#keyword").val($("li[class='selected'] a").text());searchValue=document.getElementById('keyword').value; searchValue = searchValue.replace( /\([^\)]*\)/g, "" );searchValue = searchValue.replace(/^\s*|\s*$/g,'');searchValue=searchValue.replace(/(\s-)/gi,"");searchValue=searchValue.replace(/\s/gi, "_");searchValue=searchValue.replace(/[:',]/gi,"");window.location="/CDs/"+searchValue.toLowerCase();break;}}} else $("#ajax_response").fadeOut("slow");});$("#ajax_response").mouseover(function(){$(this).find("li a:first-child").mouseover(function(){$(this).addClass("selected");});$(this).find("li a:first-child").mouseout(function(){$(this).removeClass("selected");});$(this).find("li a:first-child").click(function(){$("#keyword").val($(this).text());$("#ajax_response").fadeOut("slow");});});}); this runs this php script to get the product names PHP Code: <?php session_start(); include("config.php"); $keyword = $_POST['data']; $keyword = preg_replace("/s*\(.*\)/i", "", $keyword); $keyword = ucwords($keyword); $sql = "select DISTINCT prodName,prodShortName,prodCategory from ".$db_table." where (".$db_column." like '".$keyword."%' AND prodCategory = '".$_SESSION['subpage']."') limit 0,10"; $result = mysql_query($sql) or die(mysql_error()); if(mysql_num_rows($result)) { echo '<ul class="list">'; while($row = mysql_fetch_array($result)) { $category = strtolower($row['prodCategory']); $str = ucwords($row['prodName']); $start = strpos($str,$keyword); $end = similar_text($str,$keyword); $last = substr($str,$end,strlen($str)); $first = substr($str,$start,$end); $link = "/".$category."/".$row['prodShortName']; $final = '<span class="bold">'.$first.'</span>'.$last; echo '<li><a href="'.$link.'">'.$final.'</a></li>'; } echo "</ul>"; } else { echo "0"; } ?> which works fine, what i am trying to acheive is to pull out the category of the products in the list and use it in the script. so where it says this Code: window.location="/CDs/"+searchValue.toLowerCase();break; i want the value of the php value $category to be. but i have no idea how to do this or if it is even possible? any help is appreciated many thanks Luke Hi Guys, Please check this link out. I'm curious if you can attain the same functionality with jquery. Which include the hover over effects and sliding. If this can be done can you point me in the right direction to find some documentation to start learning. Thanks. http://www.gensler.com/#projects I'm not sure if this is something jquery can do or what but here's what I want to do but I have this following code and when it shows either Public or Archived for the Event Status I want it to be a link so that if I click on Public then it turn it into Archived because it'll change its status_id in the DB from 4 to 5. PHP Code: case 1: echo $e; ?> <h1 class=backstage>Archiving Management</h1><br /> <h2 class=backstage>Weekly Events</h2><br /> <?php $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus` AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'singular' OR els.type = 'recurring'"; $result = mysql_query ( $query ); $rows = mysql_num_rows($result); if ($rows > 0) { print'<table width="100%" class="table1"> <tr class="rowheading"> <td>Event</td> <td align="center">Booking Date</td> <td align="center">Event Status</td> </tr>'; $i = 0; while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) { $sClass = 'row2'; if ($i++ % 2) $sClass = 'row1'; printf ( "<tr class=\"%s\">", $sClass ); printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] ); printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate'] )); printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] ); echo '</tr>'; } echo '</table><br>'; } else { echo '<span>There are no weekly events to archive.</span><br /><br />'; } ?> <h2 class=backstage>Pay-Per-View Events</h2><br /> <?php $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus` AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'ppv'"; $result = mysql_query ( $query ); $rows = mysql_num_rows($result); if ($rows > 0) { print'<table width="100%" class="table1"> <tr class="rowheading"> <td>Event</td> <td align="center">Booking Date</td> <td align="center">Event Status</td> </tr>'; $i = 0; while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) { $sClass = 'row2'; if ($i++ % 2) $sClass = 'row1'; printf ( "<tr class=\"%s\">", $sClass ); printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] ); printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate']) ); printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] ); echo '</tr>'; } echo '</table><br>'; } else { echo '<span>There are no ppv events to archive.</span><br /><br />'; } returnmain(); footercode(); break; Hi, I have this js script which is working on mouse click, what is my requirment is that it do the same function wiht on mouse over: click: function(e) { var el = this; el.blur(); // if the image was not preloaded yet then wait if (el.zoomimageCfg.loading === true) { return false; } //zoom it in if not zoomed already if (el.zoomimageCfg.zoomed == false) { EYE.zoomimage.zoomIn(el); //else zoom it out } else { EYE.zoomimage.zoomOut(el, false); } return false; }, Thank you Best Regards, mnightwalker i am a newbie to jquery and need help. i want to alert anything when i click at any button that have the class .resetBtn using jquery. I know doing it with javascript is much easier but i learning jquery so trying to create function by myself. my code currently does not work when i click on my button. Code: $(".resetBtn").click(function() { alert ("asd"); }); i want get value form path : ex.. xxx.com/index.php?cat " cat " read cookie with jquery who? |