Change the container background for each slide - javascript

I have a slider with the following structure:
<div class="wrapper">
<div class="slide" id="slide1">
<p>Slide1 Content</p>
</div>
<div class="slide" id="slide2">
<p>Slide1 Content</p>
</div>
</div>
The wrapper width is 100% but the slide divs have a max-width in pixels (ie. 400px).
Is there a way to change the background of wrapper for each slide? I mean for example when the first slide is active, the wrapper background turns to yellow and when the second slide is active, the wrapper background turns to red.
As I know, there is no way to do this using CSS. So is it possible to do it using jquery?
I tried .wrapper:has() selector but it doesn't work the way I expected.
$(document).ready(function() {
if($(".wrapper:has(#slide1)")) {
$(".wrapper").css("background-color","yellow");
} else if($(".wrapper:has(#slide2)")) {
$(".wrapper").css("background-color","red");
}
});
It turns the background to yellow, because the wrapper belongs to both slides.
Do you have any idea how to get it to work the way I want it to?
Note: I'm not the writer of the slider plugin, So I can't change the whole slider codes. I just want to do a few customization to meet my needs.
JSFiddle

Checking the plugin demo with the browser inspector, it looks like when a slide is active, the plugin adds the class active-slide to the slide div.
Also in the documentation shows that in the plugin activation you can configure callbacks to execute on different events (http://jacksbox.de/stuff/jquery-fractionslider/plugin-options-reference/). So put the background color change inside of the corresponding callback. Something like (check all the callbacks, to verify where you want to apply it)...
function setActiveSlideBackground() {
var activeSlideId = $('div.slide.active-slide').attr('id');
if (activeSlideId == 'slide1')
$('div.wrapper').css('background','yellow');
else if (activeSlideId == 'slide2')
$('div.wrapper').css('background','red');
}
$('.slider').fractionSlider({
'nextSlideCallback': function(el,currentSlide,lastSlide,step) {
setActiveSlideBackground();
},
'prevSlideCallback': function(el,currentSlide,lastSlide,step) {
setActiveSlideBackground();
}
});

Related

How to smoothly move the background when toggle between multiple options in Vanilla JS

I have a navigation option. One of the option will always be active by default and will have a background color like this:
When I click on any other option, the background color should animate smoothly and move from previous option to the newly clicked option. I tried to search it but couldn't figure out the correct name of this effect. It should act like a switch but I want to build it for custom use with text written on the handlebar, which isn't possible in switch.
How do I achieve it using Vanilla JS.
Here is my JS fiddle link for what I have done: https://jsfiddle.net/1ex3y94g/1/
Code I use to toggle the background color:
function change(id1,id2) {
document.getElementById(id2).style.background="lightgreen";
document.getElementById(id1).style.background="red";
}
<div class="wrapper">
<div class="bar1" id="bar1" onclick="change('bar1','bar2')">
Option1
</div>
<div class="bar2" id="bar2" onclick="change('bar2','bar1')">
Option2
</div>
</div>
Like this: https://jsfiddle.net/72c5k4ub/19/
The two options are not animated at all. Create a "handle" div which translates from left to right depending on which side has been pressed. This handle just has the background color and no content. It lays behind the actual options (which do not have a background color). The handle does not impact layout (since it is display absolute). For the animation use transforms (for best performance. Not margin) with css animations (transform: translateX(100%)). 100% referes to the width of this element.

Color entire Bootstrap menubar when mobile (hamburger menu) is clicked

I've got a menubar that I want to add some CSS or JS to. I want to make it such that when I click on it when in responsive view, the entire object can be targeted (I plan to do some background styling). I've found some stack overflows re: coloring the menu items, the menu itself, but none of those when applied to the overall menubar either A) work at all B) work only for responsive, which is what I want.
I've made a codepen. I just can't figure out if things like :active or :focus or something else would be the right fit. Hopefully the code pen illustrates what I want. I just cannot seem to target the navbar in it's entirety whether thru JS or CSS. I want to achieve a background effect for not just the dropdown but the row the hamburger lives in when clicked.
You can use Bootstrap's collapse events.
$('.navbar-collapse').on('show.bs.collapse', function () {
// Do your stuff
// This event fires immediately when the show instance method is called.
});
$('.navbar-collapse').on('hide.bs.collapse', function () {
// Do your stuff
// This event is fired immediately when the hide method has been called.
});
CODEPEN
If you add this to your navbar-header div:
<div onClick="clickMe()" class="navbar-header page-scroll">
then add this as a function:
function clickMe(){
if(window.innerWidth < 768){
$('.navbar-header').css('background-color', 'red');
}
}
it will work. you can also do an addClass('className'), and specify the class name like so:
.navbar-header.className{
background-color:red;
}

