How to make a responsive auto slide for images? - javascript

I am using a responsive bootstrap design on my website and I want to add a section for the current image to automatically rotate. At full screen size, I have the image on the left and text on the right. This all looks fine until bootstrap adjusts the size. The position is absolute and the text element is right on top of the images. When I change the position to relative, it looks fine except the other images display beneath it while it is fading. How can I essentially make the other images load at the same place?
Javascript
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 6000);
</script>
CSS
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
HTML
<div id="home-about">
<div class="container">
<div class="row">
<div id="slideshow" class="col-md-6">
<div>
<img src="img/events/sched1.jpg" class="img-responsive img-shadow">
</div>
<div>
<img src="img/events/sched2.jpg" class="img-responsive img-shadow">
</div>
<div>
<img src="img/events/sched3.jpg" class="img-responsive img-shadow">
</div>
</div>
<div class="col-md-6">
<div class="about-text">
<div class="section-title">
<h4>test</h4>
<h2>hello</h2>
<br>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>

Tries to set a a height to slideshow
#slideshow {
height: 300px;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
position: absolute;
}

Related

How can you convert this single slideshow script to multiple slideshows

I have found this code online which can create a slideshow perfectly fine
https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
Can somebody tell me how to adjust the code so it can work for multiple slideshows?
I have tried many attempts and failed and was hoping someone can work it out.
Thanks
Daniel
Use class instead of id, then loop through the slideshow, ie like this:
$.each($(".slideshow > div:not(:first-child)"), function() {
$(this).hide();
});
setInterval(function() {
$.each($(".slideshow"), function() {
$(this).children().first()
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(this);
});
}, 3000);
.slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow">
<div>
<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
<div class="slideshow">
<div>
<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>
<div class="slideshow">
<div>
<img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
</div>
<div>
<img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
</div>
<div>
Pretty cool eh? This slide is proof the content can be anything.
</div>
</div>

Hide Overflow of multiple IDs

I want to create a web site that contains a network graph. I used vis.js for this. If you hover over an image of a person the image should flip and show some information on the background. I created a JavaScript file that creates a tree out of a json file dynamically. Here is a picture of the result:
As you can see the images are visible outside the box which should not be the case. They should not be displayed outside of the borders.
Here is my html-code:
<div id="fullpage">
<div class="section " id="section0">
...
</div>
<div class="section" id="section1">
...
</div>
<div class="section" id="section2">
<div class="intro">
...
</div>
<div id="media">
...
</div>
</div>
<div class="section active" id="section3">
<div class="slide" id="slide1">
<div id="network_container_1">
<div id="network"></div>
</div>
</div>
<div class="slide active" id="slide2">
<div id="network_container_2">
</div>
</div>
</div>
Here is the CSS:
#network{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#network_container_bewohner{
width: 100%;
height: 100%;
left: 0;
top: 0;
border:1px black solid;
}
#network_container_freunde{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.overlay {
position: absolute;
padding: 4px;
z-index: 0;
}
#slide1{
z-index:0;
}
#slide2{
z-index:1;
}
The images are located as #block1, #block2, #block3, etc. as class overlay inside of #network_container_1.
As you can see I tried to mess around with the z-index but it doesn't work.
Okay I found the solution. The problem was the absolute position.
See here: Position absolute and overflow hidden

Can't center my slider

