Trying to make hidden div fade in on click - javascript

I'm looking for some help with fading hidden div's in.
This is what I have so far, but it doesn't seem to want to work, the div just appears with no fade.
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
$('.one').click(function(){
$("#one").fadeIn("5000");
});
html
<body>
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>

Just click event on alike this:
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
//e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(5000).siblings('div').hide();
});
Fiddle

setTimeout(function() {
$("#one").css('display','none');
}, 5000);

Try this.
$("body").on('click', '#button-hide' function(e){
$("#" + $(this).attr("class")).show().siblings('div').hide();
})
$("body").on('click', '#button-show' function(e){
$("#one").fadeIn("5000");
})
For best answers, please explain more detail you problem. Include the context and example.
Salute!

you don't see the change because "One" is staying on the same position. Try to hide it first, then you can fadeIn
$('.one').click(function(){
$("#one").hide().fadeIn("5000");
});

Related

jQuery hide dropdown menu

I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/
Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});
What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});

jQuery mouseenter event is not executed

I'm having some trouble with mouseenter event applied on div area in my pages. I'm trying to change background-color of this div on mouse enter but it is all just ignored.
I have a simple HTML CODE:
<div id="services" class="services">
<div id="services-top">
<h2>Services</h2>
</div>
<div id="services-content">
<div id="services-content-left">
<img id="services-content-right-img" class="img-circle" src="http://i.imgur.com/vN5m4vK.jpg" alt="empty">
<h3>STUFF</h3>
</div>
</div>
</div>
And JS stuff with this event:
$(document).ready(function() {
$("services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
And as I said before, when I enter this div area, background stays the same, without any changes.
HERE is an example.
Don't you have any idea how to solve it?
Wrong selector :)
$(document).ready(function() {
$("#services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
you simply missed out
out in your code, should be $("#services-content-left") instead
$(document).ready(function() {
$("#services-content-left").mouseenter(function() {
console.log("enter");
$(this).css("background-color", "yellow");
});
});
signify a ID selector.
You have missed a # before your services-content-left,
Please have it changed as,
$("#services-content-left").mouseenter(function() {
Working Fiddle: - https://jsfiddle.net/m2wpetp4/4/
Hope this helps!

Div fade in after other a href Div's are clicked

I'm trying to have a Div fade in after the user clicks two other divs.
This is what I have so far but I'm pretty sure I'm doing something wrong. I can't seem to get the div to fade in even if only one div is clicked let alone two. Any help would be appreciated! thank you so much.
<script>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(9000);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(18000);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(18000); });
</script>
<script type="text/javascript">
$(document).ready(function(){
$("video_overlaysanswer").click(function() {
var index = $(this).closest("li").index();
$("video_overlaysanswer1").eq(index).fadeIn("slow");
return false; // prevents navigation to #
});
})
</script>
<div id="video_overlays">
This is where text is
</div>
<div id="video_overlaysanswer">
answer 1
</div>
<div id="video_overlaysanswer2">
answer 2
</div>
<div id="video_overlaysanswer1">
the answer that I want to fade in once the other two div's are clicked
</div>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(500);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(500);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(500);
$("#video_overlaysanswer,#video_overlaysanswer2").click(function() {
$("#video_overlaysanswer1").fadeIn("slow");
return false; // prevents navigation to #
});
});
Try code above.It works fine.Now implement different click event fo buttons.hope this helps.
http://jsfiddle.net/szr9vpv5/

Problems making a button show and hide content

I have just trying to come up with a button to hide content based on a example I've seen that works.
HTML
<button id="button">Test</button><br/><br/>
<div id="panel">Test Panel</div>
jQuery
$(document).ready(function(){
$("#button").toggle(function() {
if $("#panel").css("display") == "none" {
$("#panel").html("Show");
} else {
$("#panel").html("Hide");
};
});
});
CSS
#panel {display:none;}
Any help is appreciated. Thank you!
Toggle is deprecated.. Just attach a click event to the button and use the toggle method for the panel
$("#button").click(function() {
$("#panel").toggle();
});
Check Fiddle

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);

Categories

Resources