I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they are on the opposite ends of the slideshow div
So far I've only gotten them either to display in the top corners of the browser window (Using top: 0; left: 0 and top: 0; right: 0 for the right and left controller id's style formatting) or where the left controller displays where it should, but the right controller displays directly below the left controller rather than on the opposite side of the slideshow div (I did this by changing the right and left controller styles to float in place of the previous formatting that I just mentioned)
I feel like it might have something to do with the styling, but I could be horribly wrong.
Anyone have any ideas?
HTML:
<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
<div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">
<div class="slide">
<h2>Web Development With PHP</h2>
<p><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></p>
</div>
<div class="slide">
<h2>Database Design with MySQL Workbench</h2>
<p><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></p>
</div>
<div class="slide">
<h2>Web Design With CSS and HTML</h2>
<p><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
CSS:
/*
* Slideshow style rules.
*/
#slideShow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideShow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideShow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
/**
* Slideshow controls style rules.
*/
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
float: left;
/*
top: 0;
left: 0;
*/
background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
float: right;
/*
top: 0;
right: 0;
*/
background:transparent url(control_right.jpg) no-repeat 0 0;
}
Javascript (Running in HTML document):
// Insert controls in the DOM
$('#slideShow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
This should work just fine:
#slideshow{
position:relative;
}
#leftControl{
float:none;
top:0;
left:0;
}
#rightControl{
float:none;
top:0;
left:0;
}
of course you dont need to add the float none, you could just simply remove the float:left and float:right that is currently on those elements.
When the controls are positioned with absolute positioning -
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
top: 0;
left: 0;
background:#ff0000;
}
#rightControl {
top: 0;
right: 0;
background:#ffcc00;
}
I am not seeing an error in how it is being displayed. If you look here http://jsfiddle.net/CERFY/ it looks correct. Is there some other markup that could be affecting this, that maybe you had a live example to show?
Related
I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>
I have some modules on my project that are generated dynamically. This basic HTML will work fine as an example of what I want to achieve:
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
My problem is that I don't want this module to ever grow too much vertically, if the web administrator writes a long "description" (I can't limit how much he wants to write as the "description" text will show on other pages).
I found a nice CSS trick to add "ellipsis" to a multiple lines container. Here you can see this "trick" in the .ellipsis (plus the basic CSS):
.container {
background-color: #eee;
width:100px;
margin:20px;
float:left;
}
.image {
border:2px solid #999;
width:100px;
height:60px;
background-color: #fff;
margin-bottom:10px;
}
.end {
border:2px solid #999;
width:100px;
background-color: #fff;
}
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom:10px;
position:relative;
}
.ellipsis:before {
content:"";
float: left;
height:100%;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 20px; margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color:#eee;
}
You can see everything together here: JSFIDDLE
The problem I have is that while ellipsis works fine, I don't want ALL the modules to have a fixed height. I just want to limit the max-height to a fixed size. (Just delete "height: 200px;" from ".ellipsis:before" to see what I want to achieve.)
So, the problem is the .ellipsis:before fixed height. 100% height won't work unless I turn the position to absolute, but then the "ellipsis" trick won't work as the float won't take effect.
Any help with my problem will be greatly appreciated. I don't think there may be a pure CSS solution, (trust me, I have tried) and I'm very bad a JavaScript/jQuery. However, if you have a jQuery solution that may help, I could implement it in the project (and give you nice rep points here :) ). I was thinking something like:
If div.ellipsis > 200px then add height:200px to ellipsis:before
Thanks a lot in advance and please excuse my poor English. Hope the question is clear enough.
There is no need of :before pseudo class. Check this fiddle.
.ellipsis:after {
content:"\02026";
position: absolute; /* removed position: relative */
top: 200px; /* equal to max-height value */
right: 0px;
margin-top: -25px; /* equal to line-height value */
/* other styles */ /* removed float property */
}
Working Fiddle
In the above fiddle, I removed :before pseudo class and set the position of the :after pseudo class to top by 200px which is equal to the given max-height value of the .ellipsis.
and to remove the default upper and lower gaps of the container, I added margin-top: -25px which is equal to the given line-height.
Note: You can apply just top: 175px which is result value of subtraction of given max-height and line-height values.
Here's a simple jQuery solution.
First add a class for when an ellipsis reaches the maximum height, let's call it maxed. Set the :before height for that to 200px:
.ellipsis.maxed:before {
height:200px;
}
Then as you say. you can do some simple jQuery to check the height. If it is the maximum, then add our maxed class to the ellipsis:
$(function() {
$('.container .ellipsis').each(function() {
var $this = $(this);
if($this.height() >= 200) {
$this.addClass('maxed');
}
});
});
Updated fiddle here
You can do it easily with jquery (I assume jquery is an available option in your project).
You just have to
Remove all "ellipsis" class from HTML
Add "ellipsis" whenever needed with JS (= when your content exceeds 200px).
For that, you can use the following :
$('.description').each(function(){
if($(this).height() >= 200 ){
$(this).parent().addClass('ellipsis');
}
});
Working JSfiddle
You can't directly manipulate pseudo elements like :before. What you could do here is add a class for large ellipsis with height: 200px. Then use jQuery to add the new class according to the height.
$(function() {
$('div.ellipsis').each(function (index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
See the code snippet for the full example:
$(function() {
$('div.ellipsis').each(function(index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
.container {
background-color: #eee;
width: 100px;
margin: 20px;
float: left;
}
.image {
border: 2px solid #999;
width: 100px;
height: 60px;
background-color: #fff;
margin-bottom: 10px;
}
.end {
border: 2px solid #999;
width: 100px;
background-color: #fff;
}
/* ellipsis class for small modules */
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom: 10px;
position: relative;
}
.ellipsis:before {
content: "";
float: left;
height: 100%;
width: 5px;
/* height: 200px; */
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 20px;
margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color: #eee;
}
/* ellipsis class for large modules */
.ellipsis-large:before {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class="ellipsis">
<div class="description">and here we have a much longer text to reach the 200px "ellipsis" div to activate the effect made with pure css. a nice discovery from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
</div>
</div>
<div class="end">
buttom
</div>
</div>
please check this:
i am doing responsive web design and i have 100% with image slider. if i re-size my browser slider image height will change.
both slider and navigation wrap in my header, so i need to get header height when i responsive.
and also i need to both (navigation , and slider ) top:0px;
i think you can get some idea what i try to say.
<header>
<nav> <!-- my header main menu goes here --> </nav>
<div class="slider">
<!-- slider images goes here -->
</div>
</header>
<div class="content">
</div>
<footer>
</footer>
do this in css:
html,body{
height:100%;
}
header{
background:blue;
height: 100%;
/*padding-bottom: 120px;*/ //<---remove this
}
nav{
position:relative;
top: 0;
width: 960px;
margin: 0 auto;
z-index: 2;
background: red;
height: 50px;
}
.slider{
width:98%
position:absolute;
top: 0;
margin: 0 auto;
z-index: 1;
background: green;
height: 100%;
}
Try this
So I have a set of 4 divs at the bottom of my page. I intend for the top of these divs to look like tabs, and when the div (tab) is clicked on, that div's height will increase and thus appear like a hidden page is rising from the bottom of the window.
Here is my code so far:
---Css---
tab1 {
float: left;
width: 400px;
height: 100px;
background: red;
position: absolute;
left: 300px;
bottom: 0px;
clear:both;
}
tab2 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 400px;
bottom: 0px;
}
tab3 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: red;
position: absolute;
left: 500px;
bottom: 0px;
}
tab4 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 600px;
bottom: 0px;
}
---HTML---
<tab1></tab1>
<tab2></tab2>
<tab3></tab3>
<tab4></tab4>
---JavaScript---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script>
$('tab1').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab2').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
$('tab3').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab4').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
Here is a jsfiddle to demonstrate what I have http://jsfiddle.net/tkTJr/
I want to allow each div to be 100% of the window width but still enable the others to be clicked. At the moment if I did that I can only click on the one with the lowest z-index because they are overlapping. I was thinking of making the top of each div stick out like a tab to differentiate one from another. Any help in doing so?
Many thanks, I hope some one will know the solution to this problem.
I tried to achieve this using two approaches:
Approach #1: Javascript/jQuery
I went ahead and added functionality that closes the 'active' tab as I call it if the user clicks off of the tab's content or tab. Essentially this just toggles the bottom position of the tab and shows/hides (by way of sliding up/down) each time a user clicks a tab. Here is a live demo of that. If you're not looking to have the added functionality, this fiddle will do just fine for you
Here is the relevant code for the version with increased functionality:
<script> // The most important section for you
$('.tab').click(function (e) {
e.stopPropagation(); // allows the :not to function in the next .click function
var toggleBot = $(this).css('bottom') == "400px" ? "0px" : "400px";
// ^^ Clever way of toggling between two values
$(this).animate({
'bottom': toggleBot // Toggle the value
});
var number = $(this).attr('class').split(' ')[1]; // Get the number to relate to the content
if ($('.active')[0] && number != $('.active').attr('class').split(' ')[1]) {
// This part makes only one content stay open at a time
var number2 = $('.active').attr('class').split(' ')[1];
var toggleBot2 = $('.tab.' + number2).css('bottom') == "0px" ? "400px" : "0px";
$('.tab.' + number2).animate({
'bottom': toggleBot2
});
$('.content.' + number2).slideToggle().toggleClass('active');
}
$('.content.' + number).slideToggle().toggleClass('active');
});
$('.content').click(function(e) { // Again, allows the :not to function correctly below
e.stopPropagation();
});
$('body:not(.tab, .content)').click(function() {
// Allows the 'active' tab to be closed when the anything but a tab/content is clicked
var number2 = $('.active').attr('class').split(' ')[1];
$('.tab.' + number2).animate({
'bottom': '0'
});
$('.content.' + number2).slideToggle().toggleClass('active');
});
</script>
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
border-radius: 10px 10px 0px 0px;
position: absolute; /* !!Important for functionality of tab!! */
bottom: 0px; /* !!Important for functionality of tab!! */
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute; /* !!Important for functionality of content!! */
display:none; /* !!Important for functionality of content!! */
bottom:0; /* !!Important for functionality of content!! */
left:0px;
background:black;
color:white;
height:400px;
width:100%;
z-index:1;
}
/* Just to add some content */
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
</style>
<html> <!-- Note: they are all on the same level -->
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content</div>
<div class='tab one'>Tab 1</div>
<div class='content one'>Content 1!</div>
<div class='tab two'>Tab 2</div>
<div class='content two'>Content 2!</div>
<div class='tab three'>Tab 3</div>
<div class='content three'>Content 3!</div>
<div class='tab four'>Tab 4</div>
<div class='content four'>Content 4!</div>
</body>
</html>
Approach #2: CSS
Before I had toggled width/height with CSS based on <input>s and <label>s. This time I decided to try to make the same tabs using only CSS, so here is my attempt. Essentially it puts a link around the tab and animates it up when clicked and also animates the content's height when clicked. It took a lot less fiddling to complete and I always love complete CSS projects <3 However this approach does not quite achieve the same functionality as the jQuery approach, which is what I was afraid of and made me sad :( The problem is described below in 'Functionality note'
Here is the relevant code for a CSS only approach:
//No javascript, Yay!
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
text-align:center;
border-radius: 10px 10px 0px 0px;
color:black;
position: absolute;
bottom: 0px;
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
#wrapper { /* Allows the tabs to be at the bottom */
position:absolute;
bottom:0;
width:100%;
text-decoration: none;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute;
bottom:0;
left:0px;
background:black;
color:white;
height:0px;
width:100%;
z-index:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp {
display:block;
position:relative;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp:focus {
bottom: 400px;
}
.hideUp:focus + .content {
height:400px;
}
</style>
<html>
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content.</div>
<div id='wrapper'>
<a href="#" tabindex="-1" class="hideUp"> <!-- Allows the CSS to know whether the tab has focus or not -->
<div class="tab one">Tab 1</div>
</a>
<div class="content">Content 1</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab two">Tab 2</div>
</a>
<div class="content">Content 2</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab three">Tab 3</div>
</a>
<div class="content">Content 3</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab four">Tab 4</div>
</a>
<div class="content">Content 4</div>
</div>
</body>
</head>
Usage note: The jQuery approach requires devices be able to run jQuery (of course) and the CSS approach requires that users be on "modern" browsers that allow CSS3 transitions. I didn't include all of the browser tags in my CSS, just the ones for webkit, mozilla, and IE.
Functionality note: The CSS approach I used does not allow user to click the tab to 'close' the content, they must click anywhere else. It also allows the tab to close when the content is clicked, so unless someone finds a work around for it it's only functional for displaying static content like images, text, etc.
One could change the CSS demo to only open/close when the tab itself is clicked by using the checkbox-hack, allowing the content to be selected and such
If you'd like any part of it explained further let me know. I hope I helped!
I have div and i add some images to it to slide show but part of image appear not all image,i change the width and height for image but still probleme what is the reasone this is snippt from my code:
<link href="./CSS/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="./js/js-image-slider.js" type="text/javascript"></script>
<div id="slider" width=100px height=100px>
<img src="./images/Health Care 2.jpg" alt="Health" width: 100px;
height: 100px; />
<img src="./images/war.jpg" alt="War" width: 100px;
height: 100px;/>
<img src="./images/food.jpg" alt="Food" width: 100px;
height: 100px; />
<img src="./images/education-it-hardware-579.jpg" alt="Education" width: 100px;
height: 100px;/>
<img src="./images/sport.jpg" alt="Sport" width: 100px;
height: 100px; />
<img src="/images/technology.jpg" alt="Technology" width: 100px;
height: 100px;/>
</div>
this css:
/* http://www.menucool.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
#ribbon {width:111px;height:111px;position:absolute;top:-4px;left:120px;background:url(ribbon.png) no-repeat;z-index:7;}
#slider {
width: 250px;
height: 170px;/* Make it the same size as your images */
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:460px; left:180px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
You're syntax is wrong.
It's either:
width="100px" height="100px"
or
style="width:100px; height:100px;"
Initially you have to remove both (width and height) as "menucool" scripts smart enough to normalize images, now in the css// he provided you that
/* Make it the same size as your images */ ,,
because if you follow the js you will find that all the animation calculations depends on the width and height ,,
so try to use images with 100px * 100px without manual css and update #slider css
#slider {
width: 100px;
height: 100px;/* Make it the same size as your images */
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
look this is the orginal html you used
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<img src="jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool Image Slider" />
<img src="jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="jsImgSlider/images/image-slider-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="jsImgSlider/images/image-slider-5.jpg" alt="#htmlcaption" />
</div>
</div>