Jquery image slider adapting to the size of the browser
HI i have implemented a Jquery image slider into my mobile site, i have set the width to 100% so the width of the slider adapts nicely to all different browser sizes. However i cannot seem to figure out what i need to do to get the height to adapt like the width does. i have countless amounts off different CSS combinations but i cant figure it out. Can someone help?
thomas-shaw wrote:
HI i have implemented a Jquery image slider into my mobile site, i have set the width to 100% so the width of the slider adapts nicely to all different browser sizes. However i cannot seem to figure out what i need to do to get the height to adapt like the width does. i have countless amounts off different CSS combinations but i cant figure it out. Can someone help?
You can only distort the height. Obviously when images get narrower the height goes down in pro. Most of the time, unless you specifically throw a different set of images at mobile, they can look a bit stupid. A lot of responsive websites just hide the main image at smaller mobile sizes.
Similar Messages
-
When browsing a new library that I created and exported onto an external hard drive, the browser shows dotted lines around grey rectangles, no images. When I double click on a rectangle, the image appears, but all the other rectangles remain empty - no image. How do I get images to appear in the browser rectangles? I am viewing this on a second computer (an older intel duo iMac), not the one I created the library on (a MacBook Pro). Both computers have Aperture 3.2.4 installed. When I return the external to the MacBook, all images appear in browser rectangles. What's happening on the iMac?
You may have a problem with the permissions on your external volume. Probably you are not the owner of your library on the second mac.
If you have not already done so, set the "Ignore Ownership on this Volume" flag on your external volume. To do this, select the volume in the Finder and use the Finder command "File > Get Info" (or ⌘I).
In the "Get Info" panel disclose the "Sharing & Permissions" brick, open the padlock, and enable the "Ignore Ownership on this Volume" flag. You will have to authentificate as administrator to do this.
Then run the "Aperture Library First Aid Tools" on this library and repair the permissions. To launch the "First Aid Tools" hold down the ⌥⌘-key combination while you double click your Aperture Library. Select "Repair Permissions" and run the repair; then repeat with "Repair Database". Do this on the omputer where you created the library and where you can see the thumbnails.
Then check, if you now are able to read the library properly on your iMac.
Regards
Léonie -
Hello,
I just bought a CSS3 image slider from envato marketplace and I think I did everyting as the creator explained in the read me file of how to implement it in your source code. But when I view it in a browser, I don't see any image, its just blank. The images are in the root folder. I tried alot but the only thing I see is blank images. Here's my whole html. You can skip the first html part. Is there anyone who had the same problem once or knows what the problem is? Thanks in advance
<!doctype html>
<html>
<head>
<meta name="description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta property="og:description" content="Buitengesloten of ingebroken? Of gewoon toe aan een nieuw slot? Kan allemaal. Bel ons en we komen zo snel mogelijk naar u toe."/>
<meta charset="utf-8">
<title>Onze foto impressie</title>
<link href="css/general.css" rel="stylesheet" type="text/css">
<style type="text/css">
#header {
background-color: #FFFFFF;
text-align: right;
height: 200px;
margin-right: auto;
margin-left: auto;
padding-top: 5%;
padding-right: 20%;
font-size: 30px;
#page {
font-family: arial, tahoma, verdana;
font-size: 12px;
line-height: 1.5em;
color: #000000;
text-align: left;
float: left;
margin-right: auto;
margin-left: 13%;
margin-top: 40px;
padding-left: 20px;
background-color: #FFFFFF;
padding-right: 20px;
border-top: 1px solid #E9E9E9;
font-style: normal;
font-weight: 400;
min-height: 400px;
max-width: 700px;
padding-top: 20px;
padding-bottom: 20px;
clear: both;
#mainnav {
font-family: arial, tahoma, verdana;
font-size: 16px;
color: #000000;
margin-right: auto;
margin-left: auto;
background-color: #BDE1E8;
#mainnav ul {
font-family: arial, tahoma, verdana;
list-style-type: none;
margin-left: 10%;
margin-right: auto;
#mainnav ul li a {
font-family: arial, tahoma, verdana;
display: block;
padding-top: 10px;
padding-bottom: 10px;
float: left;
font-size: 16px;
background-color: #9B9B9B;
color: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
font-style: normal;
font-weight: 400;
#mainnav a:hover, #mainnav a:active ,#mainnav a:focus , #mainnav a.thispage {
font-family: arial, tahoma, verdana;
background-color: #1B1B1B;
font-style: normal;
font-weight: 400;
h1, h2 {
font-size: 20px;
.zoeken {
position: relative;
top: 25px;
left: 40px;
-webkit-transition: all 0s ease 0s;
-o-transition: all 0s ease 0s;
transition: all 0s ease 0s;
color: #151515;
.zoeken:focus {
width: 225px;
border-color: #150CD5;
.glas {
position: relative;
left: 25px;
top: 3px;
#search {
position: relative;
left: 50px;
top: 25px;
color: #0D0D0D;
.tel {
position: relative;
left: 552px;
top: 0.1px;
</style>
<style type="text/css">
body {
background-color: #ffffff;
</style>
<style type="text/css">
#footer {
font-family: arial, tahoma, verdana;
font-size: 12px;
line-height: 20px;
color: #000000;
background-color: #FFFFFF;
text-align: left;
float: left;
margin-left: 15%;
margin-top: 25px;
clear: left;
#footer ul {
list-style-type: none;
float: left;
text-align: left;
#footer ul li a {
font-family:arial, tahoma, verdana;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
text-align: left;
#footer a:hover , #footer a:active, #footer a:focus, #footer a:visited{
color: #000000;
text-decoration: underline;
</style>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.kolom {
font-family: arial, tahoma, verdana;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
float: left;
width: 120px;
margin-right: 25px;
margin-left: 25px;
background-color: #FFFFFF;
text-align: center;
margin-top: 10px;
border-right: 1px solid #000000;
.kolom1 {
font-family: arial, tahoma, verdana;
width: 200px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
float: left;
width: 200px;
margin-right: 25px;
margin-left: 25px;
background-color: #FFFFFF;
text-align: center;
margin-top: 10px;
border-right-color: #000000;
border-right-width: 1px;
border-right-style: solid;
font-size: 12px;
input::-webkit-input-placeholder {
color: #161616;
input::-moz-placeholder {
color: #161616;
input:-moz-placeholder { /* Older versions of Firefox */
color: #161616;
input:-ms-input-placeholder {
color: #161616);
.kolom1 a {
font-size: 10px;
color: #000000;
padding: 0;
margin: 0;
body {
background-color: #FFFFFF;
#wrap {
display: block;
height: auto;
width: 620px;
margin: 150px auto 0 auto;
border: 10px solid #fff;
position: relative;
#slideshow {
overflow: hidden;
#slideshow ul {
list-style-type: none;
height: 100%;
width: 500%; /*5 images by 100%. If you use 6 images you have to change the witdh into 600% */
position: relative;
left: 0px;
-webkit-transition: left 1s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
#slideshow ul li {
width: 20%; /*100% per 5 images. */
height: 320px;
float: left;
position: relative;
#wrap input[type=radio] {
position: absolute;
visibility: hidden;
#wrap label:not(.arrows):not(.show-description-label) {
position: absolute;
left: 50%;
top: 360px;
width: 11px;
height: 11px;
background-image: -moz-linear-gradient(top, #6dbfe8, #068ccf);
background-image: -o-linear-gradient(top, #6dbfe8, #068ccf);
background-image: -webkit-linear-gradient(top, #6dbfe8, #068ccf);
background-image: linear-gradient(top, #6dbfe8, #068ccf);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
#wrap label:not(.arrows):not(.show-description-label):hover {
background-image: -moz-linear-gradient(top, #B0E5FF, #068ccf);
background-image: -o-linear-gradient(top, #B0E5FF, #068ccf);
background-image: -webkit-linear-gradient(top, #B0E5FF, #068ccf);
background-image: linear-gradient(top, #B0E5FF, #068ccf);
box-shadow: #fff 0 0px 6px;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
#wrap input[type=radio]#button1:checked~label[for=button1] {
background: #fff;
#wrap input[type=radio]#button2:checked~label[for=button2] {
background: #fff;
#wrap input[type=radio]#button3:checked~label[for=button3] {
background: #fff;
#wrap input[type=radio]#button4:checked~label[for=button4] {
background: #fff;
#wrap input[type=radio]#button5:checked~label[for=button5] {
background: #fff;
#wrap input[type=radio]#button1:checked~#slideshow ul { left: 0 }
#wrap input[type=radio]#button2:checked~#slideshow ul { left: -100% }
#wrap input[type=radio]#button3:checked~#slideshow ul { left: -200% }
#wrap input[type=radio]#button4:checked~#slideshow ul { left: -300% }
#wrap input[type=radio]#button5:checked~#slideshow ul { left: -400% }
#wrap label[for=button1] { margin-left: -40px }
#wrap label[for=button2] { margin-left: -20px }
#wrap label[for=button3] { margin-left: 0; }
#wrap label[for=button4] { margin-left: 20px }
#wrap label[for=button5] { margin-left: 40px }
label.arrows {
position: absolute;
top: 50%;
margin-top: -50px;
height: 80px;
display: none;
opacity: 0.5;
cursor: pointer;
border-radius: 3px;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
label.arrows:hover {
opacity: 1;
background: #666;
input[type=radio]#button1:checked~.arrows#arrow-2, input[type=radio]#button2:checked~.arrows#arrow-3, input[type=radio]#button3:checked~.arrows#arrow-4, input[type=radio]#button4:checked~.arrows#arrow-5 {
right: -65px;
display: block;
input[type=radio]#button2:checked~.arrows#arrow-1, input[type=radio]#button3:checked~.arrows#arrow-2, input[type=radio]#button4:checked~.arrows#arrow-3, input[type=radio]#button5:checked~.arrows#arrow-4 {
display: block;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
input[type=radio]#button2:checked~.arrows#arrow-1 { left: -25px }
input[type=radio]#button3:checked~.arrows#arrow-2 { left: -45px }
input[type=radio]#button4:checked~.arrows#arrow-3 { left: -65px }
input[type=radio]#button5:checked~.arrows#arrow-4 { left: -85px }
</style>
</head>
<body>
<div id="header"><img src="afbeeldingen/header8.jpg" width="630" height="205" alt=""/></div>
<div id="mainnav">
<ul>
<li><a href="index.html" class="thispage">Home</a></li>
<li><a href="onzediensten.html">Onze diensten</a></li>
<li><a href="tarieven.html">Tarieven</a></li>
<li><a href="offerteaanvraag.html">Offerte aanvragen</a></li>
<li><a href="overons.html">Over ons</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="page">
<div id="wrap">
<input type="radio" id="button1" name="buttons" checked="checked"/>
<label for="button1"></label>
<input type="radio" id="button2" name="buttons"/>
<label for="button2"></label>
<input type="radio" id="button3" name="buttons"/>
<label for="button3"></label>
<input type="radio" id="button4" name="buttons"/>
<label for="button4"></label>
<input type="radio" id="button5" name="buttons"/>
<label for="button5"></label>
<label for="button1" class="arrows" id="arrow-1">
<img src="images/arrow.png" />
</label>
<label for="button2" class="arrows" id="arrow-2">
<img src="images/arrow.png" />
</label>
<label for="button3" class="arrows" id="arrow-3">
<img src="images/arrow.png" />
</label>
<label for="button4" class="arrows" id="arrow-4">
<img src="images/arrow.png" />
</label>
<label for="button5" class="arrows" id="arrow-5">
<img src="images/arrow.png" />
</label>
<div id="slideshow">
<ul>
<li id="slide1">
<img src="images/1.png" />
</li>
<li id="slide2">
<img src="images/2.png" />
</li>
<li id="slide3">
<img src="images/3.png" />
</li>
<li id="slide4">
<img src="images/4.png" />
</li>
<li id="slide5">
<img src="images/5.png" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>Hi Davidoff,
Glad to know that you managed to solve your problem. It will be helpful for other users if you post your solution here.
Thanks,
Preran -
Image Slider not appearing/visual in live view/Browser
I updated a link to my image browser and once I hit refresh, everything seemed fine. I checked my rework on live view, and the whole slider (including images and buttons) were no longer visual. (You could not see them.)
|
<!--==============================header=================================-->
<div class="header">
<div>
<div class="nav">
<nav>
<ul class="menu">
<li class="current li-none"><a href="index.html"> Home </a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html"> Media </a></li>
<li class="li-left li-none"><a href="products.html"> Products </a></li>
<li><a href="news.html">News</a></li>
<li><a href="contacts.html"> Contact </a></li>
</ul>
</nav>
</div>
<header>
<h1><a href="index.html"><img src="images/logo234.png" alt=""></a></h1>
</header>
<div id="slide">
<div class="slider">
<ul class="items">
<li><img src="images/slide-1.jpg" alt="" /></li>
<li><img src="images/slide-2.jpg" alt="" /></li>
<li><img src="images/slide-3.jpg" alt="" /></li>
</ul>
</div>
<ul class="pags">
<li><a href="#"><strong></strong></a></li> <!--[This is the image I updated/changed]>
<li><a href="#"><strong></strong></a></li>
<li><a href="#"><strong></strong></a></li>
>
</ul>
</div>
</div>
</div>
<!--==============================content================================-->
|
I checked in browser and you could also not see them there, either. The ONLY thing I changed was the link to the image. Here is the code, please let me know if you can help out at all.
JoeJon,
I have not uploaded the page yet, because this issue came up and I did not want a non-functional part of the site available online yet. However, I have done the following:
-Checked the link and that it is correct with no typo's, etc.
-Checked the Javascript (there are no issues there, either.)
I am going to download the original page from the server and compare once again to see if there are differences.
I will post updates. -
I have the local and the remote versions of a page open in two tabs. I change one of the images (keeping the same name in the HTML) and upload the changed image. The tab that shows the remote page only takes a refresh to show the change. The tab showing the local page not. I have tried opening it in a new window but it still does not change. Only if I restart Firefox does it show the change. Why? Is this a bug?
grantheaslip's suggestion doesn't work for me; no change at all. (Thanks anyway.) Any other ideas? Is there another way to "hard" refresh? I don't see anything in the menu.
Also, it seems like this is a very recent problem. I thought in the past that a regular refresh did the job. -
Search in google sometimes yields click (GIF Image,1x1 pixels) cusing the browser to fail
search for Verizon using Google and trying to select a www.verizon.com websire yeilds a page identified as
click (GIF Image,1x1 pixels)
and no other display is made and blocks any page referenceSome firewalls like Kaspersky can block content and send a 1x1 GIF image instead.
Kaspersky: Protection > Firewall > Filtration system: disable the "Banner Ad Blocker"
See:
* https://support.mozilla.com/kb/Configuring+Kaspersky+Internet+Security
* https://support.mozilla.com/kb/Firewalls -
Style Image Slider to include HTML text: How?
I am trying to insert an image slider onto my page. So far, I have tried a few different sliders with some issues.
Does anyone know
A good Jquery Image Slider that allows for HTML text beside the image on a slide?? (Like MSN Homepage)--No Caption or Overlay. Looking for White background with linkable HTML Text on left (40%) and Picture on Right (60%)-all on one slide. Cycle through four similar slides.
I am assuming the solution is not so much the slider, but has to do with creating a seperate div or rule / class and applying?
Thank you for any help.I would approach it like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Cycle2 Plugin Script-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
.cycle-slideshow {
margin: 25px auto;
border: 1px solid silver;
overflow: hidden; /**float containment**/
width: 80%; /**adjust width of container as required**/
.cycle-slideshow img {
width: 60%;
float: left;
.cycle-slideshow h3 {
float: right;
width: 40%;
font-size: 26px;
color: red
.cycle-slideshow p {
clear: right;
float: right;
width: 40%;
font-size: 16px;
.center {text-align:center}
/* Special Rules for tablets, mobiles */
@media only screen and (max-width: 768px) {
.cycle-slideshow { width: 98% }
.cycle-slideshow img {
width: 100%;
display: block;
float: none;
.cycle-slideshow h3 {
display: block;
float: none;
font-size: 20px;
width: 100%;
.cycle-slideshow p {
display: block;
float: none;
font-size: 14px;
width: 100%;
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a>
Responsive Slideshow with text</h1>
<!--begin slideshow-->
<div class="cycle-slideshow"
data-cycle-pause-on-hover="true"
data-cycle-timeout="2000"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-slides="> div"
>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<div>
<img alt="description" src="http://placehold.it/400x100">
<h3>Slide 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. </p>
</div>
<!--end slideshow-->
</div>
<!--prev, next links-->
<div class="center">
<a href=# id="prev">Prev</a> | <a href=# id="next">Next</a>
</div>
</body>
</html>
Nancy O. -
this is what i tried to do ... but obvious its not at all working...i do know that i have to use jquery and the code given below will not work at all, i want to
display image(1.jpg),2.jpg,3,jpg) one by one after few seconds in fade effect..
and also there is this website http://wowslider.com/
can any one tell me the code of the slider they made for this website and explain step by step.. since i m a slow learner
<div id="imageslide">
<?php
$image=array("1.jpg","2.jpg","3.jpg");
$x=count($image);
for($i=0;$i<$x;$i++){
?>
<img src="image/<?php echo $image[$i]?>" />
<?php } ?>If you wanted to write your own/know how they work this will get you started:
http://css-plus.com/2013/10/create-your-own-jquery-image-slider/
There are loads of free ones available however so I wouldn't recommend using your own on a real site.
You wouldn't do it with PHP, you need to use Javascript/Jquery/CSS to manipulate the slides. PHP would only be used to grab the images from a Directory/Database. -
Muse CC2014 Widget Installation - Before/After Image Slider
I purchased the "Before/After Image Slider" widget a few weeks ago, but I hadn't installed it yet. Now I can't find it, so I re-downloaded it from the "Install Using Adobe Extension Manager" section. However, it is not downloading correctly as a .mulib file. Instead, it is downloading the Adobe Extension Manager and only displaying my Fireworks CS6 add-ons - not my Muse CC2014 add-ons. Does anyone know how to access it?
Hello,
Please make sure you are launching ZPX file using Extension Manager CC (not Extension manager CS6) This addon should show under "Others" In Extension Manager CC.
Please check the detailed steps to install it.
1. Download the ZPX file by clicking "Download Before/after image slider" button in the link below:
https://creative.adobe.com/addons/patches/4860/install
2. Once Downloaded, Launch Extension Manager CC and Click install and select the ZPX file. IT will be installed in "Others" tab
3. Once the installation is over please check Download folder and you will find a file named as musethemesbeforeafterimageslider.mulib.
4. Double click the file to add it to Muse.
If this is not the case please make sure Extension manager CC is upto date. You can Check it from Creative cloud application.
Regards
Vivek -
How do I keep my images from moving when extending or contracting in browser?
Can anyone tell me if there is a solution to keeping multiple images from moving as the size of the browser is made larger or smaller. I am in the jewelry business and when I have multiple images, and a customer makes the browser window larger or smaller, it of course moves the images out of position and mixes everything up on different lines. As opposed to a site like Bluenile.com which images stay stationary as the browser window moves. I did try to make all my images on "one image" in Photoshop and that does seem to do what I want as far as the images go, but then I cant add links to individual pictures within that page. Please help !
One of my pages is http://www.milesgoldberg.com/Gentsbandsspecific.html
This is one when I extend or contract the window, the content gets all mixed up.
Now look at http://http://www.bluenile.com/wedding-rings/mens-wedding-rings
If you extend or contract the window, the content stays in place.You're using a liquid layout based on percentages that resizes with browser viewport. As Ned said, a fixed width Table would be one approach. Another would be to use a Fixed Width CSS grid like this one (view page source to see the code)
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
HTH,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb -
Is it possible to fill the width of the browser without creating horizontal scrolling?
I'm trying to fill the width of the browser with placed images across the page so that they bleed off. But as soon as I reach the edge of the working area and then preview it just scrolls to show empty white space.
I'm trying to achieve the effect that if you're viewing on a wide screen monitor the you'll see all the images, but if viewed on a smaller monitor the images will just bleed off with no option to horizontally scroll.
Is it possible?If I'm understanding your question correctly, create a rectangle at 100% width, either by clicking the 100% width icon or dragging the edges out to the edge of the browser space until the edge turns red. Now go to the Fill Panel and select Add Image. Choose your image. Set the location to Centre. Set the Fitting to Original Size - this will prevent the image from resizing with the browser. You'll need to make sure the images are wide enough to fill the screen, of course.
-
Background image inside a div that rescales to the size of the browser in jquery mobile
I want to place a background image in my content area using Jquery mobile, however i want the image to re-scale itself to the size of browser and different devices. How would i go about this ??
jQuery Mobile is essentially a one page site. Background gradients are determined by the jQuery Mobile Theme you use (a, b, c, etc..). I don't know if it's possible to use a scaling background with jQMobile. I've never tried it. But you'll find the relevant code in your Theme.css file. Look for ui-body-a, ui-body-b, ui-body-c, depending on which Theme you're using.
Nancy O. -
What if you have a situation where Restore did not work. I do. The ipad mini says it is disabled, connect to itunes. When connected, it says that it is locked! I have tried using Recovery/Restore but after it completed, the ipad mini still malfunctions. It does not allow you to start the device. The slide image keeps dancing around the screen. The opening page keeps changing in size and the keyboard types on its own! What can be done to fix this????????
Maybe a reset would help, to be followed by trying the recovery again.
To reset, hold the on/off and home buttons together for about 10 seconds till the Apple logo appears. Then do the recovery.
If this doesn't solve it, I recommend visiting an Authorized Apple Service Center. -
Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
my head code:
<title>slider</title>
<script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
<script type="text/javascript">
$('#slider').cycle({
</script>
<style type="text/CSS">
#slider {margin:auto;}
</style>
My div code:
<div id="slider">
<p>
<img src="Leather web page/DSC_0531_4925.JPG"/>
<img src="Leather web page/DSC_0035_edited-1.JPG"/>
<img src="Leather web page/DSC_1593_edited-1.jpg"/>
<img src="Leather web page/DSC_1595_edited-1.jpg"/>
<img src="Leather web page/DSC_1821.jpg"/>
</div>
Any help would be greatly appreciated.1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
// @see: http://jquery.malsup.com/cycle2/api
$.fn.cycle.defaults = {
allowWrap: true,
autoSelector: '.cycle-slideshow[data-cycle-auto-init!=false]',
delay: 0,
easing: null,
fx: 'fade',
hideNonActive: true,
loop: 0,
manualFx: undefined,
manualSpeed: undefined,
manualTrump: true,
maxZ: 100,
pauseOnHover: false,
reverse: false,
slideActiveClass: 'cycle-slide-active',
slideClass: 'cycle-slide',
slideCss: { position: 'absolute', top: 0, left: 0 },
slides: '> img',
speed: 500,
startingSlide: 0,
sync: true,
timeout: 4000,
updateView: 0
// automatically find and run slideshows
$(document).ready(function() {
$( $.fn.cycle.defaults.autoSelector ).cycle();
2. To center the slideshow, merely center the container as in
div.cycle-slideshow {
width: 1000px;
margin: auto; -
size of the general image that I see reduces toby about a third - I resize it by pressing Ctrl key and using my mouse scroll button to expand the whole image so that it fill the screen. As soon as I go to the next page the whole image reverts back to original size and I have to repeat the action again.
The Firefox Page Zoom feature does a domain by domain level of saving the users preferred zoom level settings, there is no default Page Zoom level setting in Firefox.
Try the Default FullZoom Level extension: <br />
https://addons.mozilla.org/en-US/firefox/addon/6965
Or the NoSquint extension: <br />
https://addons.mozilla.org/en-US/firefox/addon/2592/
Maybe you are looking for
-
Authorized music won't play on my computer when it's already authorized
I recently had a HD failure, and had to mirror the drive and do a transfer to a new drive. After the transfer some of my music will not play on my machine, but WILL on my other IOS devices... Right now it asks me to authorize the music, says my devic
-
SOAP fault from web service - how to convert it to application error:
Hi gurus, I have read the relevant blogs and a few forum posts, but still could not solve this problem. The WS I'm calling is passing back a response with the schema below when there is a problem: I'm using the standard fault message type of PI for t
-
Hai All, Can somebody describe me or refer to documentation that describes analysis of ALAP trace. Let me aloberate this. I executed a report and from settings, I switched on the "Trace" and then disconnected, refreshed, logged in and execut
-
In my error log files for iPlanet Web server 4.1SP9 (running on Solaris) I am seeing the following errors sporadically dispersed seemingly at random throughout the day. Error receiving connection (SSL_ERROR_CERTIFICATE_UNKNOWN_ALERT) Error receiving
-
Importing partial list of bookmarks after update
After installing an update this week, I can no longer import my entire list of IE bookmarks via the "import data from another browser" option, only about a third of my bookmarks import over. I can import via html file but this is not desirable for my