Fader Differ from Div - javascript

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.

Related

Make html element only visible in one section of page

im looking for this problem the last 2 days but didnt find any solution.
I prepared this jsFiddle for you to show you my exact problem.
How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1.
It works from section 2 into section 3 but i cant find a solution to place it behind section 1.
JsFiddle Demo
h2 {
margin: 0;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 1;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
I added this CSS:
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
No background on section1 allowed the element to be seen through div.section1
h2 {
margin: 0;
}
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 100;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
fiddle

CSS modal images

I need some help when showing an image in a modal, I want the image to scale up and down maintaining its ratio.
If the image is smaller than the window then show it all
If the image is larger than the window enlarge it as much as possible to fill the window maintaining scale (no scrolling)
Also I'd like to have the body of the website darker and unable to scroll when a modal is opened, but I can't figure how to do so. Here's my HTML and CSS code (I know it doesn't work well when on small resolutions but it's not my requirement for now):
html, body {
width: 100%;
height: 100%;
margin: 0;
}
h1, h4{
color:#0B486B;
}
#container {
margin: 0;
padding: 0 3% 0 3%;
width: 100%;
height: 100%;
background-color: #E0E4CC;
}
#footer {
text-align: center;
padding: 10px;
width: 100%;
height: 100px;
background-color: #E0E4CC;
}
#sidebar {
padding-top: 10%;
height: 100%;
background-color: #69D2E7;
text-align: center;
}
#btngroup {
padding-top: 20%;
}
#grid {
padding: 0 2% 2% 2%;
height: 100%;
background-color: #A7DBD8;
}
#gridrow {
padding: 3% 0 0 0;
height:50%;
}
#gridcol {
height:100%;
position: relative;
}
img {
opacity: 1;
cursor: pointer;
max-width: 92%;
max-height: 92%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img:hover {
opacity: 0.8;
}
#myModal {
display: none;
}
#modalDialog {
margin: auto;
}
#modalContent {
height: 100%;
width: 100%;
}
#modalBody {
padding:3px;
}
#imgModal {
max-width: 100%;
max-height: 100%;
cursor: default;
opacity: 1;
position: relative;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyBootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="row">
<div id="sidebar" class="col-md-3 sidenav">
<h1>HELLO<br>WORLD</h1>
<ul id="btngroup" class="nav nav-stacked">
<li><h4>Pictures</h4></li>
<li><h4>Music</h4></li>
<li><h4>About me</h4></li>
</ul><br>
</div>
<div id="grid" class="col-md-9">
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://www.avionslegendaires.net/wp-content/uploads/images/dossier/F-15-leurre-thermique.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://www.w3schools.com/css/img_fjords.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://img.171u.com/image/1609/2607005498770.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="http://www.tappingforabundance.com/wp-content/uploads/slider1.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" onclick="this.style.display='none'">
<div id="modalDialog" class="modal-dialog">
<!-- Modal content-->
<div id="modalContent" class="modal-content" style="background-color:#000000">
<div id="modalBody" class="modal-body">
<img id="imgModal" class="img-rounded" />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("imgModal").src = element.src;
document.getElementById("myModal").style.display = "flex";
}
</script>
</body>
</html>
.doNotScroll{
overflow: hidden;
height: 100%;
}
....
$(document).on('click', '.img-rounded', function(){
$('BODY, HTML').addClass('doNotScroll');
})
...
$(document).on('click', '#myModal', function(){
$('BODY, HTML').removeClass('doNotScroll');
})
disable scrolling Body:
BODY,HTML{
overflow: hidden;
height: 100%;
}
For dark Background place a div directly in body:
DIV.cover.inactiv{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10 // play with it
}
DIV.cover.activ{
display: block;
}

How to position text inside an image in css

