Search Results

Search found 668 results on 27 pages for 'addclass'.

Page 9/27 | < Previous Page | 5 6 7 8 9 10 11 12 13 14 15 16  | Next Page >

  • jQuery removing elements from DOM put still reporting as present

    - by RyanP13
    Hi, I have an address finder system whereby a user enters a postcode, if postcode is validated then an address list is returned and displayed, they then select an address line, the list dissappears and then the address line is split further into some form inputs. The issue i am facing is when they have been through the above process then cleared the postcode form field, hit the find address button and the address list re-appears. Event though the list and parent tr have been removed from the DOM it is still reporting it is present as length 1? My code is as follows: jQuery // when postcode validated display box var $addressList = $("div#selectAddress > ul").length; // if address list present show the address list if ($addressList != 0) { $("div#selectAddress").closest("tr").removeClass("hide"); } // address list hidden by default // if coming back to modify details then display address inputs var $customerAddress = $("form#detailsForm input[name*='customerAddress']"); var $addressInputs = $.cookies.get('cpqbAddressInputs'); if ($addressInputs) { if ($addressInputs == 'visible') { $($customerAddress).closest("tr").removeClass("hide"); } } else { $($customerAddress).closest("tr").addClass("hide"); } // Need to change form action URL to call post code web service $("input.findAddress").live('click', function(){ var $postCode = encodeURI($("input#customerPostcode").val()); if ($postCode != "") { var $formAction = "customerAction.do?searchAddress=searchAddress&custpc=" + $postCode; $("form#detailsForm").attr("action", $formAction); } else { alert($addressList);} }); // darker highlight when li is clicked // split address string into corresponding inputs $("div#selectAddress ul li").live('click', function(){ $(this).removeClass("addressHover"); //$("li.addressClick").removeClass("addressClick"); $(this).addClass("addressClick"); var $splitAddress = $(this).text().split(","); $($customerAddress).each(function(){ var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']"); $(this).val($splitAddress[$inputCount]); }); $($customerAddress).closest("tr").removeClass("hide"); $.cookies.set('cpqbAddressInputs', 'visible'); $(this).closest("tr").fadeOut(250, function() { $(this).remove(); }); });

    Read the article

  • Problem with adding and removing classes with jQuery when hovering over a list item.

    - by Andrew
    I want to add a class to a list item when I hover over it, and then remove it and add it to a different list item if a different list item is hovered over. Here's what I tried: jQuery - $(document).ready(function() { $("#results").text("Tournaments"); $("#Tournaments").addClass("box-active"); $("#box ul li").hover(function() { var show = $(this).attr('id'); $("#results").text(show); $("#box ul li").each(function() { $(this).removeClass("box-active"); }); $("#box ul li#" + show).addClass("box-active"); }); }); HTML - <div id="box"> <ul> <li id="Tournaments">Tournaments</li> <li id="Join">Join</li> <li id="Forums">Forums</li> <li id="GameBattles">GameBattles</li> <li id="Practice">Practice</li> </ul> <p>Hovering over: <span id="results"></span></p> </div> When I hover over an item, it changes the class, but if I hover over I different one it removes the class over the item I first hovered over, but doesn't add the class to the new item I'm hovering over. Not sure why, and any help would be appreciated.

    Read the article

  • jQuery pagination without all the rows of data before hand

    - by Aaron Mc Adam
    Hi guys, I'm trying to find a solution for paginating my search results. I have a built the links and everything works without jQuery. I've also got AJAX working for the links, but I just need a way of tidying up the list of links, as some search results return up to 60 pages and the links spread to two rows in my template. I am searching the Amazon API, and can only return 10 results at a time. Upon clicking the pagination links, the next 10 results are returned. I have access to the total results number from the XML, but not all the data at once, so I can't put all the data into a "hiddenResults" div that the jQuery Pagination plugin needs. Here is the jQuery I have for the pagination: var $pagination = $("#pagination ul"); $pagination.delegate('.pagenumbers', 'click', function() { var $$this = $(this); $$this.closest('li').addClass('cached'); $pagination.find("#currentPage").removeAttr('id').wrapInner($('<a>', {'class':'pagenumbers', 'href':'book_data.php?keywords='+keywords})); $$this.closest('li').attr('id','currentPage').html( $$this.text() ); $.ajax({ type : "GET", cache : false, url : "book_data.php", data : { keywords : keywords, page : $$this.text() }, success : show_results }); return false; }); function show_results(res) { $("#searchResults").replaceWith($(res).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd'); detailPage(); selectForm(); if ( ! ( $pagination.find('li').hasClass('cached') ) ) { $.get("book_data.php", { keywords : keywords, page : ( $pagination.find("#currentPage").text() + 1 ) } ); } }

    Read the article

  • Is it possible to guarantee a unique id for multiple items using the same id variable at a point in

    - by Scarface
    First of all, do not be overwhelmed by the long code, I just put it for reference...I have a function that preg_replaces content and puts it in a jquery dialog box with a matching open-link. For example, if there is a paragraph with two matches, they will be put inside two divs, and a jquery dialog function will be echoed twice; one for each div. While this works for one match, if there are multiple matches, it does not. I am not sure how to distribute unique ids at a point in time for each of the divs and matching dialog open-scripts. Keep in mind, I removed the preg replace function since it kind of complicates the problem. If anyone has any ideas, they will be greatly appreciated. <?php $id=uniqid(); $id2=uniqid(); echo "<div id=\"$id2\"> </div>"; ?> $.ui.dialog.defaults.bgiframe = true; $(function() { $("<?php echo"#$id2"; ?>").dialog({hide: 'clip', modal: true ,width: 600,height: 350,position: 'center', show: 'clip',stack: true,title: 'title', minHeight: 25, minWidth: 100, autoOpen: false}); $('<?php echo"#$id"; ?>').click(function() { $('<?php echo"#$id2"; ?>').dialog('open'); }) .hover( function(){ $(this).addClass("ui-state-hover"); }, function(){ $(this).removeClass("ui-state-hover"); } ).mousedown(function(){ $(this).addClass("ui-state-active"); }) .mouseup(function(){ $(this).removeClass("ui-state-active"); }); });

    Read the article

  • JQuery Tabbed Nav Menu and PHP Forms Question?

    - by SlAcKeR
    I'm using a JQuery Tabbed Menu which holds different types of forms and when I select a different form located under a different tab and submit the form the tab will jump to the default tab instead of the current tab the form is located in. I was wondering how would I go about fixing this so that when the form is submitted the current tab is still selected, is it the JQuery or PHP problem? Here is the JQuery. $(document).ready(function() { //When page loads... $(".form-content").hide(); //Hide all content var firstMenu = $("#home-menu ul li:first"); firstMenu.show(); firstMenu.find("a").addClass("selected-link"); //Activate first tab $(".form-content:first").show(); //Show first tab content //On Click Event $("#home-menu ul li").click(function() { $("#home-menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class $(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab $(".form-content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content $(activeTab).fadeIn(); //Fade in the selected-link ID content return false; }); });

    Read the article

  • How to start/stop/restart jQuery animation

    - by Emin
    I have the following function that when I call displays a message to the user for a certain amount of time (5 secs in my case). During this "period" if I call the function again to display another message, practically it should hide, then re-appear with the new message for another 5 seconds. What happens with my code below, I call the function to display the message. Then, lets say on the 4th second, I call it again to display another message, the new message is displayed for 1 second. I need to somehow -reset- the time but can't figure out how. Tried stopping the animation, checking if the element was visible and hiding it if it was, and many other things. I believe the solution is a simple chaining issue but can't get it right. So any help would be appreciated! function display_message(msgType, message) { var elem = $('#ur_messagebox'); switch (msgType) { case 'confirm': elem.addClass('msg_confirm'); break; case 'error': elem.addClass('msg_error'); break; } elem.html(message); elem.show().delay(5000).fadeOut(1000); } thanks in advance...

    Read the article

  • Find tag that contains certain text and add a class

    - by David Gard
    I have the following HTML, and I need to add a class to both <li> and <a> where the text 'Charts' exists (so not the second line, but rather the 4th and 5th). I cannot change the output of the HTML. <div class="wp-submenu-wrap"> <div class="wp-submenu-head">Charts</div> <ul> <li class="wp-first-item"> <a class="wp-first-item" tabindex="1" href="admin.php?page=charts">Charts</a> </li> <li> <a tabindex="1" href="admin.php?page=add-chart">Add Chart</a> </li> </ul> </div> I've tried doing this by locating the <a> tag that contains the text, but it is not working. Can somebody please point me in the correct direction? Thanks. Code that I've tried - $(document).ready(function(){ if(pagenow === 'admin_page_edit-chart') { var page = $('.wp-submenu-wrap a:contains["Charts"]'); page.addClass('current'); page.parent('li').addClass('current'); } });

    Read the article

  • JQuery validate e-mail address regex

    - by RussP
    Hi folks, not too sure about how to do this. I need/want to validate email addresses by regex using something like this: [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum) Not I need to run this in a JQ function like this: Where does the validation go and wht is the expression? - please $j("#fld_emailaddress").live('change',function() { var emailaddress = $j("#fld_emailaddress").val(); // validation here? if(emailaddress){} // end validation $j.ajax({ type: "POST", url: "../ff-admin/ff-register/ff-user-check.php", data: "fld_emailaddress="+ emailaddress, success: function(msg) { if(msg == 'OK') { $j("#fld_username").attr('disabled',false); $j("#fld_password").attr('disabled',false); $j("#cmd_register_submit").attr('disabled',false); $j("#fld_emailaddress").removeClass('object_error'); // if necessary $j("#fld_emailaddress").addClass("object_ok"); $j('#email_ac').html('&nbsp;<img src="img/cool.png" align="absmiddle"> <font color="Green"> Your email <strong>'+ emailaddress+'</strong> is OK.</font> '); } else { $j("#fld_username").attr('disabled',true); $j("#fld_password").attr('disabled',true); $j("#cmd_register_submit").attr('disabled',true); $j("#fld_emailaddress").removeClass('object_ok'); // if necessary $j("#fld_emailaddress").addClass("object_error"); $j('#email_ac').html(msg); } } }); });

    Read the article

  • Why is Chrome miscalculating jQuery submenu dimensions?

    - by chunkymonkey
    I'm trying to implement this dropdown menu with flyouts: http://jsfiddle.net/chunkymonkey/fr6x4/ In Chrome certain categories can be expanded to show their subcategories while others show nothing when opened up. For example: Alternative Rock can be expanded to show its multiple subcategories . . . BUT . . . World Music, which has as many subcategories, shows no subcategories when expanded. (SCREENSHOT: http://i.imgur.com/0WorR.jpg) I thought I had tracked this problem down to a problem with they way the dimensions of the dropdown elements are calculated in the original code: First change: - var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180; + var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * container.width(); Second change: Remove: var checkMenuHeight = function(el) { if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') }; el.css({ height: options.maxHeight }); }; Add: var checkMenuHeight = function(el) { var max_height = options.maxHeight - breadcrumb.getTotalHeight(); if (el.height() > max_height) { el.addClass('fg-menu-scroll'); el.height(max_height); topList.height(max_height); } else { if (topList.height() < el.height()) { topList.height(el.height()); } } }; But it's still not working only on Chrome (version 8, Windows & Mac) (not sure why Chrome is different).

    Read the article

  • jQuery arrays - newbie needs a kick start

    - by Jonny Wood
    I've only really started using this site and alredy I am very impressed by the community here! This is my third question in less than three days. Hopefully I'll be able to start answering questions soon instead of just asking them! I'm fairly new to jQuery and can't find a decent tutorial on Arrays. I'd like to be able to create an array that targets several ID's on my page and performs the same effect for each. For example I have tabs set up with the following: $('.tabs div.tab').hide(); $('.tabs div:first').show(); $('.tabs ul li:first a').addClass('current'); $('.tabs ul li a').click(function(){ $('.tabs ul li a').removeClass('current'); $(this).addClass('current'); var currentTab = $(this).attr('href'); $('.tabs div.tab').hide(); $(currentTab).show(); return false; }); I've used the class .tag to target the tabs as there are several sets on the same page, but I've heard jQuery works much faster when targetting ID's How would I add an array to the above code to target 4 different ID's? I've looked at var myArray = new Array('#id1', 'id2', 'id3', 'id4'); And also var myValues = [ '#id1', 'id2', 'id3', 'id4' ]; Which is correct and how do I then use the array in the code for my tabs...?

    Read the article

  • what exactly is this.id ?

    - by kwokwai
    Hi all, I was doing some dynamic effect on DIV using JQuery when I found that the returned value of this.id varied from function to function. I got two sets of simple parent-child DIV tags like this: <DIV ID="row"> <DIV ID="c1"> <Input type="radio" name="testing" id="testing" VALUE="1">testing1 </DIV> </DIV> <DIV ID="row"> <DIV ID="c2"> <Input type="radio" name="testing" id="testing" VALUE="2">testing2 </DIV> </DIV> Code 1. $('#row DIV').mouseover(function(){ radio_btns.each(function() { $('#row DIV).addClass('testing'); // worked }); }); Code 2. $('#row DIV').mouseover(function(){ var childDivID = this.id; radio_btns.each(function() { $('#'+childDivID).parent('DIV').addClass('testing'); // didn't work }); }); I don't understand why only the first code couldn work and highlighted all the "row" DIV, but the first code failed to do so?

    Read the article

  • .next is undefined, jquery plugin problem

    - by ndelangen
    I'm trying to create my own plugin. But I'm having trouble getting things right. It appears when I'm trying to traverse inside .each things go wrong. I'm trying to go to the next item every 6 seconds by fading. jQuery(function($){ $.fn.rotator = function(options){ this.each(function() { var container = $(this); var images = container.children(); //Set the opacity of all images to 0 images.css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('div:first',this).css({opacity: 1.0}).addClass('show'); //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds var obj = $(this); setInterval(nextimage(obj),6000); }); }; // rotate function function nextimage(obj) { var container = $(obj); var images = container.children(); //Get the current image var current = (images.hasClass('show')? images.hasClass('show') : images.first()); //Get next image, when it reaches the end, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('show')) ? images.first() :current.next()) : images.first()); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; }); $(document).ready(function(){ $("#bg").rotator({ }) }); The error I get is: current.next is not a function Line 35 Line 35 = var next = ((current.next().length) ? ((current.next().hasClass('show')) ? images.first() :current.next()) : images.first()); Can someone tell me what I'm doing wrong?

    Read the article

  • How to traverse table in Jquery and add a class?

    - by SWL
    I have a simple table of two rows. The first column is required, but the others are not; however, I would like them to be required in pairs. So if the user enters a value for Quantity3, then Size3 should also now be required. As a fiddle: http://jsfiddle.net/NaRts/7/ <tr> <td><input name="qty1[492]" class="qty required" type="text"></td> <td><input name="qty2[492]" class="qty" type="text"></td> <td><input name="qty3[492]" class="qty" type="text"></td> </tr><tr> <td><input name="size1[492]" type="text" class="size required" ></td> <td><input name="size2[492]" type="text" class="size" ></td> <td><input name="size3[492]" type="text" class="size" ></td> </tr> And the simple jQuery I have is: $('.qty').keyup(function() { var s = $(this).attr('name'); // = qty3[418] var qtyID = s.replace(/[^1-9\[\]]/g, ""); // = 3[418] var SizeID = "size" + qtyID; var $sizeInput = $(this).closest('tr').next().find(SizeID); $sizeInput.css('background-color', 'green'); $sizeInput.addClass('required'); //I tried this too but it didn't work //$(this).parent().find(SizeID).addClass('required'); });? ? Any help is much appreciated.

    Read the article

  • jQuery: AJAX call isn't updating page

    - by Cortopasta
    Thought I had a simple AJAX call using $.POST(), but apparently my function isn't firing, and nothing is updating :-/ Here is the call: $(".answerVerse ul li").click(function(){ var rank = $(this).removeClass("star_empty star_full star_highlight").attr("class"); var verse_id = $(this).parent().parent().find(".verseId").html(); var answer_id = $(this).parent().parent().find(".answerId").html(); var place = this; $.post("rank.php", { rank: rank, verse_id: verse_id, answer_id: answer_id },function(data){ $(place).parent().removeClass().addClass(data.newVerseRank); for (i=0;i<=5;i++) { $(".answerVerse ul."+i).each(function(){ $(".answerVerse ul."+i+" li."+i).prevAll().andSelf().removeClass("star_empty").addClass("star_full"); }); } }, "json"); }); And here is the PHP (rank.php) that it calls: require_once("dbcon.php"); $user = new user(); $user->updateVerseRank($_POST['verse_id'], $_POST['rank']); $user->getVerse($_POST['verse_id']); $user->getAnswer($_POST['answer_id']; $arr = array ('newVerseRank'=>htmlspecialchars(round($user->verse[3])),'newVerseVotes'=>htmlspecialchars(round($user->verse[4])),'newAnswerRank'=>htmlspecialchars($user->answer[3])); echo json_encode($arr); Why am I not updating the page? I know it's something dumb I'm doing seeing as how this is my first attempt at AJAX and JSON :-/ Just trying to learn

    Read the article

  • How to paginate json data?

    - by Pandiya Chendur
    I used json data and iterated div elements to get my result.... function Iteratejsondata(HfJsonValue) { //var jsonObj = eval('(' + HfJsonValue + ')'); var jsonObj = JSON.parse(HfJsonValue); for (var i = jsonObj.Table.length - 1; i >= 0; i--) { var employee = jsonObj.Table[i]; $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv'); } $(".resultsdiv:even").addClass("resultseven"); $(".resultsdiv").hover(function() { $(this).addClass("resultshover"); }, function() { $(this).removeClass("resultshover"); }); } I get 22 records in total... Now i want to paginate these divs (i.e) 5 divs per page... Any suggestion...

    Read the article

  • How to refresh jQuery Selector Value after an execution?

    - by Devyn
    Hi, I have like this. $(document).ready(function() { var $clickable_pieces = $('.chess_piece').parent(); $($clickable_pieces).addClass('selectee'); // add selectee class var $selectee = $('.chess_square.selectee'); // wait for click $($selectee).bind('click',function(){ $('.chess_square.selected').removeClass('selected'); $(this).addClass('selected'); { ........... } }); I initially inject 'selectee' class to all div which has 'chess_piece' class then I select DIVs with that class $('.chess_square.selectee'). <div id="clickable"> <div id="div1" class="chess_square"> </div> <div id="div2" class="chess_square selectee"> <div id="sub1" class="chess_piece queen"></div> </div> <div id="div3" class="chess_square"> </div> </div> There are two type of DIV element with class named 'chess_square selectee' and 'chess_square' which doesn't meant to be clickable. I move around Sub DIV of 'rps_square selectee' from DIV2 to DIV1 and add and remove classes to be exactly same like this. The meaning is Queen Piece is moved from Div2 to Div1. <div id="div1" class="chess_square selectee"> <div id="sub1" class="chess_piece queen"></div> </div> <div id="div2" class="chess_square"> </div> <div id="div3" class="chess_square"> </div> However, the problem is jQuery doesn't update var $selectee = $('.rps_square.selectee');. Even though I changed class names, DIV1 is not clickable and DIV2 is still clickable. By the way, I've used jQuery UI selectable but doesn't refresh either.

    Read the article

  • Refactoring Tabs

    - by Nimbuz
    HTML: <ul> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> </ul> <div id="tab1" class="tab-content">content 1</div> <div id="tab2" class="tab-content">content 2</div> jQuery $('#mode li:first').addClass('active'); $('#mode li.active').append('<span class="arrow">&nbsp;</span>'); $('#mode li a').click(function () { $('#mode li').removeClass('active') $('.arrow').remove(); $(this).parent().addClass('active').append('<span class="arrow">&nbsp;</span>'); var a = $(this).attr('href'); $('.tab-content').hide(); $(a).show(); return false; }); .. works, but looking ugly. Can it be simplified/reduced further? Many thanks!

    Read the article

  • tabs using jquery

    - by sea_1987
    I currently have a tabbed system in place, however it not doing exactly as I need it too, I was hoping that by navigating to the URL with #tab2 suffixed on then end it would navigate to my tabbed page and the tab that is present in the URL would be the one that is active, however the first tab in the sequence is always active, is there a way to check what is being passed in the URL first and if there is #tabid present then make that tab the current tab? My javascript currently looks like this, $(".tab_content").hide(); //Hide all content $("ul.tabNavigation li.shortlist").addClass("active").show(); //Activate first tab (in this case second because of floats) $(".tab_content#shortlist").show(); //Show first tab content //On Click Event $("ul.tabNavigation li").click(function() { $("ul.tabNavigation 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 href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; });

    Read the article

  • Show iPad keyboard on select, focus or always (jQuery)

    - by Ryan
    I have a web app that is using jQuery to replace the RETURN key with TAB so that when I user presses return the form is not submitted but rather the cursor moves to the next text field. This works in all browsers but only 1/2 works on the iPad. On the iPad the next field is highlighted but the keyboard is hidden. How can I keep the keyboard visible or force it somehow? Here's my code (thanks to http://thinksimply.com/blog/jquery-enter-tab): function checkForEnter (event) { if (event.keyCode == 13) { currentBoxNumber = textboxes.index(this); if (textboxes[currentBoxNumber + 1] != null) { nextBox = textboxes[currentBoxNumber + 1] nextBox.focus(); nextBox.select(); event.preventDefault(); return false; } } } Drupal.behaviors.formFields = function(context) { $('input[type="text"]').focus(function() { $(this).removeClass("idleField").addClass("focusField"); }); $('input[type="text"]').blur(function() { $(this).removeClass("focusField").addClass("idleField"); }); // replaces the enter/return key function with tab textboxes = $("input.form-text"); if ($.browser.mozilla) { $(textboxes).keypress (checkForEnter); } else { $(textboxes).keydown (checkForEnter); } };

    Read the article

  • jquery tabbed interface breaks when using images

    - by Steve
    hello all, using jquery to create a tabbed interface. coding is quite typical: html: <div id="tabbed-interface"> <ul> <li><a href="#option1">Option1</a></li> <li><a href="#option2">Option2</a></li> <li><a href="#option3">Option3</a></li> </ul> </div> jquery: $(document).ready(function(){ $('#tabbed-interface li:first').addClass('active'); $('#tabbed-interface div').not(':first').hide(); $('#tabbed-interface>ul>li>a').click(function(event){ $('#tabbed-interface>ul>li').removeClass('active'); $(event.target).parent().addClass('active'); $('#tabbed-interface>div').fadeOut().filter(this.hash).fadeIn(250); return false;});}); css: ul li {background: #232323; list-style: none; border: 1px solid #616161; } ul li.active {background: none; list-style: none; border: 1px solid: #616161; border-bottom: 1px solid #121212; z-index: 1; } as you can see, all this does is add the class 'active' to the li that is clicked, and this corresponds to whether a background is shown or not. this works perfectly with text, but i am required to use non standard fonts. when i try to side step the issue using transparent .png images, it is unreliable. For instance, changing the HTML to: <div id="tabbed-interface"> <ul> <li><a href="#option1"><img src="option1.png" /></a></li>

    Read the article

  • CSS class not working as expected [closed]

    - by user1050619
    My HTML codes not implement the CSS styling..The border in the CSS file is not being implemented. I tried both in Firefox & IE. Please provide your inputs. Please find the code below: HTML <html> <head> <link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet"> </head> <body> <div id="header" class="no_hover"><h1>Header</h1></div> <button type="button" id="btn1">Click to Add</button> <button type="button" id="btn2">Click to Remove</button> <script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js" type="text/javascript"></script> <script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script> </body> </html> jS FILE $(document).ready(function() { $("#btn1").click( function(){ $("#header").addClass("hover"); $("#header").removeClass("no_hover"); }); $("#btn2").click( function(){ $("#header").removeClass("hover"); $("#header").addClass("no_hover"); }); }); CSS FILE .hover{ border: solid #f00 3px; } .no_hover{ border: solid #000 3px; }

    Read the article

  • Simple jQuery syntax help, don't know where I've gone wrong

    - by Jascination
    I'm having trouble with a jQuery code at the moment, I know WHERE the problem lies, but I don't know what the problem is exactly. Probably very basic, but I'm new to this. You can see a (non)working fiddle here: http://www.jsfiddle.net/CvZeQ/ Basically I want to set different .click function based on whatever is selected (I have 5 image maps, each with a different #mapname, and want each to pertain to a different variable (answer1, answer2, answer3...) so as to store the selected 'answer' for each map.) Here is the code I'm using for one of the maps: $(window).load(function(){ //Get cookies when page loaded var useranswers=$.cookie('survery'); useranswers= JSON.parse (useranswers); // do something with previous answers //#shape functions $('#shape area').hover( function(e){ $('#'+ this.alt).addClass('hover'); }, function(e){ $('#'+ this.alt).removeClass('hover'); } ).click( function(e){ $('img.selected-region').removeClass('selected-region'); }, function(e){ $('#'+ this.alt).addClass('selected-region'); }, function(e){ var answer1 = $(this).attr("class"); }); }); I know the problem lies somewhere with the .click function, but I'm not entirely sure what I've done wrong. Any help would be greatly appreciated.

    Read the article

  • jQuery draggable removing without changing position of other elements

    - by Yurish
    Hi! I am building a page layout configuration system on jQuery. So everyone, who is using my website can make it personal by moving elements on webpage. But, I have a problem. Every element on my page is a draggable div with option to be removed from page if necessary. When user wants to remove an element, he clicks on inner div and the following function is called: <script language="javascript"> $(function() { $('.close').click(function(){ $(this).parent().hide(); }); }); </script> <div class="main"><div class="close"></div></div> When user wants to add an element on page, he clicks on link and followinf function is called: function addNewWidget(page_name, size){ var page = $('#'+page_name); var closeDiv = $(document.createElement("div")).attr("class", "close").html('X'); closeDiv.click(function(){ $(this).parent().hide(); }); var div = $(document.createElement("div")) div.attr("class", "drag"); div.appendTo(page); closeDiv.appendTo(div); div.draggable({ containment: "#page", scroll: false, grid: [200, 200] }); div.css("top:0; left:0"); div.addClass(size); div.addClass('widget'); } Everything works fine, but when element is removed, other elements, which were on page are moving up. It is because of element positioning in the code. These divs in the code are before div, which was removed, and their absolute top is changed by -heghtOfRemovedElement Is there any way to prevent other elements from moving up?

    Read the article

  • Waiting until one event has happened before moving onto the next.

    - by jaasum
    I currently have a scrolling anchor animation that also adds an "active" class to the anchor clicked. I am trying to fit the below function into the works as well, so say someone clicks "anchor 1", "anchor 1" will get an active class and the window will scroll to that location. But, after that has happened say the user manually begins scrolling down the page, I want the active class to be removed. The problem I am running up against now is that the below function will happen when the scrolling animation from a clicked anchor is taking place. How can I disable this only when the window is being scrolled from a clicked anchor? $(window).scroll(function() { $('a[href^=#]').removeClass('active'); }); Here is the scrolling anchor script I am working with. /******* *** Anchor Slider by Cedric Dugas *** *** Http://www.position-absolute.com *** Never have an anchor jumping your content, slide it. Don't forget to put an id to your anchor ! You can use and modify this script for any project you want, but please leave this comment as credit. *****/ jQuery.fn.anchorAnimate = function(settings) { settings = jQuery.extend({ speed : 500 }, settings); return this.each(function(){ var caller = this $(caller).click(function (event) { event.preventDefault() var locationHref = window.location.href var elementClick = $(caller).attr("href") var destination = $(elementClick).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, 'easeOutCubic', function() { window.location.hash = elementClick }); return false; }) }) } And lastly, my jQuery // Scrolling Anchors $('[href^=#]').anchorAnimate(); // Active Class For Clicked Anchors var anchorscroll = $('a[href^=#]') anchorscroll.click(function(){ var anchorlocation = $(this).attr("href"); anchorscroll.removeClass('active'); $(this).addClass('active'); $('a[href='+anchorlocation+']').addClass('active'); });

    Read the article

  • Jquery Double clicking on link removing div content

    - by ram
    I wrote this code to load the content of a DIV ,when some one clicks on a link. Now,if you click on a link twice,it is removing the content. Here is the code $('a').click(function() { var id = $(this).attr('class'); if(id == 'first') { $('.active').removeClass('active'); $('a.first').addClass('active'); } else if(id == 'second') { $('.active').removeClass('active'); $('a.second').addClass('active'); } $('#first').toggle(id == 'first'); $('#second').toggle(id == 'second'); });? <a class="first">one</a> <a class="second">two</a> <div> <li id="first"> <h2>pen</h2> <div> <div>parker</div> </div> </li> <li id="second" style="display: none;"> <h2>car</h2> <div>Bugatti</div> </div> </li> </div>? .active { color: green; }

    Read the article

< Previous Page | 5 6 7 8 9 10 11 12 13 14 15 16  | Next Page >