I have been trying to move my content div to the left when triggering the menu toggle, ideally without a jump but a push transition. The content div should only slide aside the width of the open sidebar. The following code keeps the sidebar icon always in view, which is what I want, but overlays the content div. What would I need to add to the JQuery function & CSS in order to achieve this?
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
#side {
position:absolute;
right:100%;
width: 50px;
height: 50px;
z-index: 1000000;
color:black;
}
#slidable {
position: fixed;
top:0;
height: 100vh;
background: black;
width: 200px;
left: 100%;
transition: 0.4s;
z-index: 1000000;
color:black;
text-align:center;
font-size:25px;
font-weight: 300;
color:white;
}
#slidable.open{
left: calc(100% - 200px);
}
.fa {
font-size:30px!;
margin-top:25px;
color:black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable">
<div id="side" class="icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
<p>Link 4</p>
<p>Link 5</p>
</div>
</div>
<div id="content">
<p>hallo</p>
</div>
i did add this:
.content {
position: relative;
left: 0;
transition: left 0.4s;
}
.slidable.open + .content{
left: -200px;
}
And i do refactored to use CSS classes as selectors in the Stylesheet.
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
.side {
position: absolute;
right: 100%;
width: 50px;
height: 50px;
z-index: 1000000;
color: black;
}
.slidable {
position: fixed;
top: 0;
height: 100vh;
background: black;
width: 200px;
right: 0;
transition: 0.4s;
z-index: 1000000;
color: black;
text-align: center;
font-size: 25px;
font-weight: 300;
color: white;
}
.slidable.open{
right: 200px;
}
.content {
position: relative;
left: 0;
transition: left 0.4s;
}
.slidable.open + .content{
left: -200px;
}
.fa {
font-size: 30px;
margin-top: 25px;
color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable" class="slidable">
<div id="side" class="side icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
<p>Link 4</p>
<p>Link 5</p>
</div>
</div>
<div id="content" class="content">
<p>hallo, give me just a bit more content here</p>
</div>
Related
Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>
Two divs on my homepage contain nav elements: the .header-nav and the .visualizer.bars nav. For some reason my .header-nav links weren't active, and I've narrowed down the culprit to a single line in my css file: .bars {left:0;}.
When I remove this line, the links in my .header-nav work fine. I have no idea what's linking these two div elements, but I need that line in place for the visualizer effect to work properly.
Everything I've seen in my research indicates a problem with the JavaScript, but unlinking the JS doesn't affect the hrefs so I don't think that's it.
What can I do to keep all links active with the correct styling?
https://jsfiddle.net/vespertron/Leebz05q/
HTML
<header>
<div class="header-left">
<h3>This Is A Site </h3>
<nav class="header-nav">
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="header-right">
<form class="login">
<fieldset>
<input type="text" name="username" tabindex="1" placeholder="Username">
</fieldset>
<fieldset>
<input type="text" name="password" tabindex="2" placeholder="Password">
</fieldset>
<fieldset>
<button type="submit" tabindex="3" value="submit">Login</button>
</fieldset>
</form>
</div>
</header>
<main>
<p class="blurb">stuff that makes me sound like a badass</p>
<div class="visualizer">
<p>What am I up to?</p>
<nav>
<ul class="bars">
<div class="bar">
Link 1
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 2
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 3
<li>
<a href="http://www.dappergrind.com" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 4
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 5
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
</ul>
</nav>
</div>
</main>
<footer>
<span>Copyright © 2018, Entity</span><br />
Privacy
</footer>
<script src="js/script.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
var showWidth = 1;
if(showWidth == 1) {
$(document).ready(function() {
$(window).resize(function() {
var width = $(window).width();
document.getElementById('output_width').innerHTML="Window Width:"+width.toString();
});
});
}
</script>
CSS
html,
body {
background-color: #22201d;
background-image: url(../img/leather.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #b7b7b6;
font-family: 'Playfair Display SC', serif;
}
a {
color: #686766;
text-decoration: none;
}
a:hover {
color: #b7b7b6;
}
a:after {
color: #141311;
}
li {
list-style: none;
}
header {
height: 100px;
letter-spacing: 1em;
}
.header-left {
float: left;
}
form {
float: right;
}
fieldset {
border: 0 none;
}
input[type=text] {
float: right;
color: #686766;
}
.header-nav ul {
clear: both;
}
.header-nav li {
float: left;
}
main p.blurb {
font-size: 2rem;
text-align: center;
letter-spacing: 1em;
}
.visualizer {
text-align: center;
font-weight: bold;
letter-spacing: .5em;
}
.bars {
position: fixed;
top: 30px;
right: 0;
bottom: 75px;
left: 0;
margin: 10px auto;
text-align: center;
overflow: hidden;
}
.bars::before {
content: "";
display: inline-block;
height: 100%;
}
.bar {
position: relative;
display: inline-block;
vertical-align: bottom;
width: 15%;
height: 50%;
min-height: 30px;
background: #800000;
opacity: 0.7;
-moz-opacity: 70%;
-webkit-opacity: 70%;
-webkit-transition: height 0.5s ease-out;
color: #141311;
padding-top: 10px;
font-family: 'Anton', sans-serif;
font-size: 1.75em;
writing-mode: vertical-lr;
text-orientation: upright;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
transition: 0.75s ease-out;
box-shadow: 0px -3px 4px #141311;
}
.bar:hover {
opacity: 1;
-moz-opacity: 100%;
-webkit-opacity: 100%;
color: #b7b7b6;
transition: .25s ease-in-out;
}
.bar:after {
color: #686766;
}
.link-spanner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
footer {
position: fixed;
height: 75px;
width: 100%;
bottom: 0;
text-align: center;
letter-spacing: .2em;
}
I am new in javascript and try to make accordion with jquery but it seems it change the background color of the div and no matter what is the setting of the background color in the css the accordion doesn't seems to respond.
here is the html code
<!doctype html>
<html>
<head>
<title>dreampage </title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
</head>
<body>
<div class="newsbackground">
<div class="newsfeed">
here is the div that I manipulate to become accordion
<div class="fake_background_post">
<h1 class="poster">
<p class="post_text">Share your feeling to us! </p>
</h1>
</div>
<div class="post_panel">
<form action="index.php" method="get" name="post">
<img class="upload_video_and_picture" src="./img/logo/camera.png" />
<p class="upload_video_and_picture_post_text"> <b>Upload Pictures or Video </b> </p>
<textarea placeholder="say something!!!" class="post_content" name="post_content" cols="60%" > </textarea>
<div class="feeling">
<p class="feeling_text">FEELING!!! </p>
<div class="feeling_logo">
<img class="happy" src="./img/logo/happy-ticon.png" />
<img class="excited" src="./img/logo/excited.png" />
<img class="sad" src="./img/logo/sad-ticon.png" />
<img class="mad" src="./img/logo/mad-ticon.png" />
<img class="bored" src="./img/logo/bored-ticon.png" />
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(".post").accordion ({
animate: 1500,
active: 1,
coolapsible: true,
event: "click",
heightstyle: "content",
});
</script>
</body>
</html>
here is the css code
* {margin: 0px;
padding; 0px;
font-family:comic sans ms;
}
.post_content {
border: 1px solid #472b1d;
background-color: #ebe7db;
color: #472b1d;
width: 99%;
}
.post_panel {
position: relative;
top: 10px;
left: 0px;
height: 200px;
width: 87.5%;
background-color: #d2c195;
margin-bottom: 50px;
}
.post_panel img {
position:relative;
width: 30px;
height: 20px;
}
.upload_video_and_picture {
position:relative;
top: 8px;
left: 10px;
}
.upload_video_and_picture_post_text {
position:relative;
top: -20px;
left: 50px;
}
.feeling {
position:relative;
top: 8px;
left: 10px;
}
.feeling img {
position:relative;
top: -21px;
left:100px;
}
this is the the css code where the background color doesn't seems to respond
.post {
position: relative;
top: 20px;
left: 220px;
padding-bottom: -200px;
margin-bottom: 120px;
width: 48%;
background-color: #d2c195;
}
.post > .fake_background_post {
background-color: #d2c195;
}
.post_text {
position: relative;
top: -23px;
left: 110px;
font-size: 70%;
# background-color: #d2c195;
}
.fake_background_post {
position: relative;
width: 100%;
height: 70px;
height: 33px;
left: 0px;
top: 00px;
background-color: #d2c195;
margin-bottom: 10px;
border: 2px solid #472b1d;
border-radius: 20px;
transition: 0.5s;
}
.fake_background_post:hover {
background-color: #472b1d;
color: #d2c195;
}
I have issue ( I think my code is not structured correctly ) with putting my owl carousel arrows exactly in the left and right side of my .container class. I am not sure how to structure it. Right Now it is working because I put them as position absolute but when I resize for small devices my left and right arrow looks so broken. I want to put them im my container which is 1200 px for desktop devices and I want to position them on the left and right side of the container. Here on the example my left and right controll arrows are missing and I do not have any clue why. I checked a lot of similar issues here and all of them are saying that I have to add my owl custom left and right controllers but when i do it via navText: [].... nothing shows on the screen here on the example.
Here is what I have until now. Any ideas ?
// Owl Carousel Slider
$("#slider").owlCarousel({
nav: true, // Show next and prev buttons
dots: true,
slideSpeed: 300,
paginationSpeed: 400,
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsMobile: false,
navText: [
'<img src="https://imgur.com/zTRFaaX" alt="left">',
'<img src="https://imgur.com/zTRFaaX" alt="left">'
]
});
.container {
width: 1200px;
margin: 0 auto;
}
#slider {
position: relative;
}
#slider .item img {
display: block;
width: 100%;
height: auto;
}
.owl-nav {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.owl-dots {
position: absolute;
bottom: 35px;
z-index: 11;
left: 50%;
transform: translateX(-50%);
}
.item div {
position: absolute;
z-index: 11;
top: 60%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: 0 auto;
width: 50%;
}
.owl-title,
.owl-caption {
font-family: "Arial", sans-serif;
font-size: 70px;
color: #fff;
text-transform: uppercase;
}
.owl-text-slider-1 .owl-title {
margin-bottom: 10px;
}
.owl-text-slider-1 .owl-title:before {
content: "";
width: 52px;
display: block;
position: absolute;
top: -4px;
left: 4px;
}
.owl-caption {
font-size: 51px;
text-align: left;
}
.item .arrow-down {
top: 85%;
width: 38px;
height: 22px;
}
.prev_owl,
.next_owl {
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.prev_owl {
top: 50%;
right: 18%;
transform: rotate(180deg);
text-align: center;
}
.next_owl {
top: 50%;
left: 18%;
}
.carousel-caption {
position: absolute;
z-index: 1;
display: table;
width: 100%;
height: 100%;
}
.carousel-caption .slider-content-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.trickcenter {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.carousel-control:hover,
.carousel-control:focus {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<div class="container">
<div id="slider" class="owl-carousel owl-theme">
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080" title="Image" alt="Image">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
</div>
<!-- #slider -->
</div>
JSFiddle
so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.