fadein fadeout jquery on mouse-over - javascript

I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle

You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.

I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here

Related

div position should remain fixed after scroll

My exact question is related to using skrollr js like plugin.
I have features section with image and its features.Features are in list-items div and image is in another div.These two divisions are col-sm-6 side by side.
What I exactly trying to do is just to fix the position the image division exactly at center after it is scrolled into view-port center.So that if someone scroll-down to view the image, it should remain fixed after its center touches view-port center.While image remains fixed, list items should be scrolled.
Image position will become again static and scrolled with content after last list-items goes out of the view-port. So any suggestion...
Here is the code
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<ul class='featuresnav'>
<li>Graphically Rich</li>
<li>Fully Adaptable</li>
<li>Colors used</li>
<li>UI/UX Compatible</li>
<li>Awesome coding</li>
</ul>
</div>
<div class='col-sm-6'>
<img src='images/mobile_tablet.png' alt="display image"/>
</div>
</div> <!--row ends-->
</div> <!--container ends-->
$(document).ready(function(){
$(window).scroll(function(){
if(($(window).scrollTop())>($('#content').offset().top+$('#content').innerHeight())) {
$('#divv').css({'position':'fixed','top':$(window).outerHeight()/2});
}
else{
$('#divv').css({'position':'relative'});
}
})
})
#content-initial{
margin-top:1500px;
}
#divv{
width:100px;
height:100px;
background:green;
}
#content{position:relative;}
#somemorecontent{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-initial"></div>
<div id="content">
<ul>
<li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<div id="divv"></div>
<div id="somemorecontent"></div>

Use JQuery to auto slide between images - with my html

I have this html code:
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide">
<img src="images/image1.jpg">
</div>
<div class="slide">
<img src="images/image2.jpg">
</div>
<div class="slide">
<img src="images/image3.jpg">
</div>
</div>
</div>
After every div with class slide there's the img as you can see above.
Using jquery, how can I get it to auto slide between images?
You can use setInterval() to cycle through the slides.
Set it so after x time move to the next slide
The snippet below isn't functioning completely properly, but it gives you a general idea
$(document).ready(function(){
window.setInterval(nextSlide, 1000);
});
function nextSlide() {
var $cur = $('.slide.active');
var $next = $cur.next();
if(!$next) $next = $('.slide-group').children()[0];
console.log($next);
$cur.removeClass('active');
$next.addClass('active');
}
.slide {
display: none;
}
.slide.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide active">
SLIDE 1
</div>
<div class="slide">
SLIDE 2
</div>
<div class="slide">
SLIDE 3
</div>
</div>
</div>
Jon Raasch's simple jquery slideshow is the absolute classic, in my opinion. I've seen it used on many sites.
http://jonraasch.com/blog/a-simple-jquery-slideshow
His example uses a fade, but you can change it to a slide or even Ken Burns it easily enough.
http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/
is just one example of tutorials for image scrollers using jquery.
Just google "jquery image scroller" then if you have further issues come back and see us :)

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/

using z-index in correct way

I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>​
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});​
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.

Change title in span tag based on div name

I have a bit of a problem I cant figure out.
I have a slideshow on my page using jquery.
<div id="carousel">
<div id="round">
<div class="box box-sec">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box box-easy">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box competitive">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box personal">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box business">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="box affiliate">
<img class="carousel-image" alt="Image Caption" src="_includes/images/carousel/sample1.jpg">
<div class="carousel-caption">
<p>
Peace of Mind <span>at the best rate possible...</span>
Click here for more
</p>
</div>
</div>
<div class="arrows">
<div class="next"><span>Test</span><img src="_includes/images/icons/rarr.png" /></div>
<div class="prev"><span>Test</span><img src="_includes/images/icons/larr.png" /></div>
</div>
</div>
</div>
</div>
only 1 slide is active at a time, I want to somehow find the name of the next div, and write that into the "Test" span tags so that it shows up on hover and if clicked the span tag will then get the name of the next div and update itself, does this make sense? thanks
ADDED FIDDLE
http://jsfiddle.net/TNRMk/
Ive tried this with no luck
$('.arrows').click(function() {
$(".next span").html($('.roundabout-in-focus').next().attr('name'));
$(".prev span").html($('.roundabout-in-focus').prev().attr('name'));
});
Here is a good start for you:
$("div.arrows div").bind("mouseover", function() {
$("div.arrows div.next").children("span").text($("div.roundabout-in-focus").next("div").attr("class"));
$("div.arrows div.prev").children("span").text($("div.roundabout-in-focus").prev("div").attr("class"));
});
A number of points to be made:
This will not work for the prev arrow when the first item is selected.
I wasn't sure which part of the class name you wanted so you will need to do some modification
It needs to be on hover, or in the plugin itself as there are other ways to control the carousel. So setting on click won't work all the time.
The plugin provides callbacks btnNextCallback and btnPrevCallback that are executed after clicking the "next"/"prev" buttons are clicked.
The current focused item has the class .roundabout-in-focus.
I have made this jsfiddle for you to see (all you div have the same content so I've replaced it for the sake of the example).
Here's the (commented) code:
$(document).ready(function() {
function updatePrevNextTitle() {
// as this function is used as a callback for the plugin
// 'this' is the roundabout wrapper div
var $wrapper= $(this),
// get the currently focused div
$frontDiv = $wrapper.find('.roundabout-in-focus'),
// get the next/prev div content relative to the focused div
// also handle the circular roundabout by checking if
// .next() and .prev() return something, otherwise
// get .first() and .last()
nextContent = $frontDiv.next().length
? $frontDiv.next().find('.carousel-caption').html()
: $frontDiv.first().find('.carousel-caption').html(),
prevContent = $frontDiv.prev().length
? $frontDiv.prev().find('.carousel-caption').html()
: $frontDiv.last().find('.carousel-caption').html();
$wrapper.find('.next span').html(nextContent);
$wrapper.find('.prev span').html(prevContent);
};
$('#round').roundabout({
childSelector: 'div.box',
btnNext: ".next",
btnPrev: ".prev",
// set the method updatePrevNextTitle as the callback handler
btnNextCallback: updatePrevNextTitle,
btnPrevCallback: updatePrevNextTitle
}
// set it also as the 'initialized' callback for the
// initial setting of the prev/next span text
,updatePrevNextTitle);
});
One way is to add an active class in your selected div:
//e.g. after the selection event occurs:
$('div').click(function() {
$(this).addClass('active'); //keep track which div is clicked with the active class
//read the class name of the next sibling and store it in test (if i got it right)
$(".Test").html($('.active').next().attr('class'));
});
Maybe not 100% right but can give you a headstart!
According to your jsfiddle the name attribute is missing on your roundabouts,
try this instead:
$('.arrows').click(function() {
$(".next span").html($('.roundabout-in-focus').next().find('.carousel-caption').html());
$(".prev span").html($('.roundabout-in-focus').prev().find('.carousel-caption').html());
});

Categories