Fade in/out js mouseover event - javascript

I am looking to implement a mouseover event on my page for a menu -
I have 3 titles to the left with a respective content div on the right where the related text appears.
Having trauled all the forums for a working js solution, I have settled with:
http://flowplayer.org/tools/demos/tabs/mouseover.html
which uses a very simple js function:
$("#products").tabs("div.description", {event:'mouseover'});
What I am hoping to do however, is to incorporate a fadeIn(), fadeOut effect so that when the user hovers over a title on the left of the page, the existing content showing fades away and the repective content will fade in to view......
The html coding is:
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
<div class="description" id="home" >
.. content ..
</div>
<div class="description" id="services" >
.. content ..
</div>
<div class="description" id="contact" >
.. content ..
</div>
I have tried to incorporate thread 5404775 on this site but simply cannot get it working!
Any help much appreciated

The below can be seen on jsfiddle.
You can fade them in and out on mouseover like this
var _current = "home"; // default state
$('#products img').mouseover(function (){
// The one we want to show now
var id= $(this).attr('alt');
// We don't need to do anything if it's the same one that's already
// there
if (_current !== id){
$('#' + _current).fadeOut(function(){
// Fade in the new one after the old fades out
$('#' + id).fadeIn();
// Update state
_current = id;
});
}
});
I also added some thing to make sure that only the one you want displayed first is displayed when the page loads. I'm assuming it would be the home div.
Add this to the CSS
.hidden{
display:none;
}
and put that class on the other divs.
<div class="description hidden" id="services" >
.. services..
</div>
<div class="description hidden" id="contact" >
.. contact ..
</div>

