Databases
StackOverflow2013
Postsdbo
POjavascript not updating css attribute on modal popup
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjavascript not updating css attribute on modal popup
    primarykey
    data
    text
    <p>I have the following javascript code:</p> <pre><code>&lt;script type="text/javascript"&gt; function doPopup(file){ var dlg=$('#popup').dialog({ resizable: false, autoOpen: false, modal: true, hide: 'fade', position: ['center', 'center'] }); dlg.load(file, function(){ dlg.dialog('open'); }); var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth, 'height':maskHeight}); $('#mask').fadeTo("slow", 0.85); dlg.parent().css('z-index', 9001); dlg.parent().css('position', 'absolute'); //alert('I'm an alert'); if(file.indexOf("CustomerCouponDisplay.asp" !== -1)) { var imgWidth = $('#couponImg').width(); var winW = $(window).width(); dlg.parent().css('left', (winW - imgWidth)/2); } } &lt;/script&gt; </code></pre> <p>Essentially, when this function is called, it takes in a file name of a web page and displays the contents in a modal popup.</p> <p>When the code is run as is, the general expected behavior happens according to plan: the mask div takes over the screen, fades to dark, and the popup shows up.</p> <p><strong>The problem:</strong> Our coupon image is way too big for the popup div, so I have an if statement in there that will automatically re-center the popup on the screen. However, this re-centering never happens, despite that code being executed.</p> <p><strong>The fun part:</strong> If I uncomment that alert, the image still shows up off-center. Upon clicking OK to dismiss the alert, the screen redraws and the image is now centered as desired.</p> <p>I've tried a number of things, including different ways of accessing the popup's parent, different ways of supplying the arguments to <code>css()</code>, putting the popup.parent.css line in a number of different places, hardcoding the 'left' value, opening the dialog only after everything is loaded and css updated (this one broke everything), and several other things that also did not work.</p> <p>My current thought: I saw in one not-really-related post that the reason some of the CSS styles weren't being updated was because "the animation was taking too long" (or something like that). I am certainly making the html rewrite with the dialog and mask fading, so could that somehow be related to the 'left' attribute not taking over?</p> <p>My rejection of my current thought: I feel like this is NOT the case, because RIGHT BEFORE I try setting the 'left' attribute, I'm successfully setting other attributes for the same component, and they take effect without issue. In case it WAS the fadeTo line, I even moved that at the bottom. Same thing happened: not centered until after the alert was closed.</p> <p>Thoughts?</p> <p>Edit: just on the offchance this is relevant, this is being run on an ASP page. It is <strong>not</strong> .NET.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USRussell Uhl
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COHave you tried putting the rest of the code into the `.load()` callback with `dlg.dialog('open');`? When "broken" code is "fixed" by an alert it can indicate an async code issue...
      singulars
      1. POjavascript not updating css attribute on modal popup
      1. USnnnnnn
    2. COI have not, and shall attempt to do so immediately. Edit: putting the code BEFORE `dlg.dialog('open');` does nothing, which I expected. putting it AFTER that line results in the mask to fade to dark, but the popup doesn't appear at all. Firebug reports no issues.
      singulars
      1. POjavascript not updating css attribute on modal popup
      1. USRussell Uhl
    3. CO@nnnnnn any other thoughts? My javascript skills are awful; I only started working with it about a month ago, so I don't know any of the idiosyncrasies it has (like asynchronous execution).
      singulars
      1. POjavascript not updating css attribute on modal popup
      1. USRussell Uhl
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload