Simple fade in fade out div with jquery on click - javascript

THIS CODE UNDER HERE WORKS, you can read the answers under here - i edit this for future reference.
HTML:
<div>Show bank div and hide fancy div</div>
<div id="btn-bk">back</div>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>
CSS:
#bank {display:none;}
#btn-bk {display:none;}
Javascript:
$('#btn').click(function(e){
$('#fancy, #btn').fadeOut('slow', function(){
$('#bank, #btn-bk').fadeIn('slow');
});
});
$('#btn-bk').click(function(e){
$('#bank, #btn-bk').fadeOut('slow', function(){
$('#fancy, #btn').fadeIn('slow');
});
});
Live DEMO that works

Your problem is with this line of code:
$('#bank').replace('<div id="fancy"></div>').fadeIn('slow');
There is no .replace() function in jQuery. Remove that and it works:
$('#bank').fadeIn('slow');
See it here: http://jsfiddle.net/3XwZv/57/

Use the following jQuery code:
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').fadeIn('slow');
});
});

You should use html () instead of replace(). Also, assuming you want to replace your bank div with the following html:
<div id="fancy"></div>
Try this
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#bank').html('<div id="fancy"></div>').fadeIn('slow');
});
});

Related

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

Jquery Remove Div and Alert is not Working

I have a following code, i want to remove label and Input Box on click, but it is not working
no any alert is shown, nothing is seen over the console.. really disappointed
<div id="Div1" class="span5 well droppedFields ui-droppable ui-sortable">
<div class="draggableField ui-draggable droppedField" style="z-index: 10;" id="CTRL-DIV-1002">
<div style="z-index: 11;"><span id="LabelU2">LastName : </span></div>
<div style="z-index: 12;">
<input name="LastName" type="text" id="LastName"></div>
</div>
</div>
my jquery
$('.draggableField ui-draggable droppedField').on('click', function () {
$(this).parent('div.DivHTML').remove();
alert("hi");
});
Help is apperciable. thnx
Your selector doesn't point to anything. There is no draggableField that has a child ui-draggable that has a child droppedField. Do you mean a div that has all three classes?
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).hide();
alert("hi");
});
UPDATED CODE: Removed the OP code to remove() element and replaced with hide()
Take a look to this Fiddle
$('.draggableField').on('click', function() {
$(this).find("input").remove();
$(this).find("#LabelU2").html('');
});
you don't have DivHTML in there:
use:
$(document).ready(function(){
$('.draggableField.ui-draggable.droppedField').on('click', function () {
$(this).parent('div').remove();
alert("hi");
});
});
Can we see more details on your project? If it's working in jsfiddle but not in your project it seems like something else is missing. Are you loading jquery or your specific script into your html page properly? To get down to the problem we need more to go off of.

jquery and css solution to toggle show/hide with text in the html

So I created the following jquery that shows/hides a div.
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").hide();
});
$("#show").click(function(){
$("#me").show();
});
});
This is some text
Hide
Show
http://jsfiddle.net/6DTeq/7/
It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide.
But main problem is I dont want to have the text in the javascript file for internationalization purposes.
It's ok if the text resides in the html. Can someone help me with this?
Html :
<div id="me"> This is some text</div>
<div id="toggle">toggle</div>
Js:
$("#toggle").click(function(){
$("#me").toggle();
});
Demo -----> http://jsfiddle.net/6DTeq/8/
Updated fiddle -----> http://jsfiddle.net/6DTeq/13/
Try this
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").toggle();
$(this).text(function(i, val) {
return val === 'Show' ? 'Hide' : 'Show';
});
});
});
Check Fiddle
<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
<div id="hide" style="display:none;">Hide</div>
<div id="show">Show</div>
</div>
$(document).ready(function(){
$("#clickContainer").click(function(){
$("#me").toggle();
$("#hide").toggle();
$("#show").toggle();
});
})
Try that:
http://jsfiddle.net/6DTeq/10/
$(document).ready(function () {
$("#toggle").click(function () {
$("#me").toggle();
$(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
}).triggerHandler('click');
});

jQuery - If DIV class equals X, hide all other DIVs with a different class

I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.

Affect another element in current outer element

<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Blah</div>
</div>
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Another</div>
</div>
When button gets clicked, I want .example to .show, but only the .example that's in the current .test.
Another way that works for your particular HTML:
$('button').click(function(){
$(this).next('.example').show();
});
This will do exactly what you said:
$('button').click(function(){
$(this).closest('.test').find('.example').show();
});
This works too for the markup you posted, but it won't work if the button and .example are not siblings:
$('button').click(function(){
$(this).siblings('.example').show();
});
Hiya Working demo for your case here: http://jsfiddle.net/4bLZF/
this uses slideToggle http://api.jquery.com/slideToggle/
code
$(document).ready(function () {
// Watch for clicks on the "slide" link.
$('button').click(function () {
$(this).next(".example").slideToggle(400);
return false;
});
});​

Categories