Search Results

Search found 1146 results on 46 pages for 'divs'.

Page 40/46 | < Previous Page | 36 37 38 39 40 41 42 43 44 45 46  | Next Page >

  • Wasteful Ajax Page Loading

    - by Matt Dawdy
    I've started a new job, and the portion of the project I'm working has a very odd structure. Every pages is a .Net aspx page, and it loads just fine, but nothing is really done at load time. Everything is really loaded from a jquery document.onready handler. What is even more...interesting...is that the onready handler calls some ajax calls that drop entire .aspx pages into divs on the page, but first it strips out several parts of the the returned page. This is the "magic" script the previous programmer ran on all the returned html from his ajax calls: function CleanupResponseText(responseText, uniqueName) { responseText = responseText.replace("theForm.submit();", "SubmitSubForm(theForm, $(theForm).parent());"); responseText = responseText.replace(new RegExp("theForm", "g"), uniqueName); responseText = responseText.replace(new RegExp("doPostBack", "g"), "doPostBack" + uniqueName); return responseText; } He then intercepts any kind of form postback and runs his own form submission function: function SubmitSubForm(form, container) { //ShowLoading(container); $(form).ajaxSubmit( { url: $(form).attr("action"), success: function(responseText) { $(container).html(CleanupResponseText(responseText, form.id)); $("form", container).css("margin-top", "0").css("padding-top", "0"); //HideLoading(container); } } ); } Am I way offbase in thinking that this is less than optimal? I mean, how does a browser take out the html and head and other tags that don't have anything to do with what you are really trying to drop into that div? Also, he's returning things like asp:gridview controls, and the associate viewstate, which can be quite large if his dataset is big. Has anyone seen this before?

    Read the article

  • what is the best way to optimize my json on an asp.net-mvc site

    - by ooo
    i am currently using jqgrid on an asp.net mvc site and we have a pretty slow network (internal application) and it seems to be taking the grid a long time to load (the issue is both network as well as parsing, rendering) I am trying to determine how to minimized what i send over to the client to make it as fast as possible. Here is a simplified view of my controller action to load data into the grid: [AcceptVerbs(HttpVerbs.Get)] public ActionResult GridData1(GridData args) { var paginatedData = applications.GridPaginate(args.page ?? 1, args.rows ?? 10, i => new { i.Id, Name = "<div class='showDescription' id= '" + i.id+ "'>" + i.Name + "</div>", MyValue = GetImageUrl(_map, i.value, "star"), ExternalId = string.Format("<a href=\"{0}\" target=\"_blank\">{1}</a>", Url.Action("Link", "Order", new { id = i.id }), i.Id), i.Target, i.Owner, EndDate = i.EndDate, Updated = "<div class='showView' aitId= '" + i.AitId + "'>" + GetImage(i.EndDateColumn, "star") + "</div>", }) return Json(paginatedData); } So i am building up a json data (i have about 200 records of the above) and sending it back to the GUI to put in the jqgrid. The one thing i can thihk of is Repeated data. In some of the json fields i am appending HTML on top of the raw "data". This is the same HTML on every record. It seems like it would be more efficient if i could just send the data and "append" the HTML around it on the client side. Is this possible? Then i would just be sending the actual data over the wire and have the client side add on the rest of the HTML tags (the divs, etc) be put together. Also, if there are any other suggestions on how i can minimize the size of my messages, that would be great. I guess at some point these solution will increase the client side load but it may be worth it to cut down on network traffic.

    Read the article

  • Pushing elements into array as copy

    - by koko
    In prototypejs, why does the following code remove the matching divs from the #test div? What confuses me is that this happens when they are being inserted in the #droparea, and not when they are being pushed in the array. <div id="test"> <div class="foo" id="22.1234"> 1 </div> <div class="foo" id="22.1235"> 2 </div> <div class="foo" id="53.2345"> 3 </div> <div class="foo" id="53.2346"> 4 </div> </div> <div id="droparea"> </div> js var elArray = []; var els = $('test').select('.foo'); els.each(function(x){ if(x.id.split('.')[0] == 22){ elArray.push(x); } }); elArray.each(function(y){ $('droparea').insert({ bottom: y }); });

    Read the article

  • What are the javascript performance tradeoffs in adding id's to dom elements?

    - by Blinky
    For example, I have a website which has a dynamically-generated segment of its dom which looks roughly like this: <div id="master"> <div class="child"> ... </div> <div class="child"> ... </div> <div class="child"> ... </div> ... <div class="child"> ... </div> </div> There might be hundreds of child elements in this manner, and they, too, might have yet more children. At present, none of them have id's except for the master. Javascript manipulates them via dom-walking. It's a little scary. I'd like to add id's, e.g.: <div id="master"> <div id="child1" class="child"> ... </div> <div id="child2" class="child"> ... </div> <div id="child3" class="child"> ... </div> ... <div id="childN" class="child"> ... </div> </div> What are the tradeoffs in adding id's to these divs? Certainly, jQuery must maintain a hash of id's, so there's going to be some sort of performance hit. Any general guidelines in when adding additional id's is a bad idea? Is jQuery so awesome that, in practice, it doesn't matter?

    Read the article

  • Setting up padding for websites in mobile devices

    - by ambrelasweb
    I had finished this website a while ago but something happened to it and I've now spent all day fixing it and getting it back from scratch as my backup wasn't correctly done. I don't quite understand what it's doing as I've done this technique on many other websites with no troubles, maybe I've looked at this website too long? Here is the website. I'm wanting to put some space on the left and right hand side, however I dont just have one container as I was needing the dark grey bar at 100% of the screen and always under the banner no matter where it was. So there are 4 "containing" divs that I want to have the space. I've placed soem CSS3 media queries in but now I'm getting a gap to the right. I was thinking it was because my background mages are going all the way across but they set at 100% so I'm just not understanding whats going on. It's somethign simple, I'm not seeing it right now.. This is what I have for the media queries /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; } } This is what t looks like on my iPhone Any advice is helpful and appreciated.

    Read the article

  • Two floating div's, one underneath. works in every browser except IE

    - by Veltar
    So I have an html-structure that looks like this: <div id="contact-wrapper"> <div> <h4>België</h4> <p>Tuinwijklaan 79<br /> 9000 Gent<br /> Tel. 0468/115967<br /> [email protected]<br /> </p> </div> <div> <h4>Nederland</h4> <p>Kerkstraat 423-C<br /> 1017 HX Amsterdam<br /> Tel: +32 468 11 59 67<br /> [email protected] </p> </div><br /> <a id="link-contact" href="#">Contacteer ons</a> </div> The two div's are displayed next to each other, and the link under it, like this: But in ie9 it shows like this: This is my css for the divs: footer div#contact-wrapper, footer h1 { float: left; } footer div#contact-wrapper div { margin: 16px 0px 0px 45px; float: left; } footer div#contact-wrapper div:first-of-type { padding-right: 30px; margin-left: 60px; border-right: 1px dashed #a3b0b9; } footer div#contact-wrapper a#link-contact { display: inline-block; background: #ffffff url('../img/contact-arrow.gif') no-repeat 95% center; border: 4px solid #bbc2c7; font-size: 12px; color: #bbc2c7; margin: 5px 0px 0px 60px; padding: 3px 0px 3px 5px; width: 150px; }

    Read the article

  • Why does my DIV clip its child DIV when jQuery moves it in IE?

    - by Ben Saufley
    I have two divs, both with position:absolute;, one inside the other. The parent isn't in a place where it can be set as position:relative without an extra layer of complexity (there are a lot of other elements around it that I'd have to account for to put it where it needs to be, which is at the very top of the page, over everything). The child element is made to stick off the bottom of the parent. In Chrome, Safari, Firefox, it all works splendidly. In IE, it works until jQuery moves the parent element - at which point the parent element clips the child, so you can barely see the top of the child. I feel like I've read about this, about IE clipping child elements, but I can't seem to find an answer that applies to my case. It's pretty simple, basically: <div id="parent" style="position:absolute;top:0;left:0;"> [content] <div id="tab" style="position:absolute;bottom:-30px;left:0;width:64px;height:32px;background-image:(...);"></div> </div> <script> $(document).ready( function() { $("#tab").click(function() { $("#parent").animate({"top":"-50px"},300); }); }); </script>

    Read the article

  • Display one div if nothing is selected

    - by Levani
    I use this javascript to display different div classes upon selection. I need to display one div class if nothing is selected, for example when page is loaded, and that replace it with one of the divs according to the selection... <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divName) { // hide last div if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } //--> </script> css: <style type="text/css" media="screen"><!-- .hiddenDiv { display: none; } .visibleDiv { display: block; border: 1px grey solid; } --></style> HTML: <form id="FormName" action="blah.php" method="get" name="FormName"> <select name="selectName" size="1" onChange="showDiv(this.value);"> <option value="">Choose One...</option> <option value="one">first</option> <option value="two">second</option> <option value="three">third</option> </select> </form> <p id="one" class="hiddenDiv">This is paragraph 1.</p> <p id="two" class="hiddenDiv">This is paragraph 2.</p> <p id="three" class="hiddenDiv">This is paragraph 3.</p> Can anyone please help?

    Read the article

  • Why jquery have problem with onbeforeprint event?

    - by Cesar Lopez
    Hi all, I have the following function. $(function() { $(".sectionHeader:gt(0)").click(function() { $(this).next(".fieldset").slideToggle("fast"); }); $("img[alt='minimize']").click(function(e) { $(this).closest("table").next(".fieldset").slideUp("fast"); e.stopPropagation(); return false; }); $("img[alt='maximize']").click(function(e) { $(this).closest("table").next(".fieldset").slideDown("fast"); e.stopPropagation(); return false; }); }); <script type="text/javascript"> window.onbeforeprint = expandAll; function expandAll(){ $(".fieldset:gt(0)").slideDown("fast"); } </script> For this html <table class="sectionHeader" ><tr ><td>Heading 1</td></tr></table> <div style="display:none;" class="fieldset">Content 1</div> <table class="sectionHeader" ><tr ><td>Heading 2</td></tr></table> <div style="display:none;" class="fieldset">Content 2</div> I have several div class="fieldset" over the page, but when I do print preview or print, I can see all divs sliding down before opening the print preview or printing but on the actual print preview or print out they are all collapse. I would appreciate if anyone comes with a solution for this. Anyone have any idea why is this or how to fix it? Thanks. PS:Using a does not work either ( I assume because jquery using toggle) and its not the kind of question I am looking for.

    Read the article

  • Why does setting the margin on a div not affect the position of child content?

    - by DanM
    I'd like to understand a little more clearly how css margins work with divs and child content. If I try this... <div style="clear: both; margin-top: 2em;"> <input type="submit" value="Save" /> </div> ...the Save button is right up against the User Role (margin fail): If I change it to this... <div style="clear: both;"> <input style="margin-top: 2em;" type="submit" value="Save" /> </div> ...there is a gap between the Save button and the User Role (margin win): Questions: Can someone explain what I'm observing? Why doesn't putting a margin on the div cause the input to move down? Why must I put the margin on the input itself? There must be some fundamental law of css I am not grasping.

    Read the article

  • how to get data from another file?

    - by Ronnie Chester Lynwood
    hey guys i got this jquery codes: jQuery(function ($) { var OSX = { container: null, init: function () { $("input.osx, a.osx").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('slow', function () { $("#osx-modal-content", self.container).show(); 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; // this = SimpleModal object d.container.animate( {top:"-" + (d.container.height() + 20)}, 500, function () { self.close(); // or $.modal.close(); } ); } }; OSX.init(); }); this js is gets #osx-modal-content,#osx-modal-title,#osx-modal-data from index.php. how can i get divs from another page? thanks

    Read the article

  • Initializing own plugins

    - by jgauffin
    I've written a few jquery plugins for my client. I want to write a function which would initialize each plugin which have been loaded. Example: <script src="/Scripts/jquery.plugin1.min.js")" type="text/javascript"></script> <script src="/Scripts/jquery.plugin2.min.js")" type="text/javascript"></script> <script src="/Scripts/jquery.initializer.min.js")" type="text/javascript"></script> Here I've loaded plugin1 and plugin2. Plugin1 should be attached to all links with class name 'ajax' and plugin2 to all divs with class name 'test2': $('document').ready(function(){ $('a.ajax').plugin1(); $('div.test2').plugin2(); } I know that I can use jQuery().pluginName to check if a plugin exists. But I want to have a leaner way. Can all loaded plugins register a initialize function in an array or something like that which I in document.ready can iterate through and invoke? like: //in plugin1.js myCustomPlugins['plugin1'] = function() { $('a.ajax').plugin1(); }; // and in the initializer script: myCustomPlugins.each(function() { this(); }; Guess it all boiled down to three questions: How do I use a jquery "global" array? How do I iterate through that array to invoke registered methods Are there a better approach?

    Read the article

  • CSS positioning div above another div when not in that order in the HTML

    - by devmode
    Given a template where the HTML cannot be modified because of other requirements, how is it possible to display a div above another div when they are not in that order in the HTML and both divs contain data that could produce a varying height and width. HTML: <div id="wrapper"     <div id="firstDiv"         Content to be below in this situation     </div     <div id="secondDiv"         Content to be above in this situation     </div </div Other elements Hopefully it is obvious that the desired result is: Content to be above in this situation Content to be below in this situation Other elements When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both. Edit: A CSS solution is the most ideal solution. Thank you for the Javascript options mentioned. Without getting too wordy about what or why (or who) ... I am specifically looking for a CSS only solution (and it will probably have to be met with other solutions if that doesn't pan out). One more ... there are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated -- given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

    Read the article

  • [ASP.NET MVC] Run ajax scripts on page with navigating with ajax?

    - by Oskar Kjellin
    I got a bit of an issue in my ASP.NET MVC project. I have a chat div in the bottom right corner (like facebook), and of course I do not want this to reload when navigating to all my navigation is ajax. The problem I am facing is that I use the following code on the top of the view page: <script type="text/javascript"> $(document).ready(function() { $('#divTS').hide(); $('a#showTS').click(function() { $('#divTS').slideToggle(400); return false; }); }); </script> The problem is that this code is only loaded with ajax and does not seem to fire? I would like to run all scripts in the newly loaded view, just as if I hadn't navigated with ajax. I cannot put this in the site.master as it only loads once and then probably the divs I am trying to hide doesn't exist. Is there a good way to run scripts in the ajax-loaded div?

    Read the article

  • jQuery draggable removing without changing position of other elements

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

    Read the article

  • ajaxStart() showing loading message doesn't seem to work....

    - by Pandiya Chendur
    I user jquery.ajax call to controller of asp.net mvc... I would like to show a loading indicator.. I tried this but that doesn't seem to work... <div class="loading" style="padding-left:5px; margin-bottom:5px;display:none;"> Loading...&nbsp </div> and my jquery ajax call looks like this, function getMaterials(currentPage) { $.ajax({ url: "Materials/GetMaterials", data: {'currentPage': (currentPage + 1) ,'pageSize':5}, contentType: "application/json; charset=utf-8", global: false, async: false, dataType: "json", success: function(data) { var divs = ''; $("#ResultsDiv").empty(); $.each(data.Results, function() { //my logic here.... $(".loading").bind("ajaxStart", function() { $(this).show(); }).bind("ajaxStop", function() { $(this).hide(); }); } }); return false; } My loading indicator doen't seem to showup.. ANy suggestion....

    Read the article

  • Confirm bug Magento 1.4 'show/hide editor' in CMS

    - by latvian
    Hi When entering code in CMS static block(possible page as well) and in this code there is empty DIV tags such us: <a href="javascript:hide1(),show2(),hide3()"><div class="dropoff_button"></div></a> The DIV tags will be gone next time you open the block to edit. it will look as this <a href="javascript:hide1(),show2(),hide3()"> </a> without the div tags ...and saving again it modifies your code. I think it something to do with the 'show/hide editor'. By default it goes into the WYSIWYG editor, so when updating static block i don't see any other solution than 1."hide the editor' by clicking 'show/hide editor' 2.delete the old code from the editor 3. get code that doesn't miss the DIVs 4. Merge new code with code in 3 in some other editing software than magento 5. paste result in the magento editor, 6. Save Is this bug? What is your solution? Can i turn of WYSIWYG editor?

    Read the article

  • How to convert a rectangle to TRBL CSS rect value?

    - by VLostBoy
    I'm not quite sure how to put this, but here goes... The css clip attribute is defined like so: rect(top, right, bottom, left). However, I'm exploring the use of a custom Rectangle 'class' to encapsulate some operations. The rectangle class has the attributes height, width and x, y. The x and y values are encapsulated in a Point object, and the height and width are encapsulated in a Dimension object, the rectangle being a composite of a point (its top-left location) and a dimension (width and height). So far so good. I though it would be pretty simple on the basis of having the rectangles x, y, width and height values to define the css rect attribute in terms of top, right, bottom, left, but I've become hopelessly confused- I've been googling for a while, and I can't seem to find any documentation as to what the TRBL values actually are or what they represent. For example, should I be thinking in terms of co-ordinates, in which case, surely I can describe the rectangle as a css rect using the rectangles x position for Top, x position + width for Right, the rectangles height + y for Bottom and its y position for Left... but thats a load of BS, surely? Also, surely rect is actually an inset, or have I just inverted my understanding of clip? I'd appreciate some advice. What I want to be able to do is (i) Define a rectangle using x, y, width and height (ii)Express the rectangle in TRBL form so that I can manipulate a divs clipping behaviour (iii)Change x, y, width or height and recalculate in terms of TRBL and goto (ii) I appreciate there are some other factors here, and some intermediary transforms to be done, but I've confused myself pretty badly- Can anyone give me some pointers?

    Read the article

  • Is there a way to check if a div has the same class as an ancestor in jQuery?

    - by T.R.
    I'm looking to dynamically highlight a tab, if it represents the current page. I have: <style> #tabs li{bg-color: white;} body.Page1 #tabs .Page1, body.Page2 #tabs .Page2, body.Page3 #tabs .Page3{bg-color: orange;} </style> <body class="Page1 ADifferentClass"> <ul id="tabs"> <li class="Page1 SomeClass"> <li class="Page2 SomeOtherClass"> <li class="Page3 AnotherClass"> </ul> </body> As you can see, there needs to be CSS for each tab, so adding another page involves modifying both the HTML and the CSS. Is there a simple (DRY) way to check if two divs have the same class already built into jQuery? I ultimately went with this: <script> $(document).ready(function(){ var classRE = /Page\d+/i; var pageType = $('body').attr('className').match(classRE); $('li.'+pageType).addClass('Highlight'); }); </script> <style> #tabs li{bg-color: white;} #tabs li.Highlight{bg-color: orange;} </style>

    Read the article

  • JQuery Load() syntax - Changing data source on mouseenter

    - by Andrew Parisi
    Hey everyone. I've written this simple function that is supposed to load a portion of an XML file on mouseenter. It works fine when I specify the data source explicitly, shown below. I have a number of '.invest-port-thumb' divs, each with a unique link. The following code works fine—but it loads the whole XML file—and I only want a portion: $(document).ready(function() { $('.invest-port-thumb a').mouseenter(function() { $('#slider-name').load(this.href); }); }); This code also works fine—loading only the 'cName' portion that I want it to load...Except that this code refers to one of the files, instead of the value of this.href. $(document).ready(function() { $('.invest-port-thumb a').mouseenter(function() { $('#slider-name').load('port/atd.xml cName'); }); }); I guess what I'm saying, syntax wise—How can I combine this.href and the data matching cName? Thanks for the help!

    Read the article

  • Why does animate not work for the first few 'selections' of my next button?

    - by Josiah
    I'll just start right off the bat and say I'm fairly new to JQuery, so if you see some glaring issues with my code....let me know what I'm doing wrong! Either way, I've been working on a script to fade divs in and out using the z-index and animate. It "works" after about 2-3 clicks, but the first two clicks do not fade or animate as I was hoping....why is that? I'll just throw javascript up here, but if you need/want more code, just let me know. Thanks! $(document).ready(function() { //Slide rotation/movement variables var first = $('#main div.slide:first').attr('title'); var last = $('#main div.slide').length; //Needed for the next/prev buttons var next; //Set the first div to the front, and variable for first div var $active = $('#main div.slide[title='+first+']'); //Hide the links until the div is hovered over and take them away when mouse leaves $('#main').children('a').hide(); $('#main').mouseenter(function() { $('#main').children('a').fadeIn(750); }).mouseleave(function() { $('#main').children('a').fadeOut(750); }); $active.css('z-index', '4'); $('#main #next').click(function() { if ((next = parseInt($active.attr('title')) + 1) > last) { next = 1; } $active.css('z-index', '0').stop().animate({opacity: 0}, 1000); $active = $('#main div[title='+next+']').css('z-index', '4').stop().animate({opacity : 1}, 1000); }); });

    Read the article

  • find on page neighbouring siblings jquery?

    - by Stefan
    ok i've been searching for an answer to this (if there even is one) with no luck i have a succession of div elements as shown in the pic bellow: http://i61.photobucket.com/albums/h46/DrAcOliCh_2006/untitled-1.jpg?t=1300520458 the blue background is the absolute parent of the orange divs which are also siblings the DOM is not quite organized according to how the orange elements appear on the page because they are all draggable (i used jquery UI) and i moved them around inside the parent, yet, as some know, the DOM doesn't get reorganized when i move draggable elements around, so basically the siblings structure remains the same inside the DOM what i kinda need (again if that is even possible) is to determine the immediate on page neighbouring siblings of eachother; in other words, say we take that "FlashBanner" element which, on page, has the "Logo", the "Search" and the "ShoppingBasket" elements as immediate top siblings and the "Categories" and "Content" elements as immediate bottom siblings (and no left or right siblings) i have a manual solution to this, that is to pre-specify the on page neighbouring siblings for each element through a series of form fields and stuff (another story and another wall of text to explain), but that is not important atm as i want to know if it can be done automatically (i.e tell jquery to find them for me) appreciate any help, even an "it can't be done automatically", and thank you for your time hope this doesn't sound to ambiguous (or silly for that matter) and why i need to do that don't ask :P wall of text to explain cheers :)

    Read the article

  • Can I create a two-column layout that fluidly adapts to narrow windows?

    - by Brant Bobby
    I'm trying to design a page that has two columns of content, div#left and div#right. (I know these aren't proper semantic identifiers, but it makes explaining easier) The widths of both columns are fixed. Desired result - Wide viewport When the viewport is too narrow to display both side-by-side, I want #right to be stacked on top of #left, like this: Desired result - narrow viewport My first thought was simply to apply float: left to #left and float: right to #right, but that makes #right attach itself to the right side of the window (which is the proper behavior for float, after all), leaving an empty space. This also leaves a big gap between the columns when the browser window is really wide. Wrong - div#right is not flush with the left side of the viewport Wrong - div#right is not on top of div#left Applying float: left to both divs would result in the wrong one moving to the bottom when the window was too small. I could probably do this with media queries, but IE doesn't support those until version 9. The source order is unimportant, but I need something that works in IE7 minimum. Is this possible to do without resorting to Javascript?

    Read the article

  • IE6: Height "1em minus 1px"

    - by chris_l
    I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .helper { /* background-color: black; */ position: absolute; top: 5em; left: 5em; width: 2em; height: 1em; } .target { background-color: #89f; position: absolute; top: 0; bottom: 1px; width: 100%; } </style> </head> <body> <div class="helper"> <div class="target"></div> </div> </body> </html> The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem). Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution? Please note, that I can't use Quirks Mode.

    Read the article

  • When clicking on ajax.actionlink in its oncomplete function I can't update the html of a div whith requested data

    - by Milka Salkova
    In one partial view I've got some ajax.ActionLinks which when clicked update the div 'importpartupdate' (they just updates the div whith new ajax.actionLinks with other routevalues). The problem is that when this update is competed I have to update another div - depending on which link is clicked . That's why in my OnComplete function of my ajax.ActionLink I make an ajax request to the action'GridViewLanguage' which returns me the partial view which should uodate this other div which claass .floatLanguage. So the first time when I click a link eeverything works correctly and my two divs are correctly updated. But the second time I click a new link it seems the the floatlanguuage div is not updated like somehow the browser is caching the previous info I don't know. \i tried with cache:false- nothing worked. @model MvcBeaWeb.GroupMenu <nav class="sidebar-nav"> <div class="divLeftShowMenu"> <ul> @{ if (Model != null) { foreach (MvcBeaDAL.WebServiceBeaMenu item in Model.MenuLeft) { <li> @Ajax.ActionLink(@item.SpecialWord, "ImportShow", new { id = Model.LanguageName, menuID = item.ID, articlegroupID = item.ArticlegroupID, counter = 1 }, new AjaxOptions { UpdateTargetId = "importPartUpdate", HttpMethod = "GET", InsertionMode = InsertionMode.Replace, OnComplete = "success("[email protected]+")" }, new { id=item.ID}) </li> } } } </ul> </div> </nav> <script> function success(ids) { var nocache = new Date().getTime(); jQuery.ajax({ url: '@Url.Action("GridLanguageView")/?menuID='+ids }).done(function (data) { $(".floatLanguage").replaceWith(data); alert(data); }); } </script>

    Read the article

< Previous Page | 36 37 38 39 40 41 42 43 44 45 46  | Next Page >