Setting slide show width as a percentage of window width

Posted on 2011-10-27
Last Modified: 2012-05-12
I'm working on a jQuery Cycle slide show with automatic resizing at    I would like to set the slide show width as a % of window width.  But if I try substituting a % for the fixed pixel values in the code, either the images don't appear, or the resizing function doesn't perform.  Please specify how I should change the code to a % width.
Question by:ddantes
    LVL 2

    Accepted Solution

    get width of window on document.getready event, calculate width w.r.t percent and then apply to div or table in which the slide show exist.

        <script type="text/javascript">
         var windowwidth=$(window).width();
         var slidewidth=parseInt((20/100)*windowwidth));//calculating 20% width of window
    <div id="slide"></div>

    Open in new window


    Author Comment

    Thank you for your comment.  Due to my inexperience, I'm unclear how to integrate your code with the existing page.  The div which holds the slide show is fluidly resized as the window is resized.  However, instead of starting with an intial width specified in pixels, I would like the initial width to be a percentage of window width.  Can you have a look at the code at  and show me where to insert your formula?

    Author Closing Comment

    I found an alternative solution but I would like to give the Expert credit for contributing a partial solution.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now