I'm working off the assumption that you want people hovering over the image buttons here to make the corresponding divs fade in and out. What they are doing on that site will not work because Javascript is needed for the fading effect. JQuery makes this easy.
I recommend trying something like
<script type="text/javascript">
oldSelected = "home"
$(document).ready(function(){
$("#products img").mouseover(function(){
$(".description").stop(true, true);
var newSelected = $(this).attr("alt");
$("#" + oldSelected).fadeOut('normal',function(){
$("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
I have tested this and it works. One thing you will want to make sure of is that the css for the divs has them set to not be visible at the start, unless you want one of them visible in which case the id for that div should be what you set the oldSelected to at the start of the function.
Enjoy!

This might work:
$("img", "#products").hover(function() {
var id = $(this).attr("alt");
$("#" + id).fadeIn("slow");
}, function() {
var id = $(this).attr("alt");
$("#" + id).fadeOut("slow");
});

Another idea (without Jquery): you could use CSS opacity:x property (for firefox) or filter:alpha(opacity=x) (for IE) to change the opacity of an element. Fade in/out can be obtained with a small slowed-down cycle.
See also:
http://www.w3schools.com/css/css_image_transparency.asp

Related

Can I show one div, hide all others, based on clicking its assigned button?

This seems to be a common question, however when I check the answers, they're all different.
I have a row of five links. Each has a corresponding div below. When I click a links, I want its div to display and all others to hide.
Here's some code I came across that seems to be on the right track:
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
But if I use "a" without a destination, clicking the link takes me to the top of the page. I just want the divs below to show or hide...
Can I use "button" or "div" instead of "a"? If so, what would I use instead of "rel"?
Sorry for the noob question. I just can't seem to make any of the solutions I've found here work for my site. What's the simplest way to do this?
Here's some HTML that definitely works with the jquery script above:
$('a').on('click', function() {
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
However if my href="", clicking that link bounces me up to the top of my page for some reason. So I'd rather use a clickable div or a button rather than a hotlink. In which case, what can I use in the script instead of "rel"?
It seems you only need to prevent the default behaviour by adding e.preventDefault();
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
You can use below values on your href.
Anchor
Here is the complete explanation for javascript:void(0)
The JavaScript void operator evaluates the given expression and then
returns a value of undefined. https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm
Try using href="javascript:" or href="#" instead of leaving the attribute empty. href="" tells the browser to reload the current page that you are in, which is why it bounces you to the top of the page.
You can also use <button> or <div>, the effect will not be very different from using <a>. You can also use rel if you are using <button> or <div>. In fact, it is arguably better to use rel on <button> and <div> because the attribute does not have any functional purpose in those tags. On the contrary, <a> uses the rel attribute to specify a few things to browsers.
Target attribute does not suitable for divs it is only for windows or iframes. Also, hyperlink should has href attribute otherwise it will be an anchor or placeholder link in HTML5 specifications.
You may use any conjugation attributes between the link and its div such as link title will be div id.
Example:
Show DIV 1
Show DIV 2
Show DIV 3
<div id="div1" class="linked-div" style="display: none"> One</div>
<div id="div2" class="linked-div" style="display: none"> Two</div>
<div id="div3" class="linked-div" style="display: none"> Three</div>
<script>
$("a").click(function(){
divId = $(this).attr("title");
$(".linked-div").each(function(){
if ($(this) == $("#"+divId)){
$(this).show()
}
else{
$(this).hide()
}
})
$("#"+divId).show();
})
</script>
DEMO

JQuery Onclick hide / show - next or previous class

I am trying to create a very simple image slider. As simple as it gets but the way I'm doing it I'm having to enter too many combinations.
This is what I've got:
<script>
$(document).ready(function(){
$('#1').show();
$('#2').hide();
$('#3').hide();
$("next-btn").click(function(){
$("#1").hide();
$("#2").show();
});
});
</script>
</head>
<body>
<div id="slider">
<div id="1" class="slide"><img src="slide-image-1" alt="" /></div>
<div id="2" class="slide"><img src="slide-image-2" alt="" /></div>
<div id="3" class="slide"><img src="slide-image-3" alt="" /></div>
</div>
<div id="previous-btn">Previous slide</div>
<div id="next-btn">Next slide</div>
As you can see by the jquery code, the way I'm going i'll have to enter different onclick's depending which image is hidden etc..
How can I change this so it can just go to the next or previous div and show it when either buttons are clicked without having to add too many combinations?
This code should work OK (tested). I hope you will get the idea :).
<script>
var active = 0;
var n = $('#slider div').length; // number of divs...
$(document).ready(function(){
showElement(1);
$("#next-btn").click(function(){
if (active < n) showElement(active + 1);
});
$("#previous-btn").click(function(){
if (active > 1) showElement(active - 1);
});
});
function showElement(id) {
$('#slider div').hide();
$('#' + id).show();
active = id;
}
</script>
active stores the number of element that is showed. When you show something else, you hide everything, and show only the one you need. n is used to store maximum number of elements so you will not get out of scope.
By the way this is not the most memory efficient solution, but it is really simple to modify it and it is really flexible. To be honest, you should track which slide is showed, which is hidden, and hide only the one that is showed, and show only the one that You need. But if there are only few slides (100?), the performance gap wont be a problem here, while the clarity of code and future expandability is much better here.
Also if something will go wrong in the future, every time user clicks something, the showElement function will repair it: hiding everything, and showing only the one you need.
Take a look on a working solution under this link: http://codepen.io/anon/pen/XbPogg
BTW: You can add more slides (id = 1, 2, 3, 4, 5, 6, ...) in your html markup, and this script will work without of any changes.

Scroll to queued divs on click

I'm sure this is a pretty common question around here but after lots of research I can't seem to find an answer to my question.
So just a little warning; I'm really new into javascript and jQuery etc.
To the question! I'm trying to apply two images (It's img's that looks like buttons :P) which you click on and it scrolls to the "next" paragraph or div.
So to get an overview of how it looks, here' a part of the HTML:
<div id="scrollbuttons">
<img id="prev" src="pics/prev.png"></img>
<img id="next" src="pics/next.png"></img>
</div>
Also:
<div id="work">
<p class="maintext">blabla</p>
</div>
<div id="gallery">
<p class="maintext">blabla</p>
</div>
<div id="project">
<p class="maintext">blabla</p>
</div>
<div id="finish">
<p class="maintext">blabla</p>
</div>
So what I'm trying to create is when you click on "next", the page should smoothly and automatically scroll to firstly, "work", then to "gallery" etc.
And when you press "prev", the page should again smoothly and automatically scroll back to the previous point.
I have the latest jQuery version and I'd like to not install plugins if it's not absolutely needed.
So I hope this is enough info to get some help, I'd really appreciate it since I'm really new to JS.
Thanks in advance
/Emil Nilsson
Here you go, this could probably be done a little more efficiently but it's dynamic and it works. Click the buttons to go forward and backward. FYI I added a mutual class called section to all of your content divs
JSFIDDLE
var Section = "start";
$("#next").click(function(){
if(Section == "start"){
var nextSection ="work";
}else{
var nextSection = $("#"+Section).next(".section").attr("id");
}
$("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
Section = nextSection;
});
$("#prev").click(function(){
var nextSection = $("#"+Section).prev(".section").attr("id");
$("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
Section = nextSection;
});
maybe you need something like this
http://jsfiddle.net/urUFK/
the img would be inside of the anchor like this (semantics and W3C validation):
<img id="prev" src="pics/prev.png"></img>
on my version you just need to define the first element and the div id's

jQuery show-hide find next element far and near

This show-hide function attempts to do so anonymously, without the need to maintain unique IDs for the target divs.
I am having trouble understanding why my selector for the var div does not work in example #4, and how I may be able to get it working for all examples shown.
$('.expander').click(function(e)
{
e.preventDefault();
var div = $(this).nextAll('div.content').first();
if (div)
{
if (div.css('display') == "none")
{
div.show();
$(this).removeClass("closed");
$(this).addClass("open");
}
else
{
div.hide();
$(this).removeClass("open");
$(this).addClass("closed");
}
}
});
<div>
example 1<br />
<div class="content open">shown content</div>
example 2<br />
<div class="content closed">hidden content</div>
example 3<br />
<!-- comments -->
<span>other content</span>
<div class="content closed">hidden content</div>
<p>
<span>
example 4
</span>
</p>
<div class="content closed">content</div>
</div>
The first three examples work fine. But when I deployed this code, I found there were variations in how the anchor may be coded. I am looking for a solution that works regardless of how the anchor is encapsulated.
The bottom line is I want to select the next div.content to the anchor, regardless if it is next, or if jQuery must walk up the DOM tree a little to find it.
I have a working model of this code here.
Because you anchor is nested inside a span which again nested inside a ptag
And this does not make sense in case of example# 4
var div = $(this).nextAll('div.content').first();
For example#4 you need this selector
var div = $(this).closest('p').nextAll('div.content').first();
I got this working walking up the parent tree until I see the next target div.
var div = $(this).nextAll('div.content').first();
if (div.length == 0)
{
div = $(this).parentsUntil('body').nextAll('div.content').first();
}
I don't really like the conditional, but unless I find something more elegant, I'll stick with this.

Show/Hide Divs by name in jQuery

I have the following JavaScript at the end of the body of my HTML:
<script>
$(document).ready(function() {
$("a").click(function(event) {
var div_to_show=event.target.id;
var real_div=div_to_show.split('-');
var display_div=real_div[0];
var elementPos=$("#"+div_to_show).offset();
var top_pos=elementPos.top-118.5;
$('#board-right div').hide();
$("#" + display_div).css('margin-top',top_pos);
$("#" + display_div).show();
});
});
</script>
And here is the HTML that it is supposed to manipulate:
<div id="board-left">
<div id="board-names">
<a id="marci-link">Marci Weisler</a><br />
<a id="nicholas-link">Nicholas Rey</a><br />
</div>
</div><!-- #board-left -->
<div id="board-right">
<div id="marci" style="display:none;">
<p>
Marci Weisler is an accomplished...
</p>
</div>
<div id="nicholas" style="display:none;">
<p>
Nicholas Rey is a French-born...
</p>
</div>
</div><!-- board-right -->
So, the code should get the div name from the clicked link, remove the "-link" portion, and then show the appropriate div. Currently nothing is happening when I click the link. As I'm writing this, I am wondering if it is a CSS issue? Any ideas?
By the way, there is a link in the document to jQuery 1.3.
if you check http://jsfiddle.net/pramodpv/YvYBD/,
you will find that the top pos is negative.. if u correct that as u require it will work
PS: try using jsfiddle while posting your questions so that people can work on your code and give faster answers... Most prb, you will find the answer yourself :D
Trying your example, I found that I had to add an href='#' attribute to the hyperlinks and then added an event.preventDefault() as the first line in your click handler.
And same as Pramod SyneITY, the top position needs to evaluate as a positive value for the text to be visible.

Categories