Hello there Stackoverflow.
I have a little job for my website i can't figure out on my own.
I have a box on the right, where i want all my sponsors, but instead of making the box really long, i just want a simple "slideshow" where it just fades into a picture, it stays for 3 seconds, and it fades into another picture. They're gonna be 90x90 most of them, however some may be different sizes and that shouldn't screw up.
I have a picture demonstrating, if you didn't get the concept from my poor english.
http://imgur.com/oPausP2
1=The sponsor picture. At this box it should slide between the different sponsors.
thanks in advance!
I use this on my company's home page. Here's a codepen for it. I like using CSS whenever possible and minimize the javascript.
The DOM:
<div class="slides_container">
<div class="slide"><img src="img1.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<div class="slide"><img src="img3.jpg"></div>
<div class="slide"><img src="img4.jpg"></div>
<div class="slide"><img src="img5.jpg"></div>
</div>
The CSS: Use the transition property to fade in and out. (Remember, you need to use vendor prefixes on transition to work with various browsers.)
.slides_container {
height:90px;
width:90px;
overflow:hidden;
position:relative;
}
.slides_container .slide {
position:absolute;
visibility:hidden;
opacity:0;
transition:opacity 1s ease, visibility 0s ease 1s;
}
.slides_container .slide.active {
visibility:visible;
opacity:1;
transition:opacity 1s ease;
}
The Javascript: This can be done without jQuery, but I'll use it here:
jQuery(document).ready(function($){
/*make sure the first element shows up*/
$('.slides_container .slide:first-child').addClass("active");
var active_slide = 0,
dom_slides = $('.slides_container .slide'),
num_slides = dom_slides.length,
myInterval = setInterval(function(){
if(active_slide>(num_slides*5+1))
clearInterval(myInterval);
changeSlide(++active_slide);
},6000);
function changeSlide(slide) {
if((slide = slide%num_slides)<0) slide+=num_slides;
dom_slides.removeClass('active').eq(slide).addClass('active');
}
});
(On my code, I added if(active_slide>(num_slides*5+1)) clearInterval(myInterval); That just stops the rotation after 5 cycles - so it's not just running forever. You can just delete those two lines if you want it to be infinite.)
Okay, explanation:
The CSS will apply visibility:hidden; opacity:0; to all of the .slide DOM elements. On .active state, the opacity transitions from 0 to 1 for 1 second (transition:opacity 1s ease;). Remember when .active state goes away, you need to delay the visibility for 1s so the opacity can transition, hence the visibility 0s ease 1s;.
In the Javascript, num_slides will count the number of .slide DOM elements; That variable will later be used with a modulo (%): slide % num_slides returns a whole number from 0 to the number of slides minus 1. We'll later use jQuery's .eq() method to select each DOM element in turn and apply the .active class to it.
Try something like this, do not forget you need the jquery library. DEMO working jsfiddle example with images from google.
Html:
<img src="" id="current" alt="" />
<ul class="slider">
<li><img src="http://p4.storage.canalblog.com/49/16/976515/75966520.gif" alt="" /></li>
<li><img src="http://www.graycon.com/wp-content/uploads/2013/01/Sponsor-Logos4.jpg" alt="" /></li>
<li><img src="http://forum.mmaglobal.com/files/mobilemarketingforum.com/Image/SponsorFooter_SanDiego_v9_2.jpg" alt="" /></li>
</ul>
Css:
ul.slider { display: none; }
jQuery:
<script src="/libraries/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var idx = 0;
var interval = 3000;
var images = $('ul.slider li img');
setInterval(function(){
idx++;
$('img#current').fadeOut(function () {
$(this).attr('src', $(images[idx%images.length]).attr('src')).fadeIn()
});
}, interval);
});
</script>
I'd recommend you to use a jquery slider. I have experience with jquery.cycle. It has many features and it's easy to install
http://jquery.malsup.com/cycle2/
Related
I am using this code to change from one image to another:
<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />
I need help with the code so I can slow the transition from one image to the next.
The ideal solution to this would be rendering the two images and changing their opacity instead of changing src for the same tag. Something like :
<div id="container">
<img class="bottom" src="hero_image.png" />
<img class="top" src="selfie.svg" />
</div>
Once you are playing with the opacity, the transition effect can be applied using the following CSS :
#container img {
position:absolute;
left:0;
transition: opacity 1s ease-in-out;
}
#container img.top:hover {
opacity:0;
}
I would like to make a Text run from left to right in a loop. Here is the fiddle with my attempt:
https://jsfiddle.net/9Lruxym8/33/
I started with css #keyframes but I think I need the width of the text itself if I want the text to run seamlessly. My idea was to write down the text two times and once the div with the texts has run exactly halfway, the animation starts again.
After #keyframes didn't work, I tried jQuery animation. It did work somewhat but didn't run smoothly. Now I'd like to do it via transition. I thought a combination of intervals and timeouts could do the trick but I still don't get it to work - and now, I don't know why. Does anyone have a hit for me?
function runText() {
var text_width = $('#runningP').width()/2;
console.log(text_width)
setInterval(function(){
console.log("interval");
$('.text').css({'transition':'margin-left 5s'});
$('.text').css({'margin-left':'-' + text_width + 'px'});
moveBack();
}, 3000);
function moveBack() {
console.log("timeout")
setTimeout(function(){
$('.text').css({'transition':'none'});
$('.text').css({'margin-left': 0});
}, 3000);
}
}
runText();
I've recently made a bit of custom code for this functionality.
Looking at my code, it seems a bit much having essentially 3 "levels" (.scrollTextWrap > .scrollingText > .scrollContent) but this was the structure I ended up using to get a clean and consistent effect.
I've added in an initialiser too so that you could simply add the scrollMe class and have them setup the html for you
In the snippet I've added a .parentContainer purely to show how it works when constrained
$(document)
.ready(function(){
// check that scrollingText has 2 scrollContent element
$('.scrollMe')
.each(function(){
initScrollingText($(this));
});
});
function initScrollingText($this){
// store text
var text = $this.text();
// empty element
$this.html(null);
var $wrap = $('<div class="scrollTextWrap" />'),
$text = $('<div class="scrollingText" />'),
$content = $('<div class="scrollContent" />');
// set content value
$content.text(text);
// duplicate content
$text
.append($content)
.append($content.clone());
// append text to wrap
$wrap.append($text)
// add $wrap to DOM
$wrap.insertAfter($this);
// remove old element
$this.remove();
}
/* to simulate width constraints */
.parentContainer {
width: 140px;
position:relative;
overflow:hidden;
}
.scrollTextWrap {
position:relative;
width:auto;
display:inline-block;
}
.scrollingText {
display: flex;
position:relative;
transition:left 0.1s;
animation: scrollText 5s infinite linear;
}
.scrollContent {
white-space: nowrap;
padding-right:5px;
}
#keyframes scrollText {
0% { left:0 }
100% { left:-50% }
}
<div class="parentContainer">
<div class="scrollMe">Content you want to scroll goes here</div>
<!-- alternatively you can just structure the html -->
<div class="scrollTextWrap">
<div class="scrollingText">
<div class="scrollContent">Content you want to scroll goes here</div>
<div class="scrollContent">Content you want to scroll goes here</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
i am quite new to JQuery.
I am working on a slider which shows the image when the thumb is clicked.
Now i have given some data-roles to the thumbs and the full image so that if thumb no.3 is clicked, the full image of data-id 3 is set to opacity 1 and z-index larger.
Somehow, the slider works first time when the thumbs are clicked, but when i click on second time the image is not shown which has same i as thumb.
here is my code
HTML
<div id="sliderContainer">
<!--Filters -->
<ul id="filterList">
<li>All</li>
<li>Objects</li>
<li>Fashion</li>
<li>Nature</li>
</ul>
<span id="titleText">asdsd</span>
<!--Thumbs List-->
<ul id="thumbsList">
<li class="thumbs" data-thumbid="1" data-title="Girl Eating Something"><img src="images/fashion/fashion1Thumb.jpg" /></li>
<li class="thumbs" data-thumbid="2" data-title="Beautiful Face"><img src="images/fashion/fashion2Thumb.jpg" /></li>
<li class="thumbs" data-thumbid="3" data-title="Cinderella"><img src="images/fashion/fashion3Thumb.jpg" /></li>
<li class="thumbs" data-thumbid="4" data-title="Apple Mobile"><img src="images/objects/object1Thumb.jpg" /></li>
<li class="thumbs" data-thumbid="5" data-title="Coke Can"><img src="images/objects/object2Thumb.jpg" /></li>
<li class="thumbs" data-thumbid="6" data-title="Mountains"><img src="images/nature/nature1thumb.jpg" /></li>
</ul>
<img class="productsSliderImage" data-fullimageid="1" src="images/fashion/fashion1Full.jpg" />
<img class="productsSliderImage" data-fullimageid="2" src="images/fashion/fashion2Full.jpg" />
<img class="productsSliderImage" data-fullimageid="3" src="images/fashion/fashion3Full.jpg" />
<img class="productsSliderImage" data-fullimageid="4" src="images/objects/object1Full.jpg" />
<img class="productsSliderImage" data-fullimageid="5" src="images/objects/object2Full.jpg" />
<img class="productsSliderImage" data-fullimageid="6" src="images/nature/nature1Full.jpg" />
<img class="productsSliderImage" data-fullimageid="7" src="images/nature/nature1Full.jpg" />
</div>
and here is my JQUERY
$(document).ready(function () {
$(".productsSliderImage").css('opacity', '0');
});
$(document).ready(function () {
$('.thumbs').click(function () {
var currentThumbId = $(this).attr("data-thumbid"); //grab thumbId of clicked thumb.
//Changing css of the fullscreenImage which is equal to clcked thumb.
//Animation is done using Opacity in css.
$('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').css('z-index', '33');
$('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').css('opacity', '1');
var notClicked = $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').not(this);
notClicked.css('opacity', '1');
notClicked.css('z-index', '1');
});
});
And my Css
.productsSliderImage {
position: absolute;
z-index: 1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
So Basically you can do something like this
.animation
{
blah blah blah
}
then i jquery, you can use something like this onclick()
$('#abc').addClass('animation');
and the same way you can remove class.
thanks
you can always create a class with the properties you wanna add such as z index and opacity rather than writing lengthy code.
you can use addClass() and removeClass() methods to do that.
Read here addClass() Method Info.
Thanks.
Try it like,
CSS
.animate{
zIndex:33;
opacity:1
}
SCRIPT
$('.thumbs').click(function () {
var thumbId = $(this).data("thumbid"); //use data function
// remove class for all products
$('.productsSliderImage').removeClass('animate');
// set current product image class to overlap
$('.productsSliderImage[data-fullImageId="'+thumbId+'"]').addClass('animate');
});
when I try to make a simple transition with pure CSS all works fine.
But when I try to call a javascript-function which modiefies the CSS when clicked on a link, there is no transition. I want to fade in a grey layer.
HTML:
<a href="someImage.jpg" id="test">
<img src="someImage.jpg" alt="" />
</a>
<section id="grey">
</section>
JS:
var grey = document.getElementById("grey");
var link = document.getElementById("test");
link.onclick = function () {
grey.style.display = "block";
grey.style.opacity = "1";
return false;
};
CSS:
section {
display:none;
size and position...
opacity: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 1s .5s;
}
(see http://jsfiddle.net/7zEhx/5/ )
I'm using FF22, does anyone know any solutions?
display: none elements don’t transition, and the display: block hasn’t kicked in before you set the other style. There are horrible hacks like this:
setTimeout(function() {
grey.style.opacity = "1";
}, 0);
But I’d just set width to 0 instead of setting display and then put it back at 100%.
Updated jsFiddle