I have a simple image slider with input range. I want to pick input range value and be able to fade-in and fade out images.
The problem is - my setup has to remain this way. I need to have img tags within li and need to have images as css background url under classnames.
How do i identify the current playing and transition to the next depending on where the slider is?
Requirement: If user goes to range 2 on slider, image2 should be visible. if user goes to range 4, image4 should be visible and so on.
I have been able to read the input range and locate the image with that image class.
How do I remove the "active" state of previous one and insert this new image?
Please find code attached
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
let currentImage = document.getElementsByClassName("playing");
let newImageClassName = "image"+value;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
I am getting the input range value. Help from here is greatly appreciated! Thanks!
I was able to solve it!
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
Related
I want to make a simple slider that will work by shifting position:right
I need to shift each picture by 250px, doing it through a cycle - the first picture shifts as needed, and all the others increase on each other, and go much further. Is it possible to somehow set the same indentation values in 250px to all elements in the loop?
codepen - https://codepen.io/dxxxxxxfly/pen/KKePaXW
<body>
<div class="slider_block">
<div class="btn_left"><button>Back</button></div>
<div class="slider_main">
<div class="slider_image">
<div class="imaga">
<img src="https://avatars.mds.yandex.net/i?id=6adf61533a32e0002e109f820f2895fa-5889001-images-thumbs&n=13&exp=1" alt="" class="image_slider">
<img src="https://dasart.ru/userdata/image/08/ab/08ab193e2f04fb47d02efef43ff53ce9.jpg" alt="" class="image_slider">
<img src="https://images.satu.kz/3628818_w640_h640_obves-hamann-tycoon.jpg" alt="" class="image_slider">
<img src="https://shop.ilovevalencia.ru/251-thickbox_default/arenda-kabrioleta-porsche-991-cabrio-v-valensii-ispaniya.jpg" alt="" class="image_slider">
</div>
</div>
</div>
<div class="btn_right"><button>Next</button></div>
</div>
<script src="script/script.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
.slider_block {
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.slider_image {
display: flex;
height: 123px;
width: 349px;
overflow: hidden;
}
.image_slider {
position: relative;
display: flex;
object-fit: cover;
width: 100%;
aspect-ratio: 480/169;
}
.btn_left > button,.btn_right > button {
border: none;
padding: 10px 15px;
margin: 25px;
cursor: pointer;
border-radius: 4px;
}
.imaga {
display: flex;
}
let right = 0;
const next = document.querySelector('.btn_right');
const image = document.querySelectorAll('.image_slider')
next.addEventListener('click', () => {
for(const items of image ) {
right += 250
items.style.right = right + 'px'
continue
}
})
I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>
I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
I created this question and was able to get my slider to work. Now I need to add a smooth transition between images. I tried transition/ animate in CSS but that has a weird effect - there is a blackness between images. I think the transition property needs to be added to JS.
Current situation - there is stark difference as images change suddenly
Expectation - I want images to ease in and out.
Any help in this direction is greatly appreciated!
P.S. -> copy-pasting code here for ease of use:
let line = document.getElementById("line");
line.addEventListener("input", function(event){
setNewImage(event.target.value);
});
function setNewImage(value){
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image"+value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
/* background-color: pink; */
}
.scrollbar {
/* padding: 0 5px 5px 0; */
}
.scrollbar input {
width: 380px;
}
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
display: none;
}
.playing {
display: block;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li><img class="playing image image1" /></li>
<li><img class="image image2" /></li>
<li ><img class="image image3" /></li>
<li><img class="image image4" /></img></li>
<li><img class="image image5" /></li>
<li><img class="image image6"/></li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max =6 />
</div>
</div>
Use opacity instead of display to be able to add transition, and make your element position absolute to have them above each other:
let line = document.getElementById("line");
line.addEventListener("input", function(event) {
setNewImage(event.target.value);
});
function setNewImage(value) {
// console.log(value);
let currentImage = document.getElementsByClassName("playing");
let removedImage = currentImage[0].classList.remove("playing");
let imageToAdd = "image" + value;
// console.log(imageToAdd);
let getElToAdd = document.getElementsByClassName(imageToAdd);
// console.log(getElToAdd);
let newEl = getElToAdd[0];
newEl.classList.add("playing");
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
background-color: lavendar;
width: 400px;
height: 300px;
}
.image-container {
width: 380px;
height: 280px;
}
.scrollbar input {
width: 380px;
}
ul {
position:relative; /*make them relative to ul not li*/
margin:0;
padding:0;
}
/* added this*/
ul li .image {
position:absolute;
top:0;
left:0;
}
/**/
ul li {
list-style: none;
}
.image {
width: 380px;
height: 260px;
opacity: 0;
transition:1s all;
}
.playing {
opacity:1;
}
.image1 {
background: url('http://placekitten.com/380/260') no-repeat;
}
.image2 {
background: url('http://placekitten.com/378/260') no-repeat;
}
.image3 {
background: url('http://placekitten.com/380/259') no-repeat;
}
.image4 {
background: url('http://placekitten.com/379/260') no-repeat;
}
.image5 {
background: url('http://placekitten.com/383/260') no-repeat;
}
.image6 {
background: url('http://placekitten.com/380/261') no-repeat;
}
<div class="container">
<div class="image-container">
<ul>
<li>
<div class="playing image image1"></div>
</li>
<li>
<div class="image image2"></div>
</li>
<li>
<div class="image image3"></div>
</li>
<li>
<div class="image image4"></div>
</li>
<li>
<div class="image image5"></div>
</li>
<li>
<div class="image image6"></div>
</li>
</ul>
</div>
<div class="scrollbar">
<input id="line" type="range" min=1 max=6>
</div>
</div>
I have a file recent.php that shows recent 15 members who has joined my website. Since 15 is a big number, I wish to have a scrolling effect on the page so that all recent 15 profiles will keep scrolling. Then I came across SimplyScroll but here is the issue that I am facing.
I downloaded the script and went through all the test files and I have understood how to do it if I have static images but dont know how to do it when there is a dynamic data that comes from database in form of html table (top 15 registered members and their profiles. Can someone help me where to make changes to get the scrolling effect? Here is the code of recent.php Thanks.
<?php
session_start()
include("connect/config.php");
if($_SESSION['gender123'])
{
if($_SESSION['gender123']=='Male')
{
$gender="where gender='Female'";
}
else
{
$gender="where gender='Male'";
}
}
$sql="select * from register $gender order by index_id DESC LIMIT 0,15";
$result=mysql_query($sql) or die(mysql_error());
$abcdef=$_SESSION['userid'];
$select="select * from payments where pmatri_id='$abcdef' or pemail='$abcdef'";
$exe=mysql_query($select) or die(mysql_error());
$fetch123=mysql_fetch_array($exe);
?>
<table width="210px" align="left" cellpadding="0" cellspacing="0" border="0" class="text2">
<tr valign="top">
<?php while($fetch=mysql_fetch_array($result)) { ?>
<td valign="top" align="left" height="55px" style="padding:1px; max-width:120px; min-width:120px;">
<?php if($_SESSION[ 'userid']) { if($fetch123[ 'profile']-$fetch123[ 'r_profile']>0) { ?>
<a href="memprofile.php?user_id=<?php echo $fetch['matri_id']; ?>">
<?php if($fetch[ 'photo1_approve']=="No" ) { ?>
<img src="images/No-Image-icon.png" height="100" width="90px" border="0" />
<?php } else if($fetch[ 'photo1']=='' ) { ?>
<img src="images/No-Image-icon.png" height="100" width="90px" border="0" />
<?php } else if($fetch[ 'photo_protect']=='Yes' ) { ?>
<img src="images/imagePassProtected.jpg" height="100" width="90px" border="0" />
<?php } else { ?>
<img src="photos/<?php echo $fetch['photo1']?>" height="100" width="90px" border="0" />
<?php } ?>
<br />
<h3><?php echo $fetch['firstname']." ".$fetch['lastname']; ?></h3>
</a>
</td>
<?php } ?>
</tr>
</table>
It's the same thing. Whether it is in a table or outside of a table. It's always the same procedure.
(function($) {
$(function() { //on DOM ready
$(".scroller").simplyScroll({
orientation: 'horizontal',
auto: true,
manualMode: 'loop',
frameRate: 20,
speed: 5
});
});
})(jQuery);
.simply-scroll-container {
/* Container DIV - automatically generated */
position: relative;
}
.simply-scroll-clip {
/* Clip DIV - automatically generated */
position: relative;
overflow: hidden;
}
.simply-scroll-list {
/* UL/OL/DIV - the element that simplyScroll is inited on */
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
.simply-scroll-btn {
position: absolute;
background-image: url(buttons.png);
width: 42px;
height: 44px;
z-index: 3;
cursor: pointer;
}
.simply-scroll-btn-left {
left: 6px;
bottom: 6px;
background-position: 0 -44px;
}
.simply-scroll-btn-left.disabled {
background-position: 0 0 !important;
}
.simply-scroll-btn-left:hover,
.simply-scroll-btn-left:focus {
background-position: 0 -88px;
}
.simply-scroll-btn-right {
right: 6px;
bottom: 6px;
background-position: -84px -44px;
}
.simply-scroll-btn-right.disabled {
background-position: -84px 0 !important;
}
.simply-scroll-btn-right:hover,
.simply-scroll-btn-right:focus {
background-position: -84px -88px;
}
.simply-scroll-btn-up {
right: 6px;
top: 6px;
background-position: -126px -44px;
}
.simply-scroll-btn-up.disabled {
background-position: -126px 0 !important;
}
.simply-scroll-btn-up:hover,
.simply-scroll-btn-up:focus {
background-position: -126px -88px;
}
.simply-scroll-btn-down {
right: 6px;
bottom: 6px;
background-position: -42px -44px;
}
.simply-scroll-btn-down.disabled {
background-position: -42px 0 !important;
}
.simply-scroll-btn-down:hover,
.simply-scroll-btn-down:focus {
background-position: -42px -88px;
}
.simply-scroll-btn-pause {
right: 6px;
bottom: 6px;
background-position: -168px -44px;
}
.simply-scroll-btn-pause:hover,
.simply-scroll-btn-pause:focus {
background-position: -168px -88px;
}
.simply-scroll-btn-pause.active {
background-position: -84px -44px;
}
.simply-scroll-btn-pause.active:hover,
.simply-scroll-btn-pause.active:focus {
background-position: -84px -88px;
}
/* Custom class modifications - override classees
.simply-scroll is default
*/
.simply-scroll {
/* Customisable base class for style override DIV */
width: 576px;
height: 200px;
margin-bottom: 1em;
}
.simply-scroll .simply-scroll-clip {
width: 576px;
height: 200px;
}
.simply-scroll .simply-scroll-list {} .simply-scroll .simply-scroll-list li {
float: left;
width: 290px;
height: 200px;
}
.simply-scroll .simply-scroll-list li img {} .simply-scroll .simply-scroll-btn {} .simply-scroll .simply-scroll-btn-left {} .simply-scroll .simply-scroll-btn-left.disabled {} .simply-scroll .simply-scroll-btn-left:hover {} .simply-scroll .simply-scroll-btn-right {} .simply-scroll .simply-scroll-btn-right.disabled {} .simply-scroll .simply-scroll-btn-right:hover {} .simply-scroll .simply-scroll-btn-up {} .simply-scroll .simply-scroll-btn-up.disabled {} .simply-scroll .simply-scroll-btn-up:hover {} .simply-scroll .simply-scroll-btn-down {} .simply-scroll .simply-scroll-btn-down.disabled {} .simply-scroll .simply-scroll-btn-down:hover {}
/* Vertical scroller example */
.vert {
/* wider than clip to position buttons to side */
width: 340px;
height: 400px;
margin-bottom: 1.5em;
}
.vert .simply-scroll-clip {
width: 290px;
height: 400px;
}
.vert .simply-scroll-list {} .vert .simply-scroll-list li {
width: 290px;
height: 200px;
}
.vert .simply-scroll-list li img {} .vert .simply-scroll-btn {} .vert .simply-scroll-btn-up {
/* modified btn pos */
right: 0;
top: 0;
}
.vert .simply-scroll-btn-up.disabled {} .vert .simply-scroll-btn-up:hover {} .vert .simply-scroll-btn-down {
/* modified btn pos */
right: 0;
top: 52px;
}
.vert .simply-scroll-btn-down.disabled {} .vert .simply-scroll-btn-down:hover {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://budowastrony.pl/images/jquery.simplyscroll.js"></script>
<table>
<tr>
<td>
<ul class="scroller">
<li>
<img src="http://budowastrony.pl/images/img1.jpg" width="290" height="200">
</li>
<li>
<img src="http://budowastrony.pl/images/img2.jpg" width="290" height="200">
</li>
<li>
<img src="http://budowastrony.pl/images/img3.jpg" width="290" height="200">
</li>
<li>
<img src="http://budowastrony.pl/images/img4.jpg" width="290" height="200">
</li>
<li>
<img src="http://www.budowastrony.pl/images/img5.jpg" width="290" height="200">
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="scroller">
<li>
<img src="http://budowastrony.pl/images/img1.jpg" width="290" height="200">
</li>
<li>
<img src="http://budowastrony.pl/images/img2.jpg" width="290" height="200">
</li>
<li>
<img src="http://budowastrony.pl/images/img3.jpg" width="290" height="200">
</li>
<li>
<img src="http://budowastrony.pl/images/img4.jpg" width="290" height="200">
</li>
<li>
<img src="http://www.budowastrony.pl/images/img5.jpg" width="290" height="200">
</li>
</ul>
</td>
</tr>
</table>
<br />
<br />
<br />
<input type="text" value="" />
You might want to change from an id to a class when there are multiple rows you want to affect like I did in the example above. But the other things dont change.
I hope my example makes it clear how to work with it. If you really got multiple Slides it is important to change from id to class and do the same thing in your js code ( id="scroller" to class="scroller", $("#scroller") to $(".scroller") )
I have, after many tutorials and lots of time, managed to build a slider with jQuery. However, it's not working as smoothly as I would have hoped. I have used a custom handle, and seeing as the new jQueryUI doesn't have a handle option, I have created a handle in CSS. However, this handle is going beyond the required bounds of the slider. I have uploaded a test page which can be found here.
My code is as follows:
CSS
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
.ui-slider-handle {
position: absolute;
cursor: default;
height: 17px;
top: 0;
background: url(productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 220px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
jQuery
<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;
$('.handle', container).slider({
min: -50,
max: itemsWidth,
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
Body
<div id="container">
<div class="sliderGallery">
<ul>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
<li><img src="ki_aikido.png"></li>
</ul>
<div class="slider ui-slider">
<div class="handle"></div>
<span class="slider-lbl1">Our Books</span>
<span class="slider-lbl2">Other Books</span>
</div>
</div>
</div>
What I'd like to know is if there is any way to force the slider bar to stay inside the image behind it? The test link will let you understand what I mean if I didn't explain myself clearly.
Thanks in advance,
Dronnoc
The problem is coming from the fact that your handle is set to go outside of it's container.
The two problems are coming from the following
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
The second line says that the slider is allowed to go 90px before the left of it's initial container (hence the left overflow)
And when setting the left of the handle to 100%, it means that it will overflow on the right from 90px (180-90).
The way I would handle that would be to drop the margin-left:-90px;, to reduce the width of the scrolling div by 180px and to use another div to display the scroll bar image (positioned under your sliding div, but wider).
Something like:
.slider {
width: 362px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
}
.ui-slider .ui-slider-handle {
width:180px;
}
.sliderImg{
background: url(productbrowser_scrollbar_20070622.png) no-repeat;
/*add css to position it correctly here*/
}
EDIT: To answer to your comment, the following correction to the CSS on your page should make that work:
.slider {
/*let the rest as is*/
margin-left: 90px;
}
.ui-slider .ui-slider-handle {
width:180px;
margin-left:-90px;
}
This combination will let it with the same boundaries (-90 + 90 = 0 ) but are going to make it move nicely.
EDIT2:
TO enable the click on the handle, you'll need to specify a height to your handle (otherwise you wouldn't be able to click on it). However this will move your span under the sliding div, to overcome it you'll have to specify their top position (as you already have them in absolute it's easy ;) ).
The following should do.
.handle {
height: 100%;
}
.slider span {
/*let the rest as is*/
top: 0;
}
To make that work above the span, you'll need to change your html a bit like that:
<div class="handle">
<span id="slider-tags" class="slider-lbl1">Our Books</span>
<span id="slider-tags" class="slider-lbl2">Other Books</span>
</div>