Develop Reference

How to select a <li> tag using JS

<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>
When the mouse is clicked manually, li border become red, but how to auto click it with JavaScript?

This will do what you want.
In CSS, define .clicked style with red border.
In javascript, add listeners to detect clicks, which then adds the class clicked to the element.
document.querySelectorAll("li").forEach(li => {
li.addEventListener("click", function(event) {
event.target.classList.add("clicked");
});
});
<style>
.sys_spec_text{}
.sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.sys_spec_text li a:hover,
.sys_spec_text li .clicked { border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.sys_spec_text li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(img/sys_item_selected.gif) no-repeat right bottom; z-index:99; display:none;}
.sys_spec_text li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.sys_spec_text li.selected i{ display:block;}
</style>
<ul class="sys_spec_text">
<li >xl<i></i></li>
<li >l<i></i></li>
</ul>

Please make it more clear. As I see from css, you show li border when it hovered. But then you ask about how to make the same with click. So it will lead to the situation when the element got border and further stay with it because there is no event to remove it.
Also you can use :active pseudo-class for anchor element that is the same as click js event.
If you want to immitate hover event you can listen to 'mouseenter'/'mouseleave' events to make the same as you did with css.
let listEls = [...document.querySelectorAll('.link')]
let firstLi = listEls[0]
/* === CLICK SECTION === */
// This is "click" event listener
listEls.forEach(e => {
e.addEventListener('click', event => {
console.log('link is clicked', event)
event.target.classList.add('selected')
})
});
// here we manually trigger "click" event on the first li
firstLi.click()
// The problem is that "selected" class has been added but if there is no method to remove it. Let's fix it
document.addEventListener('click', e => {
console.log(e)
if (!e.target.classList.contains('link')) {
listEls.forEach(el => el.classList.remove('selected'))
}
})
// Now if any li was clicked and has "selected" class, you can click anywhere else to remove it
/* === END CLICK SECTION === */
/* === HOVER SECTION === */
// To se how hover works comment the CLICK SECTION above and uncomment this HOVER SECTION
// DO not forget to comment hover rule for link in css
/*
listEls.forEach(e => {
e.addEventListener('mouseenter', e => {
console.log(e)
e.target.classList.add('selected')
})
});
listEls.forEach(e => {
e.addEventListener('mouseleave', e => {
e.target.classList.remove('selected')
})
});
*/
/* === END HOVER SECTION === */
.sys_spec_text {}
.sys_spec_text li {
float: left;
height: 28px;
position: relative;
margin: 2px 6px 2px 0;
outline: none;
list-style-type: none;
}
.sys_spec_text li a {
color: #db0401;
height: 24px;
padding: 1px 6px;
border: 1px solid #ccc;
background: #fff;
display: inline-block;
line-height: 24px;
}
/* If you want to check mouseenter/mouseleave events comment following block */
.sys_spec_text li a:hover {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
/* OR you can use :active pseudo-class, so then you have to disable js "click" event listener and comment :hover block above */
/*
.sys_spec_text li a:active {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
*/
.sys_spec_text li a.selected {
border: 2px solid #e4393c;
padding: 0 5px;
text-decoration: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
.sys_spec_text li i {
position: absolute;
width: 10px;
height: 10px;
font-size: 0;
line-height: 0;
right: 2px;
bottom: 2px;
background: url(img/sys_item_selected.gif) no-repeat right bottom;
z-index: 99;
display: none;
}
<ul class="sys_spec_text">
<li><a class="link" href="javascript:void(0)" title="xl">xl</a><i></i></li>
<li><a class="link" href="javascript:void(0)" title="l">l</a><i></i></li>
</ul>

Use setInterval() method and check periodically and fire the event accordingly.

odeResponsive Mobile Menu style not working

I'm trying to create a responsive mobile menu that kicks in when the browser width is 885 pixels. It does change from my main navigation to the responsive menu at that width however the correct CSS styling does not kick in until the browser is about 640 pixels wide.
Here is an example: http://www.concept82.com/DIS/menutest.html
The responsive menu does use javascript and I'm not very good with that. I found the menu and script off the internet a few years ago and I'm trying to make it work now. Thanks so much for any help!!
CSS for menu:
/* Responsive Mobile Menu */
.rmm {
display:block;
position:relative;
width:100%;
padding: 20px 0px 0px 0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family: 'Open Sans Condensed', sans-serif;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
/* */
.rmm .rmm-main-list li {
display:inline;
padding:padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/*style*/
.rmm a {
color:#333333;
}
.rmm a:hover {
background-color: #6D0001;
}
.rmm .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm-toggled {
width:100%;
min-height:36px;
background-color:#B30000;
color: #FFFFFF;
}
.rmm-toggled-controls {
display:block;
height:36px;
color:#FFFFFF;
text-align:left;
position:relative;
}
.rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#FFFFFF;
}
.rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#FFFFFF;
width:25px;
}
.rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #930709;
color:#FFFFFF;
background-color: #B30000;
}
.rmm-toggled ul li:first-child a {
border-top:1px solid #930709;
}
/*media queries*/
#media screen and (max-width: 885px) {
#nav {
display: none;
}
#mainnav {
width: 100%;
height: 150px;
}
.rmm {
visibility: visible;
z-index: 2;
}
#logo {
margin-left: 15px;
width: 50%;
float: none;
}
JavaScript for menu:
function responsiveMobileMenu() {
$('.rmm').each(function() {
$(this).children('ul').addClass('rmm-main-list'); // mark main menu list
/* width of menu list (non-toggled) */
var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});
// if modern browser
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
}
//
else {
$(this).css('width' , $width*1.05+'px');
}
});
}
function getMobileMenu() {
/* build toggled dropdown menu list */
$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
function adaptMenu() {
/* toggle menu on resize */
$('.rmm').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.rmm-main-list').hide(0);
$(this).children('.rmm-toggled').show(0);
}
else {
$(this).children('.rmm-main-list').show(0);
$(this).children('.rmm-toggled').hide(0);
}
});
}
$(function() {
responsiveMobileMenu();
getMobileMenu();
adaptMenu();
/* slide down mobile menu on click */
$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("rmm-closed");
}
else {
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}
});
});
/* hide mobile menu on resize */
$(window).resize(function() {
adaptMenu();
});
sorry it's a lot