I have tried many things to center this slider. This includes align="center" style="margin: 0 auto;" style="margin-right: 0 auto; margin-left: 0 auto;". All of these I have tried on the images and slider div too. I am not sure what what the problem is and any help would be very much appreciated. This is my first time posting so sorry if this is not the correct format. Below is the code I am having trouble with
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
#slideshow {
margin: 0px auto;
position: relative;
max-width: 1200px;
height: 720px;
<!-- padding: 10px;
--> box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.ppt img {
margin-left: -50%;
}
.ppt li {
left: 50%;
}
#slideshow > div {
position: absolute;
}
.clear {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div id="slideshow">
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
<div>
<img style="height:719;" src="image.jpg">
</div>
</div>
</div>
Your slideshow is centered. It's the images themselves that aren't centered. You can see evidence of this in this jsfiddle. Centering the images would have more to do with your absolute positioning. You can use left: 50%; transform: translate(-50%, 0); to center the images if that is the goal.
Firstly, bunch of bad practices:
Too many inline
Don't need divs inside the slider. Try a list. Better
code management.
Now to the problem. You can simply use
margin: auto;
for the #slideshow to horizontally centre it.

Javascript to slide invisible div from top of the window

So i've been trying to replicate the functionality of the How it works button of airbnb. I'm new to stackoverflow, so I don't know the policies to link the website.
What I have tried:
My HTML mockup
<div class="how-it-works">
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="pull-right">
<span class="glyphicon glyphicon-remove" ng-click="hideHowItWorks()"></span>
</span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">
<div class="hiw-container hiw-step-one"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-two"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-three"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-four"></div>
</div>
</div>
</div>
</div>
</div>
<div class="main-class">
...some content....
</div>
My CSS:
.how-it-works{
position: absolute
width: 100%
top: -663px
padding-top: 40px
min-height: 663px
}
I'm using JQuery to slide the entire div down instead of using the standard slideDown procedure.
$('.btn').on('click', function(){
$('.how-it-works').css('height', $(window).height());
$('.how-it-works').animate({top: '0px'});
$('.main-class').animate({marginTop: '663px'});
})
If I use this method or the method of slideDown, the frame while sliding, stutters and gives an effect thats far from pleasing. How do I make the effect that's similar to the above mentioned website?
Slide an overlay on canvas from the top. This uses vanilla javascript and css animations. jQuery animations always seems jerky in my opinion.
var overlay = document.getElementById('overlay');
document.getElementById('open').onclick = function() {
overlay.style.top = 0;
}
document.getElementById('close').onclick = function() {
overlay.style.top = '-100%';
}
html, body {
height: 100%;
margin: 0;
}
#overlay {
background: red;
height: 100%;
width: 100%;
position: absolute;
top: -100%;
transition: top 1s ease-in-out;
}
<div id="overlay">
close
</div>
Open

sticky div in page header overlapping page content

I have a "sticky" div that starts in an absolute position and then switches to fixed at top: 0 once the window begins to scroll (I am using it as a navigation bar), but I also have "in-page" links.
My problem is that the sticky overlaps the other content in the body, in other words the top 200px (the size of the navbar) become hidden (beneath the sticky navbar) as soon as they begin to scroll down.
Is this a CSS problem or a JavaScript problem? How can I fix it?
http://jsfiddle.net/b26g1ztu/
javascript:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
HTML:
<!--navigation with logos-->
<div id="sticky-anchor"></div>
<div id=sticky>
<a href="#lccpost">
<img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg">
</a>
</div>
<!--Articles-->
<!--Nav pics-->
<section>
<div id=lcc1>
<a name="lccpost"><img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg"></a>
</div>
</section>
<!--titles-->
<section>
<div id=submissions><h2>Submissions</h2></div>
<!--single submissions-->
<div class=name>
<h3>John Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Shelby%20Schueller.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
<!---->
<div class=name>
<h3>Jane Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Sarah%20Spohn.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
<!---->
<div class=name>
<h3>Jason Doe</h3>
</div>
<div class=subs>
<a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Jeremy%20Kohn.pdf" target=_blank>
<img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
</div>
<div class=judgesub>
<!--<a href="">
<img src="pictures/PDF_Logo.jpg" /></a>-->
</div>
CSS:
body
{
background-color: RGB(95,0,0);
}
#sticky
{
position:absolute;
top:150px;
background-color: RGB(65,0,0);
color:White;
border-style:solid;
border-color:RGB(255,215,0);
padding: 5px;
width: 500px;
height: 150px;
overflow: hidden;
overflow-y: scroll;
}
#sticky.stick {
position: fixed;
top: 0px;
bottom:auto;
z-index: 10000;
}
#lcc1
{
position:absolute;
top: 350px;
left: 20px;
}
#submissions
{
position:absolute;
top: 320px;
left: 240px;
color:White;
}
.name
{
position:relative;
top:400px;
left: 150px;
color:White;
}
.subs
{
display:inline-block;
position:relative;
top: 330px;
left: 270px;
border-style: dashed;
border-color:Red;
padding:5px;
}
I think your problem is a bit JS and a bit CSS.
You're using JS/JQuery to toggle between two CSS classes and essentially toggling between absolute and fixed positioning. Further you are using top to make your decisions in JS, but they evaluate to different values when you are in absolute or fixed positioning.
Finally, i'd recommend that you either (a) just stick with fixed positioning and adjust the location (top/left) onscroll or (b) when you are in .stick mode add padding-top:300px to the body or margin-top:300px on body section:first-child

Categories

Resources