Solved

Why do I keep getting an element shift after the page loads?

Posted on 2010-11-08
10
328 Views
Last Modified: 2012-05-10
I am creating a gallery but when the page loads, the upper left margin in the caption section shifts to the right.
From what I can speculate, I have a reset included from the YUI library followed by my own custom CSS styles.
On load the reset is put in place followed by my CSS which is what is causing the shift.
I am going to use the reset on the rest of my site so I would like to keep it in place if need be I will remove it if given a work around.

Page URL:
http://epecho.com/gallery.html
 
0
Comment
Question by:saul_roldan
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34092036
try setting width to 1240px in .galleria-info-text instead of 100%
It's in http://epecho.com/css/galleria.fullscreen.css line 133
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 34092742
0
 
LVL 16

Expert Comment

by:s8web
ID: 34092878
It might not have anything to do with it, but not having a doctype can cause some wacky display issues.

Try replacing line 1 with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:saul_roldan
ID: 34094420
@ s8web I am using an HTML5 doctype.

@ level9wizard I am using CSS3 styles or vender spastic prefixes and I don't think the validator  will keep those up.

@  sudaraka I would like to keep the width of the page in relative values as I would like the page to resize depending on the screen in which the user is viewing it on.
0
 
LVL 16

Expert Comment

by:s8web
ID: 34094567
Thanks, I just learned something :)
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34094653
Problem is as I see you have the .galleria-info-text DIV set to 100% with initially and some piece of code is setting it to fixed width 1240px (in the 1280px resolution I use, I guess it's leaving 20px space on either side).

So to avoid the "shift", what you need to do is have the similar style initially, I think having 20px margin on either side of .galleria-info-text will do.
Then of cause you need to get rid of that when the code that set the fixed width executes, maybe you can capture that even and set the margin to auto at that point or avoid the fixed with setting at all.
0
 

Author Comment

by:saul_roldan
ID: 34102164
@sudaraka I have tried your suggestions and the shift still takes place. I have placed a 40px margin on the  .galleria-info-text DIV set to 100%. the element shift still takes place.
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
ID: 34104257
A JavaScript  on you page is setting the .galleria-info-text element's width to width-40 explicitly after that number slide into place. Therefor at the beginning that DIV has 100% width and after the slide-in it's width is reduced by 40px. This is the reason that content inside this div shift.

The piece of JavaScript I'm talking about is in line 62 of js/galleria.fullscreen.js

infotext.width(w-40);


You can do one of following things:

1. Remove or comment out the above line and let the div stay at 100% with.
2. Or, If you want to set fixed width dynamically, set to full width instead of width-40. like infotext.width(w);
3. Or, keep this piece of code as it is and add another code to change the 40px margin (I asked you to set before) to auto.
0
 

Author Closing Comment

by:saul_roldan
ID: 34111110
Thank you so much. I haven been at this for quite sometime.
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34111994
Glad to help. Thanks for the point.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question