Move Triangle Arrow Sideways

I have a main menu on the header with links, and i have a triangle that moves as the user hovers from one page to another. I want to keep it moving, but i would like to see the transition showing like on this website: harris-active.co.uk
CSS Code:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}
#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}
#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}
#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}
this is how it is currently showing on my live site: tradey-lb.com

With an html as this:
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
You could use absolute position to place the triangle whatever position like:
.arrow {
position:absolute;
bottom:0px;
left:85px;
}
Then add some classes for each different hover like:
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
And with a easy function, when you hover on your menu you remove any class already there on "Arrow" and then add the position class needed... like:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
Full example:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
$(".m3").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position3");
});
$(".m4").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position4");
});
ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
padding:0;
position:absolute;
bottom:0px;
left:85px;
transition: left 0.3s ease-in-out;
}
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
.position4 {
left:410px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
I was tempted to delete my answer once I saw your rude comment to another user but this may help someone else around so I'll keep it for now. But try ro learn some manners.

.animate() in jQuery and if condition seems to don't work

I'm not an expert in jQuery and I try to create a kind of button-toggle :
When I click on the switch-button "Home/News", the content should switch too.
But that seems to don't work... Despite the if condition, the condition AND the else are executed... I don't get it. Someone can tell me where do I failed ?
Here is the jsfiddle : https://jsfiddle.net/zgLsbw2h/1/
The jQuery :
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
$('.container_slide_actu').animate({
left : 0}, 700);
$('.onoffswitch').removeClass('nothere');
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
$('.onoffswitch').addClass('nothere');
}
});
}
switchButton();
});
Thanks in advance.
**Edit
More explanation (in hope to simplify):
I have two html container. When I click on the button, I want to switch them. By default, I got the container1 ; when I click odd => container2 ; when I click even => container1...
Some screenshots to explain :
-The banner of my website (default => container1 (1 on the screenshot)) and the slideshow (who comes over the banner => container2 (2 on the screenshot)) : http://prntscr.com/dpwxat

