as you can see in the code provided below, I have created a simple jQuery slideshow that runs automatically. But I have ran into a little problem that I cant seem to figure out. When the slideshow runs it goes perfectly, but once it gets to the last image then it just keeps on repeating! How can I prevent this from happening?? The code is below and there is also a link to the images. THANKS!:) P.S- I'm using older jQuery versions because of deprecated functions!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.18.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">Contact</li>
<li>Products</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>Here is just a simple title</h2>
<p>This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>Welcome to</h3>
<p>A dummy website!!</p>
</div>
<div class="latestNews">
<hr>
<h2>Latest News</h2>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. more>></p>
</div>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. more>></p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>Newsletter sign-up</h3>
<hr>
<p>If you would like to sign up for our free NewsLetter please enter your email below</p>
Unsubscribe
</div>
<input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">Submit</div>
</div>
</div>
</div>
</div>
</div>
<!--https://www.freelancer.com/jobs/php/PSD-HTML-page-only-page/-->
</body>
</html>
CSS:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
Javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 500);
$(".slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
Images:
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
Hello you mistake was in the if-statement.
if(count == sc){
count == 1;
}else{
count = count + 1;
}
You wrote
count == 1;
instead of
count = 1;
Common mistake, made it a lot by myself. Hard to track.
This is how your script should look like:
function Slider(){
$(".slider #1").show("fade", 100);
$(".slider #1").delay(1000).hide("slide", {direction:'left'}, 100);
sc = 3;
count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 100);
$(".slider #"+count).delay(1000).hide("slide", {direction:'left'}, 100);
if(count == sc){
count = 1;
}else{
count++;
}
}, 1000);
}
You should start to use you console (nearly all modern browser have one, enable it by pressing F12 (FireFox/Chrome))
How about passing next slide as a parameter to the function?
function Slider(i){
$(".slider #"+i).show("fade", 500);
$(".slider #"+i).delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var netxslide=i+1;
if (nextslide==sc+1){nextslide=1}
setInterval(function(){Slider(nextslide)},6500);
}
if(count == sc){
count == 1;
}else{
count = count + 1;
}
Your first count == 1; should be count = 1;
You're not setting the variable, only calculating TRUE.
Replace with:
if(count == sc){
count = 1;
}else{
count++;
}
Related
I'm a very newbie for javascript and I need help. I cannot handle the issue with position:sticky because of my need.
I want the "right-container" stop scrolling when "second" div is completely in the viewport while scrolling, sorry for the easy question.
Thank you so much!
body {
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
.heads {
font-size: 2vw;
font-weight:bolder;
padding-top:50px;
text-align:center;
}
.first {
height:1800px;
width:600px;
background-color:red;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.second {
height:200px;
width:600px;
background-color:blue;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.container-left {
float:left;
}
.container-right {
float:left;
}
.left {
height:3000px;
width:600px;
background-color:orange;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
<div class="container-left">
<div class="left">
<p class="heads">LEFT</p>
</div>
</div>
<div class="container-right">
<div class="first">
<p class="heads">FIRST</p>
</div>
<div class="second">
<p class="heads">SECOND</p>
</div>
</div>
codepen
I'm not sure if I understood your question but you can use the following properties of an element
element.offsetWidth
element.offsetHeight
element.offsetLeft
element.offsetTop
element.scrollX
element.scrollY
I guess I solved my issue, but there's still a problem, a flickering on the scroll when it comes to "second" div...
function sticktothebottom() {
let h = window.innerHeight;
let window_top = $(window).scrollTop();
let top = $('.dur').offset().top;
let panelh = $(".whole").height();
if (window_top + h > top ) {
$('.whole').addClass('sticky');
$('.dur').height($('.whole').outerHeight());
}
if (window_top + top < panelh ) {
$('.whole').removeClass('sticky');
$('.dur').height(0);
}
}
$(function() {
$(window).scroll(sticktothebottom);
sticktothebottom();
});
body {
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
.heads {
font-size: 2vw;
font-weight:bolder;
padding-top:50px;
text-align:center;
}
.first {
height:1800px;
width:200px;
background-color:red;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.second {
height:200px;
width:200px;
background-color:blue;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.container-left {
float:left;
}
.container-right {
float:left;
}
.left {
height:3000px;
width:200px;
background-color:orange;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.sticky {
margin-top: 0;
position: fixed;
bottom: 0;
z-index: 9999;
}
<div class="container-left">
<div class="left">
<p class="heads">LEFT</p>
</div>
</div>
<div class="container-right">
<div class="whole">
<div class="first">
<p class="heads">FIRST</p>
</div>
<div class="second">
<p class="heads">SECOND</p>
</div>
</div>
<div class="dur"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
So I would like to make this pop-up disappear after 3 seconds. I have tried the delay query that most recommend but I must be doing something wrong because every time I add it in something glitchy starts happening with other parts of my webpage. I am novice when it comes to java.
<script>
$(document).ready(function(){
$("#thover").click(function(){
$(this).fadeOut();
$("#tpopup").fadeOut();
});
$("#tclose").click(function(){
$("#thover").fadeOut();
$("#tpopup").fadeOut();
});
});
</script>
<style type="text/css">
#thover{
position:fixed;
background:#000;
width:100%;
height:100%;
opacity: .6
}
#tpopup{
position:absolute;
width:600px;
height:280px;
background:#fff;
left:50%;
top:97%;
border-radius:5px;
padding:0px 0;
margin-left:-320px; /* width/2 + padding-left */
margin-top:-150px; /* height/2 + padding-top */
text-align:center;
box-shadow:0 0 10px 0 #000;
}
#tclose{
position:absolute;
background:black;
color:white;
right:-15px;
top:-15px;
border-radius:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
font-size:8px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
box-shadow:0 0 10px 0 #000;
}</style>
<div id="thover">
</div>
<div id="tpopup">
<img src="" /><img alt="http://www.raffles-american-school.edu.my/usr/pagesub.aspx?pgid=62" src="/data/cms/images/boarding_pop_up_3(1).jpg" style="width: 600px; height: 280px;" />
<div id="tclose">
X</div>
</div>
I'd create a separate function for this, called closePopup then invoke it in relevant click function along with invoke it when the page has been loaded for 3 seconds.
$(document).ready(function(){
function closePopup(){
$("#thover").fadeOut();
$("#tpopup").fadeOut();
}
$("#thover").click(closePopup);
$("#tclose").click(closePopup);
setTimeout(closePopup,3000);
});
<style type="text/css">
#thover{
position:fixed;
background:#000;
width:100%;
height:100%;
opacity: .6
}
#tpopup{
position:absolute;
width:600px;
height:280px;
background:#fff;
left:50%;
top:97%;
border-radius:5px;
padding:0px 0;
margin-left:-320px; /* width/2 + padding-left */
margin-top:-150px; /* height/2 + padding-top */
text-align:center;
box-shadow:0 0 10px 0 #000;
}
#tclose{
position:absolute;
background:black;
color:white;
right:-15px;
top:-15px;
border-radius:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
font-size:8px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
box-shadow:0 0 10px 0 #000;
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thover">
</div>
<div id="tpopup">
<img src="" /><img alt="http://www.raffles-american-school.edu.my/usr/pagesub.aspx?pgid=62" src="/data/cms/images/boarding_pop_up_3(1).jpg" style="width: 600px; height: 280px;" />
<div id="tclose">
X</div>
</div>
This code will execute after 3 seconds:
setTimeout(function(){
$("#tpopup").fadeOut();
},3000)
Add this code at the end of the script, and it should work:
window.setTimeout(function(){
$("#thover").fadeOut();
$("#tpopup").fadeOut()}, 3000);
I have done a very basic layout for my website. Now the site gets displayed perfect in Chrome, Mozila and Opera as it should be.
But only remaining problem is with IE. Since I have two boxes which sits next to each other in my browser window, the IE just breaks them and place one below another, what I definitely don't want.
How to get rid of this trouble?
[NOTE: I haven't published my site in webserver yet. I am just running it in my localhost]
The following is my complete code:
.PHP:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>My site</h1>
</header>
<nav id="top_menu">
<ul>
<li>Opening Hours</li>
<li>Registration</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<hgroup>
<header>
<h1>Title of article1</h1>
<h2>subTitle of article1</h2>
</header>
</hgroup>
<p>This is a best aricle1</p>
<footer>
<p> Written by...1</p>
</footer>
</article>
<article>
<hgroup>
<header>
<h1>Title of article2</h1>
<h2>subTitle of article2</h2>
</header>
</hgroup>
<p>This is a best aricle2</p>
<footer>
<p> Written by...2</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
Put your news
</aside>
</div>
<footer id="the_footer">
Put your footer
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
/*
text-align:center;
*/
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#top_header{
background:yellow;
border:3px soild gray;
padding:20px;
}
#top_menu{
border:green;
background:gray;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid blue;
width:220px;
margin:20px 0px;
padding:30px;
background:#66CCCC;
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid green;
}
The issue is with the float of the boxes and the display status
Try this, it should work fine..
http://jsfiddle.net/4sdvk8gL/
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
/*
text-align:center;
*/
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#top_header{
background:yellow;
border:3px soild gray;
padding:20px;
}
#top_menu{
border:green;
background:gray;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;f
}
#new_div{
display:block;
display:-moz-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
margin: 20px;
padding: 20px;
float: left;
width: calc(75% - 82px);
}
#side_news{
border: 1px solid blue;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
float: left;
display: block;
width: calc(25% - 62px);
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid green;
}
Alright, I've periodically looked and messed around with this for around 6 weeks and so far have been unable to figure out how to solve this thing. Though I assume it's something small and relatively simple to people with more experience.
Background:
I am starting with a template that had a good js slideshow that I liked and started customizing it. When i got to a certain point I realized I wanted to add a drop-down menu. When I first added the ul sub-menu for the drop-down nothing appeared to happen. After messing with it for some time i created a test page where I only added the drop-down menu to see if the js was effecting it in any way and it worked as expected. I then added only the js in to see if my 0 knowledge of js was effecting it and it worked (no alignment info).
At this point i went back to the original code and it stopped working. so I went online and got some example code to put in that I knew worked and that too didn't work. At one point I started messing with the div tags in the html and was able to get some resemblance of what I was looking for though the content started shifting down sometimes on rollover; other times it would drop the content 100% of the time. I moved to playing with z-index's and no matter what I did that didn't seem to make a difference either.
The question:
What the heck am I not seeing here? All I'm looking for is a drop-down that goes over top of the js slideshow without pushing it down. I'm pretty sure this issue revolves around the fact that there are so many div's to make this layout and they're conflicting somehow. Any help someone could give would be absolutely amazing because I'm going crazy.
Here is the index page with issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mitchell Faherty</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/tms-0.3.js"></script>
<script src="js/tms_presets.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="main">
<h1> Mitchell Faherty <em>Wedding photo / Videos</em> </h1>
</div>
<div class="menu-row">
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_12">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<!--
<ul>
<li>About1</li>
<li>About2</li>
<li>About3</li>
</ul>
-->
<li>Photos</li>
<li>Videos</li>
<li>Links</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li> <img src="images/front-slider/slider-img1.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img2.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img3.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img4.jpg" alt=""> </li>
</ul>
</div>
</div>
</div>
</header>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_3 suffix_3">
<ul class="list-services">
<li><a class="item-1" href=""></a></li>
<li><a class="item-2" href=""></a></li>
<li><a class="item-3" href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
$(window).load(function () {
$('.slider')._TMS({
duration: 1000,
easing: 'easeOutQuint',
preset: 'slideDown',
slideshow: 7000,
banners: false,
pauseOnHover: true,
pagination: true,
pagNums: false
});
});
</script>
</body>
</html>
And here is the CSS:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
/*********************************Global Properties**********************************/
html {
width:100%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#000;
min-width:984px;
background:#f8f8f8
}
.ic {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
#page3 {
min-width:1034px;
}
.main {
width:984px;
padding:0;
margin:0 auto;
font-size:14px;
line-height:25px;
}
a {
color:#f00058;
outline:none;
}
a:hover {
text-decoration:none;
}
.col-1, .col-2 {
float:left;
}
.wrapper {
width:100%;
overflow:hidden;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:18px;
}
.p1 {
margin-bottom:8px;
}
.p2 {
margin-bottom:15px !important;
}
.p3 {
margin-bottom:30px !important;
}
.p4 {
margin-bottom:40px;
}
.p5 {
margin-bottom:50px;
}
.reg {
text-transform:uppercase;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.it {
font-style:italic;
}
.color-1 {
color:#f00058;
}
.color-2 {
color:#7c7c7c;
}
.img-border1 {
float:left;
padding:3px;
background:#fff;
border:1px solid #e5e5e5;
}
.img-border2 {
float:left;
padding:3px;
margin-right:15px;
background:#fff;
border:1px solid #e5e5e5;
}
/*********************************Boxes**********************************/
.indent {
padding:0 15px;
}
.indent-top {
padding-top:5px;
}
.indent-left {
padding-left:30px;
}
.indent-right {
padding-right:35px;
}
.indent-bot {
margin-bottom:20px;
}
.indent-bot2 {
margin-bottom:18px;
}
.indent-bot3 {
margin-bottom:45px;
}
.prev-indent-bot {
margin-bottom:10px;
}
.img-indent-bot {
margin-bottom:25px !important;
}
.margin-bot {
margin-bottom:35px;
}
.img-indent {
float:left;
margin:0 20px 0px 0;
}
.img-indent2 {
float:left;
margin:0 30px 0px 0;
}
.img-indent3 {
float:left;
margin:0 10px 0px 0;
}
.img-indent-r {
float:right;
margin:0 0px 0px 20px;
}
.buttons a:hover {
cursor:pointer;
}
.menu li a, .list-1 li a, .list-2 li a, .link, .button, h1 a {
text-decoration:none;
}
/*********************************header*************************************/
header {
width:100%;
background:#fff;
position:relative;
z-index:2;
}
h1 {
padding:36px 0 0 22px;
position:relative;
overflow:hidden;
margin-bottom:27px;
}
h1 a {
display:block;
width:230px;
height:77px;
text-indent:-9999em;
background:url(../images/wedding-logo.png) 0 0 no-repeat;
float:left;
margin-right:5px;
}
h1 em {
display:inline-block;
font-family: 'PT Sans', sans-serif;
font-size:14px;
font-weight:400;
line-height:2em;
color:#888;
text-transform:uppercase;
padding-top:31px;
}
/*********************************Menu**********************************/
.menu-row {
width:100%;
padding:1px 0 5px;
background:url(../images/menu-row-tail.png) center top repeat-x;
}
#page1 .menu-row {
margin-bottom:22px;
}
.menu {
width:100%;
background:url(../images/menu-spacer.gif) left top no-repeat;
overflow:hidden;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) right top no-repeat;
}
.menu li a {
display:inline-block;
height:60px;
overflow:hidden;
font-family: 'PT Sans', sans-serif;
font-size:17px;
font-weight:400;
line-height:59px;
padding:0 50px;
color:#fff;
text-transform:uppercase;
}
.menu li a.active, .menu > li > a:hover {
background:url(../images/menu-active-tail.gif) 0 0 repeat-x #f00058;
}
/*********************************Drop Down**********************************/
ul#nav {
margin: 0 0 0 200px;
}
ul.drop a {
display:block;
color: #fff;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555; color: #fff;
}
ul.drop {
position: relative;
z-index: 107;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 109;
cursor: default;
background: #1e7c9a;
}
ul.drop ul {
/*visibility: hidden;
position: absolute;
top: 100%;
left: 0; */
display:none;
z-index: 108;
width: 195px;
background: #555;
border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
/*visibility: visible */
display: block;
}
/*********************************Slider**********************************/
.slider-wrapper {
width:745px;
height:540px;
padding:54px 0 0 150px;
background:url(../images/slider-bg.png) 0 0 no-repeat;
overflow:hidden;
}
.slider {
width:690px;
height:460px;
}
.items {
display:none;
}
.pagination {
position:absolute;
left:290px;
bottom:-62px;
z-index:99
}
.pagination li {
float:left;
padding-right:6px;
}
.pagination a {
display:block;
width:24px;
height:24px;
background:url(../images/slider-pagination.png) right top no-repeat;
cursor:pointer;
}
.pagination li.current a {
cursor:default;
}
.pagination li.current a, .pagination a:hover {
background-position:left top;
}
/*********************************Content*************************************/
#content {
width:100%;
padding:35px 0 53px;
background:#fff;
position:relative;
z-index:1;
}
h2 {
font-family: 'PT Sans', sans-serif;
font-size:37px;
font-weight:700;
line-height:1.2em;
color:#000;
margin-bottom:15px;
letter-spacing:-1px;
}
h3 {
font-family: 'PT Sans', sans-serif;
font-size:23px;
font-weight:700;
line-height:2em;
color:#000;
margin-bottom:7px;
}
h6 {
color:#f00058;
}
.tdate-1 {
display:block;
color:#7c7c7c;
font-size:14px;
line-height:20px;
}
.tdate-1 a {
color:#7c7c7c;
}
.border-bot {
width:100%;
padding-bottom:20px;
background:url(../images/pic-4.gif) 0 bottom repeat-x;
}
.q1, .q2, .q3 {
width:100%;
position:relative;
}
.quote-marker1 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-1.png) 0 0 no-repeat;
position:absolute;
top:30px;
left:-1px;
z-index:2;
}
.quote-marker2 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-2.png) 0 0 no-repeat;
position:absolute;
top:30px;
right:0;
z-index:2;
}
.q1 .quote-bot {
padding-bottom:5px;
padding-left:10px;
background:url(../images/quote-bot.jpg) right bottom no-repeat;
position:relative;
z-index:1;
}
.q2 .quote-bot {
padding-bottom:5px;
padding-right:10px;
background:url(../images/quote-bot.jpg) left bottom no-repeat;
position:relative;
z-index:1;
}
.quote-top {
width:100%;
padding-top:5px;
background:url(../images/quote-top.jpg) right top no-repeat;
}
.quote {
width:100%;
overflow:hidden;
color:#7c7c7c;
background:url(../images/quote-tail.jpg) right top repeat-y;
}
.quote .padding {
padding:18px 25px 19px 30px;
}
.q3 {
background:url(../images/pic-3.png) 0 3px no-repeat;
color:#7c7c7c;
font-style:italic;
margin-bottom:17px;
}
.q3 .padding {
padding:0 0 0 35px;
}
/* -- gallery begin --*/
#gallery {
width:1034px;
height:870px;
margin:0 auto;
position:relative;
overflow:hidden;
}
#js {
position:relative;
width:940px;
margin:0 auto;
font-size:14px;
line-height:25px;
}
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
width: 410px;
height: 340px;
overflow: hidden;
}
div.content img {
position: relative;
z-index: 2;
}
div.content a, div.navigation a {
}
div.content a:focus, div.content a:hover, div.content a:active {
}
div.controls {
position:relative;
}
div.controls a {
padding: 0px;
}
div.ss-controls {
float: left;
display:none;
}
div.nav-controls {
width:100%;
height:27px;
position:absolute;
left:0;
bottom:56px;
}
div.nav-controls a.prev {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-prev.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
left:-47px;
z-index:99;
}
div.nav-controls a.next {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-next.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
right:-47px;
z-index:99;
}
div.slideshow-container {
position: relative;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
z-index:1;
width:900px;
margin-right:48px;
float:left;
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
width: 900px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.caption {
width:100%;
height:100%;
}
div.slideshow span.image-wrapper {
display: block;
width: 900px;
height: 600px;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
div.slideshow a.advance-link {
display: block;
width: 900px;
height: 600px;
padding: 3px;
margin: 0;
font-size:0;
line-height:0;
text-decoration:none;
background:#fff;
border:1px solid #e5e5e5;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.download {
float: right;
}
div.caption-container {
float:right;
width: 270px;
height: 620px;
position:relative;
}
span.image-caption {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
z-index:10;
background:#fff;
}
div#thumbs {
padding: 0;
margin:0;
width:100%;
}
ul.thumbs {
padding: 0 0 0 0;
width:100%;
overflow:hidden;
position:relative;
}
ul.thumbs li {
float:left;
margin-right:20px;
width:140px;
}
ul.thumbs li.last {
margin:0;
}
ul.thumbs li span {
display:block;
font-size:15px;
line-height:1.2em;
color:#f9f9f9;
text-transform:uppercase;
font-weight:bold;
}
a.thumb {
display:block;
width:132px;
height:132px;
padding:3px;
background:#fff;
border:1px solid #e5e5e5
}
a.thumb:focus {
outline: none;
}
#controls {
width:100%;
}
div.pagination {
clear: both;
text-align:center;
position:relative;
z-index:10;
}
div.top.pagination {
display:none;
}
div.navigation div.bottom {
display:none;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
padding:0 4px;
font-weight:bold;
color:#fff;
}
div.pagination a:hover {
text-decoration: none;
color:#ffeaa8;
}
div.pagination span.current {
color:#ffeaa8;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
/* -- gallery end --*/
.list-1 li {
line-height:20px;
padding:5px 0 5px 15px;
background:url(../images/marker-1.gif) 0 12px no-repeat;
}
.list-1 li a {
display:inline-block;
color:#7c7c7c;
}
.list-1 li a:hover {
color:#f00058;
text-decoration:underline;
}
.link:hover {
text-decoration:underline;
}
.link-1 {
display:inline-block;
line-height:27px;
padding-left:39px;
background:url(../images/marker-2.gif) 0 0px no-repeat;
}
.link-1:hover {
text-decoration:none;
}
.text-1 {
display:block;
color:#f00058;
}
.text-2 {
display:block;
color:#000;
font-style:normal !important;
}
dl span {
float:left;
width:98px;
font-weight:bold;
}
/*********************************Contact Form**********************************/
#contact-form {
display:block;
width:100%;
}
#contact-form label {
display:block;
height:40px;
overflow:hidden;
}
#contact-form input {
float:left;
width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px 6px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
outline:none;
}
#contact-form textarea {
float:left;
height:339px;
width:490px;
max-height:339px;
max-width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
overflow:auto;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:14px;
line-height:30px;
width:75px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
.buttons {
padding:13px 10px 0 0;
text-align:right;
}
.buttons a {
margin-left:25px;
}
/*********************************Footer**********************************/
footer {
width:100%;
padding:10px 0 10px;
background:url(../images/footer-tail.gif) center top repeat-x;
}
.list-services {
padding:7px 6px 0 0px;
float:right;
}
.list-services li {
float:left;
padding:0 9px 0 0;
}
.list-services a {
display:block;
width:41px;
height:46px;
text-indent:-9999em;
background:url(../images/social-icons.png) 0 0 no-repeat;
}
.list-services .item-2 {
background-position:-50px 0;
}
.list-services .item-3 {
background-position:-100px 0;
}
.footer-text {
text-align:left;
padding:10px 0 0px;
}
.footer-text span {
display:block;
}
try this CSS
<style>
#select-choice-2-button {float:right;}
.ui-header .ui-title {margin-left: auto; margin-right: auto;}
</style>
try this html
<select name="forma" id="select-choice-2" data-native-menu="false" onchange="location = this.options[this.selectedIndex].value;">
<option value="">More</option>
<option value="http://">Help</option>
<option value="http://">Info</option>
How to define that by default there should be shown the content of "submenu11" under ther "menu1"?
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="css3menu1" class="menu">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul>
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
<div id='submenu11'>
<p> Content </p>
</div>
<div id='submenu12'>
<p> Content </p>
</div>
<div id='submenu13'>
<p> Content </p>
</div>
<div id='submenu14'>
<p> Content </p>
</div>
<script>
$('ul.menu').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function() {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
</script>
</body>
CSS stylesheet:
html,body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ffffff;
width: 100%;
margin: 0px auto;
}
p {
margin: 0 0 2em;
}
h1 {
margin: 0;
font:bold 12px Arial;
}
h2 {
margin:0;
color: #55aaff;
font:bold 12px Arial;
}
h3 {
margin:0;
font:normal 10px Arial;
}
h4 {
margin:0;
font:normal 12px Arial;
}
a {
color: #339;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div#header {
padding:1em;
background:#00557f 100% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font:normal 10px Arial;
text-align:right;
color:#b7ddf2;
margin:0;
}
div.scrollbar {
height: 300px;
overflow: auto;
border: solid 1px #000;
padding: 5px;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
padding:1em;
background:#ddd 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#footer p {
font-style:italic;
font-size:1.1em;
margin:0;
}
/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
background-color:#FFFFFF;border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;
padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
display:block;
}
ul#css3menu1 li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
*display:inline;
}
ul#css3menu1>li{
margin:0;
}
* html ul#css3menu1 li a{
display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}
ul#css3menu1 a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 12px Arial;
color:#000000;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:10px;
background-color:#ebf4fb;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#C0C0C0;
}
ul#css3menu1 ul li{
float:none;
margin:10px 0 0;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
background-color:#FFFFFF;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:11px Arial;
color:#000;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#b7ddf2;
border-color:#C0C0C0;
border-style:solid;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
background-position:0 100px;
}
ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:10px;
}
ul#css3menu1 img.over{
display:none;
}
ul#css3menu1 li:hover > a img.def{
display:none;
}
ul#css3menu1 li:hover > a img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.def{
display:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#b7ddf2;
background-position:0 100px;
border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#FFFFFF;
background-image:none;
color:#868686;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */
EDIT1: I included the script and stylesheet.
EDIT2: Please look at the picture. It should clarify the issue.
The problem is in this line:
$active = $links.first().addClass('active');
It takes the first link in your menu and makes it active. Your first <a> tag in the ul with class menu is not the first menu item, but:
<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
So you need to make sure you target the first menu item. You can for example assign an id to it:
<li>SUBMENU11</li>
and then you have to rewrite that line of javascript to:
$active = $('#submenu-default').addClass('active');
That should do the trick. Obviously you can use any other way to locate that link.
EDIT: Maybe even better solution would be to rewrite your html as follows:
<ul id="css3menu1">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul class="menu">
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
This way you don't have to change the javascript, as the first link in the menu now indeed is the first item of the menu. I leave it for you to find out what works best for you.
I guess you want something like this: http://www.cssmenus.co.uk/dropdown.html
If you show an example or drawing we could help you even better.