unhiding a div tag with jquery - javascript

http://www.frostjedi.com/terra/scripts/demo/jquery01.html
Clicking the button on that page should unhide the "hello, world!" div tag shouldn't it? When I click it I get a $("#demo").style is undefined error.

$("#button").click(function () {
$("#div").hide();
});
$("#button").click(function () {
$("#div").show(2000);
});

Try this , the simplest one ..
<input type="button" onclick="$('#demo').toggle()" value="clicking me should unhide a div tag">

You should use
$('#demo').show(); // to display
or
$('#demo').hide(); // to hide the div

try .show()
$("#demo").show()

You cannot access properties of jQuery objects by . (dot) (They are not javascript objects)
You this,
$('#demo').css({'display':'none'})
Or you can use $('#demo').hide(); (Its a shortcut)

jQuery.hide() is very slow.
Use the following instead:
document.getElementById('demo').style.display = 'none'
This is where you heard of the style property. This property works on DOM objects. jQuery objects are not DOM objects.

Use the hide() method
$("#demo").hide()
or
$("#demo").hide()
or even the toggle() method to toggle visibility:
$("#demo").toggle()
Integrated in your example:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div>
<input type="button" onclick="javascript:$('#demo').show();" value="clicking me should unhide a div tag">
</div>
<div id="demo" style="display: none">hello, world!</div>
</body>
</html>
Example from jQuery documentation:
<h1 class="firstHeading" style="display: block;">Tutorials:Basic Show and Hide</h1>
<div class="examples">
<input id="hideh1" type="submit" value="Hide site tile" name="hideh1">
<input id="showh1" type="submit" value="Show site title" name="showh1">
<input id="toggleh1" type="submit" value="Toggle site title" name="toggleh1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.showhide,h1').hide();
});
$('#showh1').click(function () {
$('div.showhide,h1').show();
});
$('#toggleh1').click(function () {
$('div.showhide,h1').toggle();
});
});
});
</script>

$("#demo").style is not a jQuery function
You should either use $("#demo").css("display","block") property or use show() or toggle() functions

Do
$(document).ready(function() {
$("input[type='button']").click(function() {
$("#demo").show();
});
});
or
document.getElementById("demo").style.display = "block";

Related

jQuery .height() not changing

I have this code:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').height('auto');
});
});
Which changes the height of a div on a link click. I have put an alert inside this function and can confirm it's being ran when the link it clicked, only the height of the target div isn't changing. The target div has a height of 0 set in the CSS file to begin with but it's not being updated.
Does anyone have any idea what may be going on here?
Try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').css('height','auto');
});
});
See how changing the height of an element works:
.test{
margin:10px;
border-style:solid;
border-width:1px;
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="height:10px" onclick="$('.test').css('height','10px');">
<input type="button" value="height:auto" onclick="$('.test').css('height','auto');">
<input type="button" value="height:0px" onclick="$('.test').css('height','0px');">
<input type="button" value="hide" onclick="$('.test').hide();">
<input type="button" value="show" onclick="$('.test').show();">
<div class="test">test</br>test test</br>test</br>test</br></div>
you can also try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').attr('style','height:auto');
});
});
Please put your script code below the jQuery library and run again as shown below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto');});});

jQuery toggleClass only toggles once