The reason for your animation going in and out is because the onclick is running twice. The reason for that is because you targeted the "onoffswitch" class, which you have more than one of. If you target the"#myonoffswitch" instead, it being an id, only targets one thing and will only fire once. I cleaned up your JS a bit too. Check it out, let me know what you think.
$(document).ready(function(){
$('#myonoffswitch').on("click", function(){
if($("#myonoffswitch").is(':checked') == false) {
$('.container_slide_actu').animate({
left : 0}, 700);
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
}
});
});
body{
margin:0;
}
.banner-site{
width:100%;
background-color:white !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-attachment:fixed;
height:350px;
display:flex;
align-items:center;
margin-top:-15px;
transition:all .7s;
position:relative;
border-bottom:1px solid white;
border-top:1px solid white;
overflow:hidden;
}
.banner-site:hover h1{
color:white;
border:2px solid white;
text-shadow:1px 1px 5px rgba(0,0,0,.9);
}
.banner-site:hover h1 a{
color:white;
}
.banner-site a{
color:black;
text-decoration:none;
transition:all .7s;
}
.banner-site .false-hover{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0);
z-index:1;
transition:all .7s;
}
.banner-site h1{
text-align:center;
border:2px solid #161416;
color:#161416;
margin:auto;
padding:10px;
border-radius:2px;
font-family:'Cinzel';
font-size:30px;
font-weight:300;
text-transform:uppercase;
position:relative;
z-index:2;
text-shadow:1px 1px 5px rgba(255,255,255,.9);
transition:all .3s;
}
.banner-site .false-hover:hover{
background-color:rgba(0,0,0,.5);
}
/*On/Off switch | ty https://proto.io/freebies/onoff/ */
.onoffswitch {
position: absolute; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
opacity:.5;/*à voir si on keep*/
right:10px; bottom:15px;
z-index:9999;
display:block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px; text-transform:uppercase;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: 'Oswald', Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Home";
padding-left: 10px;
background-color: #000000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "News";
padding-right: 10px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 25px; margin: 2.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.container_slide_actu{
width:100%;
height:350px;
z-index:999;
position:absolute;
top:0;
left:-100%;
display:block;
}
#mavideo {
top: 0;
left: 0;
width: 100%;
height: 350px;
object-fit:cover;
}
/*look http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<div class="banner-site" style="background-image:url('https://media.senscritique.com/media/000009498078/1200/Lady_Vengeance.jpg')">
<h1><a class="tdn cgrey" href="#" title="Retour à l'accueil de">Play it's evil?</a></h1>
<div class="false-hover"></div>
<!-- Button on/off à replace-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked autocomplete="off">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="container_slide_actu">
<video id="mavideo" controls autoplay muted loop="true">
<source src="" type="video/mp4">
</video>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

I added console.log('has nothere'); and console.log('nothere not present'); only to make sure the if was working and noticed at the beginning that both the if and else conditions were being met on a single click.
Not sure what you are trying to accomplish yet but I moved the add/remove class lines inside an anonymous function to be executed once the animation has been completed.
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
console.log('has nothere');
$('.container_slide_actu').animate({
left : 0}, 700, function() {
// Animation complete.
$('.onoffswitch').removeClass('nothere');
});
}else{
console.log('nothere not present');
$('.container_slide_actu').animate({
left : '-100%'}, 700, function() {
// Animation complete.);
$('.onoffswitch').addClass('nothere');
});
}
});
}
switchButton();
});
Please try and let me know.

Creating slider and slide will not reset position upon sliding left

'use strict';
$(function(){
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider(){
interval = setInterval(function(){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
},pause);
}
function stopSlider(){
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function (){
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
} );
$('#slidebttn .left').on('click', function (){
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
currentSlide--;
if (currentSlide === 0) {
currentSlide = $slides.length;
$slideContainer.css('margin-left', 720);
}
});
} );
});
Ok here is my code I am working with. Everything works fine until I try and slide my slider to the left. It will not repeat back to the right position. As of right now the slide right button works just fine with no problems but it refuses to slide left. Any reason I it might not be sliding left appropriately?

Lets get started!
For your html:
The common practice is to clone the first image after the last and the last before the first so that you can create the illusion of continuous sliding. You forgot to put your last image before your first! (You can use https://api.jquery.com/clone/ i didn't in the fiddle).
So, you need to start from the second slide that's why i added the margin-left:750px in the slides element.
Your CSS: everything its ok.
Your javascript: Please read the comments in the js code.The code could be better but i think its gonna be easier to do it now. If you have any questions don't hesitate to ask!
'use strict';
$(function () {
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $slidesleft = $slideContainer.find('.left');
var $slidesright = $slideContainer.find('.right');
var interval;
function startSlider() {
interval = setInterval(function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
}, pause);
}
function stopSlider() {
clearInterval(interval);
};
$('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
$('#slidebttn .right').on('click', function () {
currentSlide++;
//if this is the last image5 then go to the first image1 and current is slide 2
if (currentSlide == ($slides.length)) {
$slideContainer.css('margin-left', "-" + width + "px");
currentSlide = 2;
}
// Go to the next slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed);
});
$('#slidebttn .left').on('click', function () {
currentSlide--;
// Go to the prev slide as usual
$slideContainer.animate({
'margin-left': "-" + (width * currentSlide) + "px"
}, animationSpeed, function () {
// If you are at the first image5 then go to the last and current slide is slide 6 (slides-2)
if ($slideContainer.css('margin-left') == '0px') {
$slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px")
currentSlide = $slides.length - 2;
}
});
});
});
body {
margin:0px;
}
#font-face {
font-family: speculum;
src: url(font/speculum.tff);
}
.header {
background:#c1d4ff;
margin:15px auto;
text-align:center;
height:300px;
width:relative;
}
.selection {
margin:10px auto;
position:relative;
height:relative;
width:relative;
min-width: 800px;
}
.footer {
margin:25px auto;
text-align:center;
height:150px;
width: 80%;
background: #c1d4ff;
min-width: 400px;
}
.itemlink {
top:75px;
position:relative;
right:228px;
float:left;
}
.itemlink:before {
content:"Link: "
}
.itemprice {
top:95px;
position:relative;
right:340px;
float:left;
}
.itemprice:before {
content:"Price: "
}
.iteminfo {
top:15px;
position:relative;
right:20%;
float:right;
}
.iteminfo:before {
content:"Additional Info:";
text-decoration:underline;
}
.itemcode {
top:55px;
position:relative;
right:147px;
float:left;
}
.itemcode:before {
content:"Item Code: "
}
.itemname {
top:35px;
position:relative;
left:42px;
float:left;
}
.itemname:before {
content:"Name: "
}
#parts img {
border: 3px double #c1d4ff;
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#parts {
height:150px;
margin:0 auto;
width:80%;
background:#ffffff;
}
#parts ul {
list-style: none;
}
#parts ul li {
}
#parts ul li ul {
}
#parts ul li ul li {
}
#main img {
margin-top:20px;
float:left;
height:100px;
width:100px;
}
#main {
padding-bottom:10px;
height:relative;
margin:0 auto;
width:80%;
background:#ffffff;
}
#main ul {
list-style: none;
}
#main .para {
color:#5358e5;
letter-spacing: -4px;
font-family:speculum;
text-align:justify;
padding-top:10px;
margin-right:100px;
position:relative;
left:20px;
}
#main .mainhead {
color:#007e32;
text-align:left;
font-family:speculum;
text-decoration:underline;
font-weight:bold;
font-size: 30px;
}
#sidebar {
border: 1px dashed #ffffff;
z-index:100;
position:fixed;
width:100%;
text-align:center;
background:#3366FF
}
#sidebar ul {
text-align: center;
display: inline;
margin: 0;
padding: 14px 4px 17px 0px;
list-style: none;
}
#sidebar ul li {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #3366FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li.active {
color:#FFFFFF;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #5983FF;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul {
background: #3366FF;
padding: 0;
position: absolute;
top: 48px;
left: 0px;
width: 150px;
padding-right: 4px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
#sidebar ul li ul li {
background: #3366FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li ul li.active {
background: #5983FF;
display: block;
color: #FFFFFF;
}
#sidebar ul li ul li.active:hover {
background: #4775FF;
color: #FFFFFF;
}
#sidebar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#slider {
z-index:1;
float:none;
margin:0 auto;
position:relative;
width:720px;
height:400px;
overflow:hidden;
}
#slider img {
height:400px;
width:720px;
}
#slider .slides {
display:block;
height:400px;
width:6000px;
margin:0;
padding:0;
}
#slider .slide {
float:left;
list-style-type:none;
width:720px;
height:400px;
}
#slidebttn {
z-index:2;
transform:translateY(-400px);
width:800px;
position:relative;
margin:0 auto;
float:none;
height:400px;
}
#slidebttn .left {
position:relative;
margin:0 auto;
float:left;
height:400px;
width:40px;
}
#slidebttn .right {
background: transparent;
cursor:pointer;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
text-shadow: 4px 4px 5px #000000;
font-weight: bold;
line-height: 400px;
text-align: center;
position:relative;
margin:0 auto;
float:right;
height:400px;
width:40px;
}
#slidebttn .right:hover {
text-shadow: 1px 1px 5px #000000;
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75);
}
#slidebttn .right:active {
text-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body style="background-image:url(http://westquesttech.com/images/background.jpg)">
<div id="sidebar">
<ul>
<li class="active"><span>Home</span>
</li>
<li onclick="location.href='philosophy.html';"><span>Philosophy</span>
</li>
<li><span>Shop</span>
<ul>
<li onclick="location.href='shop.html';">Computers</li>
<li onclick="location.href='shop2.html';">Accessories</li>
<li onclick="location.href='shop3.html';">Parts</li>
</ul>
</li>
<li onclick="location.href='contact.html';"><span>Contact</span>
</li>
</ul>
</div>
</br>
</br>
<div class="header">
<img src="http://westquesttech.com/images/westquestlogo.png">
</div>
<div style="height:450px;" class="selection">
<div id="slider">
<ul class="slides" style='margin-left:-720px'>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image2.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image3.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image4.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image5.jpg" />
</li>
<li class="slide">
<img src="http://westquesttech.com/images/image1.jpg" />
</li>
</ul>
</div>
<div id="slidebttn">
<button class="left">
<</button>
<button class="right">></button>
</div>
</div>
<div class="footer"></div>
</html>