Search Results

Search found 27606 results on 1105 pages for 'javascript disabled'.

Page 1081/1105 | < Previous Page | 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088  | Next Page >

  • Sanity Check: change event not firing first time using keyboard

    - by macca1
    I've done a good amount of research on this and found a bunch of reported problems and solutions but the general consensus seems that all change problems in IE6 were fixed in jQuery 1.4.2. I'm having an issue where a change event is not firing in jQuery 1.4.2, but it did fire successfully in jQuery 1.3.2. This is in IE6. I'm about to submit a bug for this, but for my sanity I wanted to post it here first to see if there's something dumb I'm missing. I don't understand why this is working this way... <HTML> <HEAD> <TITLE>jQuery 1.4.2 Problem </TITLE> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready( function() { $("#firstBox").change(function() { alert("CHANGE"); }); // ONLOAD of document autofocus into the first element... $("form").find(":input:visible:first").focus() }); </script> </HEAD> <BODY> <form> <select id="firstBox"> <option value="" selected="selected">--</option> <option value="1">One</option> <option value="2">Two</option> </select> <br><br> <input size="10" id="secondBox"> </form> </BODY> </HTML> Simple enough, right? Onload of the page, give the first element focus. Onchange of the first element, alert. If you use the mouse, it works as expected. The page loads, the focus is in the drop down, you change the option, you get the alert. The problem is if you use the keyboard. The page loads, the focus is in the drop down, you press the down arrow. The option changes. Tab off the field, no alert. Weird. To make it even weirder, if you tab back into the field and change it again (all using the keyboard), the change event DOES fire after tab out this time. Any ideas?

    Read the article

  • HTTP caching confusion

    - by Keith
    I'm not sure whether this is a server issue, or whether I'm failing to understand how HTTP caching really works. I have an ASP MVC application running on IIS7. There's a lot of static content as part of the site including lots of CSS, Javascript and image files. For these files I want the browser to cache them for at least a day - our .css, .js, .gif and .png files rarely change. My web.config goes like this: <system.webServer> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" /> </staticContent> </system.webServer> The problem I'm getting is that the browser (tested Chrome, IE8 and FX) doesn't seem to be caching the files as I'd expect. I've got the default settings (check for newer pages automatically in IE). On first visit the content downloads as expected HTTP/1.1 200 OK Cache-Control: max-age=86400 Content-Type: image/gif Last-Modified: Fri, 07 Aug 2009 09:55:15 GMT Accept-Ranges: bytes ETag: "3efeb2294517ca1:0" Server: Microsoft-IIS/7.0 X-Powered-By: ASP.NET Date: Mon, 07 Jun 2010 14:29:16 GMT Content-Length: 918 <content> I think that the Cache-Control: max-age=86400 should tell the browser not to request the page again for a day. Ok, so now the page is reloaded and the browser requests the image again. This time it gets an empty response with these headers: HTTP/1.1 304 Not Modified Cache-Control: max-age=86400 Last-Modified: Fri, 07 Aug 2009 09:55:15 GMT Accept-Ranges: bytes ETag: "3efeb2294517ca1:0" Server: Microsoft-IIS/7.0 X-Powered-By: ASP.NET Date: Mon, 07 Jun 2010 14:30:32 GMT So it looks like the browser has sent the ETag back (as a unique id for the resource), and the server's come back with a 304 Not Modified - telling the browser that it can use the previously downloaded file. It seems to me that would be correct for many caching situations, but here I don't want the extra round trip. I don't care if the image gets out of date when the file on the server changes. There are a lot of these files (even with sprite-maps and the like) and many of our clients have very slow networks. Each round trip to ping for that 304 status is taking about a 10th to a 5th of a second. Many also have IE6 which only has 2 HTTP connections at a time. The net result is that our application appears to be very slow for these clients with every page taking an extra couple of seconds to check that the static content hasn't changed. What response header am I missing that would cause the browser to aggressively cache the files? How would I set this in a .Net web.config for IIS7? Am I misunderstanding how HTTP caching works in the first place?

    Read the article

  • Help with css selector for jquery

    - by NachoF
    I have this wordpress blog that has many pages with subpages that dropdown on hover.... the thing is, I dont want the pages that you hover to link to anything unless they dont have any ul with many anchors inside so just the subpages will have a href different than "#" So basically Im hacking my way through this with some simple javascript. jQuery(document).ready(function(){ jQuery("#menus li > a").attr("href","#"); }); This is selecting every a.. and I dont want that... I just want the anchors that are main pages, not subpages... heres the html so maybe you can think of a better way to select this. Ill explain first the structure is an ul with many li that have an anchor inside if the li also has a ul inside then those are subpages that will appear on hover. hence the initial anchor should have href="#" if there is no ul inside the li then the li a should keep its href. <ul id="menus"> <li> <a href="somelink">Main Page</a> //href should be changed to # <ul> <li> <a href="somelink2/">Subpage1</a> </li> <li> <a href="somelink3">Subpage2</a> </li> </ul> </li> <li> <a href="somelink">MainPage-with-no-subpages</a> //href should not be changed </li> <li> <a href="somelink4">MainPage</a> //href should be changed to # <ul> <li> <a href="somelink5">Subpage</a> </li> <li> <a href="somelink6">Subpage</a> </li> </ul> </li> </ul>

    Read the article

  • jQuery fadeIn fadeOut pause on hover

    - by theDawckta
    I have a little jQuery snippet that will fadeIn and fadeOut a group of divs over a select interval. I now need to pause this fadeIn fadeOut on hover, then resume on mouse out. Any help is appreciated. Here is the relevant code. The following is what is located in my body <div class="gcRotate"> <div class="gcRotateContent"> <div style="border: solid 2px black; text-align: center; width: 150px;"> This is first content <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg" alt="Dude" /> </div> </div> <div class="gcRotateContent"> <div style="border: solid 2px black; text-align: center; width: 150px"> This is second content <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg" alt="Dude" /> </div> </div> <div class="gcRotateContent"> <div style="border: solid 2px black; text-align: center; width: 150px"> This is third content <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Dude" /> </div> </div> </div> <div> This shouldn't move. </div> <script type="text/javascript"> function fadeContent() { $(".gcRotate .gcRotateContent:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() { $(this).appendTo($(this).parent()); fadeContent(); }); } $(".gcRotate").height(0); $(".gcRotateContent").each( function() { if ($(".gcRotate").height() < $(this).height()) { $(".gcRotate").height($(this).height()); } } ); $(".gcRotateContent").each(function() { $(this).css("display", "none") }); fadeContent(); </script>

    Read the article

  • ui tabs and position relative

    - by ntan
    Hi, I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name. Here is the code <div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec"> <!--ICON just before TABs--> <div style="z-index:1;position:relative;top:30px;left:5px"> <img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/> </div> <div id="tabs" > <ul > <li > <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" /> <a href="#tab-1"><span id="tabContent-1"><span class="tabText" >TAB1</span></span></a> </li> <li > <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" /> <a href="#tab-2"><span id="tabContent-2"><span class="tabText" >TAB2</span></span></a> </li> </ul> <div id="tab-1" > contents </div> <div id="tab-2" > contents </div> </div><!--tabs--> I know that ui.css has position relative for tabs .ui-tabs .ui-tabs-nav { list-style:none outside none; padding:0.2em 0.2em 0; position:relative; } and i dont know if meshing up with my icon. If i remove the position:relative from the icon (add.gif) everything works fine Any help is appreciated

    Read the article

  • Align div boxes next to each other

    - by Mestika
    Hi everyone, I’ve two div boxes that I’m using as a expand-collapse with some javascript but the problem is that they currently are align underneath each other. I would like to have them next to each other instead but I’ve run into a wall. My styles look like this: <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; } a{color:#993300; text-decoration:none;} #caja, #caja2 { width:30%; display: none; padding:5px; border:2px solid #FADDA9; background-color:#FDF4E1; } #mostrar, #mostrar2{ display:block; width:30%; padding:5px; border:2px solid #D0E8F4; background-color:#ECF8FD; } </style> And my HTML look likes this: <a href="#" id="mostrar">MOSTRAR</a> <div style="display: none;" id="caja"> <a href="#" class="close">[x]</a> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> </div> <br> <a href="#" id="mostrar2">MOSTRAR 2</a> <div style="display: none;" id="caja2"> <a href="#" class="close">[x]</a> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p> </div> I’ve tried with float:left; but they are not entirely align next to each other but with the box 2 (MOSTRAR 2) is just a couple of pixels underneath box 1 (MOSTRAR 1). And of cause I need the caja and caja2 to be aligned as well for the expand-collapse function to work. Thanks Mestika

    Read the article

  • Inline-SVG not rendering when generated by JS

    - by Lucas Gasenzer
    I want to implement some visual statistics into a jQuery mobile page. If I embed the folowing snippet it will show me the same results as if I would embed it from a separate *.svg-file. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="115" width="100%"> <rect x="0%" y="0" fill="#8cc63f" width="19.2%" height="100" /> <text x="10%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">A</text> <text x="10%" y="15" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">100</text> <rect x="20.2%" y="50" fill="#8cc63f" width="19.2%" height="50" /> <text x="30.2%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">B</text> <text x="30.2%" y="65" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">50</text> <rect x="40.4%" y="90" fill="#8cc63f" width="19.2%" height="10" /> <text x="50.4%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">C</text> <text x="50.4%" y="85" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">10</text> <rect x="60.6%" y="78" fill="#8cc63f" width="19.2%" height="22" /> <text x="70.6%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">D</text> <text x="70.6%" y="73" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">22</text> <rect x="80.8%" y="40" fill="#8cc63f" width="19.2%" height="60" /> <text x="90.8%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">E</text> <text x="90.8%" y="55" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">60</text> Now because these statistics obviously change for each site I generate code like the one above using JavaScript. The HTML-Source-Code looks the same but the SVG will not be showing. Instead it looks like this: A 100 B 50 C 10 D 22 E60 so really just a line of text Am I missing something? Thank you for your help!

    Read the article

  • problem in saving drag&drop object in database

    - by Mac Taylor
    hey guys i made a script inspired by wordpress widgets'page to drag&drop blocks of my sites but problem is in saving the position after droping this is jquery code , i used to do the above target : <script type="text/javascript" >$(function(){ $('.widget') .each(function(){ $(this).hover(function(){ $(this).find('h4').addClass('collapse'); }, function(){ $(this).find('h4').removeClass('collapse'); }) .find('h4').hover(function(){ $(this).find('.in-widget-title').css('visibility', 'visible'); }, function(){ $(this).find('.in-widget-title').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.widget-inside').toggle(); //Save state on change of collapse state of panel updateWidgetData(); }) .end() .find('.in-widget-title').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h4', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function(event, ui){ //Firefox, Safari/Chrome fire click event after drag is complete, fix for that if($.browser.mozilla || $.browser.safari) $(ui.item).find('.widget-inside').toggle(); }, stop: function(event, ui){ ui.item.css({'top':'0','left':'0'}); //Opera fix if(!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); function updateWidgetData(){ var items=[]; $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){ if(response=="success") $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000); setTimeout(function(){ $('#console').fadeOut(1000); }, 2000); }); } </script> and a simple php file but problem is its not sending data to target php file is there anything wrong with my code ?

    Read the article

  • Ajax load div , part of CSS not working

    - by user225228
    Hello, I'm using the ajax to load a div content, but the div content is not taking the CSS of the page. Example :- This link will load into <a href="#" onclick="javascript:loadAjax('test.html')">Test</a> <div id="result"> <table class="tablesorter"> <thead> <tr> <th>Header 1</th><th>Header 2</th> </tr> </thead> <tbody> <tr><td>Record 1</td><td>Desc 1</td></tr> </tbody> </table> </div> In my CSS : table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #e6EEEE; border: 1px solid #FFF; font-size: 8pt; padding: 4px; } table.tablesorter thead tr .header { background-image: url(bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } In my test.html, it's the same table with different record : <table class="tablesorter"> <thead> <tr> <th>Header 1</th><th>Header 2</th> </tr> </thead> <tbody> <tr><td>Record 2</td><td>Desc 2</td></tr> </tbody> </table> The issue I'm facing is that before "test.html" is load, the CSS is fine. But after clicking on the link which suppose to loads test.html, the CSS background still shows but "cursor:pointer" and "background-image" not longer works. What should I do to make it work? Thanks in advance!

    Read the article

  • Make Div overlay ENTIRE page (not just viewport)??

    - by Polaris878
    Hello, So I have a problem that I think is quite common but I have yet to find a good solution for. I want to make an overlay div cover the ENTIRE page... NOT just the viewport. I don't understand why this is so hard to do... I've tried setting body, html heights to 100% etc but that isn't working. Here is what I have so far: <html> <head> <style type="text/css"> .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;} body { height: 100%; } html { height: 100%; } </style> </head> <body> <div style="height: 100%; width: 100%; position: relative;"> <div style="height: 100px; width: 300px; background-color: Red;"> </div> <div style="height: 230px; width: 9000px; background-color: Green;"> </div> <div style="height: 900px; width: 200px; background-color: Blue;"></div> <div class="OverLay">TestTest!</div> </div> </body> </html> I'd also be open to a solution in JavaScript if one exists, but I'd much rather just be using some simple CSS.

    Read the article

  • Trying to create an infinite for loop that can stop using function doIt()

    - by JoeOzz
    Hey guys, I'm new to javascript and I'm doing a project for my final in class. I need to make it so this game engine I manipulated causes the generation button to go for an infinite loop. I also need to stop it using (Reset==1). Any help? Here's the code I have so far if that helps: function generation() { for(y2=0; y2<2500; y2++) { tempmapactual[y2]=mapactual[y2]; } for (g=0;g<2500;g++) { neighbours=0; for (h=0;h<8;h++) { if (g+coords[h]>0 && g+coords[h]<2499 && mapactual[g+coords[h]]=="white.gif") {neighbours=neighbours+1;} } if (neighbours>=4 || neighbours==1 || neighbours==0) {tempmapactual[g]="black.gif";} if (neighbours==3) {tempmapactual[g]="white.gif";} } for(y3=0; y3<2500; ++y3) { if (mapactual[y3]!=tempmapactual[y3]) { mapactual[y3]=tempmapactual[y3]; document.images[y3+offset].src=mapactual[y3]; } } } </script> <script> function doIt() { for (i=0; i<X; i++) { // This is where I have trouble. What part of generation() do I call? } if (Reset==1) break; // This will kill the loop instantly. } } </script> <script> window.onload(doIt($(X).value))); </script> <form> <input type="button" value="generate" onClick="generation();"> </form> <form> <input type="text"> </form> <form> <input type="button" value="Infinite Loop!" onclick="doIt();"> </form> <form> <input type="button" value="Reset" onclick="doIt();"> </form>

    Read the article

  • ASP.net: Radio Button Not Maintaining Selection After Postback, Inside DIV/Thickbox

    - by jlrolin
    I have a set of radio buttons inside a hidden DIV. <div id="reports" style="display:none;"> <center> <br /> <table cellpadding="4" cellspacing="0"> <tr> <td class="label"> Report Type::&nbsp; </td> <td class="value"> <asp:RadioButton ID="rbReportTypeCust" runat="server" Text="By Customer" Enabled="True" Checked="True" GroupName="rbType" />&nbsp;<asp:RadioButton ID="rbReportTypeProg" runat="server" Text="By Program" Enabled="True" GroupName="rbType" /> </td> </tr> <tr> <td class="label"> Customer:&nbsp; </td> <td class="value"> <asp:DropDownList ID="ddlCustomer" runat="server" /> </td> </tr> <tr> <td class="label"> Program Group::&nbsp; </td> <td class="value"> <asp:DropDownList ID="ddlProgramGroups" runat="server" /> </td> </tr> </table> <br /> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="doPostBack(this);" /> </center> </div> The DIV is displayed using Thickbox as a modal popup. The doPostback javascript function posts the button click back, and hits btnSubmit_Click where a report is then generated. If I see if a radio button is checked, it's always rbReportTypeCust.checked = True, never the rbReportTypeProg.checked = True even if I click it. Any suggestions?

    Read the article

  • Can i store a Queue in viewstate? only will store the first item i add to queue

    - by Mausimo
    Hey, as the question states i am trying to store a Queue in a viewstate (to track postbacks and refreshes to stop a form from resubmitting). Here is just the viewstate code: private Queue<string> p_tempQue { set { ViewState["sTemp"] = value; } get { return (Queue<string>)ViewState["sTemp"]; } } //BasePage constructor public BasePage() { //create a Queue of string //sTemp = new Queue(); this.Load += new EventHandler(this.Page_Load); this.Init += new EventHandler(this.Page_Init); } //In the 'page_Init' event we have created a simple hidden field by name 'hdnGuid' which is attached to the page on the first hit itself. protected void Page_Init(object sender, EventArgs e) { //initializing the hidden field //create a hidden field with a ID HiddenField hdnGuid = new HiddenField(); hdnGuid.ID = "hdnGuid"; //if it is the first time the page is loaded, create a new guid and assign it as the hidden field value if (!Page.IsPostBack) hdnGuid.Value = Guid.NewGuid().ToString(); //add the hidden field to the page Page.Form.Controls.Add(hdnGuid); } //In the 'page_Load' event we check if the hidden field value is same as the old value. In case the value is not same that means it's a 'postback' //and if the value is same then its 'refresh'. As per situation we set the 'httpContent.Items["Refresh"]' value. protected void Page_Load(object sender, EventArgs e) { if(p_tempQue != null) sTemp = p_tempQue; else sTemp = new Queue<string>(); //The hdnGuid will be set the first time page is loaded, else the hdnGuid //will be set after each time the form is submitted using javascript. //assign the hidden field currently on the page for manipulation HiddenField h1 = (HiddenField)(Page.Form.FindControl("hdnGuid")); //create an instance of the GuidClass GuidClass currentGuid = new GuidClass(); //set the GuidClass Guid property to the value of the hidden field currentGuid.Guid = h1.Value; //check to see if the Queue of strings contains the string which is the current Guid property of the GuidClass //if the are equal, then the page was refreshed if (sTemp.Contains<string>(currentGuid.Guid)) { //adds item as key/value pair to share data between an System.Web.IHttpModule interface and an System.Web.IHttpHandler interface during an HTTP request. System.Web.HttpContext.Current.Items.Add("IsRefresh", true); } //if they are not requal, the page is not refreshed else { //if the current Guid property in the GuidClass is not null or not an empty string //add the new Guid to the Queue if (!(currentGuid.Guid.Equals(null) || currentGuid.Guid.Equals(""))) sTemp.Enqueue(currentGuid.Guid); System.Web.HttpContext.Current.Items.Add("IsRefresh", false); } p_tempQue = sTemp; }

    Read the article

  • jQuery - addClass or removeClass - Is there an append class?

    - by iamtheratio
    I have css hover over images for my tabs and I'm trying to get the class to change from .how to .how_on when I click on the image HOW. My tabs are HOW | WHAT | WHEN | WHO | WHY I have classes for each (.how, .how_on), (.what, .what_on), etc... Can I make jQuery add _on to the original class name using click(function(){}); ? HTML: <div id="tab_container"> <ul class="tabs"> <li><a class="how_on" href="#how">How</a></li> <li><a class="why" href="#why">Why</a></li> <li><a class="what" href="#what">What</a></li> <li><a class="who" href="#who">Who</a></li> <li><a class="when" href="#when">When</a></li> </ul> <p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p> </div> <div class="tab_body"> <!-- HOW --> <div id="how" class="tab"> <strong>HOW IT WORKS:</strong> </div> JQUERY: <script type="text/javascript"> jQuery(document).ready(function(){ //if this is not the first tab, hide it jQuery(".tab:not(:first)").hide(); //to fix u know who jQuery(".tab:first").show(); //when we click one of the tabs jQuery(".tabs a").click(function(){ //get the ID of the element we need to show stringref = jQuery(this).attr("href").split('#')[1]; // adjust css on tabs to show active tab //hide the tabs that doesn't match the ID jQuery('.tab:not(#'+stringref+')').hide(); //fix if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { jQuery('.tab#' + stringref).show(); } else //display our tab fading it in jQuery('.tab#' + stringref).fadeIn(); //stay with me return false; }); }); </script>

    Read the article

  • centering a div without setting width

    - by Daniel
    Is there a way to do this? When using navigation that can change the number of items often, it would be nice not having to calculate the with and updating the css, but just having a solution that works. if that's impossible (I'm assuming it is) can anyone point me to a javascript that can do this? edit re: provide code some code basically I'm working with, what I think is, the most typical setup <div class="main"> <div class="nav"> <ul> <li>short title</li> <li>Item 3 Long title</li> <li>Item 4 Long title</li> <li>Item 5 Long title</li> <li>Item 6 Extra Long title</li> </ul> </div> </div> edit .main { width:100%; text-align:center; } .nav { margin:0 auto; } .nav ul li { display:inline; text-align:left; } the issue I've found with this/these solutions is that the content is nudged to the right adding some right padding (of 40px) seems to fix this across the browsers I'm checking on (O FF IE). .nav { margin:0 auto; padding-right:40px; } I don't know where this value is coming from though and why 40px fixes this. Does anyone know where this is coming from? it's not a margin or padding but no matter what I do the first about 40px can not be used for placement. Maybe it's the ul or li that's adding this. I've had a look at the display:table-cell way of doing this, but there's that complication with IE and it still has the same issue as the other solution edit (final) okay I've tried some things in regard to the indent. I've reset all padding to 0 *{padding:0;} that fixed it, and I don't need to offset the padding (I think I'll leave my whole process up so if anyone comes across this, it'll save them some time) thanks for the comments and replies

    Read the article

  • passing data from a client form via jquery ajax dinamicly

    - by quantum62
    i wanna insert specification of members that enter in textboxs of form in the database .i do this operation with jquery ajax when i call webmetod with static value the operation do successfully.for example this code is ok. $.ajax({ type: "POST", url:"MethodInvokeWithJQuery.aspx/executeinsert", data: '{ "username": "user1", "name":"john","family":"michael","password":"123456","email": "[email protected]", "tel": "123456", "codemeli": "123" }', contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (msg) { $('#myDiv2').text(msg.d); }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); but when i wanna use of values that enter in textboxes dynamically error occur.whats problem?i try this two code <script type="text/javascript"> $(document).ready( function () { $("#Button1").click( function () { var username, family, name, email, tel, codemeli, password; username = $('#<%=TextBox1.ClientID%>').val(); name = $('#<%=TextBox2.ClientID%>').val(); family = $('#<%=TextBox3.ClientID%>').val(); password = $('#<%=TextBox4.ClientID%>').val(); email = $('#<%=TextBox5.ClientID%>').val(); tel = $('#<%=TextBox6.ClientID%>').val(); codemeli = $('#<%=TextBox7.ClientID%>').val(); $.ajax( { type: "POST", url: "WebApplication20.aspx/executeinsert", data: "{'username':'username','name':name, 'family':family,'password':password, 'email':email,'tel':tel, 'codemeli':codemeli}", contentType: "application/json;charset=utf-8", dataType: "json", async: true, cache: false, success: function(msg) { alert(msg); }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); } ) }) </script> or $(document).ready( function () { $("#Button1").click( function () { var username, family, name, email, tel, codemeli, password; username = $('#<%=TextBox1.ClientID%>').val(); name = $('#<%=TextBox2.ClientID%>').val(); family = $('#<%=TextBox3.ClientID%>').val(); password = $('#<%=TextBox4.ClientID%>').val(); email = $('#<%=TextBox5.ClientID%>').val(); tel = $('#<%=TextBox6.ClientID%>').val(); codemeli = $('#<%=TextBox7.ClientID%>').val(); $.ajax( { type: "POST", url: "WebApplication20.aspx/executeinsert", data: '{"username" : '+username+', "name": '+name+', "family": '+family+', "password": '+password+', "email": '+email+', "tel": '+tel+' , "codemeli": '+codemeli+'}', contentType: "application/json;charset=utf-8", dataType: "json", async: true, cache: false, success: function(msg) { alert(msg); }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); } ) })

    Read the article

  • jQuery appendTo (switching back and forth)

    - by Starboy
    So what I'm trying to accomplish is a simple appendTo a certain element. The issue I'm having is after execute is run, it appends to the location but then proceed to go back to the ul it resides in. <script type="text/javascript"> function execute() { $('#desCopy').appendTo('#description') $('#imgPlace').appendTo('#IMGbox') } </script> <div id="content" style="background:#000; width:989px;"> <div style="float:left; left:18px; margin:0; width:337px; position:relative; padding:15px 0 0 0; color:#FFF;"> <div id="description"> </div> </div> <div id="IMGbox" style="float:left; position:relative; display:block; background:#F00; width:652px; height:258px; background:#0FF; overflow:hidden;"> </div> <div style="float:right; background:#CCC; height:25px; width:652px;"> <ul> <li><a href="" onclick="execute()">Slide 1</a> <ul style=""> <li><span id="desCopy">Test description, Test description</span></li> <li><img src="images/test.jpg" id="imgPlace"></li> </ul> </li> </ul> </div> </div>

    Read the article

  • invite friends in a dialog in a Facebook application

    - by Shani1351
    I'm trying to create a Facebook application that displays a friend invite dialog within the application using Facebook's Javascript API (FB.ui). To do that I followed this tutorial I have two problems : The action url I've put in the request-form is "http://apps.facebook.com/appname/post_invite.php" but I see that the iframe source after the post is "http://mydomain.com/post_invite.php" and when this iframe tries to do : parent.closeInviteWidget(); I get an error saying : "Permission denied for < http: //mydomain.com (document.domain has not been set) to get property Window.closeInviteWidget from < http:// apps.facebook.com (document.domain=< http:// facebook.com)." The skip button inside the request-form opens the action url in a new window (new browser tab) and not post to itself like the invite button. How can I fix those problems? -------------------- UPDATE : -------------------------------- I've tried to do what ifaour said and changed the code to : function inviteFriends(user_name, category_id, category_name) { url = appBaseUrl + "/index.php?category_id=" + category_id; req = "<fb:req-choice url='" + url + "' label='Authorize My Application' />"; content = user_name + " opened a new category called " + category_name + ". " + req; action = 'post_invite.php'; fbmi_text = '<fb:request-form action="' + action + '" target="_self" method="post" invite="true" type="Invite" content="' + content + '" <fb:multi-friend-selector showborder="false" actiontext="Invite yor friends" email_invite="false" import_external_friends="false" /> </fb:request-form>'; FB.ui({ method:'fbml.dialog', width:'750px', fbml:fbmi_text }); } When I use FireBug and look at the invite form it looks like this: <form id="req_form_4d20682f73ddb6e71722794" content="I've opened a new category called dsfsd. <fb:req-choice url='http://apps.facebook.com/appname/index.php?category_id=60' label='Authorize My Application' /> type="Invite" invite="true" method="post" target="_self" action="http://apps.facebook.com/appname/post_invite.php"> ... </form> But I still get the same error : Permission denied for <http://mydomain.com> (document.domain has not been set) to get property Window.closeInviteWidget from <http://apps.facebook.com> (document.domain=<http://facebook.com>)...

    Read the article

  • asp.net mvc & jquery dialog: What approach do I take to add items to a dropdownlist/select list with

    - by Mark Redman
    Hi, I am new to MVC and have a grasp of the basic model, but still doing everything with postbacks etc. One aspect of the UI I want to build is to have a drop-down-list of items with a button to add an item to the database and refresh the list. Achieving this with WebForms was straight forward as everything was wrapped in UpdatePanels, but what is the best approach to achieve this using MVC? Part of the markup for the list and button look like this: <table> <tr> <td><%=Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList, "(select job title)", new { @class = "data-entry-field" })%></td> <td>&nbsp;</td> <td><a id="AddJobTitleDialogLink" href="javascript: addJobTitleDialog();" title="Add Job Title"><img id="AddJobTitleButtonImage" src="/Content/Images/Icons/16x16/PlusGrey.png" border="0" /></a></td> </tr> </table> The Dialog is a standard jquery Ui dialog, looks like this: <div id="SingleTextEntryDialog" style="display:none"> <table> <tr> <td>Name:</td> <td><input id="SingleTextEntryDialogText" type="text" size="25" /></td> </tr> </table> </div> I am guessing I need to put this into a UserControl / PartialView (are they the same thing?) Also with the strongly typed View how do I pass the Model or just the SelectList Property to the UserControl or is this not the case? Nor sure if there should be form in the dialog div? or how that is going to postback via ajax. Some examples show a lot of ajax code in the page something like: $.ajax({...}); I assume doing this using jquery is more code than asp.net webforms, but there is just more code to see doing a "View Source" on a page? Your comments appreciated.

    Read the article

  • Class not overwriting with addClass

    - by scatteredbomb
    I'm using jQuery's addClass to add a class to an tab so when clicked it'll change the class so it's obvious the tab is highlighted. My HTML <div id="mainNav"> <ul> <li id="LinktheBand" onclick="nav('theBand')">The Band</li> <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li> My CSS #mainNav li { float:left; margin-right:5px; color:white; font-family:Tahoma; font-weight:bold; padding: 10px 8px 0px 8px; background:url('../images/transparent-65.png'); height:40px; height: 25px !important; border:1px solid #000; } #mainNav li:hover { float:left; margin-right:5px; color:white; font-family:Tahoma; font-weight:bold; padding: 10px 8px 0px 8px; background: #660000; height:40px; height: 25px !important; border:1px solid #660000; } .mainNavSelected { float:left; margin-right:5px; color:white; font-family:Tahoma; font-weight:bold; padding: 10px 8px 0px 8px; background: #660000; height:40px; height: 25px !important; border:1px solid #660000; } My Javascript function nav(a) { $('#'+a).show(); $('#Link'+a).addClass('mainNavSelected'); } This works properly, I check firebug and can see the class="mainNavSelected" is added, but the list element doesn't take any properties of the new class. Firebug lists all the class items for mainNavSelected, but has them all crossed out. What am i missing to replace the class of this element?

    Read the article

  • jquery masonry on ul with nested ul

    - by Adam Wright
    I'm trying to create a footer nav of a sitemap with levels nested within each other. i want to use masonry so the padding and margin is consistant and not changed depending on nested items. its firing masonry but its adding the relative style to the nested ul if i change the masonry call to select just the first() ul then nested li appear on one line. any ideas? <div id="links"> <ul ><li class="box"><a href="/Industries.aspx" >Industries</a></li><li class="box"><a href="/Services.aspx" >Services</a></li><li class="box"><a href="/Quality---Regulatory.aspx" >Quality &amp; Regulatory</a></li><li class="box"><a href="/About.aspx" >About</a><ul ><li class="box"><a href="/About/Our-Story.aspx" >Our Story</a></li><li class="box"><a href="/About/Our-Mission.aspx" >Our Mission</a></li><li class="box"><a href="/About/Our-Core-Values.aspx" >Our Core Values</a></li></ul></li><li class="box"><a href="/News.aspx" >News</a><ul ><li class="box"><a href="/News/Events.aspx" >Events</a></li></ul></li><li class="box"><a href="/Careers.aspx" >Careers</a></li><li class="box"><a href="/Contact.aspx" >Contact</a></li><li class="box"><a href="/tests.aspx" >tests</a></li></ul> </div> <script type="text/javascript"> $('#links ul').masonry({ singleMode: true, // Disables measuring the width of each floated element. // Set to true if floated elements have the same width. // default: false columnWidth: 182, // Width in pixels of 1 column of your grid. // default: outer width of the first floated element. itemSelector: '.box:visible', // Additional selector to specify which elements inside // the wrapping element will be rearranged. // Required for Infinite Scroll with window resizing. resizeable: true, // Binds a Masonry call to window resizes // so layout appears fluid. // default: true animate: false, // Animates layout rearrangements. // default: false saveOptions: true // Masonry will use the options from previous Masonry // calls by default, so you only have to enter in options once // default: true }); </script>

    Read the article

  • Why does my entire page reload in Chrome and Firefox when using asynchronous UpdatePanel postbacks?

    - by Alex
    Being a bit perplexed about this issue by now, I hope some of you gurus can shed some light on my problem... I've developed a AJAX-enhanced website, which has been running fine in IE, Chrome and Firefox for a year or so. I use a Timer-control to check for incoming messages every 30 seconds, and this updates an UpdatePanel showing potential new messages. Now several one of my Firefox users complain about the page refreshing every 30 seconds! I my self cannot reproduce this behaviour, but given the "30 seconds"-description, I cursed my Timer-solution as the culprit. But now, I'm experiencing this error myself, not in Firefox though, but in Google Chrome! (And only on one of my two computers!) Every 30 seconds the page reloads! But I found that it's not only related to the Timer, because all other asynchronous postbacks to the server within UpdatePanels reloads the entire page as well. This error has never been experienced in Internet Explorer (to my knowledge). As I said, this it not only related to the Timer postback, but if it's of interest to anybody the code is like this: <asp:Timer runat="server" ID="MailCheckTimer" Interval="30000" OnTick="MailChecker_Tick"></asp:Timer> <asp:UpdatePanel runat="server" ID="MailCheckerUpdatePanel" UpdateMode="Conditional"> <ContentTemplate> <div class="newmail_box" runat="server" id="newmail_box"> <!-- Content stripped for this example --> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="MailCheckTimer" /> </Triggers> </asp:UpdatePanel> In other places of the website I call the client side __doPostBack function directly from JavaScript in relation to an UpdatePanel. Normal behaviour for this call is to updated the referenced UpdatePanel with some content, but now in Chrome this refreshes the entire page! (but again not consistently, and never in IE) Even the most fundamental UpdatePanel operations like refreshing the content after a button (inside the panel) is clicked, forces the page to reload completely: <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click"></asp:Button> And just to torment me further, I only experience this on my public website, and not in my local development environment, making it a tedious affair for me to find the actual cause! :( Any ideas on why this happens? Why so inconsistently? Has it to do with my UpdatePanel-design? Or does some security setting in Firefox/Chrome that prevent some asynchronous UpdatePanel callbacks? Any help or idea is highly appreciated!

    Read the article

  • jQuery ajax multiline "script" response

    - by Rendrik
    I'm designing a template creation tool, which uses a jQuery Ajax request that posts parameters to a PHP file. The PHP does the actual generation of the template's HTML. // Send for processing. Expect JS back to execute. function generate() { $.ajax({ type: "POST", url: "generate.php", data: $('#genform :input').serialize(), dataType: "script", beforeSend: function() { $("#loading").html("<img src='images/loadbar.gif' />"); $("#loading") .dialog({ height: 80, width: 256, autoOpen: true, modal: true }); }, success: function(data) { $("#loading").dialog('close'); } }); } My trouble is that I have the ajax dataType: set to "script". Using this, the PHP file generates some jQuery dialogs for any errors which works nicely. However, after I generate the HTML, i'm having trouble passing it back. So I have probably 100 lines of generated HTML and javascript which i'd like to work with. In the PHP file, i've tried: echo('$("#result").html("'.$html.'");'); This does actually work if there are NO line breaks in $html. As soon as there are any line breaks, the Chrome debugger reports "gen.html:1 Uncaught SyntaxError: Unexpected token ILLEGAL". It's obvious that it's trying to eval the returned response headers, but is stopping at any line break. So, to be clear, when I pass $html back, if the contents are this: $html = "<div>hi there</div>"; It works fine (all of my error message dialogs are one line). But if it's: $html = "<div> hi there </div>"; It blows up. I'm really not sure how to get around this, or if there's a better way to go about it. It's important to me to keep the formatting so people can copy the HTML template. I may just break down and display the template file on the PHP page if I can't solve this, but I was really hoping to keep everything within the confines of the HTML page.

    Read the article

  • How to replace all id attributes of a child collection of complex types using jQuery in ASP.net MVC

    - by TJB
    Here's my situation: I'm writing an ASP.net MVC 1 website and I have a create/edit form that uses the default model binding to parse the form into a strongly typed complex object. The object I'm posting has a child collection of another complex type and the way I format my id's for the model binder is as follows: <div class="childContainer" > <!-- There's one of these for each property for each child collection item --> <%= Html.TextBox("ChildCollectionName[0].ChildPropertyName", /* blah blah */ ) %> <%= Html.TextBox("ChildCollectionName[0].OtherChildPropertyName", /* blah blah */ ) %> <!-- ... --> </div> This gets rendered as <div class="childContainer" > <input id="ChildCollectionName[0]_ChildPropertyName" ... /> <input id="ChildCollectionName[0]_OtherChildPropertyName" ... /> ... </div> <div class="childContainer" > <input id="ChildCollectionName[1]_ChildPropertyName" ... /> <input id="ChildCollectionName[1]_OtherChildPropertyName" ... /> ... </div> For each entry in the chlid collection. This collection is dynamically created in the form using jQuery, so entries can be added, removed etc. and whenever there's an operation on the collection I need to update the indexes so that it's bound correctly on the server side. What's the best way to replace all the html input id's when I'm updating the index within the child e.g. replace all [*] -- [N] where N is the correct index. using jQuery / JavaScript ? I have something coded now, but its buggy and I think there is a simpler solution. Also, if you have an easier way to identify the child collection I'll take any advice on that as well. Thanx!

    Read the article

  • How Do I Prevent Rails From Treating Edit Fields_For Differently From New Fields_For

    - by James
    I am using rails3 beta3 and couchdb via couchrest. I am not using active record. I want to add multiple "Sections" to a "Guide" and add and remove sections dynamically via a little javascript. I have looked at all the screencasts by Ryan Bates and they have helped immensely. The only difference is that I want to save all the sections as an array of sections instead of individual sections. Basically like this: "sections" => [{"title" => "Foo1", "content" => "Bar1"}, {"title" => "Foo2", "content" => "Bar2"}] So, basically I need the params hash to look like that when the form is submitted. When I create my form I am doing the following: <%= form_for @guide, :url => { :action => "create" } do |f| %> <%= render :partial => 'section', :collection => @guide.sections %> <%= f.submit "Save" %> <% end %> And my section partial looks like this: <%= fields_for "sections[]", section do |guide_section_form| %> <%= guide_section_form.text_field :section_title %> <%= guide_section_form.text_area :content, :rows => 3 %> <% end %> Ok, so when I create the guide with sections, it is working perfectly as I would like. The params hash is giving me a sections array just like I would want. The problem comes when I want edit guide/sections and save them again because rails is inserting the id of the guide in the id and name of each form field, which is screwing up the params hash on form submission. Just to be clear, here is the raw form output for a new resource: <input type="text" size="30" name="sections[][section_title]" id="sections__section_title"> <textarea rows="3" name="sections[][content]" id="sections__content" cols="40"></textarea> And here is what it looks like when editing an existing resource: <input type="text" value="Foo1" size="30" name="sections[cd2f2759895b5ae6cb7946def0b321f1][section_title]" id="sections_cd2f2759895b5ae6cb7946def0b321f1_section_title"> <textarea rows="3" name="sections[cd2f2759895b5ae6cb7946def0b321f1][content]" id="sections_cd2f2759895b5ae6cb7946def0b321f1_content" cols="40">Bar1</textarea> How do I force rails to always use the new resource behavior and not automatically add the id to the name and value. Do I have to create a custom form builder? Is there some other trick I can do to prevent rails from putting the id of the guide in there? I have tried a bunch of stuff and nothing is working. Thanks in advance!

    Read the article

< Previous Page | 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088  | Next Page >