How do I add text in the left border of the image?
css:
.container {
position: relative;
width: 100%;
}
.summary-screen .thumbnail {
height: 100%;
width: 100%;
margin: auto;
border: 1px solid #cbcbcb;
display: block;
margin-top: 109px;
position: relative;
}
.summary-screen .primary-text {
background:lightblue;
height: 5%;
opacity: 0.5;
position: absolute;
top: 85%;
/* width: 80%; */
text-align: left;
font-size: 20px;
color: black;
}
html:
<div class="summary-screen">
<div class="container">
<div layout="row" layout-align="center">
<md-content>
<img ng-show="$ctrl.package.image" flex="85" class="thumbnail" ng-src="{{ $ctrl.package.image }}" />
</md-content>
</div>
<div layout="row" layout-align="left">
<h4 class="primary-text" flex style="text-align: left;">{{ $ctrl.package.name }}</h4>
</div>
</div>
</div>
this is how it works now ( its too much left as u can see, i want it exactly at the right place and i want that the background will be along all the pic to the right
When you wrap your text and image you're able to "stick" the text to the bottom.
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container_relative {
position: relative;
width: 100%;
max-width: 500px;
}
.container_relative .text {
position: absolute;
bottom: 0;
background-color: rgba(0,0,255,0.5);
width: 100%;
}
.container_relative img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container_relative">
<img src="https://dummyimage.com/500x400/c9c9c9/00000">
<div class="text">
<p>Lorem Ipsum</p>
</div>
</div>
</body>
</html>

jquery cycle allow overlay

I have created two snippets to show what I'm trying to do.
Here's the first one where the top left box holds a single image. The bottom right box has an image that overflows the box from right to left.
#one{
height: 200px;
background-color: red;
float: left;
}
#two{
height: 100px;
background-color: pink;
}
#three{
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
.row{
display: inline-block;
width: 200px;
margin: 0px;
padding: 0px;
}
#wrapper{
max-width: 500px;
}
<div id="wrapper">
<div class="row" id="one">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
</div>
<div class="row" id="two"> </div>
<div class="row" id="three">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
</div>
</div>
Here's the second snippet where the top left box holds two images that are cycled using the jquery cycle plugin. I can't seem to get the image that is in the lower right to appear in front of the slideshow.
Does anyone know how to make this happen?
jQuery(document).ready(function () {
jQuery('#one').cycle({
containerResize: 0,
fx: 'fade',
timeout: 1500,
});
});
#one {
height: 200px;
background-color: red;
float: left;
}
#two {
height: 100px;
background-color: pink;
}
#three {
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}
#wrapper{
max-width: 500px;
}
.row {
display: inline-block;
width: 200px;
margin: 0px;
padding: 0px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<div id="wrapper">
<div class="row" id="one">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Emoji_u1f532.svg" height="200px" width="200px">
</div>
<div class="row" id="two"> </div>
<div class="row" id="three">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
</div>
</div>
You just need to set your div position to relative and give it a high enough z-index, like this:
#three {
position: relative;
z-index: 10;
height: 100px;
background-color: blue;
overflow: visible;
direction: rtl;
}

Horizontal scrolling side by side <div> tags with set height [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I have a long list of <div> tags that I want to stack side by side without any vertical scrolling. I want them to stack horizontally like a slider.
An example is the parent container has a height of 500px, and there are 25 Divs that are 500x500 squares that will sit side by side and scroll horizontally.
I'm trying to create a slider that will sit at the top of a webpage and scroll continuously.
Thanks!
----- EDIT 8/24/15 #2:22pm -----
What I have so far is :
<style type="text/css">
div.table {display:table; width:100%;}
div.table-row {display:table-row;}
div.table-cell {display:table-cell; width:500px; height:500px; margin:0px 5px; background:#1996e6; color:#fff;}
</style>
<div class="table">
<div class="table-row">
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
<div class="table-cell">Content</div>
</div>
</div>
Something like this?
CSS
#container {
overflow-x: scroll;
white-space: nowrap;
}
.child {
display: inline-block;
width: 500px;
height: 500px;
border: 1px solid black;
}
HTML
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
https://jsfiddle.net/0bgqgkbL/
You can play with the size of the container but all you have to do is add the images (captions optional) http://jsfiddle.net/b7so9870/
$(document).ready(function() {
$('#rotator > a.arrow.left').click(function(e) {
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').first().animate({
marginLeft: "-=310px"
}, function() {
$(this).appendTo(rotator).removeAttr("style");
});
});
$('#rotator > a.arrow.right').click(function(e) {
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({
marginLeft: "0"
});
});
});
#rotator {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
position: relative;
}
#rotator .images {
width: 100%;
position: relative;
z-index: -5;
}
#rotator a.arrow {
width: 18px;
height: 41px;
display: block;
text-indent: -50000em;
position: absolute;
top: 220px;
z-index: 50;
}
#rotator a.arrow.left {
left: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_left.png");
background-size: contain;
background-repeat: no-repeat;
}
#rotator a.arrow.right {
right: 0; background-image:url("http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png");
background-size: contain;
background-repeat: no-repeat;
}
#rotator .images .imageHolder {
width: 500px;
float: left;
height: 500px;
position: relative;
}
#rotator .images .imageHolder span {
width: 480px;
margin: 10px;
color: #FFF;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
z-index: -3;
}
#rotator .images .imageHolder img {
width: 500px;
height: 500px;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="rotator">
<div class="images">
<div class="imageHolder">
<span>Daisies</span>
<img src="http://www.rachelgallen.com/images/daisies.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Whole choir</span>
<img src="http://www.musicmatters.ie/images/bara2.jpg" />
</div>
<div class="imageHolder">
<span>Choir</span>
<img src="http://www.musicmatters.ie/images/bara4.jpg" alt="" />
</div>
</div>
<a href="#" class="arrow right">
<img src="http://findicons.com/files/icons/2166/oxygen/48/arrow_right.png">
</a>
</div>
</body>

Categories

Resources