I have a div which i am trying to toggle its class from one to another. I am able to toggle it only once but it will not return to the original class. I looked around for possible answers and looked into the propogation function, however i am unsure this is the correct use?
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
<script>
$(startStopCount).click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
</script>
</body>
You are getting the element via $('.cInact'). However, when you toggle the class .cInact, you can no longer get that element by $('.cInact') (it doesn't have that class anymore).
You can either do a selection with $('#counter') (getting the ID instead of the class, because you aren't toggling the ID) or assign the element reference to a variable:
var myAwesomeCounter = $('.cInact');
// Then use
myAwesomeCounter.toggleClass('cDown cInact');
Well, you're selecting the class 'cInact' and then toggling it's class.
i.e- removing it.
Wen you're trying to select the element again with the same selector: classname == cInact it's no longer true for that element. so you select nothing, and nothing happens.
To fix this, try using a different selector- e.g- id, like so-
$('#counter').toggleClass('cDown cInact');
The selector $(startStopCount) is wrong. It should be $("#startStopCount")
$('#startStopCount').click(function(e){
e.stopPropagation();
$('.cInact').toggleClass('cDown');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapBreather">
<div id="counter" class="cInact">
<!--<canvas id="timerAnimation"></canvas>-->
</div>
</div>
<br />
<button id="startStopCount" class="HomeButton" >Start</button>
</body>
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('html').click(function () {
$('#counter').removeClass('cDown');
});
Better perhaps:
$('#startStopCount').click(function(e){
e.stopPropagation();
$('#counter').toggleClass('cDown cInact');
});
$('body').click(function () {
$('#counter').removeClass('cDown');
});

jquery text() from two classes

HTML
<div class="a">1
<input type="button" value="send" class="b">
</div>
<div class="a">2
<input type="button" value="send" class="b">
</div>
jQuery
$(".b").click(function () {
var b=$(".a").text();
alert(b);
});
On pressing first button I want only 1 and on pressing second button I want only 2
http://jsfiddle.net/4n6ou0ka/1/
$(".b").click(function () {
alert($(this).parent().text());
// or
alert($(this).closest('.a').text());
});
Use this.parent
$(".b").click(function () {
var b=$(this).parent().text();
alert(b);
});
http://jsfiddle.net/4n6ou0ka/3/
What you need to do is to use the this keyword as a search reference so you can get only this's parent with the "a" class.
Check this modified version of your sample: http://jsfiddle.net/6qhun7hz/
All-in-one !
$(this).parent().text();
Or
$(this.parentNode).text();
Or
$(this).closest('.a').text();
Or
this.parentNode.firstChild.textContent

html get div tag in many levels

I got class required on div tag, and I want to remove it change function of text field, but I can't get to that div level, please help me to reach this.parent.parent.closest('div')
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange(removeRequired(this, this.parent.parent.closest('div')))/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
It seems that what you want is to add/remove the required class based on whether the input is empty or not.
$('.required').on('change', 'input', function(event) {
// add or remove required class
$(event.delegateTarget)
.toggleClass('required', this.value.length === 0);
});
It will work with the following HTML:
<div class='required'>
<div>
<div>
<input type='text' value='123'/>
</div>
</div>
</div>
It sets up event delegation on the outermost <div> elements and then sets or removes the required class based on the input value.
Demo
You dont have to mess up with javascript and jquery. You can bind the change event with jquery like this,
$(document).ready(function () {
$("input[type='text'] ").change(function () {
$(this).closest(".required").removeClass("required");
});
});
try this
$("input[type=text]").closest('div.required').removeClass("required");
onchange function be
$("input[type='text']").change(function(){
$(this).closest("div.required").removeClass("required");
});
or
$("input[type='text']").change(function(){
$(this).parents("div.required").removeClass("required");
});
Why not easily working with id?
<div id="input-wrapper" class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired(this, $('#input-wrapper'))"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(elm1, elm2){
if ($(elm1).val()) {
$(elm2).removeClass('required');
}
}
</script>
By the way, if you want to reach the div class='required' with parent, you need 3 levels! Althougth the use of closest() is by far a better answer.
You can try:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<div class='required'>
<div>
<div>
<input type='text' value='123' onchange="removeRequired.call(this)"/>
</div>
</div>
</div>
<script type='text/javascript'>
function removeRequired(){
$(this).parent().parent().parent().removeClass('required');
}
</script>

Why do jQuery display&hide effects only work with embedded css display:none?

I have a couple of .handlebars templates that load into a handlebars default layout, using handlebars as the view engine for node.js
The templates load into the body tag using a {{{ body }}} html escape:
<body>
{{{ body }}}
</body>
When involving divs from the templates..why do jQuery display/hide effects work this way:
<label class="btn">
<input type="checkbox" id="theBtn"> theBtn
</label>
..a bunch of html..
<div class="theDiv" style="display:none;"></div>
$(document).ready(function () {
$("#theBtn").change(function() {
$(".theDiv").slideToggle();
});
});
But this way only works if the HTML is directly written in the default layout, not from templates:
.hide {
display: none;
}
<label class="btn">
<input type="checkbox" id="theBtn"> theBtn
</label>
..a bunch of html..
<div class="theDiv hide"></div>
$(document).ready(function () {
$("#theBtn").on('click', function () {
var $when = $(".theDiv");
$when.slideToggle();
$(".theDiv").not($when).slideUp();
});
});
I think you have duplicated id for the input elements. Since id must be unique, you need to use class instead:
<input type="checkbox" class="theBtn" />
After that, you need to target only the previous sibling .theDiv of parent label of your clicked input, currently you've targeted all the .div, so you can use:
var $when = $(this).parent().prev();
instead of:
var $when = $(".theDiv");
Fiddle Demo
jQuery
$(document).ready(function () {
$(document).on("change","#theBtn",function () {
var $when = $(".theDiv");
$when.slideToggle();
$(".theDiv").not($when).slideUp();
});
});
Hope this is what you are looking for...!!

Categories

Resources