Databases
StackOverflow2013
Postsdbo
POCSS Display affects jQuery/Javascript?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Display affects jQuery/Javascript?
    primarykey
    data
    text
    <p>I have run into a strange phenomena I believe and I was wonder if anyone has a the answer to why this occurs. I have been doing a lot of manipulation of images for a photography site using a custom jQuery slideshow I created and have run into some problems.</p> <p>I have a gallery here: <a href="http://www.daemondeveloper.com/photography/gallery.php" rel="nofollow">http://www.daemondeveloper.com/photography/gallery.php</a></p> <p>I have been adding some functions that resize the images in this gallery so that they scale to the size of the preview image size. As you can see, the very last image is panoramic and does not fill up the entire height of the div even though I have javascript telling it to resize.</p> <p>If you refresh the page, the javascript seems to work all of a sudden and the pictures scales how it should.</p> <p>Now try clicking on the panoramic picture of the girl and my slideshow will appear displaying the image scaled and centered vertically using jQuery. The function below is what handles clicking on the small image previews in the gallery.</p> <p>If you look at where the commented <code>changeSize()</code> function is, that is where I USED to have the function and the scaling did not work. Then I moved it after the .show() functions which show my slideshow and now it works. So it appears that the display:none; affected how the javascript fired because when I debugged, the currentImg object was null, as if the .slides selector did not exist when it was set to display:none;. Is this really happening or am I just seeing a side effect of something else?</p> <p>If this is really happening it may have something to do with the cause of the first problem I stated about the panoramic image not scaling on the first load of the gallery.php page.</p> <pre><code>$('.imgHolder').click(function(){ currentPosition = $('.imgHolder').index(this); $('#slideShow').width(slideWidth); // Remove scrollbar in JS $('#slideContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides.css({ 'float' : 'left', 'width' : slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', (slideWidth * numberOfSlides)); // Hide left arrow control on first load manageControls(currentPosition); $('#slideInner').css('margin-left' , slideWidth*(-currentPosition)); //changeSize(); used to be here $('#filter').show(); $('#photoWrap').show(); //Change image scale and center changeSize(); }); </code></pre> <p>And here is the changeSize() function that does the scaling and centering</p> <pre><code> function changeSize(){ currentSlide = $('.slide').get(currentPosition); currentImg = $(currentSlide).children('img:first')[0]; imgRatio = $(currentImg).height() / $(currentImg).width(); if(imgRatio &lt; slideRatio) { $(currentImg).addClass('landscape'); //Vertically align var thisHeight = $(currentImg).height(); $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2)); }else{ $(currentImg).addClass('portrait'); } } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMatt Hintzke
    1. USMatt Hintzke
    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. VO
      singulars
      1. POCSS Display affects jQuery/Javascript?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COfirst off, I would advise you to modify your function to instead say `currentImg = $(currentSlide).children("img").first();` Using the `img:first` requires much more overhead, and that could actually solve the problem - somethimes these things are caused by a script taking too long. I'll keep looking...
      singulars
      1. POCSS Display affects jQuery/Javascript?
      1. USZachary Kniebel
    2. COwhere did you scale the height on document.ready?
      singulars
      1. POCSS Display affects jQuery/Javascript?
      1. USZachary Kniebel
    3. COthanks ill change it and try it out. Yeah, on document.ready I call a function that initializes all these variables and such and then waits for these events to be fired. Its as if the javascript tries to access the images BEFORE the image is actually ready though
      singulars
      1. POCSS Display affects jQuery/Javascript?
      1. USMatt Hintzke
 

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