Show element in hiddens elements - javascript

HTML
<body>
<span>test</span>
<span>test</span>
<span>test</span>
<span id="show">aaaaaa</span>
</body>
JS
$('body').hide();
$('#show').show();
Why doesn't this work? How can I make it work?
Now all is hidden, but if I use $('#show').show(); it should make #show visible. Is this possible? If yes, how?
I want hide all elements without #show, but I can't modify the HTML.

Because #show is inside body, which is not visible.
body defines the document's body and it contains all your elements, so if you hide it you'll hide all your elements.
Try to hide just the elements you want to.

By setting display: none on the document.body (that is what .hide() basically does), the second call to #show becomes pretty much irrelevant, because the parent is still hidden (body).
You would need to select all elements, without the specific node and hide those.
$(document.body).contents().not('#show, #show *').hide();

To hide all elements without id="show", you can use the not function:
$('body').find('*').not('#show').hide();
or the :not psuedoselector:
$('body').find(':not("#show")').hide();
Edit: to also show all children of #show, add that to the not selector:
$('body').find('*').not('#show, #show > *').hide();​
http://jsfiddle.net/ZD7gm/3/

Try this instead:
$('body').contents().hide();
$('#show').show();​
jsFiddle example
This will hide all children of the body and show the element with ID show.

Hide the other elements, not the whole body.
$('span').hide();
$('#show').show();

Try appending span after the body tag, like this.
<body>
<span>test</span>
<span>test</span>
<span>test</span>
<span id="show">aaaaaa</span>
</body>
$('body span').hide();
$('#show').show();
jsfiddle.net example

$('body').find('*').not('#show, #show > *').hide();

Related

getElementById inside a div

I'm using a Javascript to change the text on a form submit button, this is the code I'm using:
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("button").value="New Button Text";
});
</script>
The code work perfectly, but I need to change it so that it effects the id #button within a div with the id of #formwrap. So basically I need to .getElementById("button") contained within the div with a id of #formwrap
If you are already using jquery, why not just do
$('#formwrap #button').val('New Button Text');
?
It's simply CSS-like selector, similar to what you'd use in querySelectorAll().
It will match for example this button:
<div id="formwrap"><input type="button" id="button"></div>
But keep in mind that only one element can have the same ID.
Maybe you wanted class? Then you'd use .button instead of #button.

Javascript click function not reacting in proper parent

I have this javascript that animates a div into a parent div.
Javascript
$(document).ready(function() {
$("a").click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
HTML
<div id="home" class="page">
<div id="page1">
Inside Div
</div>
Outside Div
<div id="page2" class="page">
content
</div>
</div>
I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!
Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?
Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.
You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.
EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?
EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.
EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:
$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });

main div height issue after inner div

I am adding & removing div inside the main div using javascript dynamically. I am using appendChild and removeChild method for this purpose.
Example,
<div>
<div></div>
<div></div>
<div></div>
</div>
If I remove the first div then the space of first div is still there. I would like to remove the space used by first div and need to bring the second div to first position. Please suggest me good way to do this. Any jquery library also I would like to try.
thanks
You can use remove(). Please see an example below
Try the following code in you $(document).ready(function(){ function
$('.add').click(function (){
$('#main').append('<div style="height:30px;border:1px solid #CCC;margin:10px;width:30px;">hey</div>');
});
/** remove a child from a container **/
$('.remove').click(function (){
$('#main div').first().remove();
});
And your Html body will be something like this
<div id="main"></div>
Add
Remove

How to show all child nodes in jQuery

show all children
hide child 1
hide child 2
<div id="p" style="display:none;">
<div id="c1">child 1</div>
<div id="c2">child 1</div>...
</div>​
$("#lnkP").click(function(){
$("#p").children().show(); //seems there's a problem here...
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​
jsFiddle: http://jsfiddle.net/CBGsF/1/
What I am trying to do is:
p is a parent container
click show all children link, display
all child divs under p
click lnkC1 or lnkC2 to hide
individual child div
But it seems that I didn't get .children() working correctly. So how to fix it? Any ideas?
Since the parent (#p in your case) has a display:none, it's children won't be visible.
You'll need to show the parent first,
$("#p")
.show()
.children().show();
(jQuery's chaining, very helpful)
Please try and get rid of the inline styling (it gets unmanageable after a while), use classes as much as possible.
You can have a class in css,
.displayNone
{
display: none;
}
.displayBlock
{
display: block;
}
And then use jquery methods .removeClass(), .addClass() or .toggleClass() to show/hide your elements.
This is just a recommendation :)
Test link: http://jsfiddle.net/CBGsF/8/
You need to show the #p also
Updated fiddle: http://jsfiddle.net/CBGsF/7/
$("#lnkP").click(function(){
$("#p").show().children().show(); //Add show() before children.show call
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​
Updated fiddle : http://jsfiddle.net/CBGsF/5/
$("#lnkP").click(function(){
$("#p").show();
$("#p").children().show();
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​
Parent element is set to "display":"None" That is the problem
$("#p").css("display","block"); //is required in show all anchor click
Check the fiddle
http://jsfiddle.net/CBGsF/6/
Thanks
(Posted solution on behalf of the question author).
I thought .children() would search for invisible nodes as well. Well, I was wrong on that.

How to remove a particular html tag and its content which is inside a div, using div id by jquery?

I have the following div tag, which will be created onload by jquery. I want to remove only the span tag and its contents which is being created inside the div. How can i do this using jquery ? I have tried innerHTML but it deletes all the contents of the div with id uniform-qualification, as I want to delete only the span tag below.
<div id="uniform-qualification" class="">
<span>BCh</span>
</div>
Note : the span tag cannot be given with an id as its being created dynamically from the UI plugin
$("#uniform-qualification > span").remove();
but you'll need to provide more information if you want a more informed answer. For example, if you have more than one span but only want to remove the first one you'll need something like:
$("#uniform-qualification > span:eq(0)").remove();
To remove all span elements within the div try the following:
$('#uniform-qualification span').remove();
To remove only child span elements:
$('#uniform-qualification > span').remove();
To remove only the first child span element:
$('#uniform-qualification > span').first().remove();
$('#uniform-qualification').html('');
That'll do the trick.

Categories

Resources