Search Results

Search found 213 results on 9 pages for 'slidedown'.

Page 8/9 | < Previous Page | 4 5 6 7 8 9  | Next Page >

  • On load rather than on click

    - by connor
    I have the following code: jQuery(function ($) { var OSX = { container: null, init: function () { $("input.apply, a.apply").click(function (e) { e.preventDefault(); $("#osx-modal-content").modal({ overlayId: 'osx-overlay', containerId: 'osx-container', closeHTML: null, minHeight: 80, opacity: 65, position: ['0',], overlayClose: true, onOpen: OSX.open, onClose: OSX.close }); }); }, open: function (d) { var self = this; self.container = d.container[0]; d.overlay.fadeIn('fast', function () { $("#osx-modal-content", self.container).show(); var title = $("#osx-modal-title", self.container); title.show(); d.container.slideDown('fast', function () { setTimeout(function () { var h = $("#osx-modal-data", self.container).height() + title.height() + 20; // padding d.container.animate( {height: h}, 200, function () { $("div.close", self.container).show(); $("#osx-modal-data", self.container).show(); } ); }, 300); }); }) }, close: function (d) { var self = this; // this = SimpleModal object d.container.animate( {top:"-" + (d.container.height() + 20)}, 500, function () { self.close(); // or $.modal.close(); } ); } }; OSX.init(); }); To load this script, a button with the class "apply" has to be clicked... Does anyone know a way of loading this script "onload" without a button being clicked? I have tried a lot of things, but I am a newbie when it comes to Javascript. Thanks!

    Read the article

  • Bind event to AJAX populated list items

    - by AnPel
    I have an unordered list with no list items. I get some information from the user, I run it through my database using AJAX and the servers sends back a JSON object response. Then I append each list item I want to display to the list using something like $('blabla').append('<li>information</li>') My question is, since the li elements were not there at the time the DOM was ready, how can I bind a click event to them? Here is my full code: $(function(){ var timer; $('#f').keyup(function(){ clearTimeout(timer); timer = setTimeout(getSuggestions, 400); }); }) function getSuggestions(){ var a = $('#f')[0].value.length; if( a < 3){ if(a == 0){ $('#ajaxerror').hide(300,function(){ $('#loading').hide(300,function(){ $('#suggest').hide(300) }) }) } return; } $('#loading').slideDown(200,function(){ $.ajax({ url: '/models/AJAX/suggest.php', dataType: 'json', data: {'data' : $('#f')[0].value }, success: function(response){ $('#ajaxerror').hide(0,function(){ $('#loading').hide(100,function(){ $('#suggest ul li').remove(); for(var b = 0; b < ( response.rows * 3); b = b + 3){ $('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>') // MISSING SOME CODE HERE TO BIND CLICK EVENT TO NEWLY CREATED LI } $('#suggest').show(300) }) }) }, error: function(){ $('#suggest').hide(0,function(){ $('#loading').slideUp(100,function(){ $('#ajaxerror').show(300) }) }) } }) }) }

    Read the article

  • Jquery and live act wired but act ok after force refresh in IE

    - by Y.G.J
    hi guys - somthing is wrong with my code and i can't get what it is... i have a div id = "personaltab" i have a form in side it to login the user with username and password. if success the jquery empty the div and puts in the form of the bidding. if the user try to bid the other ajax that assign to the button is working but for some reason skips the empty and just adding the responded ajax to the div i have checked that in IE and chrome and it is working fine in chrome here are my codes $("#login").click(function() { var id = $("input#pid").val(); var user = $("input#puser").val(); var pass = $("input#ppass").val(); var dataString = 'id='+ id + '&user='+ user + '&pass=' + pass; if (user == "") { alert("error"); $("input#puser").focus(); return false; } if (pass == "") { alert("error"); $("input#ppass").focus(); return false; } $.ajax({ type: "POST", url: "loginpersonal.asp", data: dataString, success: function(msg) { if (msg=="False") { alert("error"); $("#personaltab").show(); } else { $("#personaltab").fadeOut("normal",function(){ $("#personaltab").empty(); $("#personaltab").append(msg); $("#personaltab").slideDown(); }); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('error'); } }); return false; }); $("#sendbid").live("click", function(){ var startat = $("input[name=startat]").val(); var sprice = $("input[name=sprice]").val(); if (parseInt(sprice)<=parseInt(startat)) { alert("error"); $("input[name=sprice]").focus(); return false; } else { var payment = $("select[name=payment]").val(); if ($('input[name=credit]').is(':checked') ){ var credit = true; } var prodid = $("input[name=id]").val(); var dataString = 'id='+ prodid + '&price='+ sprice + '&payment=' + payment + '&credit=' + credit; $.ajax({ type: "POST", url: "loginpersonal.asp", data: dataString, success: function(msg) { $("#personaltab").empty(); $("#personaltab").append(msg); $("#personaltab").show(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('error'); } }); } return false; });

    Read the article

  • Jquery hiding all descendents of a ul tag...showing child elements as tree menu...

    - by Ronedog
    I want to hide all the descendents of the "ul" for my tree menu when the page loads up, then as each "main" "li" link is clicked display the direct child, and if the direct child has children (grandchild), when the the "Child" is clicked I want it to show the "grandchild" elements. should be simple, but some how I screwed things up and when i click on the main "li" (Heading 1) it displays all of the descendents (Including the "Sub page A - 1"), instead of just the direct children ("Sub Page A"). Which I think means the children, grandchildren, etc. were never hidden to begin with with the .hide(). What I really want to happen is to hide all the descendents (except the main top-level headings) and as I walk down the tree display the children as needed. Any tips on how to make this work? Here's the HTML: <ul id="nav"> <li>Heading 1 <ul> <li>Sub page A <ul> <li>Sub page A - 1</li> <li>Sub page A - 3</li> <li>Sub page A - 2</li> </ul> </li> <li>Sub page B</li> <li>Sub page C</li> </ul> </li> <li>Heading 2 <ul> <li>Sub page D</li> <li>Sub page E</li> <li>Sub page F</li> </ul> </li> <li>Heading 3 <ul> <li>Sub page G</li> <li>Sub page H</li> <li>Sub page I</li> </ul> </li> Here's my Jquery: $(function(){ $('#nav ul').hide(); //Supposed to Hide all <ul> tags for all descendents, but doesn't work $('#nav>li').mouseover(function(){ $(this).addClass("a_hand") }); //Add the class that displays the hand $('#nav>li').toggle(function() { $(this).find('ul').slideDown(200); }, function() { $(this).find('ul').slideUp(200); });//END TOGGLE });//END MAIN FUNCTION thanks.

    Read the article

  • Google Streetview under V3 Code having hiccups and delays

    - by jeffkee
    http://new.brocksmeaton.com/showlisting.php/196/-7210-Arbutus-Place-Whytecliff-West-Vancouver-west-vancouver-real-estate The really odd thing is I had this working yesterday and today it's not working. I'm using jQuery UI to switch the tabs on the location map/street view module. I've recently upgraded the Google Maps code as well as the Google Streetview code to version 3. So when I open it in Firefox, with Firebug on, as soon as I switch to the Streetview tab, the navigation and zoom in out controls show, but nothing shows.. and then when I try to drag the map around, it does not move around, but instead, causes errors in Firebug: "too much recursion". So it causes the whole browser to become buggy, slows down, and the errors happen, and nothing shows on the streetview pane. Most of the map loading code is located in inline Javascript on the page itself. Some of the code is under showlisting.js <script type="text/javascript" src="/js/showlisting.js"></script> <script type="text/javascript"> // Call this function when the page has been loaded function loadmap() { var latlng = new google.maps.LatLng(49.374918567425475, -123.28996885871596); var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('listingmap'), myOptions); var listingicon = '/images/activehouse.png'; var infowindow = new google.maps.InfoWindow(); homemarker = new google.maps.Marker({position: latlng, map: map, icon: listingicon}); google.maps.event.addListener(homemarker, 'click', function() { infowindow.setContent('<div style="height:80px; width:250px; color:#333;"><p>7210 Arbutus Place<br />Whytecliff, West Vancouver</div>') infowindow.open(map,homemarker); }); } function loadpano() { var latlng = new google.maps.LatLng(49.374918567425475, -123.28996885871596); $('#listingpanorama').slideDown(500, function() { var panoramaOptions = { addressControl:false, position: latlng, pov: { heading: 34, pitch: 30, zoom: 1 } }; var panorama = new google.maps.StreetViewPanorama(document.getElementById('listingpanorama'), panoramaOptions); }); return false; } </script> My old one under GOogle API Version 2 is here FYI if you want to take a look at it: http://demo.brixwork.com/master/showlisting.php/63/1701-388-Drake-Street-False-Creek-North-Vancouver-

    Read the article

  • simple jquery dropdown - clearTimeout, setTimeout issues

    - by user210757
    HTML: <ul class="topnav"> <li><a href="#"><span>One</span></a></li> <li><a href="#"><span>Two</span></a></li> <li> <li><a href="#"><span>Three</span></a></li> <ul class="subnav"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> </ul> jquery: var timeout = null; $(document).ready(function() { $("ul.topnav li").mouseover(function() { if (timeout) clearTimeout(timeout); $(this).find("ul.subnav").slideDown('fast').show(); }).mouseout(function() { timeout = setTimeout(closemenu, 500); }); // sub menu mouseovers keep dropdown open $("ul.subnav li").mouseover(function() { if (timeout) clearTimeout(timeout); } ).mouseout(function() { timeout = setTimeout(closemenu, 500); // alert(timeout); }); // any click closes $(document).click(closemenu); }); // Closes all open menus function closemenu() { $('ul.subnav:visible').hide(); if (timeout) clearTimeout(timeout); } I'm having issues with timeout. In use, if i mouseover "Three", the dropdown stays out forever. if i mouseover "A", dropdown will stay out forever, but if I mouseover "B" or anything lower, the menu will close on me. if you uncomment "// alert(timeout);" it gets there for B, (and A) but timeout will have a value. why is this? i thought clearTimeout would null the timeout variable?

    Read the article

  • 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

  • jquery, manipulate content inserted by ajax, without using the callback

    - by Cody
    I am using ajax to insert a series of informational blocks via a loop. The blocks each have a title, and long description in them that is hidden by default. They function like an accordion, only showing one description at a time amongst all of the blocks. The problem is opening the description on the first block. I would REALLY like to do it with javascript right after the loop that is creating them is done. Is it possible to manipulate elements created ofter an ajax call without using the callback? <!-- example code--> <style> .placeholder, .long_description{ display:none;} </style> </head><body> <script> /* yes, this script is in the body, dont know if it matters */ $(document).ready(function() { $(".placeholder").each(function(){ // Use the divs to get the blocks var blockname = $(this).html(); // the contents if the div is the ID for the ajax POST $.post("/service_app/dyn_block",'form='+blockname, function(data){ var divname = '#div_' + blockname; $(divname).after(data); $(this).setupAccrdFnctly(); //not the actual code }); }); /* THIS LINE IS THE PROBLEM LINE, is it possible to reference the code ajax inserted */ /* Display the long description in the first dyn_block */ $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); }); </script> <!-- These lines are generated by PHP --> <!-- It is POSSIBLE to display the dyn_blocks --> <!-- here but I would really rather not --> <div id="div_servicetype" class="placeholder">servicetype</div> <div id="div_custtype" class="placeholder">custtype</div> <div id="div_custinfo" class="placeholder">custinfo</div> <div id="div_businfo" class="placeholder">businfo</div> </body>

    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

  • IE browser caching and the jQuery Form Plugin

    - by Harfleur
    Like so many lost souls before me, I'm floundering in the snake pit that is Ajax form submission and IE browser caching. I'm trying to write a simple script using the jQuery Form Plugin to Ajaxify Wordpress comments. It's working fine in Firefox, Chrome, Safari, et. al., but in IE, the response text is cached with the result that Ajax is pulling in the wrong comment. jQuery(this).ajaxSubmit({ success: function(data) { var response = $("<ol>"+data+"</ol>"); response.find('.commentlist li:last').hide().appendTo(jQuery('.commentlist')).slideDown('slow'); } }); ajaxSubmit sends the comment to wp-comments-post.php, which inelegantly spits back the entire page as a response. So, despite the fact that it's ugly as toads, I'm sticking the response text in a variable, using :last to isolate the most recent comment, and sliding it down in its place. IE, however, is returning the cached version of the page, which doesn't include the new comment. So ".commentlist li:last" selects the previous comment, a duplicate of which then uselessly slides down beneath the original. I've tried setting "cache: false" in the ajaxSubmit options, but it has no effect. I've tried setting a url option and tacking on a random number or timestamp, but it winds up being attached to the POST that submits the comment to the server rather than the GET that returns the response, and so has no effect. I'm not sure what else to try. Everything works fine in IE if I turn off browser caching, but that's obviously not something I can expect anyone viewing the page to do. Any help will be hugely appreciated. Thanks in advance! EDIT WITH A PROGRESS REPORT: A couple of people have suggested using PHP headers to prevent caching, and this does indeed work. The trouble is that wp-comments-post is spitting back the entire page when a new comment is submitted, and the only way I can see to add headers is to put them in the Wordpress post template, which disables caching on all posts at all times--not quite the behavior I'm looking for. Is there a way to set a php conditional--"if is_ajax" or something like that--that would keep the headers from being applied during regular pageloads, but plug them in if the page was called by an Ajax GET?

    Read the article

  • manipulate content inserted by ajax, without using the callback

    - by Cody
    I am using ajax to insert a series of informational blocks via a loop. The blocks each have a title, and long description in them that is hidden by default. They function like an accordion, only showing one description at a time amongst all of the blocks. The problem is opening the description on the first block. I would REALLY like to do it with javascript right after the loop that is creating them is done. Is it possible to manipulate elements created ofter an ajax call without using the callback? <!-- example code--> <style> .placeholder, .long_description{ display:none;} </style> </head><body> <script> /* yes, this script is in the body, dont know if it matters */ $(document).ready(function() { $(".placeholder").each(function(){ // Use the divs to get the blocks var blockname = $(this).html(); // the contents if the div is the ID for the ajax POST $.post("/service_app/dyn_block",'form='+blockname, function(data){ var divname = '#div_' + blockname; $(divname).after(data); $(this).setupAccrdFnctly(); //not the actual code }); }); /* THIS LINE IS THE PROBLEM LINE, is it possible to reference the code ajax inserted */ /* Display the long description in the first dyn_block */ $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); }); </script> <!-- These lines are generated by PHP --> <!-- It is POSSIBLE to display the dyn_blocks --> <!-- here but I would really rather not --> <div id="div_servicetype" class="placeholder">servicetype</div> <div id="div_custtype" class="placeholder">custtype</div> <div id="div_custinfo" class="placeholder">custinfo</div> <div id="div_businfo" class="placeholder">businfo</div> </body>

    Read the article

  • Simple Modal with Autocomplete in ASP.NET

    - by DanielJaymes
    Hello, I am quite new to this so any help is very much appreciated. I am generating a modal pop using Simple Modal, this works ok. I now want to add jquery autocomplete to the element txtEmail. When I run the page outside of Simple Modal I can use Autocomplete, however when the page is loaded through Simple Modal it does not work. I have checked to ensure the element is loaded, and it is allowing me to change the text color, but I can not add autocomplete to it. The code is /** * @author Daniel */ jQuery(function($) { $("input.ema, a.ema").click(function(e) { e.preventDefault(); $("#osx-modal-content").modal({ appendTo: 'form', overlayId: 'osx-overlay', containerId: 'osx-container', closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>', minHeight: 80, opacity: 65, position: ['0', ], overlayClose: true, onOpen: OSX.open, onClose: OSX.close, onShow: OSX.show }); }); var OSX = { container: null, open: function(d) { var self = this; $.ajax({ url: "/Message/UserMessage/", type: 'GET', dataType: 'html', // <-- to expect an html response success: function(result) { var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); $('div#osx-modal-data').html(result).find("#txtEmail").css('color', '#c00'); if ($('div#osx-modal-data').find("#txtEmail").length) { // implies *not* zero $('div#osx-modal-data').find("#txtEmail").autocomplete(data); alert('We found img elements on the page using "img"'); } else { alert('No txtEmail elements found'); } } }); self.container = d.container[0]; d.overlay.fadeIn('slow', function() { $("#osx-modal-content", self.container).show(); $('div#osx-modal-title').html("Send Email"); var title = $("#osx-modal-title", self.container); title.show(); d.container.slideDown('slow', function() { setTimeout(function() { var h = $("#osx-modal-data", self.container).height() + title.height() + 20; // padding d.container.animate({ height: h }, 200, function() { $("div.close", self.container).show(); $("#osx-modal-data", self.container).show(); }); }, 300); }); }) }, close: function(d) { var self = this; d.container.animate({ top: "-" + (d.container.height() + 20) }, 500, function() { self.close(); // or $.modal.close(); }); }, show: function(d) { // $('div#osx-modal-data').find("#txtEmail").css('color', '#ccc') } }; });

    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

  • Changing the title of jQuery-UI dialog-box with in another dialog-box's function...

    - by Brian Ojeda
    Why doesn't doesn't the second jQuery-UI dialog box title change when popped. The first dialog box I change the title of the box with using the following .attr("title", "Confirm") -- it change the title of the first box to 'Confirm', like it should have. Now when the second box pops up it should change the title to 'Message' since did the same thing for the second box -- .attr("title", "Message"). Right? But it doesnt. It keep the title from before. However, the message change like it should have. I have tested in IE8, Chrome, and FF3.6. <div id="dialog-confirm" title=""></div> <-- This is the html before jQuery functions. Javascript / jQuery $('#userDelete').click(function() { $(function() { var dialogIcon = "<span class=\"ui-icon ui-icon-alert\"></span>"; var dialogMessage = dialogIcon + "Are you sure you want to delete?"; $("#dialog-confirm").attr("title", "Confirm").html(dialogMessage).dialog({ resizable: false, height: 125, width: 300, modal: true, buttons: { 'Delete': function() { $(this).dialog('close'); $.post('user_ajax.php', {action: 'delete', aId: $('[name=aId]').val() }, function(data) { if(data.success){ var dialogIcon = "<span class=\"ui-icon ui-icon-info\"></span>"; var dialogMessage = dialogIcon + data.message; $('#dialog-confirm').attr("title", "Message"); $('#dialog-confirm').html(dialogMessage); $('#dialog-confirm').dialog({ resizable: false, height: 125, width: 300, modal: true, buttons: { 'Okay': function() { $(this).dialog('close'); var url = $_httpaddress + "admin/index.php" $(location).attr('href',url); } // End of Okay Button Function } //--- End of Dialog Button Script });//--- End of Dialog Function } else { $_messageConsole.slideDown(); $_messageConsole.html(data.message); } }, 'json'); }, //--- End of Delete Button Function 'Cancel': function() { $(this).dialog('close'); } //--- End of Cancel Button Function } //--- End of Dialog Button Script }); //--- End of Dialog Script }); //--- End of Dialog Function return false; }); Thank you for you assistant, if you choose to help.

    Read the article

  • jQuery UI problem: why do the elements go flying around the screen?

    - by George Edison
    Yes, I know the title sounds a little suspicious. I will try to explain this the best I can... The code below is supposed to have the blue div slide down beside the red div. The first time you hit the Show the div button, it works. Also, the Hide the div works. Then when I click to show the div again, it appears to the right of where it is supposed to be! Why is this?!? Note: You can find a live example of the code here <html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Demo</title> <style type='text/css'> #red { background-color: red; width: 200px; height: 150px; position: absolute; } #blue { background-color: blue; width: 150px; height: 200px; position: absolute; display: none; } #tester_1 { top: 300px; left: 300px; position: absolute; } #tester_2 { top: 350px; left: 300px; position: absolute; } </style> </head> <script type="text/javascript" src="jquery.js"></script> <script type='text/javascript'> function Show() { $('#blue').position({ of: $('#red'), my: 'left top', at: 'right top'}).slideDown(); } function Hide() { $('#blue').hide(); } </script> <body> <div id='red'></div> <div id='blue'></div> <button id='tester_1' onclick='Show()'>Show the <kbd>div</kbd></button> <button id='tester_2' onclick='Hide()'>Hide the <kbd>div</kbd></button> </body> </html>

    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

  • position:absolute within border-radius and overflow:hidden

    - by JaNightmare
    I had a problem with border-radius in webkit browsers and found the solution at the following URL: How to make CSS3 rounded corners hide overflow in Chrome/Opera but iam using a another element with position: absolute; inside this now I need to make the caption with rounded border too, but do not know how note: i can't use another border-radius in caption, because this will have an animation see the code with: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Problem</title> <style type="text/css"> img { border: 0; } a { text-decoration: none; } .wrap-events { float: left; position: relative; width: 500px; height: 250px; } .events { overflow: hidden; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .caption { position: absolute; width: 100%; bottom: 0; color: #FFFFFF; background-color: #151515; font: 12px "Arial", Helvetica, sans-serif; opacity: 0.6; border-radius: 0 0 50px 50px; /* add border-radius to caption */ } .caption p { padding: 10px; } </style> </head> <body> <div class="wrap-events"> <div class="events"> <a href="#"> <img src="http://www.cg-auto.com.br/forum/imagens/imagens_news/26c4dc4359edcfd4c6871ee1fa958539.jpg" alt="image"> </a> <div class="caption"> <p>This is a caption</p> </div> </div> </div> <button id="slide">Slide It!</button> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $('#slide').click(function(){ $('.caption').hide().slideDown(2000); }); </script> </body> </html> cheers

    Read the article

  • Jquery menu help please

    - by Trai Tran
    I am having trouble with this menu, when I hover to the subcategories they keep slideup. I want the subcategories to remain when I hover it and when I move my mouse outside it will slideup, same go to the main categories. Please help. I had been working on this for 1 hour but no solution. $(document).ready(function(){ $('ul#level1').slideUp(); $('a#tab').hover(function(){ var content_show = $(this).attr('title'); $('.'+ content_show).stop().slideDown(); },function(){ var content_show = $(this).attr('title'); $('.'+ content_show).stop().slideUp(); }); }); <li><a href="#" id="tab" class="active" title="one">Sport</a> <ul id="level1" class="one"> <li><a href="#">View All</a></li> <li><a href="#" >Shoes</a></li> <li><a href="#" >T-Shirt</a></li> <li><a href="#" >Tools</a></li> <li><a href="#" >Hats</a></li> <li><a href="#">Pants</a></li> </ul> </li> <li><a href="#" id="tab" class="tab" title="two">Foods</a> <ul id="level1" class="two"> <li><a href="#">Link Here</a></li> <li><a href="#">Link Here</a></li> <li><a href="#">Link Here</a></li> <li><a href="#">Link Here</a></li> <li><a href="#">Link Here</a></li> </ul> </li>

    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

  • Javascript click function for multiple Classes

    - by Jason Bassett
    So basically I have this little social networking site which allow comments. I've built a comment section that will slide down once a user clicks "Comment" and it slides down under the users status. My problem is that right now, the JavaScript only works on ONE post ID, and not the rest obviously seeing you can only use an ID once. But of course if I use classes instead, All the comment sections slide down because now they're all the same class. See below for my HTML and JavaScript. So if someone has a better method out there, please help :) $(function () { $(".comment-box").slideUp(); //when "comment" is clicked, slide down the comment box. if ($(".comment-box-btn").click(function () { $(".comment-box").slideDown(); })); //when "cancel" is clicked, slide up the comment box. if ($(".close-comment-box").click(function () { $(".comment-box").slideUp() })); }); And here's the HTML used //anchor for "Comment" <a class="comment-box-btn" href="#"><i class="icon-comment"></i> Comment</a> //comment box <div class="row comment-box" style="display:none;"> <div class="col-md-12"> <form accept-charset="UTF-8" action="" method="post"> <textarea class="form-control animated" cols="180" id="new-comment" name="comment" placeholder="Comment.." rows="1"></textarea> <div class="text-right" style="margin-top:20px;"> <a class="btn btn-default close-comment-box" href="#"> <span class="glyphicon glyphicon-remove"></span> Cancel</a> <button class="btn btn-info" type="submit">Comment</button> </div> </form> </div> </div>

    Read the article

  • Problem with JS Selectbox Function

    - by Thomas
    I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed. My question is two part: 1) How do I write a conditional function that specifically targets the selected option 2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box? Here is the function I was working on for the first option: $(document).ready(function(){ var subTableDiv = $("div.subTableDiv"); var subTableDiv1 = $("div.subTableDiv1"); var subTableDiv2 = $("div.subTableDiv2"); subTableDiv.hide(); subTableDiv1.hide(); subTableDiv2.hide(); var selectmenu=document.getElementById("customfields-s-18-s"); selectmenu.onchange=function(){ //run some code when "onchange" event fires var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu" if (chosenoption.value ="Co-Op"){ subTableDiv1.slideDown("medium"); } } }); Html: <tr> <div> <select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" > <option value="Condominium"> Condominium</option> <option value="Co-Op"> Co-Op</option> <option value="Condop"> Condop</option> </select> </div> </tr> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div> </td> </tr> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div> </td> </tr> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div> </td> </tr>

    Read the article

  • Uncaught TypeError: Object #<an Object> has no method 'fullCalendar'

    - by Lalit
    Hi, I have embed the fullcalender control in my asp.net mvc application. It is running fine locally. but when I uploads it to my domain server (third party) it showing me This Error: Uncaught TypeError: Object # has no method 'fullCalendar' in crome console (debugger). and not rendering the control. ** EDITED: My HTML code is this ** <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" % Index <% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); % < style type='text/css' body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #calendar { width: 900px; margin: 0 auto; } < script type="text/javascript" $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var officerid = document.getElementById('officerid').value; url = "/TasksToOfficer/Calender/" + officerid; var currenteventIden = <%= serializer.Serialize( ViewData["iden"] ) %> var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay', border: 0 }, eventClick: function(event, element) { var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} }); var iden = event.id; if (title) { var st = event.start; var ed = event.end; var aldy = event.allDay; var dt = event.date; event.title = title; calendar.fullCalendar('updateEvent',event); var date = new Date(st); var NextMonth = date.getMonth() + 1; var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear(); var QueryStringForEdit=null; QueryStringForEdit="officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=true&iden=" + iden; if (officerid) { $.ajax( { type: "POST", url: "/TasksToOfficer/Create", data: QueryStringForEdit, success: function(result) { if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success }, error: function(req, status, error) { } }); } } }, selectable: true, selectHelper: true, select: function(start, end, allDay) { var title = prompt('Event Title:', { buttons: { Ok: true, Cancel: false } } ); if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, false); // This is false , because do not show same event on same date after render from server side. var date = new Date(start); var NextMonth = date.getMonth() + 1; // Reason: it is bacause of month array it starts from 0 var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear(); if (officerid) { $.ajax({ type: "POST", url: "/TasksToOfficer/Create", data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=false", success: function(result) { if (result.success) $("#feedback input").attr("value", ""); //$("#feedback_status").slideDown(250).text(result.message); }, error: function(req, status, error) { } }); } } calendar.fullCalendar('unselect'); }, editable: true, events: url }); }); //--------------------------------------------------------------------------// </script > <h2> Index</h2> <div id="calendar"> </div> <input id="officerid" type="hidden" value="<%=ViewData["officerid"].ToString()%>" />

    Read the article

  • jquery Uncaught SyntaxError: Unexpected token )

    - by js00831
    I am getting a jquery error in my code... can you guys tell me whats the reason for this when you click the united states red color button in this link you will see this error http://jsfiddle.net/SSMX4/88/embedded/result/ function checkCookie(){ var cookie_locale = readCookie('desired-locale'); var show_blip_count = readCookie('show_blip_count'); var tesla_locale = 'en_US'; //default to US var path = window.location.pathname; // debug.log("path = " + path); var parsed_url = parseURL(window.location.href); var path_array = parsed_url.segments; var path_length = path_array.length var locale_path_index = -1; var locale_in_path = false; var locales = ['en_AT', 'en_AU', 'en_BE', 'en_CA', 'en_CH', 'de_DE', 'en_DK', 'en_GB', 'en_HK', 'en_EU', 'jp', 'nl_NL', 'en_US', 'it_IT', 'fr_FR', 'no_NO'] // see if we are on a locale path $.each(locales, function(index, value){ locale_path_index = $.inArray(value, path_array); if (locale_path_index != -1) { tesla_locale = value == 'jp' ? 'ja_JP':value; locale_in_path = true; } }); // debug.log('tesla_locale = ' + tesla_locale); cookie_locale = (cookie_locale == null || cookie_locale == 'null') ? false:cookie_locale; // Only do the js redirect on the static homepage. if ((path_length == 1) && (locale_in_path || path == '/')) { debug.log("path in redirect section = " + path); if (cookie_locale && (cookie_locale != tesla_locale)) { // debug.log('Redirecting to cookie_locale...'); var path_base = ''; switch (cookie_locale){ case 'en_US': path_base = path_length > 1 ? path_base:'/'; break; case 'ja_JP': path_base = '/jp' break; default: path_base = '/' + cookie_locale; } path_array = locale_in_path != -1 ? path_array.slice(locale_in_path):path_array; path_array.unshift(path_base); window.location.href = path_array.join('/'); } } // only do the ajax call if we don't have a cookie if (!cookie_locale) { // debug.log('doing the cookie check for locale...') cookie_locale = 'null'; var get_data = {cookie:cookie_locale, page:path, t_locale:tesla_locale}; var query_country_string = parsed_url.query != '' ? parsed_url.query.split('='):false; var query_country = query_country_string ? (query_country_string.slice(0,1) == '?country' ? query_country_string.slice(-1):false):false; if (query_country) { get_data.query_country = query_country; } $.ajax({ url:'/check_locale', data:get_data, cache: false, dataType: "json", success: function(data){ var ip_locale = data.locale; var market = data.market; var new_locale_link = $('#locale_pop #locale_link'); if (data.show_blip && show_blip_count < 3) { setTimeout(function(){ $('#locale_msg').text(data.locale_msg); $('#locale_welcome').text(data.locale_welcome); new_locale_link[0].href = data.new_path; new_locale_link.text(data.locale_link); new_locale_link.attr('rel', data.locale); if (!new_locale_link.hasClass(data.locale)) { new_locale_link.addClass(data.locale); } $('#locale_pop').slideDown('slow', function(){ var hide_blip = setTimeout(function(){ $('#locale_pop').slideUp('slow', function(){ var show_blip_count = readCookie('show_blip_count'); if (!show_blip_count) { createCookie('show_blip_count',1,360); } else if (show_blip_count < 3 ) { var b_count = show_blip_count; b_count ++; eraseCookie('show_blip_count'); createCookie('show_blip_count',b_count,360); } }); },10000); $('#locale_pop').hover(function(){ clearTimeout(hide_blip); },function(){ setTimeout(function(){$('#locale_pop').slideUp();},10000); }); }); },1000); } } }); } }

    Read the article

< Previous Page | 4 5 6 7 8 9  | Next Page >