SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slider Width and Height Question

    Hi

    On my website: http://beverleydyersolutions.com I have a slideshow.
    I noticed that when the page loads, the slideshow is not visible, then everything else loads and the page moves down
    to accommodate the size of the slideshow.

    How can I fix this so that I can set the width and height in the .css file so that it doesn't do this?

    Thanks.


    K

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Kath,

    It appears that there is already a width set on that div but if you want to set the height, the code is in style.css and looks like this:

    .slider {
    width: 940px;
    overflow: hidden;
    }

    Hope that helps,

    Shawn

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Kath,

    Images take a little time to load, 3 images take 3 times longer. The carousel JavaScript does not create the space for the slider until all images have loaded; thus, the delay. This also serves to avoid rendering a glaring block of white space in the window of users who do not have JavaScript turned on. In other words, it serves a purpose.

    The solution suggested by Shawn will preserve that white space, even if JavaScript is turned off. You will have to determine the height of the slider and assign the height.

    That code for the slider is found in:

    <link rel='stylesheet' id='theme-style-all-css' href='http://beverleydyersolutions.com/wp-content/themes/rttheme17/css/style.css?ver=3.5.1' type='text/css' media='all' />
    (line 355)

    A smarter solution might be to add a line of JavaScript that supplies that height value immediately when the browser detects that JavaScript is enabled. The user would see the white space until the carousel loads the images.

    A JavaScript person could help with that approach.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •