Search Results

Search found 169 results on 7 pages for 'slideup'.

Page 7/7 | < Previous Page | 3 4 5 6 7 

  • siblings in jquery hide everything

    - by user2658615
    This is my html code : <div id="tabbase"> <ul> <li>a</li> <li>b</li> </ul> <div id="tabs-0"></div> <div id="tabs-1"> <div class="width50"> <h5>title1</h5> <div class="da-desc">a</div> <button>continue</button> </div> <div class="width50"> <h5>title2</h5> <div class="da-desc">b</div> <button>continue</button> </div> </div> </div> and this is CSS code : #tabbase { margin:16px; } #tabbase ul li { display:inline-block; margin:5px 0px 5px 0; background:rgb(224,224,224); padding:5px; border:1px solid rgb(153,153,153); cursor:pointer; } #tabs-0, #tabs-1 { border:1px solid rgb(153,153,153); background:rgb(255,255,255); padding:5px; margin:-5px 0 0 0; } #tabbase ul li.active { background:rgb(255,255,255) !important; } and this is jquery code : $(document).ready(function(e) { $("#tabs-1").hide(0); $("#tabbase ul li:first").addClass("active"); $("#tabbase ul li").click(function(e) { $(this).addClass("active"); $(this).siblings(this).removeClass("active"); count = $("#tabbase ul li").index(this); $('#tabs-'+count).slideDown(500).siblings(this).slideUp(500); }); }); so you can see that when you click on a tab , all tabs are gone and how can I fix this?

    Read the article

  • Problem with jQuery accordion and cookies

    - by rayne
    I have a jQuery accordion from this site and edited for my purposes, but the accordion only works in Firefox (not Safari or Chrome) and the cookies aren't being set correctly. This is the jQuery: function initMenus() { $('#sidebar .letter_index').hide(); $.each($('#sidebar .letter_index'), function() { var cookie = $.cookie(this.id); if (cookie === null || String(cookie).length < 1) { $('#sidebar .letter_index:first').show(); } else { $('#' + this.id + ' .' + cookie).next().show(); } }); $('#sidebar .letter_head').click(function() { var checkElement = $(this).next(); var parent = this.parentNode.parentNode.id; if ((checkElement.is('.letter_index')) && (!checkElement.is(':visible'))) { $('#' + parent + ' .letter_index:visible').slideUp('normal'); if ((String(parent).length > 0) && (String(this.className).length > 0)) { // not working - wie ändert man das this.class so das die class abc oder def gesetzt wird anstatt this?! $.cookie(parent, this.className); } checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenus();}); This is how my HTML looks (sample item): <div id="sidebar"> <h2 class="letter_head"><a href="#" class="ABC">ABC</h2> <ul class="letter_index"> <li>Abc</li> <li>Bcd</li> </ul> </div> I can't find the problem why the script won't work in Safari and Chrome. I also don't know how to tell it to use the class of the a inside the h2 as the cookie value. (Currently the cookie is set as $.cookie(parent, this.className);, which produces cookies with the name container (the div above #sidebar) and the value letter_head. It needs to be something like 'sidebar' and 'ABC', 'DEF' and so on. Thanks in advance!

    Read the article

  • Collpasible menu needs all header needs to be closed on initial loading

    - by Maju
    I have a sidebar with collapsible menu it works fine but all the values come expanded the initial loading time.I want it to be closed on load and toggled thereafter. Here is the jquery used // Sidebar Toggle var fluid = { Toggle : function(){ var default_hide = {"grid": true }; $.each( ["pagesnav", "commentsnav", "userssnav", "imagesnav"], function() { var el = $("#" + (this == 'accordon' ? 'accordion-block' : this) ); if (default_hide[this]) { el.hide(); $("[id='toggle-"+this+"']").addClass("hidden"); } $("[id='toggle-"+this+"']") .bind("click", function(e) { if ($(this).hasClass('hidden')){ $(this).removeClass('hidden').addClass('visible'); el.slideDown(); } else { $(this).removeClass('visible').addClass('hidden'); el.slideUp(); } e.preventDefault(); }); } ); } } jQuery(function ($) { if($("[id^='toggle']").length){fluid.Toggle();} }); here is the html <span class="ul-header"><a id="toggle-pagesnav" href="#" class="toggle visible">Content</a></span> <ul id="pagesnav"> <li><a class="icn_manage_pages" href="#">Manage Pages</a></li> <li><a class="icn_add_pages" href="#">Add Pages</a></li> <li><a class="icn_edit_pages" href="#">Edit Pages</a></li> <li><a class="icn_delete_pages" href="#">Delete Pages</a></li> </ul> <!-- End Content Nav --> <!-- Start Comments Nav --> <span class="ul-header"><a id="toggle-commentsnav" href="#" class="toggle visible">Comments</a></span> <ul id="commentsnav"> <li><a class="icn_manage_comments" href="#">Manage Comments</a></li> <li><a class="icn_add_comments" href="#">Add Comments</a></li> <li><a class="icn_edit_comments" href="#">Edit Comments</a></li> <li><a class="icn_delete_comments" href="#">Delete Comments</a></li> </ul> here is the css used .toggle { display:block; } .ul-header a.visible { background:url('../img/icons/small/toggle_close.png') no-repeat scroll 97% 50%; } .ul-header a.hidden { background:url('../img/icons/small/toggle_open.png') no-repeat scroll 97% 50%; } Please help.

    Read the article

  • Ajax problem after deleting a div, then creating a new one

    - by Matt Nathanson
    I'm building a custom CMS where you can add and delete clients using ajax and jquery 1.4.2. My problem lies after I delete a div. The ajax is used to complete this and refresh automatically.. But when I go to create a new div (without a hard refresh) it puts it back in the slot of the div I just deleted. How can I get this to completely forget about the div i just deleted and place the new div in the next database table? link for reference: http://staging.sneakattackmedia.com/cms/ //Add New client // function AddNewClient() { dataToLoad = 'addClient=yes'; $.ajax({ type: 'post', url: '/clients/controller.php', datatype: 'html', data: dataToLoad, target: ('#clientssidebar'), async: false, success: function(html){ $(this).click(function() {reInitialize()}); //$('#clientssidebar').html(html); $('div#' + clientID).slideDown(800); $(this).click(function() { ExpandSidebar()});}, error: function() { alert('An error occured! 222');} });}; //Delete Client // function DeleteClient(){ var yes = confirm("Whoa there chief! Do you really want to DELETE this client?"); if (yes == 1) { dataToLoad = 'clientID=' + clientID + '&deleteClient=yes', $.ajax({ type: 'post', url: '/clients/controller.php', datatype: 'html', data: dataToLoad, success: function(html) { alert('Client' + clientID + ' should have been deleted from the database.'); $(this).click(function() {reInitialize()}); $('div#' +clientID).slideUp(800); }, error: function() { alert('error'); }});};}; //Re Initialize // function reInitialize() { $('#addnew').click(function() {AddNewClient()}); $('.deletebutton').click(function() {clientID = $(this).parent().attr('id'); DeleteClient()}) $('.clientblock').click(function() {clientID = $(this).attr('id'); ExpandSidebar()});}; //Document Ready // $(document).ready(function(){ if ($('isCMS')){ editCMS = 1; $('.deletebutton').click(function() {clientID = $(this).parent().attr('id'); DeleteClient()}); $('#addnew').click(function() {AddNewClient()}); $('.clientblock').click(function() {clientID = $(this).attr('id'); ExpandSidebar()}); $('.clientblock').click(function() {if (clickClient ==true) { $(this).css('background-image', 'url(/images/highlightclient.png)'); $(this).css('margin-left' , '30px'); }; $(this).click(function(){ $(this).css('background-image', ''); }); $('.uploadbutton').click(function(){UploadThings()}); }); } else ($('#clientscontainer')) { $('#editbutton').css('display', 'none'); }; }); Please help!!!

    Read the article

  • jQuery - Show field based on value of a type-hidden on refresh.

    - by Sebhael
    Hello, I'm trying to create something in jQuery and having a bit of problems with it. I'm not too adept on the framework, so I'm sure this is all wrong. Anyways, the ultimate goal is a full form that contains 3 radio buttons - depending on the value of the button, a LI is shown. I have all of that done, but my problem is coming with validation. If something fails then the page is reloaded and the div that was selected doesn't show without clicking another radio first, then back to the original. This process is basically the same as someone came up with here. Here's what I got so far. HTML <li> <label> License (radio) </label> <label for="commercial" class="checkBox"> Commercial </label> <input type="radio" name="license" value="commercial" id="commercial" class="checkBox" <?php echo set_radio('license', 'commercial'); ?> /> <label for="abandonware" class="checkBox"> Abandonware </label> <input type="radio" name="license" value="abandonware" id="abandonware" class="checkBox" <?php echo set_radio('license', 'abandonware'); ?> /> <label for="freeware" class="checkBox"> Freeware </label> <input type="radio" name="license" value="freeware" id="freeware" class="checkBox" <?php echo set_radio('license', 'freeware'); ?> /> </li> This is followed by three LI's that contain id="commercial, abandonware, and freeware" and class="licenseli" My jQuery is, as said, something from here. $('li.licenseli').hide(); $('input[name=license]:radio').change(function(){ var Type = $(this).val(); // Get value of radio $('li.licenseli').slideUp(); // Hide non-selected $('li#'+Type).slideDown(); // Show Selected }); So what I need help with is I have a hidden input that retrieves the value of the radio box from validation - I want to take this value (or the radio's if possible?) and have the original selected option's LI already visible.

    Read the article

  • jQuery question from a person who can't javascript

    - by Evilalan
    So I'm trying to adapt this Dropdown menu on Joomla the styles work great as expected so I'll post the javascript includes on the head of my website: <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/dropdown.js'></script> <script type='text/javascript'> $(function() { $('.menu').droppy(); }); </script> <script type='text/javascript'> $(function() { $('.menu').droppy({speed: 100}); }); </script> ok I don't know why its is not working I'll post the dropdown.js should I post the jQuery too? it's really big! $.fn.droppy = function(options) { options = $.extend({speed: 250}, options || {}); this.each(function() { var root = this, zIndex = 1000; function getSubnav(ele) { if (ele.nodeName.toLowerCase() == 'li') { var subnav = $('> ul', ele); return subnav.length ? subnav[0] : null; } else { return ele; } } function getActuator(ele) { if (ele.nodeName.toLowerCase() == 'ul') { return $(ele).parents('li')[0]; } else { return ele; } } function hide() { var subnav = getSubnav(this); if (!subnav) return; $.data(subnav, 'cancelHide', false); setTimeout(function() { if (!$.data(subnav, 'cancelHide')) { $(subnav).slideUp(options.speed); } }, 500); } function show() { var subnav = getSubnav(this); if (!subnav) return; $.data(subnav, 'cancelHide', true); $(subnav).css({zIndex: zIndex++}).slideDown(options.speed); if (this.nodeName.toLowerCase() == 'ul') { var li = getActuator(this); $(li).addClass('hover'); $('> a', li).addClass('hover'); } } $('ul, li', this).hover(show, hide); $('li', this).hover( function() { $(this).addClass('hover'); $('> a', this).addClass('hover'); }, function() { $(this).removeClass('hover'); $('> a', this).removeClass('hover'); } ); }); }; My question here is: Why is it not working! I know that this is really complex (I don't anything about JavaScript) but if you help me I'll post a tutorial and edited files that will help a lot of people! By the way I've download jQuery from the original site so I don't think that this can be the problem! Thanks in advance!

    Read the article

  • Get with the ajax data into a php file

    - by Max Torstensson
    I'm trying to build a login system with ajax and php. I use a log-view where I then save the data in ajax which brings into my doLogin.php (php file). My problem is that php file should never be any ajax data for when I build it into a class and a function VIEW: public function DoLoginBox() { //inloggning form-tagg... return '<p>&nbsp;</p> <div id="content"> <h1>Login Form</h1> <form id="form1" name="form1" action="Handler/doLogin.php" method="post"> <p> <label for="username">Username: </label> <input type="text" name="username" id="username" /> </p> <p> <label for="password">Password: </label> <input type="password" name="password" id="password" /> </p> <p> <input type="submit" id="login" name="login" /> </p> </form> <div id="message"></div> </div>'; } AJAX: <script type="text/javascript"> $(document).ready(function() { $("#login").click(function() { var action = $("#form1").attr('action'); var form_data = { username: $("#username").val(), password: $("#password").val(), is_ajax: 1 }; $.ajax({ type: "POST", url: action, data: form_data, success: function(response) { if(response == 'success') $("#form1").slideUp('slow', function() { $("#message").html("<p class='success'>You have logged in successfully!</p>"); }); else $("#message").html("<p class='error'>Invalid username and/or password.</p>"); } }); return false; }); }); </script PHP: <?php require_once ("UserHandler.php"); class DoLogingHandler{ public function Login (){ $is_ajax = !empty($_REQUEST['is_ajax']); if(isset($is_ajax) && $is_ajax) { $username = $_REQUEST['username']; $password = $_REQUEST['password']; $UserHandler = new UserHandler(); $UserHandler -> controllDB($username,$password); if($username == 'demo' && $password == 'demo') { echo "success"; } } } } ` $DoLogingHandler = new DoLogingHandler(); $DoLogingHandler-Login(); ?

    Read the article

  • jquery animation problem using stop

    - by Flanders
    Hi! When running a Jquery animation like slideDown(), it looks like a number of element-specific css properties is set to be updated at a specific interval and when the animation is complete these properties are unset and the display property is simply set to auto or whatever. At least in firebug you can't see those temporary properties any more. The problem I've encountered is the scenario where we stop the slide down with stop(). The element is then left with the current temporary css values. Which is fine because it has to, but let us say that I stoped the slidedown because I have decided to slide it back up again a bit prematurely. It would look something like this: $(this).slideDown(2000) //The below events is not in queue but will rather start execute almost simultaneously as the above line. (dont remember the exact syntax) $(this).delay(1000).stop().slideUp(2000) The above code might not make much sense, but the point is: After 1 second of sliding down the animation is stopped and it starts to slide back up. Works like a charm. BUT!!! And here is the problem. Once it it has slid back up the elements css properties are reset to the exact values it had 1000ms into the slideDown() animation (when stop() was called). If we now try to run the following: $(this).slideDown(2000) It will slide down to the very point the prior slideDown was aborted and not further at half the speed (since it uses the same time for approximately half the height). This is because the css properties were saved as I see it. But it is not especially wished for. Of course I want it to slide all the way down this time. Due to UI interaction that is hard to predict everything might soon break. The longer animations we use increases the risk of something like this happening. Is this to be considered a bug, or am I doing something wrong? Or maybe it's just a feature that is not supported? I guess I can use a callback function to reset the css properties, but depending on the animation used, different css properties are used to render it, and covering your back would result in quite a not-so-fancy solution.

    Read the article

  • jQuery apply functionality only to class and parent elements.

    - by kylex
    I have the following list: <ul> <li class="topCurrent">One <ul> <li>One-1 <ul> <li>One-1.1 <ul> <li class="current">One-1.1.1 <ul> <li>One-1.1.1.1</li> <li>One-1.1.1.2</li> <li>One-1.1.1.3</li> </ul> </li> <li>One-1.1.2</li> </ul> </li> <li>One-1.2</li> </ul> </li> <li>One-2</li> <li>One-3</li> </ul> </li> <li>Two <ul> <li>Two-1</li> <li>Two-2</li> </ul> </li> Using the following jQuery: $("ul li ul").hide(); $("ul li").hoverIntent( function(){ $(this).children('ul').slideDown('fast'); }, function(){ $(this).children('ul').slideUp('fast'); } ); What this does is hide all of the ul below the top level ul until there is a hover over it. What I would like to do is this: If an li has a class="current" I would like that structure to be open up until the point that current is hit. It would still allow the ul below it to be displayed on a hover, as well as any other ul's, but at no point would the parents of class="current" be hidden. Suggestions? This problem has been driving me crazy. Thanks!

    Read the article

  • How can I make a div expand on click with only one open at a time?

    - by imHavoc
    As shown in here: http://www.learningjquery.com/2007/03/accordion-madness. But I need help to edit it so that it will work for my circumstances. Sample HTML <div class="row even"> <div class="info"> <div class="class">CK1</div> <div class="teacher_chinese">??</div> <div class="teacher_english">Teacher Name</div> <div class="assistant_chinese">??</div> <div class="assistant_english">Assistant Name</div> <div class="room">Room 00</div> <div class="book"></div> </div> <div class="chapters"> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=1"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=2"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=3"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=4"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=5"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=6"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=7"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=8"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=9"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=10"><span class="chapter">?</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=11"><span class="chapter">??</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=12"><span class="chapter">??</span></a> <a href="../../curriculum/cantonese/textbook.php?cls=C1&amp;ch=13"><span class="chapter">??</span></a> </div> </div> JQUERY [Work In Progress] $(document).ready(function() { $('div#table_cantonese .chapters').hide(); $('div#table_cantonese .book').click(function() { var $nextDiv = $(this).next(); var $visibleSiblings = $nextDiv.siblings('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('fast', function() { $nextDiv.slideToggle('fast'); }); } else { $nextDiv.slideToggle('fast'); } }); }); So when the end-user click on div.book, div.chapters will expand. And only one div.chapters will be shown at a time. So if a div.chapters is already open, then it will close the open one first before animating the one the user clicked on.

    Read the article

  • Jquery calendar and tab sliding div clash...

    - by StealthRT
    Hey all, i am trying my best to figure out another way around this problem i seem to have encountered. On my website i have a jquery calendar and also a jquery div tab slider (this: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html). The problem comes into play with the DIV tag. The calender loads up inside a DIV with a id of 'calender'. The CSS for the tabs have the DIV hidden: CSS: .boxBody div {display:none;} .boxBody div.show {display:block;} .boxBody #category a {display:block;} And because of that, the calender never shows on the page. However, if i comment out that css code above, it shows up but does not cover each section as it should. In other words, everything is shown when it should be hidden until the tabs are clicked on to revel it. code: <script type="text/javascript"> $(document).ready(function() { $('#tabMenu > li').click(function(){ $('#tabMenu > li').removeClass('selected'); $(this).addClass('selected'); $('.boxBody div').slideUp('1500'); $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); }).mouseover(function() { $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); $('.boxBody #category li').mouseover(function() { $(this).css('backgroundColor','#888'); $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300}); }).mouseout(function() { $(this).css('backgroundColor',''); $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300}); }); $('.boxBody li').click(function(){ window.location = $(this).find("a").attr("href"); }).mouseover(function() { $(this).css('backgroundColor','#888'); }).mouseout(function() { $(this).css('backgroundColor',''); }); }); </script> <div align="center"> <div class="Mainbox"> <ul id="tabMenu"> <div id="theLogo"><[img] src="img/theLogo.png" width="415" height="146" /></div> <li class="stats"><[img] src="img/Stats.png" width="70" height="52" id="tab1" /></li> <li class="cal"><[img] src="img/cal.png" width="70" height="52" id="tab2" /></li> <li class="loyalty"><[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /></li> <li class="Employees"><[img] src="img/Employees.png" width="70" height="52" id="tab4" /></li> <li class="txtemail"><[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /></li> </ul> <div class="boxTop"></div> <div class="boxBody"> <div id="stats" class="show"> Just a test here.... </div> <div id="cal"> <div id='calendar'></div> </div> <div class="boxBottom"></div> </div> </div> How can i change the tab javascript code so that it does not have to hide the DIV's so that the calendar will work? I've tried to replace all div's with 'span' or 'p' but that does not seem to work at all. Any help would be great as i am stuck on this and can not go any further without it being solved! :) David

    Read the article

  • php form doesnt submit one of the fields

    - by steve
    i have bought a template that have built in contact form problem is that it submits every thing except "company" name i have spent few hours messing around with it but cant get to work it. if you can point me to some solution i would be greatful thanks in advance this is contact form <form action="php/contact.php" method="post" id="contactform"> <ol> <li> <label for="name">your name <span class="red">*</span></label> <input id="name" name="name" class="text" /> </li> <li> <label for="email">Your email <span class="red">*</span></label> <input id="email" name="email" class="text" /> </li> <li> <label for="company">Company Name</label> <input id="company" name="company" class="text" /> </li> <li> <label for="subject">Subject</label> <input id="subject" name="subject" class="text" /> </li> <li> <label for="message">Message <span class="red">*</span></label> <textarea id="message" name="message" rows="6" cols="50"></textarea> </li> <li class="buttons"> <input type="image" name="imageField" id="imageField" src="images/button.jpg" /> </li> </ol> </form> this is java script <script type="text/javascript"> // <![CDATA[ jQuery(document).ready(function(){ $('#contactform').submit(function(){ var action = $(this).attr('action'); $.post(action, { name: $('#name').val(), email: $('#email').val(), company: $('#company').val(), subject: $('#subject').val(), message: $('#message').val() }, function(data){ $('#contactform #submit').attr('disabled',''); $('.response').remove(); $('#contactform').before('<p class="response">'+data+'</p>'); $('.response').slideDown(); if(data=='Thanks for your message, will contact you soon.') $('#contactform').slideUp(); } ); return false; }); }); // ]]> </script> this is php script if(!$_POST) exit; $email = $_POST['email']; //$error[] = preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}\b/i', $POST['email']) ? '' : 'INVALID EMAIL ADDRESS'; if(!eregi("^[a-z0-9]+([\.-][a-z0-9]+)" ."@"."([a-z0-9]+([.-][a-z0-9]+))+"."\.[a-z]{2,}"."$",$email )){ $error.="Invalid email address entered"; $errors=1; } if($errors==1) echo $error; else{ $values = array ('name','email','message'); $required = array('name','email','message'); $your_email = "[email protected]"; $email_subject = "New Message: ".$_POST['subject']; $email_content = "new message:\n"; foreach($values as $key => $value){ if(in_array($value,$required)){ if ($key != 'subject' && $key != 'company') { if( empty($_POST[$value]) ) { echo 'Please fill in all required fields, marked with *'; exit; } } $email_content .= $value.': '.$_POST[$value]."\n"; } } if(@mail($your_email,$email_subject,$email_content)) { echo 'Thanks for your message, will contact you soon.'; } else { echo 'ERROR!'; } }

    Read the article

  • piecing together a jquery form mailer

    - by Joel
    Hi guys, My newbieness is shining through here...I managed to piece together a form mailer that works great, but now I need to add two more fields, and I'm at a loss as to how to do it. Over the months, I have commented out some things I didn't need, but now I'm stuck. I borrowed from this tutorial to make the original form: http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/ But then I cannibalized it to make an email signup form for a newsletter, so the fields I need are: recipient email (me-hard coded in) senders email address subject (hardcoded in) first name and city in the body of the message For my form, I have this: <div> <?php include('verify.php'); ?> <form action="index_success.php" method="post" id="sendEmail" class="email"> <h3 class="register2">Newsletter Signup:</h3> <ul class="forms email"> <li class="name"><label for="yourName">Name: </label> <input type="text" name="yourName" class="info" id="yourName" value=" " /><br> </li> <li class="city"><label for="yourCity">City: </label> <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br> </li> <li class="email"><label for="emailFrom">Email: </label> <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" /> <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?> </li> <li class="buttons email"> <button type="submit" id="submit">Send</button> <input type="hidden" name="submitted" id="submitted" value="true" /> </li> </ul> </form> </div> emailcontact.js: $(document).ready(function(){ $("#submit").click(function(){ $(".error").hide(); var hasError = false; var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; var emailFromVal = $("#emailFrom").val(); if(emailFromVal == '') { $("#emailFrom").after('<span class="error">You forgot to enter the email address to send from.</span>'); hasError = true; } else if(!emailReg.test(emailFromVal)) { $("#emailFrom").after('<span class="error">Enter a valid email address to send from.</span>'); hasError = true; } var subjectVal = $("#subject").val(); if(subjectVal == '') { $("#subject").after('<span class="error">You forgot to enter your name.</span>'); hasError = true; } var messageVal = $("#message").val(); if(messageVal == '') { $("#message").after('<span class="error">You forgot to enter your city.</span>'); hasError = true; } if(hasError == false) { $(this).hide(); $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />'); $.post("/includes/sendemail.php", //emailTo: emailToVal, { emailFrom: emailFromVal, subject: subjectVal, message: messageVal }, function(data){ $("#sendEmail").slideUp("normal", function() { $("#sendEmail").before('<h3 class="register2">Success!</h3><p class="emailbox">You are on the Newsletter email list.</p>'); }); } ); } return false; }); }); sendmail.php: <?php $mailTo = $_POST['emailTo']; $mailFrom = $_POST['emailFrom']; $subject = $_POST['yourName']; $message = $_POST['yourCity']; mail('[email protected]','Rattletree Newsletter', 'Name='.$subject. ' City='.$message, "From: ".$mailFrom); ?> Thanks for any help! I'm going crosseyed trying to figure this one out.

    Read the article

  • jquery, moving the current item to the top

    - by azz0r
    Hello, The problem I'm having is that if the fourth item has a long description, it cuts off as it goes below #features. What I was hoping is someone would have a suggestion on how to make the current item selected to move to the top? Code below: <!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> <script type="text/javascript" src="/library/jquery/1.4.js"></script> <script> Model.FeatureBar = { current:0, items:{}, init: function init(options){ var me = this; me.triggers = [] me.slides = [] this.container = jQuery('#features'); jQuery('.feature').each(function(i){ me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')} me.slides[i] = {image: jQuery(this).children('.feature-image')} }); for(var i in this.slides){ this.slides[i].image.hide(); this.triggers[i].description.hide(); } Model.FeatureBar.goToItem(0); setInterval(function(){Model.FeatureBar.next()},5000); }, next: function next(){ var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0; this.goToItem(i); }, previous: function previous(){ var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length; this.goToItem(i); }, goToItem: function goToItem(i) { if (!this.slides[i]) { throw 'Slide out of range'; } this.triggers[this.current].description.slideUp(); this.triggers[i].description.slideDown(); this.slides[this.current].image.hide(); this.slides[i].image.show(); this.current = i; }, } </script> </head> <body> <div id="features"> <div class="feature current"> <div style="display: none;" class="feature-image"> <a href="google.com"><img src="/design/images/four-oh-four.png"></a> </div> <h2 class="feature-title"><a href="google.com">Item 3</a></h2> <p style="display: none;" class="feature-description"><a href="google.com">Item 3 description</a></p> </div> <div class="feature"> <div class="movie-cover"> <a href="/movie/movie"><img src="/image1" alt="" title=""></a> </div> <div style="display: block;" class="feature-image"> <a href="/rudeboiz-14-arse-splitters/movie"><img src="/images/Featured/rude.png"></a> </div> <h2 class="feature-title"><a href="/rude/movie">Item 2</a></h2> <p style="display: block;" class="feature-description"><a href="/rude/movie">Item 2 description</a></p> </div> <div class="feature"> <div style="display: none;" class="feature-image"> <a href="/pissed-up-brits/movie"><img src="/design/images/four-oh-four.png"></a> </div> <h2 class="feature-title"><a href="/pis/movie">Item 1</a></h2> <p style="display: none;" class="feature-description"><a href="/pis/movie">Item one description</a></p> </div> <div class="feature"> <div style="display: none;" class="feature-image"> <a href="what.com"><img src="/images/Featured/indie.png"></a> </div> <h2 class="feature-title"><a href="what.com">Item 4</a></h2> <p style="display: none;" class="feature-description"><a href="what.com">Item 4 description</a></p> </div> </div> </body> </html>

    Read the article

  • top rounded corners in my jquery

    - by Sohail
    Hello everybody, I have this jquery for my menu buttons, what I want is to get top-corner rounded for my menu, this is a whole code: <html> <style type="text/css"> #menuBarHolder { width: 860px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:block;} .firstchild { border-left:1px solid #ccc;} #container { margin-top:10px;} #menuBar li{ float:left; padding:15px; height:16px; width:70px; border-right:1px solid #ccc; } #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} .menuHover { background-color:#999;} .menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px;border-radius-bottomleft: 5px; } </style> <!--[if IE]> <style type="text/css"> #menuBar li a{width:50px;} .menuInfo { margin-left:-65px; width:80px;} </style> <![endif]--> <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menuBar li').click(function() { var url = $(this).find('a').attr('href'); document.location.href = url; }); $('#menuBar li').hover(function() { $(this).find('.menuInfo').slideDown(); }, function() { $(this).find('.menuInfo').slideUp(); }); }); </script> <center> <div id="menuBarHolder"> <ul id="menuBar"> <li class="firstchild"><a href="javascript:#">Home</a><div class="menuInfo">I am some text about the home section</div></li> <li><a href="javascript:#">About Us</a><div class="menuInfo">I am some text about the services section</div></li> <li><a href="javascript:#">News</a><div class="menuInfo">I am some text about the clients section</div></li> <li><a href="javascript:#">Equipment</a><div class="menuInfo">I am some text about the portfolio section</div></li> <li><a href="javascript:#">Services</a><div class="menuInfo">I am some text about the about section</div></li> <li><a href="javascript:#">Project</a><div class="menuInfo">I am some text about the blog section</div></li> <li><a href="javascript:#">Contact Us</a><div class="menuInfo">I am some text about the follow section</div></li> </ul> </div> </div> </center> </html> Thanks for your help.

    Read the article

  • jQuery featured content slider

    - by azz0r
    Hello, I have a content area that loops through divs and shows there content. I'm having trouble making it display the initial content, unfortunately it waits 5000 milliseconds before triggering the very first content area to display. Anyone spot an easy way to make it display the initial area, then slide to the next area and do them at 5000 milliseconds. JS Model.FeatureBar = { current:0, items:{}, init: function init(options){ var me = this; me.triggers = [] me.slides = [] this.container = jQuery('#features'); jQuery('.feature').each(function(i){ me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')} me.slides[i] = {image: jQuery(this).children('.feature-image')} }); for(var i in this.slides){ this.slides[i].image.hide(); this.triggers[i].description.hide(); } setInterval(function(){Model.FeatureBar.next()},5000); }, next: function next(){ var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0; this.goToItem(i); }, previous: function previous(){ var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length; this.goToItem(i); }, goToItem: function goToItem(i){ if(!this.slides[i]) throw 'Slide out of range'; this.triggers[this.current].description.slideUp(); this.triggers[i].description.slideDown(); this.slides[this.current].image.hide(); this.slides[i].image.show(); this.current = i; }, } html <div id="features"> <div class="feature current"> <div class="movie-cover"> <a href="/police/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> </div> <div class="feature-image" style="display: none;"> <img src="/design/images/four-oh-four.png"> </div> <h2 class="feature-title"><a href="/police/movie">Police</a></h2> <p class="feature-description" style="overflow: hidden; display: block; height: 50.8604px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> </div> <div class="feature"> <div class="movie-cover"> <a href="/rude/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> </div> <div class="feature-image" style="display: none;"> <img src="/design/images/four-oh-four.png"> </div> <h2 class="feature-title"><a href="/rude/movie">Rude</a></h2> <p class="feature-description" style="overflow: hidden; display: block; height: 18.3475px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> </div> <div class="feature"> <div class="movie-cover"> <a href="/brits/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> </div> <div class="feature-image" style="display: block;"> <img src="/design/images/four-oh-four.png"> </div> <h2 class="feature-title"><a href="/brits/movie">Brits</a></h2> <p class="feature-description" style="overflow: hidden; display: block; height: 40.1549px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> </div> <div class="feature"> <div class="movie-cover"> <a href="/indie/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> </div> <div class="feature-image" style="display: none;"> <img src="/design/images/four-oh-four.png"> </div> <h2 class="feature-title"><a href="/indie/movie">Indie</a></h2> <p class="feature-description" style="overflow: hidden; display: block; height: 42.4247px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> </div>

    Read the article

  • how would you debug this javascript problem?

    - by pedalpete
    I've been travelling and developing for the past few weeks. The site I'm developing was running well. Then, the other day, i connected to a network and the page 'looked' fine, but it turns out the javascript wasn't running. I checked firebug, and there were no errors, as I was suspecting that maybe a script didn't load (I'm using the google api for jQuery and jQuery UI, as well as loading google maps api and fbconnect). I would suspect that if the issue was with one of these pages not loading I would get an error, and yet there was nothing. Thinking maybe i didn't connect properly or something, i reconnected to the network and even restarted my computer, as well as trying to run the local version. I got nothing. The local version not running also hinted to me that it was the loading of an external javascript which caused the problem. I let it pass as something strange with that one network. Unfortunately now I'm 100s of miles away. Today my brother sent me an e-mail that the network he was on at the airport wouldn't load my page. Same issue. Everything is laid out properly, and part of the layout is set in Javascript, so clearly javascript is running. he too got no errors. Of course, he got on his plane, and now he is no longer at the airport. Now the site works on his computer (and i haven't changed anything). How on earth would you go about figuring out what happened in this situation? That is two of maybe 12 or so networks. But I have no idea how i would find a network that doesn't work (and living in a small town, it could be difficult for me to find a network that doesn't work). Any ideas? The site is still in Dev, so I'd rather not post a link just yet (but could in a few days). What I can see not working is the javascript functions which are called on load, and on click. So i do think it is a javascript issue, but no errors. This wouldn't be as HUGE an issue if I could find and sit on one of these networks, but I can't. So what would you do? EDIT ---------------------------------------------------------- the first function(s - their linked) that doesn't get called is below. I've cut the code of at the .ajax call as the call wasn't being made. function getResultsFromForm(){ jQuery('form#filterList input.button').hide(); var searchAddress=jQuery('form#filterList input#searchTxt').val(); if(searchAddress=='' || searchAddress=='<?php echo $searchLocation; ?>'){ mapShow(20, -40, 0, 'areaMap', 2); jQuery('form#filterList input.button').show(); return; } if (GBrowserIsCompatible()) { var geo = new GClientGeocoder(); geo.setBaseCountryCode(cl.address.country); geo.getLocations(searchAddress, function (result) { if(!result.Placemark && searchAddress!='<?php echo $searchLocation; ?>'){ jQuery('span#addressNotFound').text('<?php echo $addressNotFound; ?>').slideDown('slow'); jQuery('form#filterList input.button').show(); } else { jQuery('span#addressNotFound').slideUp('slow').empty(); jQuery('span#headerLocal').text(searchAddress); var date = new Date(); date.setTime(date.getTime() + (8 * 24 * 60 * 60 * 1000)); jQuery.cookie('address', searchAddress, { expires: date}); var accuracy= result.Placemark[0].AddressDetails.Accuracy; var lat = result.Placemark[0].Point.coordinates[1]; var long = result.Placemark[0].Point.coordinates[0]; lat=parseFloat(lat); long=parseFloat(long); var getTab=jQuery('div#tabs div#active').attr('class'); jQuery('div#tabs').show(); loadForecast(lat, long, getTab, 'true', 0); var zoom=zoomLevel(); mapShow(lat, long, accuracy, 'areaMap', zoom ); } }); } } function zoomLevel(){ var zoomarray= new Array(); zoomarray=jQuery('span.viewDist').attr('id'); zoomarray=zoomarray.split("-"); var zoom=zoomarray[1]; if(zoom==''){ zoom=5; } zoom=parseFloat(zoom); return(zoom); } function loadForecast(lat, long, type, loadForecast, page){ jQuery('div#holdForecast').empty(); var date = new Date(); var d = date.getDate(); var day = (d < 10) ? '0' + d : d; var m = date.getMonth() + 1; var month = (m < 10) ? '0' + m : m; var year='2009'; toDate=year+'-'+month+'-'+day; var genre=jQuery('span.genreblock span#updateGenre').html(); var numDays=''; var numResults=''; var range=jQuery('span.viewDist').attr('id'); var dateRange = jQuery('.updateDate').attr('id'); jQuery('div#holdShows ul.showList').html('<li class="show"><div class="showData"><center><img src="../hwImages/loading.gif"/></center></div></li>'); jQuery('div#holdShows ul.'+type+'List').livequery(function(){ jQuery.ajax({ type: "GET", url: "processes/formatShows.php", data: "output=&genre="+genre+"&numResults="+numResults+"&date="+toDate+"&dateRange="+dateRange+"&range="+range+"&lat="+lat+"&long="+long+'&page='+page, success: function(response){ EDIT 2 ----------------------------------------------------------------------------- Please keep in mind that the problem is not that I can't load the site, the site works fine on most connections, but there are times when the site doesn't work, and no errors are thrown, and nothing changes. My brother couldn't run it earlier today while I had no problems, so it was something to do with his location/network. HOWEVER, the page loads, he had a connection, it was his first time visiting the site, so nothing could have been cashed. Same with when I had the issue a few days before. I didn't change anything, and I got to a different network and everything worked fine.

    Read the article

  • Using jQuery validation plugin with tabbed navigation

    - by user3438917
    I have a tabbed navigation wizard, for which the first section needs to be validated before proceeding to the next tab. The validation should trigger when the user hits the "next" button. I am unable to get the validation to trigger though: <form id="target-group" novalidate="novalidate"> <div class="box"> <div class='box-header-main'><h2><img src="assets/img/list.png" /> Target Group Information</h2></div> <br /> <div class='box'> <div class='box-header-property'><h2><span data-bind="text:Name">New Target Group</span> | <i class='fa fa-file'></i></h2></div> <br /> <div class='row'> <div id='flight-wizard'> <div id='content' class='col-lg-12'> <div class='col-lg-12'> <div id='tabs'> <ul> <li id="targetgroup-info-tab"><a href='#tabs-1'><i class="fa fa-info-circle"></i>Target Group Info</a></li> <li id="zone-tab"><a href='#tabs-2'><i class="fa fa-map-marker"></i>Zones</a></li> </ul> <div id='tabs-1'> <div class='row'> <div class='col-xs-6'> <div class='form-group'> Name<sup>*</sup> <input id="selectError0" name="name" class='form-control col-xs-12' data-bind="value: asdf" placeholder='Enter Name ...' /> </div> <form class='form-horizontal'> <div class='form-group'> Product(s)<sup>*</sup> <div class='controls' id='products'> <select id='selectError3' class='form-control' data-bind="options:test, optionsText: 'Name', optionsValue : 'test', value: test, optionsCaption: 'Choose Product...'"></select> </div> </div> </form> </div> <!--RIGHT PANE--> <div class='col-xs-6'> <div class='form-group'> Platform<sup>*</sup> <div class='controls'> <select id="selectError2" class='form-control' data-bind="options:test, optionsText: 'Name', optionsValue: 'test', value : test, optionsCaption: 'Choose Platform...'"></select> </div> </div> <form class='form-horizontal'> <div class='form-group'> AdTypes(s)<sup>*</sup> <div class='controls' id='adtypes'> <select multiple="" id='adtypesselect' class='form-control' data-rel="chosen" data-bind="options:test, optionsText: 'Name', optionsValue : 'test', selectedOptions: test, optionsCaption: 'test...'"></select> </div> </div> </form> <button id="btn_cancel_large" class='btn btn-large btn-primary btn-round'><i class='fa fa-ban' /></i> Cancel</button> <button id="btn-next-large" class='btn btn-large btn-primary btn-round'>Next <i class='fa fa-arrow-circle-right'></i></button> </div> <!--end of right pane--> </div> </div> <div id='tabs-2'> <div class='row'> <div class='col-lg-12'> <div class='row'> <div class='col-lg-12'> <div id='zones_list' class='box-content'> <div id='add-new-targetgroupzone' class='add-new'><i class='fa fa-plus-circle'></i><a href='/#/inventory/targeting/' onclick="return false;">Add Zone</a></div> <table id="results" width="100%"> <thead> <tr> <th>Publisher</th> <th>Property</th> <th>Zone</th> <th>AdTypes</th> <th width='10%'>Quick&nbsp;Actions</th> </tr> </thead> </table> </div> </div> </div> </div> </div> <br /> <div class="btn_row"> <button id="btn_cancel_large2" class='btn btn-large btn-primary btn-round'><i class='fa fa-ban' /></i> Cancel</button> <button id="btn-submit-large" class='btn btn-large btn-primary btn-round'>Submit <i class='fa fa-arrow-circle-down'></i></button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </form> <form id="zones-form" style="display: none;" novalidate="novalidate" class="slideup-form"> <div class="box"> <div class="box-header-panel"> <h2>Add Target Group Zone</h2> <div class="box-icon" id="zones-form-close"> <i class="fa fa-arrow-circle-down"></i> </div> </div> <div class="box-content clearfix"> <div class="box-content"> <table id="zones-list" width="100%"> <thead> <tr> <th>Publisher</th> <th>Property</th> <th>Zone</th> <th>AdTypes</th> <th width='10%'>Quick&nbsp;Actions</th> </tr> </thead> </table> </div> </div> </div> </div> </form> jQuery: $("#target-group").validate({ rules: { name: { required: true } }, messages: { name: "Name required", } }); $('#btn-next-large').click(function () { if ($('#target-group').valid()) $tabs.tabs('select', $(this).attr("rel")); });

    Read the article

  • Keyboard navigation for jQuery Tabs

    - by Binyamin
    How to make Keyboard navigation left/up/right/down (like for photo gallery) feature for jQury Tabs with History? Demo without Keyboard feature in http://dl.dropbox.com/u/6594481/tabs/index.html Needed functions: 1. on keyboardtop/down make select and CSS showactivenested ajax tabs from 1-st to last level 2. on keyboardleft/right changeback/forwardcontent ofactivenested ajax tabs tab 3. an extra option, makeactivenested ajax tab on 'cursor-on' on concrete nested ajax tabs level Read more detailed question with example pictures in http://stackoverflow.com/questions/2975003/jquery-tools-to-make-keyboard-and-cookies-feature-for-ajaxed-tabs-with-history /** * @license * jQuery Tools @VERSION Tabs- The basics of UI design. * * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. * * http://flowplayer.org/tools/tabs/ * * Since: November 2008 * Date: @DATE */ (function($) { // static constructs $.tools = $.tools || {version: '@VERSION'}; $.tools.tabs = { conf: { tabs: 'a', current: 'current', onBeforeClick: null, onClick: null, effect: 'default', initialIndex: 0, event: 'click', rotate: false, // 1.2 history: false }, addEffect: function(name, fn) { effects[name] = fn; } }; var effects = { // simple "toggle" effect 'default': function(i, done) { this.getPanes().hide().eq(i).show(); done.call(); }, /* configuration: - fadeOutSpeed (positive value does "crossfading") - fadeInSpeed */ fade: function(i, done) { var conf = this.getConf(), speed = conf.fadeOutSpeed, panes = this.getPanes(); if (speed) { panes.fadeOut(speed); } else { panes.hide(); } panes.eq(i).fadeIn(conf.fadeInSpeed, done); }, // for basic accordions slide: function(i, done) { this.getPanes().slideUp(200); this.getPanes().eq(i).slideDown(400, done); }, /** * AJAX effect */ ajax: function(i, done) { this.getPanes().eq(0).load(this.getTabs().eq(i).attr("href"), done); } }; var w; /** * Horizontal accordion * * @deprecated will be replaced with a more robust implementation */ $.tools.tabs.addEffect("horizontal", function(i, done) { // store original width of a pane into memory if (!w) { w = this.getPanes().eq(0).width(); } // set current pane's width to zero this.getCurrentPane().animate({width: 0}, function() { $(this).hide(); }); // grow opened pane to it's original width this.getPanes().eq(i).animate({width: w}, function() { $(this).show(); done.call(); }); }); function Tabs(root, paneSelector, conf) { var self = this, trigger = root.add(this), tabs = root.find(conf.tabs), panes = paneSelector.jquery ? paneSelector : root.children(paneSelector), current; // make sure tabs and panes are found if (!tabs.length) { tabs = root.children(); } if (!panes.length) { panes = root.parent().find(paneSelector); } if (!panes.length) { panes = $(paneSelector); } // public methods $.extend(this, { click: function(i, e) { var tab = tabs.eq(i); if (typeof i == 'string' && i.replace("#", "")) { tab = tabs.filter("[href*=" + i.replace("#", "") + "]"); i = Math.max(tabs.index(tab), 0); } if (conf.rotate) { var last = tabs.length -1; if (i < 0) { return self.click(last, e); } if (i > last) { return self.click(0, e); } } if (!tab.length) { if (current >= 0) { return self; } i = conf.initialIndex; tab = tabs.eq(i); } // current tab is being clicked if (i === current) { return self; } // possibility to cancel click action e = e || $.Event(); e.type = "onBeforeClick"; trigger.trigger(e, [i]); if (e.isDefaultPrevented()) { return; } // call the effect effects[conf.effect].call(self, i, function() { // onClick callback e.type = "onClick"; trigger.trigger(e, [i]); }); // default behaviour current = i; tabs.removeClass(conf.current); tab.addClass(conf.current); return self; }, getConf: function() { return conf; }, getTabs: function() { return tabs; }, getPanes: function() { return panes; }, getCurrentPane: function() { return panes.eq(current); }, getCurrentTab: function() { return tabs.eq(current); }, getIndex: function() { return current; }, next: function() { return self.click(current + 1); }, prev: function() { return self.click(current - 1); } }); // callbacks $.each("onBeforeClick,onClick".split(","), function(i, name) { // configuration if ($.isFunction(conf[name])) { $(self).bind(name, conf[name]); } // API self[name] = function(fn) { $(self).bind(name, fn); return self; }; }); if (conf.history && $.fn.history) { $.tools.history.init(tabs); conf.event = 'history'; } // setup click actions for each tab tabs.each(function(i) { $(this).bind(conf.event, function(e) { self.click(i, e); return e.preventDefault(); }); }); // cross tab anchor link panes.find("a[href^=#]").click(function(e) { self.click($(this).attr("href"), e); }); // open initial tab if (location.hash) { self.click(location.hash); } else { if (conf.initialIndex === 0 || conf.initialIndex > 0) { self.click(conf.initialIndex); } } } // jQuery plugin implementation $.fn.tabs = function(paneSelector, conf) { // return existing instance var el = this.data("tabs"); if (el) { return el; } if ($.isFunction(conf)) { conf = {onBeforeClick: conf}; } // setup conf conf = $.extend({}, $.tools.tabs.conf, conf); this.each(function() { el = new Tabs($(this), paneSelector, conf); $(this).data("tabs", el); }); return conf.api ? el: this; }; }) (jQuery); /** * @license * jQuery Tools @VERSION History "Back button for AJAX apps" * * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. * * http://flowplayer.org/tools/toolbox/history.html * * Since: Mar 2010 * Date: @DATE */ (function($) { var hash, iframe, links, inited; $.tools = $.tools || {version: '@VERSION'}; $.tools.history = { init: function(els) { if (inited) { return; } // IE if ($.browser.msie && $.browser.version < '8') { // create iframe that is constantly checked for hash changes if (!iframe) { iframe = $("<iframe/>").attr("src", "javascript:false;").hide().get(0); $("body").append(iframe); setInterval(function() { var idoc = iframe.contentWindow.document, h = idoc.location.hash; if (hash !== h) { $.event.trigger("hash", h); } }, 100); setIframeLocation(location.hash || '#'); } // other browsers scans for location.hash changes directly without iframe hack } else { setInterval(function() { var h = location.hash; if (h !== hash) { $.event.trigger("hash", h); } }, 100); } links = !links ? els : links.add(els); els.click(function(e) { var href = $(this).attr("href"); if (iframe) { setIframeLocation(href); } // handle non-anchor links if (href.slice(0, 1) != "#") { location.href = "#" + href; return e.preventDefault(); } }); inited = true; } }; function setIframeLocation(h) { if (h) { var doc = iframe.contentWindow.document; doc.open().close(); doc.location.hash = h; } } // global histroy change listener $(window).bind("hash", function(e, h) { if (h) { links.filter(function() { var href = $(this).attr("href"); return href == h || href == h.replace("#", ""); }).trigger("history", [h]); } else { links.eq(0).trigger("history", [h]); } hash = h; window.location.hash = hash; }); // jQuery plugin implementation $.fn.history = function(fn) { $.tools.history.init(this); // return jQuery return this.bind("history", fn); }; })(jQuery); $(function() { $("#list").tabs("#content > div", {effect: 'ajax', history: true}); });

    Read the article

< Previous Page | 3 4 5 6 7