I have created a custom context menu and would like it to be served as a playlist for my project.
However it becomes unclickable over my video frame.
Is this the nature of HTML video tag?
Here's my snippet
<!doctype html>
<html>
<head>
<title>Dee</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body, .container{
height: 100%;
}
body{
font-family: verdana;
font-size: 10px;
}
.container{
background: #f6f6f6;
}
.context-menu {
width: 200px;
height: auto;
box-shadow: 0 0 20px 0 #ccc;
position: absolute;
display: none;
}
.context-menu ul{
list-style: none;
padding: 5px 0 5px 0;
}
.context-menu ul li:not(.separator){
padding: 10px 5px 10px 5px;
border-left: 4px solid transparent;
cursor: pointer;
}
.context-menu ul li:hover{
/*background: #eee;*/
background: #fff;
border-left: 4px solid #666;
}
.separator{
height: 1px;
background: #dedede;
/*background: #fff;*/
margin: 2px 0 2px 0;
}
.videoClass{
background: #fff;
border-color: #fff;
}
</style>
</head>
<body>
<div class="container" oncontextmenu="return showContextMenu(event);">
<div id="contextMenu" class="context-menu">
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li class="separator"></li>
<li>List</li>
</ul>
</div>
<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video>
</div>
<script type="text/javascript">
window.onclick = hideContextMenu;
window.onkeydown = listenKeys;
var contextMenu = document.getElementById('contextMenu');
function showContextMenu(){
contextMenu.style.display = 'block';
contextMenu.style.left = event.clientX + 'px';
contextMenu.style.top = event.clientY + 'px';
return false;
}
function hideContextMenu(){
contextMenu.style.display = 'none';
}
function listenKeys(event){
var keyCode = event.which || event.keyCode;
if (keyCode == 27) { //27 means escape key
hideContextMenu();
}
}
</script>
</body>
</html>
New Answer
I found that an even simpler solution to your problem exists. If you just put the video tag before the context menu, that does the trick:
<video id="myVideo" class="videoClass" controls width="500" src="trailer.mp4"></video>
<div id="contextMenu" class="context-menu">
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
<li class="separator"></li>
<li>List</li>
</ul>
</div>
Original Answer
In my limited experience I haven't loved using z-indexes, so I'll look for another solution, but I put styles of z-index: 1 on video class and z-index: 2 on the context menu class, and that did that trick (in chrome at least, I didn't try any other browsers).
Related
I am a beginner, so appreciate the patience on this one. I am trying to embed a really simple tab structure on my website. I'm not sure why it is not working. Here is the code below.
My guess it is something to do with the JS, but again, I am only really new to this.
Any help would be greatly appreciated! Thanks!
(I have used code found on CodePen for this)
<html lang="en" >
<head>
<script>$(function () {
var activeIndex = $('.active-tab').index(),
$contentlis = $('.tabs-content li'),
$tabslis = $('.tabs li');
// Show content of active tab on loads
$contentlis.eq(activeIndex).show();
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tabslis.removeClass('active-tab');
$current.addClass('active-tab');
$contentlis.hide().eq(index).show();
});
});</script>
<meta charset="UTF-8">
<title>CodePen - Simple tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: none;
position: relative;
color: black;
}
.tabs .active-tab:after {
width: 100%;
height: 2px;
position: absolute;
content: "";
bottom: -0.1em;
left: 0;
background: white;
}
.tabs li {
display: inline-block;
cursor: pointer;
color: #3a5ea7;
padding: 5px 10px;
}
.tabs li:first-child {
margin-left: 10px;
}
.tabs-content {
margin: 20px;
padding: 0;
list-style: none;
}
.tabs-content li {
display: none;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="tabs">
<li class="active-tab">First tab</li>
<li>Second tab</li>
<li>Third tab</li>
</ul>
<ul class="tabs-content">
<li>Content of first tab</li>
<li>Content of second tab</li>
<li>Content of third tab</li>
</ul>
<!-- partial -->
</body>
</html>
There are lots of stuff happening there.
At first sight, you are not using JavaScript, you are using a library called JQuery, so you need to "import" it, otherwise that code won't work.
It must be placed before your JQuery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I would recommend placing the code you've written at the bottom of the page, before the closing body tag
---> HERE
</body>
Improvements:
Separating your code into "modules" or smaller chunks.
Everything inside style tag, cut it and paste it in a new file, for example, style.css.
Everything inside script tag, cut it and paste it in a new file, for example, app.js.
After that import them, the JavaScript file, before the closing body tag, like mentioned before, and the css next to the others styles imports.
So, you'll end up with something like this:
Top of the page, inside head tag
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Bottom of the page, before closing body tag
...
<script src="./app.js"></script>
</body>
You can check which external sources are being used (like JQuery or Bootstrap) by clicking on the settings inside a Codepen environment. This particular script use JQuery, this can be imported in your <head> with a <script> tag using the online hosted version (CDN) or manually downloading it.
You can use this for now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
you can use this code for creating your simple tabs
(function() {
'use strict';
var tabMenus,
tabContents;
tabMenus = document.querySelectorAll('.tab_menu_item_link');
tabContents = document.querySelectorAll('.tab_content');
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].className = 'tab_menu_item_link';
}
this.className = 'tab_menu_item_link is-active';
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className = 'tab_content';
}
document.getElementById(this.dataset.id).className = 'tab_content is-active';
});
}
}());
body {
font-size: 14px;
line-height: 1.5;
color: #333;
}
ul , li {
padding : 0;
margin: 0;
list-style: none
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: bottom;
}
.clearfix {
display: table;
clear: both;
}
.container {
width: 400px;
margin: 0 auto;
padding: 50px 0;
background: #fff;
}
.tab_menu {
width: 100%;
}
.tab_menu_item {
float: left;
margin-right: 2px;
text-align: center;
}
.tab_menu_item:last-child {
margin-right: 0;
}
.tab_menu_item_link {
display: block;
width: 100px;
padding: 10px;
background: #fff;
border-radius: 5px 5px 0 0;
border: 1px solid #888;
border-bottom: none;
box-sizing: border-box;
color: #888;
transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
background: #888;
color: #fff;
}
.tab_container {
border: 1px solid #888;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_content.is-active {
display: block;
-webkit-animation: fade 0.5s ease;
animation: fade 0.5s ease;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">
<div class="tab">
<ul class="tab_menu clearfix">
<li class="tab_menu_item">About</li>
<li class="tab_menu_item">Works</li>
<li class="tab_menu_item">Contact</li>
</ul>
<div class="tab_container">
<div class="tab_content is-active" id="about">
<p>some content about ...</p>
</div>
<div class="tab_content" id="works">
<p>some content works ...</p>
</div>
<div class="tab_content" id="contact">
<p>some content contact ...</p>
</div>
</div>
</div>
</div>
you can see this sample in my codepen:
codepen.io
Alright so, I need to resize an image on click (according to what the user clicks) a selection of 50%, 100%, and 150%. I also need to include a message that tells the user what % the picture is at once it has been scaled.
I think what I have is correct or in the right direction (well obviously not, since it's not working) wondering if anyone can help me out here... this is what I have currently:
<!doctype html>
<html lang="en">
<head>
<title>Change Image Size</title>
<style>
body {width: 80%; margin: auto;}
header {border-bottom: 1px solid #aaa;}
header h1 {font-size: 1.5em;}
nav {float: left; width: 15%; margin: 2% 2%; }
main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
main img {border: 1px black solid;}
nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
</style>
<script>
function init (){
var object = document.getElementById('div1');
document.getElementById('small').onclick = function () {change('div1', '50%')};
document.getElementById('medium').onclick = function () {change('div1', '100%')};
document.getElementById('large').onclick = function () {change('div1', '150%')};
}
function change (id, width){
document.getElementById(id).style.width = width;
document.getElementById(id).style.height = 'auto';
}
window.onload = init;
</script>
</head>
<body>
<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header>
<nav>
<span id="small">50%</span>
<span id="medium">100%</span>
<span id="large">150%</span>
</nav>
<main>
<p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
<div id="div1">
<img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif">
</div>
</main>
</body>
</html>
welp i'm still having issues with this. I need to find out the current size, and then add on to it.... but i'm not sure if i'm doing it correctly... i've changed my code a little, but not even sure if i'm going the right direction. Nothing is changing, and i'm not sure why o.o
<!doctype html>
<html lang="en">
<head>
<title>Change Image Size</title>
<style>
body {width: 80%; margin: auto;}
header {border-bottom: 1px solid #aaa;}
header h1 {font-size: 1.5em;}
nav {float: left; width: 15%; margin: 2% 2%; }
main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
main img {border: 1px black solid;}
nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
</style>
<script>
function init (){
document.getElementById('small').onclick = function () {change('div1',50,50)};
document.getElementById('medium').onclick = function () {change('div1',100,100)};
document.getElementById('large').onclick = function () {change('div1',150,150)};
}
function change(id, y, x){
var img = document.getElementById('div1');
img.style.width = img.offsetWidth + y + "px";
img.style.height = img.offsetHeight + x + "px";
document.getElementById(id).style.width = y;
document.getElementById(id).style.height = x;
}
window.onload = init;
</script>
</head>
<body>
<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header>
<nav>
<span id="small">50%</span>
<span id="medium">100%</span>
<span id="large">150%</span>
</nav>
<main>
<p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
<div id="div1">
<img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif" height="400px" width="400px">
</div>
</main>
</body>
</html>
I have a list of blocks, when I append an image to any element of the list others go down
here is HTML:
<ul class="small_slides">
<li>
<img src="../images/icons/add_2.png" class="open_popup" status="off">
</li>
<li>
<img src="../images/icons/add_2.png" class="open_popup">
</li>
...................
</ul>
here is js code:
function some_event() {
var index = $(this).parent().parent().parent().attr("index");
var small_slides_child = $(".small_slides li:nth-child("+index+")");
$("#main_slide, .small_slides li:nth-child("+index+")").append("<img src='"+src+"' class='img_slide'>");
small_slides_child.css({"border":"1px solid #000000", "box-shadow":"0px 0px 0px 2px #696969"});
small_slides_child.append("<img src='../images/icons/add_2.png' class='add_2'>");
}
and the css code:
.small_slides li {
display: inline-block;
width: 125px;
height: 75px;
border: 3px dashed #808080;
background:#F5F5F5;
text-align: center;
margin-left: 40px;
margin-top: 20px;
cursor: pointer;
}
here it is...
I really can't understand why does it happen, thank you for your help and advices!
Try this:
.small_slides li {
vertical-align:top;
.....
}
I could not find, for the life of me a jQuery less way to accomplish getting the value of the clicked li item and populating the textarea box id="result" with the clicked result.
How can this be done? This seems like rocket science to me.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover{
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
</style>
<script type="text/javascript">
function showMenu(){
document.getElementById("one").style.display="block";
}
function hideMenu(){
document.getElementById("one").style.display="none";
}
</script>
</head>
<body>
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
<br>
<textarea id="result"></textarea>
</body>
</html>
This is my suggestion, though it's not tested in Internet Explorer:
// pick a name that's useful to you:
function textToTextArea (e) {
/* most browsers pass the event object to the function,
IE does, or did, not; here we use the passed-event if it's
available, or the window.event if it's not there (implying IE):
*/
e = e || window.event;
// finding out the text property we can access to retrieve an element's text:
var text = 'textContent' in document ? 'textContent' : 'innerText';
/* getting the textarea by its 'id',
and setting its innerHTML to be equal to the text of the clicked 'li':
*/
document.getElementById('result').innerHTML = e.target[text];
}
var list = document.getElementById('menu');
list.onclick = textToTextArea;
JS Fiddle demo.
Incidentally, in jQuery the above could be abbreviated to:
$('li').click(function(){
$('#result').val($(this).text());
});
JS Fiddle demo.
It's not always the best solution, but it saves a lot of time and handles cross-browser issues very well (saving us from normalizing for the event object); and while you don't (and shouldn't) have to justify not-using jQuery, sometimes it's worth remembering that there are other, more useful, things we can all be doing rather than simply avoiding it for arbitrary (and in this case unspecified) reasons.
DEMO jsFiddle
Description
This is a pure JavaScript answer, it uses the this on each li item. This event binding can be done in the window.onload event with a for loop if you'd prefer. It works on all browsers, the layout looks wrong to me but as that isn't the question I didn't care.
Let me know if you need more assistance.
HTML
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li onclick="itemPicked(this)">Item 1</li>
<li onclick="itemPicked(this)">Item 2</li>
</ul>
</div>
</div>
<div id="two">
<img src="http://realestatecommunities.com/wp-content/uploads/2011/01/blue-arrow-down.jpg" height="20px" width="20px" onclick="showMenu()" />
</div>
<br/>
<textarea id="result"></textarea>
JS
function showMenu() {
document.getElementById("one").style.display = "block";
}
function hideMenu() {
document.getElementById("one").style.display = "none";
}
function itemPicked(el) {
document.getElementById("result").value = el.textContent;
}
CSS
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover {
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
So,i want to make a product viewer kind of a thing having thumbnails which can slide back or front by clicking on the back/front buttons. I dont know why my code isn't working.Heres the code. Please help me out finding issues in it.Thanks!
Html code
<div id="wrapper">
<div id="main-image">
</div>
<div class='main-slider'>
<div class="window">
<div class='slider-large-image'>
<img src='img3.png' height="500" width="960"> </img>
<img src='img2.png' height="500" width="960"> </img>
<img src='img3.png' height="500" width="960"> </img>
<img src='img4.png' height="500" width="960"> </img>
</div>
</div>
<div class='slider-pager'>
‹
›
</div>
</div>
Javascript code
$(document).ready(function() {
var imagewidth = /*$(".window").width()*/960;
var imagesum = /*$(".slider-large-image img").size()*/5;
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
rotatef = function() {
$(".slider-large-image").animate({
left : -imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
left : imagewidth
},500 );
};
$(".slider-pager a#b").click(function() {
rotateb(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
$(".slider-pager a#f").click(function() {
rotatef(); //Trigger rotation immediately
//return false; //Prevent browser jump to link anchor
});
});
CSS
#wrapper
{
margin:0 auto;
}
.main-slider
{
float:left;
position:relative;
margin-bottom:10px;
/*background-color:#CCC;*/
border: 0px solid #000;
top:25px;
left:0px;
z-index:1004;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 0px 0px 30px 1px #999;
-webkit-box-shadow: 0px 0px 30px 1px #999;
box-shadow: 0px 0px 30px 1px #999;
}
.window
{
width: 960px;
height: 500px;
overflow:hidden;
position:relative;
}
.slider-large-image
{
position:absolute;
top:0px;
left:0px;
}
.slider-large-image img {float:left;}
.slider-pager
{
position:absolute;
float:left;
width: 100px;
height: 10px;
background-color:#333;
top:0%;
left:89.5%;
padding-bottom:10px;
padding-right:0;
}
.slider-pager a
{
padding:1px;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:700;
color:#ccc;
margin-right:5px;
width:1px;
height:1px;
position:relative;
top:-10px;
}
.main-slider
{
padding:0px;
color:#FFF;
text-align: center;
line-height: 40px;
font:"Comic Sans MS", cursive;
font-size:20px;
text-decoration:none;
}
.main-slider .slider-pager a:hover
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
color:black;
}
.main-slider .slider-pager a.active
{
background-color:#999;
-moz-border-radius:10px;
border-radius:10px;
}
.main-slider .info-page
{
background-color:#000;
width:600px;
height:50px;
text-align:center;
text-shadow:#666;
font:"28 Days Later";
color:#FFF;
line-height: 40px;
font-size:40px
}
.main-slider .info-page #d:hover
{
color:#FF0;
}
Lets start off with your formatting (that I fixed, btw):
Your first <div id="wrapper"> doesn't get closed!
IMG-tag is self ending! WRONG: <img src=""></img> CORRECT: <img src="" />
Some of your css3-variables are for future browsers and -moz-, but is missing -webkit-!! Example: -moz-border-radius: 10px; border-radius: 10px;
Also, at one point you're using ='' and another ="". Its basically okay, but gets annoying to maintain later and doesn't look very clean! Example: <img src='img3.png' height="200" width="300" />
I did not find any function for <div id="main-image"></div> in your provided code. Next time remove these type of elements when your putting together a question here, as this element is 100% irrelevant to the problem at hand. (Same goes for
and .main-slider .info-page #d:hover {} in your css)
Didn't see any reason, why .main-slider {} should be declared twice in the css (so I merged them, if you do have special purpose, then put it back like it was)
If you are not building some fallback version for some other browser version (like mobile version for example.) Then there is no need to put width="" and height="" variables to your IMG-tag direct. You already had a correct place in css for that: .slider-large-image img {float: left; width:; height:;}
In your css, you have .slider-pager a and .main-slider .slider-pager a:hover. Why add .main-slider in front of .slider-pager a:hover anyway?
If you have same parameters for same variable in css, then use comma to merge them: .slider-pager a:hover, .slider-pager a:active {background-color: #999; -moz-border-radius: 10px; border-radius: 10px;}
Your using position: absolute; too much. I strongly believe, you were meaning to use position: relative;
There was an extra }); at the end of it all. Was the code originally in some function or a plugin?
No such parameter as font, in css!
NOTES:
You didn't provide the images. Next time please google some images, so it would be quicker to help you.
Use sites like jsfiddle.net, to make good examples of your problem. You might be asking: Why should I waste my time on that? We will ask the same question from you, when we are looking at your examples. This will REALLY make things faster for you are for us, on finding quick and valuable solutions.
Your code was so messy, that I cant figure out where the element <div class="slider-pager"></div> must sit? Its obviously inside the general container (on top of the image,) but at the top, bottom or maybe bottom center? I put it bottom center, as it looked the best there )
Removed $(".slider-large-image").css({'width' : imagereelwidth}); and added .slider-large-image, to make it rotate endless times.
I edited so much, that I forgot to update every single step. Anyways, it works. And also its endless now, meaning that there is no end for the carousel.
I wasted about 2 hours on this answer. So basically I was too lazy to compose it in the form of a plugin. Read this and follow those steps, if you want to put it in a plugin form.
If you want to add a function that automatically switches the slides, then use the jQuery doTimeout: Like setTimeout, but better!
I hope you are not taking my answer in a negative form. The community guidelines actually say, that we have to point the newbies to the correct path etc etch. I actually love you man :)
Live demo
http://jsfiddle.net/hobobne/PmXr2/
Full version code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Having trouble making this product slider. Please help? - Kalle H. Väravas answer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
html, body {margin: 0px; padding: 0px;}
html, body, div, th, td, p, a {font-family: "Comic Sans MS", cursive; font-size: 12px; color: #000000;}
.cb {clear: both;}
#wrapper {width: 400px; margin: 0px auto;}
.main-slider {float: left; position: relative; margin-bottom: 10px; border: 0px solid #000; top: 25px; left: 0px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 30px 1px #999; -webkit-box-shadow: 0px 0px 30px 1px #999; box-shadow: 0px 0px 30px 1px #999; padding: 0px; color: #FFF; text-align: center; text-decoration: none; /*background-color: #CCC;*/}
.window {width: 300px; height: 200px; overflow: hidden; position: relative;}
.slider-large-image {position: relative; overflow: hidden; float: left; list-style-type: none; margin: 0px; padding: 0px;}
.slider-large-image li {margin: 0px; padding: 0px; float: left; display: inline-block;}
.slider-large-image li img {float: left; width: 300px; height: 200px;}
.slider-pager {position: relative; z-index: 2; margin: -40px auto 0px;}
.slider-pager a {margin: 0px 2px; padding: 2px; text-align: center; text-decoration: none; font-size: 20px; font-weight: bold; color: #ccc;}
.slider-pager a:hover,
.slider-pager a:active {background-color: #999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.slider-pager a:hover {color: black;}
.slider-pager a.active {/* background-color and border-radius used to be here.. */}
</style>
</head>
<body>
<div id="wrapper">
<div class="main-slider">
<div class="window">
<ul class="slider-large-image">
<li><img src="http://images.sneakhype.com/wp-content/uploads/2010/12/Miley-Cyrus-300x200.jpg" /></li>
<li><img src="http://wa2.www.3news.co.nz/Portals/0-Articles/185340/miley-cyrus_reuters_420.jpg?width=300" /></li>
<li><img src="http://cdn.buzznet.com/media/jjr/headlines/2009/03/miley-cyrus-ryan-seacrest.jpg" /></li>
<li><img src="http://images.smh.com.au/2010/12/29/2112265/miley_cyrus_400-300x200.jpg" /></li>
</ul>
</div>
<div class="slider-pager">‹›</div>
</div>
<br class="cb" />
</div>
<script>
var imagewidth = $('.slider-large-image li').outerWidth();
var imagesum = $('.slider-large-image li img').size();
var imagereelwidth = imagewidth * imagesum;
$(".slider-large-image").css({'width' : imagereelwidth});
$('.slider-large-image li:first').before($('.slider-large-image li:last'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
rotatef = function (imagewidth) {
var left_indent = parseInt($('.slider-large-image').css('left')) - imagewidth;
$('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function() {
$('.slider-large-image li:last').after($('.slider-large-image li:first'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
});
};
rotateb = function (imagewidth) {
var left_indent = parseInt($('.slider-large-image').css('left')) + imagewidth;
$('.slider-large-image:not(:animated)').animate({'left' : left_indent}, 500, function(){
$('.slider-large-image li:first').before($('.slider-large-image li:last'));
$('.slider-large-image').css({'left' : '-' + imagewidth + 'px'});
});
};
$(".slider-pager a#b").click(function () {
rotateb(imagewidth);
return false;
});
$(".slider-pager a#f").click(function () {
rotatef(imagewidth);
return false;
});
</script>
</body>
</html>
Try this:
rotatef = function() {
$(".slider-large-image").animate({
"left" : "-="+imagewidth
},500 );
};
rotateb = function() {
$(".slider-large-image").animate({
"left": "+="+imagewidth
},500 );
};