How to create an interactive (clickable) animation for responsive website?

Anyone have suggestions for object animations that can show text on hover or click?
Looking for something like this on:
Trying to make these crystals into objects to be interactive.
Sample mockup website here.
Surround your animations with a div, then bind to jquery mouseover and mouseout events to add and remove a css class that contains the desired text. Like this:
html:
<div class="crystalDiv">
<!-- This contains an image of a crystal. You can have as many as you want -->
</div>
css:
.crystalHover:after{
content:"Whatever text";
position: absolute;
/* Use top, bottom, left, right to position - it will relative to the crystal div*/
}
javascript:
$('.crystalDiv').on('mouseover',function(e) {
$(this).addClass('crystalHover');
});
$('.crystalDiv').on('mouseout',function(e) {
$(this).removeClass('crystalHover');
});
// You can do the same thing with click event if you want

Animation repeating while hovering on a div

I've read other questions and answers about this issue but they didn't work for me, maybe I am missing something or my example is slightly different, I don't know. Anyway, I have a div with some text and a link inside and I would like to create a new div when the user hovers over this first div. The problem is that, when I am over the first div, the second one fades in and out continuously, even if I don't leave the first div with the mouse.
Here is the HTML code:
<div id="content">
<h1>Portfolio</h1>
<div id="web">
<p>Web apps</p>
<a href="#">
First link
</a>
</div>
<div id="commentweb">
<p>The text that I want to show</p>
</div>
</div>
and this is the jQuery:
$(document).ready(function() {
$("#web").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
$("#commentweb").hide();
$("#web").hover(
function () {
$(this).children("a").children("img").attr("src","2.png");
$(this).css("background-color","#ecf5fb");
$(this).css( 'cursor', 'pointer' );
$(this).css('border','1px solid #378ac4');
$(this).children("p").css("opacity","1.0");
$('#commentweb').stop(true, true).fadeIn();
},
function () {
$(this).children("a").children("img").attr("src","1.png");
$(this).children("p").css("opacity","0.5");
$(this).css("background-color","#e8e3e3");
$(this).css('border','1px solid grey');
$('#commentweb').stop(true, true).fadeOut();
}
);
});
What should I do to have the fade in animation start when I am over #web and the fade out animation when I leave that div, without flickering (i.e. constant fadeIn and fadeOut)?
I have added a fiddle to show you the problem: http://jsfiddle.net/mMB3F/
It basically happens when I hover on the text.
This problem occurs because your comment div is inside the div that you are assigning the hover event. Note that the flickring occurs when you enter the mouse pointer in the highlighted area (red) showed in the image below (related to the comment div).
Take a look in this solution: http://jsfiddle.net/davidbuzatto/mMB3F/1/
The comment div has now a absolute positioning. When the mouse enters, the comment div will be showed next to the pointer. Off course, now you will need to change the code to fit your needs. Another way of doing this is to set an div container that encloses the #web div and to put another div next to it, seting them to float. Inside the new div you insert the div with the comment.
Update
My other answer was a little too grandiose, You just have to float your other div
#commentweb {float:left}
http://jsfiddle.net/mMB3F/5/
It needs to be asynchronous, the stop() is what causes it to blink, but you dont need a stop if you just wait for the fade to complete before you assign the event handlers.
http://jsfiddle.net/u7Q9P/1/
use jquery .mouseenter() and .mouseleave() to avoid that.
that way, you dont have to reposition anything in your css.
see my answer here for more detail

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

Categories