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>
I am trying to complete my first project and I am new to JavaScript, I'm trying to have a div appear on the page after X amount of seconds and disappear on click and to have it loop, so if some one opens it, the div appears after the timer, on click and it disappears, and it will appear again after the timer again. I've tried #keyframes animations but they only make my div disappear. I am also doing this on codepen, so some answers might not work (I think) . I also have tried using JavaScript but to no avail, so I have been taking lessons on free code camp.org, but it is only teaching me basic JavaScript. Finally I'm gonna post a link to my pen for you guys to check out below. I'll take any constructive criticism,
as it is my first project. Sorry for the multiple edits, I've never asked a community for help before.
body {
background-image: url("https://drive.google.com/uc?export=view&id=1drQkb0PbVE2iJKPIIdt6zk8DYoICjfDQ");
background-attachment:fixed;
background-size:cover;
background-position: center;
background-repeat:no-repeat;
background-color:#000000;
margin:unset !important;
font-family:arial;
}
.fireteam{
font-size:16px;
color:white;
}
#fireteam{
position:absolute;
display:block;
top:-20px;
right:231px;
}
#emblem{
height:72px;
width:321px;
position:absolute;
padding:1px 10px 1px 10px;
right:80px;
top:30px;
border-top: 2px solid white;
background: linear-gradient(304deg, #ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple, #ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple);
background-size: 777% 777%;
-webkit-animation: AnimationName 70s ease infinite;
-moz-animation: AnimationName 70s ease infinite;
animation: AnimationName 70s ease infinite;
}
#-webkit-keyframes AnimationName {
0%{background-position:0% 5%}
50%{background-position:100% 96%}
100%{background-position:0% 5%}
}
#-moz-keyframes AnimationName {
0%{background-position:0% 5%}
50%{background-position:100% 96%}
100%{background-position:0% 5%}
}
#keyframes AnimationName {
0%{background-position:0% 5%}
50%{background-position:100% 96%}
10
}
.user-name{
font-size:21px;
color:white;
font-weight:bold;
}
#user-name{
display:block;
position:relative;
margin-left:65px;
margin-top:6px
}
.power-level {
font-size:25px;
color:yellow;
position:relative;
font-weight:bold;
}
#power-level{
margin:0px 0px 0px 0px;
display:inline-block;
position:absolute;
right:6px;
bottom:42px;
}
.clan-name {
font-size:17px;
color:white;
font-family:italic;
}
#clan-name{
display:inline-block;
position:relative;
margin-top:0px;
margin-left:66px;
}
.ghost {
position:relative;
width:42px;
height:auto;
display:inline-block;
}
#ghost{
display:inline-block;
position:absolute;
top:13px;
left:24px;
}
.pl-icon{
position:relative;
width:10px;
height:auto;
display:inline-block;
}
#pl-icon{
margin:0px 0px 0px 0px;
display:inline-block;
position:absolute;
right:62px;
top:5px;
}
.triangle{
position:relative;
width:30px;
height:auto;
}
#triangle{
padding: 0px 0px 0px 0px;
Display:inline-block;
position:absolute;
top:0px;
left:0px;
}
.jumpship{
height:470px;
width:auto;
}
#jumpship{
display:inline-block;
position:absolute;
left:410px;
top:150px;
z-index:-1;
animation-name: floating;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
#main {
border-top: 9px solid #FF5952;
height:150px;
margin:265px 0 0 0;
width:100%;
pointer-events: none;
z-index:1;
}
#main {
animation: cssAnimation 0s 7s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
#icon-holder {
background-color:#3B4956;
width:35%;
height:150px;
opacity:0.8;
display:inline-block;
}
.point{
position:relative;
width:111px;
height:auto;
float:right;
padding:3px 12px 0 0;
}
#title {
height:75px;
width:65%;
backdrop-filter:blur(4px);
display:inline-block;
position:absolute;
}
#title::before{
content: "";
background-image: url("https://drive.google.com/uc?export=view&id=1lAegDNv9UA3tunXylxrW5Loomz3X2cEA");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity:0.7;
}
.title {
font-size:39px;
color:white;
font-weight:bold;
text-align:left;
position:relative;
display:inline-block;
top:15px;
left:10px;
opacity:1;
padding-left:15px;
}
#message {
height:75px;
width:65%;
position:absolute;
backdrop-filter:blur(4px);
display:inline;
top:349px;
background-size:cover;
}
#message::before{
content: "";
background-image: url("https://drive.google.com/uc?export=view&id=1A38rtfR8GbdVW3R98E6PEQRRlZdBqQ6j");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.7;
}
.message{
font-size:21px;
color:white;
text-align:right;
position:relative;
display:inline-block;
top:18px;
left:10px;
padding-left:15px;
}
#basement {
background-image: url("https://drive.google.com/uc?export=view&id=1wpkpK5n7Msvr4uqMme7Uk55HPOJx05H9");
height:25px;
width:100%;
bottom:3px;
padding:1px;
position:relative;
text-align:left;
}
#basement {
animation: cssAnimation 0s 7s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
.dismiss {
font-size:18px;
color:white;
display:inline-block;
}
#dismiss{
position:relative;
display:inline-block;
bottom:9px;
float:center
}
.icon {
width:42px;
height:auto;
display:inline-block;
float:center;
}
#icon{
display:inline-block;
position:relative;
width:65%;
float:right;
bottom:1px;
}
.director{
font-size:21px;
color:white;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
border-bottom: 2px solid white;
padding:4px 50px 4px 50px;
position:relative;
}
#director{
width:280px;
position:relative;
float:right;
bottom:-130px;
right:-370px;
}
#director::before {
content: "";
background-image:url("https://drive.google.com/uc?export=view&id=1wpkpK5n7Msvr4uqMme7Uk55HPOJx05H9");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.65;
filter:blur(6px);
}
.friends{
font-size:16px;
color:white;
border-right: 1px solid white;
padding:0px 15px 0px 0px;
}
#friends{
width:167px;
position:absolute;
display:inline-block;
float:right;
bottom:20px;
right:285px;
}
.invite{
font-size:16px;
color:white;
}
#invite{
width:150px;
position:absolute;
display:inline-block;
float:right;
bottom:20px;
right:132px;
}
.menu{
font-size:16px;
color:white;
}
#menu{
width:150px;
position:absolute;
display:inline-block;
float:right;
bottom:20px;
right:-2px;
}
.icon2{
width:17px;
height:auto;
display:inline-block;
float:left;
margin-right:10px;
}
.icon3{
width:17px;
height:auto;
display:inline-block;
float:left;
margin-right:7px;
}
.icon4 {
width:17px;
height:auto;
display:inline-block;
float:left;
margin-right:7px;
}
<body>
</script>
<div id="emblem">
<div id="fireteam"> <span class="fireteam">F I R E T E A M</span>
</div>
<div id="triangle"> <img class="triangle" src="https://drive.google.com/uc?export=view&id=1PdfKbElHGA0zYoX3uU97dBMJcQRbLmOf">
</div>
<div id="ghost"> <img class="ghost" src="https://drive.google.com/uc?export=view&id=1imBPZyD5tG5J6zP1OyP0D23c5IvSDT2a">
</div>
<div id="user-name"> <span class="user-name"> prince_of_war04</span>
</div>
<div id="clan-name"> <span class="clan-name">Nerf600autos</span>
</div>
<div id="pl-icon"> <img class="pl-icon" src="https://drive.google.com/uc?export=view&id=1bat6pZthPyIotmXi8dcDfLChVTKYlnZY">
</div>
<div id="power-level"> <span class="power-level">1078</span>
</div>
</div>
<div id="jumpship">
<img class="jumpship" src="https://drive.google.com/uc?export=view&id=1W9RVvJq0NBokWZ3u4L6x1QKbMfH6IJUW">
</div>
<div id="main">
<div id="icon-holder">
<img class="point" src="https://drive.google.com/uc?export=view&id=1X2QpP_a_1-CS8doBZQ9F6Ll-_3llmOsR">
</div>
<div id="title">
<span class="title"> C O N T R O L L E R</span>
</div>
<div id="message">
<span class="message">Your wireless controller is disconnected. Reconnect your wireless controller.</span>
</div>
</div>
<div id="basement">
<div id="icon"> <img class="icon" src="https://drive.google.com/uc?export=view&id=1ZHO3k7CGI_7AxJi2A0-3aMNM1sAXWHN_">
<div id="dismiss"> <span class="dismiss">Dismiss
</span>
</div>
</div>
</div>
<div id="director"> <span class="director"> OPEN DIRECTOR</span>
</div>
<div id="friends"> <span class="friends">69 friends online</span>
<img class="icon4" src="https://drive.google.com/uc?export=view&id=1bb-rA2hDayk1T7kOpVtAkAoXU_32a-bS">
</div>
<div id="invite"> <span class="invite">Invite Friends</span>
<img class="icon2" src="https://drive.google.com/uc?export=view&id=18WUa8u3oToBZVmgFTT3eM_i055M8y81N">
</div>
<div id="menu"> <span class="menu">Menu</span>
<img class="icon3" src="https://drive.google.com/uc?export=view&id=1x0iByNuEzmFjIc8-fb739t44HIya1RAc">
</div>
</body>
I'll take assistance In any form can get, I greatly appreciate the help.
$( document ).on( "click", function(
event ) {
if (!$(event.target).closest("#timer").length) {
$("#somediv").appendTo("#timer");
}
$("#somediv").hide();
});
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++;
}
I am trying to center multiple elements, img and button types, in a div that is fixed to the top of the screen. I have tried all the tricks I could find on the internet but none have worked. I want it to work no matter what the windows' size is.
<div id='FixedMenu'>
<button class='MenuItem'>Home</button>
<button class='MenuItem'>About</button>
<img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
<button class='MenuItem'>Tools</button>
<button class='MenuItem'>Events</button>
<img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>
http://jsfiddle.net/clarinetking/2PGZS/37/
if you add a fake flex/justify-content you can have something close to what you are looking for :
http://jsfiddle.net/2PGZS/45/
#Main {
vertical-align:middle;
height:50px;
width:80px;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
content:'';
display:inline-block;
width:100%;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
height:40px;
width:80px;
vertical-align:middle;
}
#Start {
margin-top:100px;
}
#CloseMenu {
width:70px;
height:70px;
transition: all 1s;
vertical-align:middle;
}
#CloseMenu.opacite {
opacity:0.1;
}
alternative with uparrow always on top right http://jsfiddle.net/2PGZS/46/
Add text-align:center; to your FixedMenu css
http://jsfiddle.net/2aUbv/
There is no need in js here. Pure css.
#Main {
position:relative;
height:50px;
width:80px;
display: inline-block;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:center;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
display: inline-block;
height:40px;
width:80px;
float:top;
}
#Start {
margin-top:100px;
}
#CloseMenu {
position:fixed;
width:80px;
height:80px;
transition: all 1s;
}
#CloseMenu.opacite {
opacity:0.1;
}
#FixedMenu * {
}
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>