How to Get HTML5 Slideshow to Shrink in Fluid Grid Layout?

I am able to insert images in a Fluid Grid Layour Div Tag and it shrinks according to the platform on which it is viewed.
But I am trying to have the same result with a slideshow. I used CreateJS to convert the slideshow from Flash to HTML5.
The problem is it won't shrink.
Here is the URL.
http://savcp.com/index-fluid-01.html

Responsive Layouts require responsive slideshows.
Cycle2 is responsive. Copy & Paste this into a New, Blank document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Cycle2</title>



<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
/**Slideshow**/
.cycle-slideshow {
max-width:90%;
margin: 0 auto;
text-align: center;
.cycle-slideshow img {max-width:100%}
/* prev / next links */
.cycle-prev, .cycle-next {
position: absolute;
top: 0;
width: 30%;
opacity: 0;
filter: alpha(opacity=0);
z-index: 800;
height: 100%;
cursor: pointer;
.cycle-prev {
left: 0;
background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;
.cycle-next {
right: 0;
background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;
.cycle-prev:hover, .cycle-next:hover {
opacity: .7;
filter: alpha(opacity=70)
/**END SLIDESHOW STYLES**/
</style>
</head>
<body>

<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
>

<div class="cycle-prev"></div>
<div class="cycle-next"></div>

<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
<p>Mouse over image for previous / next links</p>
</div>
</body>
</html>
Nancy O.

Similar Messages

How to Get SWF to be Responsive in Fluid Grid Layout?

I inserted my swf in a fluid grid layout div tag so it would fit on any screen. But no matter which Scale setting I use for the swf (noborder, default, exactfit, noscale, or showall) nothing works.
Take a look This one is exactfit. It scales but does not maintain the proper aspect ratio.
http://savcp.com/index-fluid-05.html

Line 177 & 189, change:
<param name="scale" value="exactfit">
to:
<param name="scale" value="showAll">
showAll will maintain proportions while fitting to 100% width & height - but beware your container holding the SWF will show the background color of SWF (black in your case) when you're sizing down. You could consider changing it to your site background (gray) to ensure it doesn't look odd.
On a sidenote, why are you worried about putting a SWF file into a responsive design? It will not work on mobile devices anyway!

How to Scale Images in a Table in Fluid Grid Layout?

I copied over a table full of mouseover images into my new fluid grid layout. It all works fine, but in Mobile mode, all the images are compressed horizontally. How do I fix this?
http://savcp.com/howwemet-fluid.html

Strip out your table code with F&R. You could greatly reduce your code & page load by using CSS instead of image swap behaviors. Same size images would produce a nicer appearance, too.
Below, I used floated <p> tags as containers for pictures. Copy & paste this into a new, blank document and SaveAs test.html. Preview in browsers with various viewport widths to see the effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body { background: #222 }
/**BEGIN PICS**/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
#pics {
width: 100%;
overflow:hidden;
margin: 55px auto;
border: 1px solid silver;
#pics p {
float: left;
width: 24%;
text-align: center;
/**space between**/
margin: 0 0.25%;
border: 1px solid #222;
#pics img {
max-width: 100%;
border: 5px solid #333;
/**opacity on linked pics**/
#pics a img {
/**for pre-IE8**/
filter: alpha(opacity=90);
/**for other browsers**/
opacity: .90;
/**on mouseover**/
#pics a img:hover, #pics a img:active, #pics a img:focus {
filter: alpha(opacity=100);
opacity: 1.0;
border-color: #09C;
/**ADJUST BREAKPOINTS AS REQUIRED**/
/* Special Rules for Mobiles */
@media only screen and (max-width: 480px) {
#pics p{    height:110px;}
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
#pics p{    height:175px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 600px) {
#pics p{    height:255px;}
/**end PICS**/
</style>
</head>
<body>
<div id="pics">
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="wk3.html">
<img src="http://savcp.com/images/story/wk2.gif">
</a></p>
<p><a href="ss3.html">
<img src="http://savcp.com/images/story/ss2.gif">
</a></p>

</div>
</body>
</html>
Nancy O.

How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

Change display to block, apply the margain: auto.

How to adjust height of header image in fluid grid layout

I appreiate the help people are trying to give me but I need help on what "to" do not on what "not" to do. I'm tryinh to tweek the height of my header image in the indivisual device views without screwing each other up.Meaning when I adjust the height in smartphone view I dont want it to affect tablet view, or when I adjust the height in desktop view it doesn't affect smartphone view, and so on and so on. The width works fine (right now at least) because its simple 100% of screen so it scales great right now. Its the height I cant get!!! I cant adjust it. Each device needs a little tweek beause of design issues. PLease help
ps no tutorial i've seen helps with the issues i'm going through, none. And I've had people offer suggestions so I done wasting days looking at these things. I just need the anwser a what to do.

If you alter the height in the applicable css media query only that device will observe the specified height.
What is it you are actually trying to do. Simple example below:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
img {
    max-width: 100%;
    height: auto;
@media screen and (max-width: 480px) {
.changeHeight {
height: 500px;
</style>
</head>
<body>
<div id="header">
<img src="yourImage.jpg" class="changeHeight"></div>
</body>
</html>
If you want to target screens with a max-width of 480px you would write a css media query:
@media screen and (max-width: 480px) {
.changeHeight {
height: 500px;
However not sure why you would want to change heights as it will distort the image.
You could server up an alternative sized image for desktop, tablet and smartpone:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
img {
    max-width: 100%;
    height: auto;
.tablet {
display: none;
.smartPhone {
display: none;
@media screen and (max-width: 480px) {
.deskTop {
display: none;
.tablet {
display: none;
.smartPhone {
display: block;
</style>
</head>
<body>
<div id="header">
<img src="deskTop.jpg" class="deskTop">
<img src="tablet.jpg" class="tablet">
<img src="smartPhone.jpg" class="smartPhone">
</div>
</body>
</html>

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

How Do I Put Pictures anywhere in fluid grid layout??

Hi,
I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?

Sorry but APDiv tags don't work in Fluid Grid layouts. That's why Adobe removed them from CC.
You must use the Fluid Grid divs in your layout to hold your text and images.
<div class="gridContainer clearfix">
     <div class="div1">
          insert image here...
     </div>
     <div class="div2">
          insert image here...
     </div>
</div>
Nancy O.

How can I convert my web page from a fixed width layout to a fluid grid layout?

I'm taking a web design class (I'm using Dreamweaver CS6, btw) wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered in the layout) so it shouldn't need excessive tweaking.
Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
Did I just answer my own question? Help - I am new at this!!
Thanks all,
KC

Herbert2001 wrote:
A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
//variables
$desktop: 1025px;
$large-columns: 12;
@media only screen and (min-width: $desktop) {
     //regular grid span classes
    @for $i from 1 through $large-columns {
        .span-large-#{$i} {
            width: percentage($i/$large-columns);
     // push classes
    @for $i from 1 through (($large-columns)-1) {
        .push-large-#{$i} {
            margin-left: percentage($i/$large-columns);
No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like. I've got a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

How to setup a default direction for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

DW CC Fluid grid layout how to change px width for desktop layout

Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.

Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

Is it possible to use HTML5 tags within fluid grid layouts?

Hello,
I want to build my future websites with fluid grid layouts and Dreamweaver CS6 but I don't find any help by searching the internet how I could use the HTML5 tags like "header" "nav" "footer" etc. within the fluid grid layouts automaticly. If I do anything manually it's more error-prone. Or is just the best way to stay with the "normal" div-tags???
Thank you in advance, best regards ... Björn

Those tags are equal to a normal DIV and can be used just the same, they are just not built into CS6.
Mylenium

How can i apply border for fluid grid layout div

How can i apply border for fluid grid layout div

<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/Layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider();
</script>


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
<div id="LayoutDiv2">
<div class="flex-container">
<div class="flexslider">
    <ul class="slides">
      <li>
        <img src="SJV-Images/Stud1.jpg"/>
      </li>
      <li>
        <img src="SJV-Images/Stud2.jpg" />
      </li>
      <li>
        <img src="SJV-Images/Stud3.jpg" />
      </li>
    </ul>
</div>
</div> </div>
<div id="Nav">This is the content for Layout Div Tag "Nav"</div>
<div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
<ul>
<li>
It is one of the oldest school.</li>
<li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
   <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
<li>The campus now has separate buildings within the campus for year 1 to year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
<li>The school has montessori facilities in a separate building.</li>
<li>The School also has boarding facilities for students from distant places.</li>
</ul></div>
<div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
<h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
<div id="Photo_Gall"><center>
    <strong>PHOTO GALLERY</strong>
</center>
<p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
</div>
<div id="News_Events"><center>
    <strong>NEWS & EVENTS</strong>
</center><center>Annual Day<br><center>
    Alumni Meet<br>
    Exam Time Table<br>Parents-Teacher's Meet</center>
</center>
<br></div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>

Fluid Grid Layout- HTML5 video buttons become gray squares Android

I am attempting to use Fluid Grid layouts for a simple smartphone/tablet acessible video page. I am in Dreamweaver CS6 Cloud (updated). The buttons for play and full screen mode are shown as gray squares on my Android phone. It works fine in other browsers (OS:Windows 7, Chrome, FireFox and IE. I have not tested iOS or iPhones). I spent a day trying variations trying to get it to work properly on the Android and finally built a whole new HTML5 (non Fluid Grid) and it works. But that has issues with formatting, where comes in small and has text not filling the page for Android. I am trying to avoid people having to zoom in and out to see the page. The Fluid Grid brings the page in the way that I want it. My guess is that the Fluid Grid boilerplate or the respond.min.js is causing the conflict. As this is a touchy new venture into Adaptive Design I have left these files alone.
Here is the fluid grid (stripped of formatting) http://www.oha-edu.org/Video/v1.html
Here is the HTML5 video page where the buttons show up. http://www.oha-edu.org/Video/2.html
Dumping my Droid Razr Maxx (Android Version 4.04, System version 6.16.211.xt912.Verizon.en.US) is not a solution. I wish to make this work for as many devices as possible.

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.

While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O.

How to Get HTML5 Slideshow to Shrink in Fluid Grid Layout?

Similar Messages

Maybe you are looking for