Setting slide show width as a percentage of window width

Posted on 2011-10-27
Medium Priority
Last Modified: 2012-05-12
I'm working on a jQuery Cycle slide show with automatic resizing at www.mauitradewinds.com/Cycle    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
  • 2

Accepted Solution

owaisyahya earned 750 total points
ID: 37045651
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

ID: 37046347
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 www.mauitradewinds.com/Cycle  and show me where to insert your formula?

Author Closing Comment

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

571 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