On button click, I want to hide the div. How do i do it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<div id="hide">
<form>
<p id="p">heya</p>
<input type="button" id='approve' value="approve" onclick="button()"/>
<input type="button" id="reject" value="reject"/>
</form>
</div>
</body>
</html>
SORRY FOR ASKING AGAIN...BUT COULDN'T FIND A BETTER METHOD. THANKS
document.getElementById('hide').style.display = 'none';
This sets the CSS code display: none; on the div, which causes the browser's rendering engine to act like the element is not even on the page (e.g. it does not occupy any space). See the CSS standard for the official description.
You can just use Jquery to make things super easy:
$("#approve").click( function() {
$("div#hide").hide() //you can just use $("#hide") if you want
});
You can show the element whenever you want with $("div#hide").show(). This will save you from having to deal with browser inconsistencies and other crap so you can just focus on producing great readable code. :)
If you use jQuery:
$(document).ready(function() {
$('#approve').click(function() {
$('#hide').hide();
});
});
Related
Hi I'm trying to use jQuery to load an html document into an existing html document.
I've tried using the code below, but the text doesn't load.
I'm not sure why. Could someone point me towards what I'm doing wrong please?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">$("#test").load("test.txt")</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Try on DOM ready like
<script type="text/javascript">
$(document).ready(function(){
$("#test").load("test.txt");
});
</script>
And you also forgotted ending ;.You can also try like
$(function(){
$("#test").load("test.txt");
});
You need to add it in dom ready
jQuery(function($){
$("#test").load("test.txt")
})
The problem was when your script is executed the element with id test was not yes added to the dom so the selector $("#test") would return zero elements
In the script below (live example is located at http://jsbin.com/aliket/1/ with source code located at http://jsbin.com/aliket/1/edit), I created two dialogs, where one (#dialog2) is a child within the other (#dialog1). If I create #dialog2 before #dialog1, open #dialog1 and then open #dialog2, the TinyMCE plugin no longer works. By not working, I mean TinyMCE's text box is shaded out and any previously entered HTML is gone. Is this a problem with the order of the two dialogs, or TinyMCE? Why is it happening? I do know how to fix it,however: just create #dialog1 before #dialog2. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</head>
<body>
<button id="click1">Click 1</button>
<div id="dialog1" title="dialog1"><div id="tinymce"></div><button id="click2">Click 2</button></div>
<div id="dialog2" title="dialog2">Hello</div>
</body>
<script>
tinymce.init({selector: "#tinymce"});
$(function() {
$('#click2').click(function(){$("#dialog2").dialog("open");});
$("#dialog2").dialog({autoOpen:false,resizable:false,height:300,width:240,modal:true});
$("#click1").click(function(){$("#dialog1").dialog("open");});
$("#dialog1").dialog({autoOpen: false,modal: true});
});
</script>
</html>
I think the problem here is that you did not shut down your editor instance before you opened another one with the same id. Use the mceCommand mceRemoveControl to shut such an editor instance down.
If you have something like the code below, it is impossible to access any node type below the head tag. I am guessing the reason is the JavaScript code executed before the rest of the document was created. But is there a way to access these nodes from the head tag. I want to access them from the head tag because I like my JavaScript code to be in one location if possible. I know jquery uses $(document).ready(). Is there something similar to that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var div = document.getElementById('myDiv')
alert(div)
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
The simplest analog to jQuery's $(document).ready() is window.onload:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id='myDiv'></div>
</body>
</html>
It is not as good because it will wait until all images are downloaded before it fires. If you must have the equivalent, you could use a microlib such as this one.
"I like my JavaScript code to be in one location if possible"
Yes: An external js file. It is bad practice to write js in the head. In the same way that writing styles in the head is poor. Hopefully you are using jquery for more than just the ready event, but it is an invaluable initializer even if you aren't. Write your js in a separate file, hopefully in some type of a container so you don't clutter the global namespace, and initialize it with $(document).ready();
You must wait for the 'onload' DOM event. jquery $(document).ready() is a wrapper for setting event handlers for onload.
Without jQuery you might try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function do_onload() {
var div = document.getElementById('myDiv')
alert(div)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload='do_onload()'>
<div id='myDiv'>I am here</div>
</body>
</html>
Well as a general rule i tend to put all inline js at the end of the document anyway, only externals do i usually put in the head. However, you can use the same methods jquery uses. I dunno exactly what the jq source looks like but something like this should work (untested):
window.onDomReady = function (fn) {
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", func, false);
} else {
document.onreadystatechange = function(func){
if(document.readyState == "interactive") {
fn(func);
}
}
}
};
And then you would use it like:
window.onDomReady(function(){
// do your stuff
});
I dunno if thats completely cross browser compatible either... that would be on of the benefits of using something like jQuery instead of writing your own.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
One function to toggle multiple hidden elements?
I saw this working in a jsFiddle but for whatever reason I can't get it to work. The code is the way it is because I will have 100+ links from which to choose and I didn't want to make 100 different slideToggle functions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$('.county').click(
function(){
var thisIs = $(this).index();
$('.countystats').eq(thisIs).slideToggle(300);
});
</script>
<style type="text/css">
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.countystats{
background-color:blue;
display:none;
}
</style>
</head>
<body>
<div>
<a class="county" href="javascript:;">one</a>
<a class="county" href="javascript:;">two</a>
</div>
<div class="countystats">stats one</div>
<div class="countystats">stats two</div>
<br />
<br/>
</body></html>
working jsFiddle url: http://jsfiddle.net/davidThomas/ANu83/
I would also recommend changing the .click to a .live to allow any dynamically added content to also honor the click.. and wrap it in a document.ready so it doesn't matter where in the document the script is.
$(document).ready(function(){
$('.county').live('click',function(){
var thisIs = $('.county').index($(this));
alert(thisIs);
$('.countystats').eq(thisIs).slideToggle(300);
});
});
The solution given to you previously relies on two things.
The links are nested in a specific order within a single div having no elements between them (ie <br/>)
The countystats divs immediately follow the div that contains the links.
If it still doesn't work it would be much more helpful to post a your non-working code than the working example.
Working version follows. Your code has two issues
The code that is supposed to "go through all of the things that are class=county and assign an event handler" executes before any of those things are defined. So it finds none. I moved that script to a position after those tags are created.
The line in the event handler that does var thisIs = $(this).index(); - I have no idea why this works in jsfiddle (maybe a different version of jquery?) It doesn't work at all in my browser. I rewrote it slightly below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.countystats{
background-color:blue;
display:none;
}
</style>
</head>
<body>
<div>
<a class="county" href="javascript:;">one</a>
<a class="county" href="javascript:;">two</a>
</div>
<div class="countystats">stats one</div>
<div class="countystats">stats two</div>
<script type="text/javascript">
$('.county').click(
function(){
var thisIs = $('.county').index(this);
$('.countystats').eq(thisIs).slideToggle(300);
});
</script>
</body></html>
Hi I have a question regarding simple Javascript function. Below is the code its easily visible that when a user clicks on the click button I want to switch classes I mean when the page loads "This is para" needs to be displayed then when the user clicks on click button the text needs to change to This is updated. but dont know why its not working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.none {
display: none;
}
.display1 {
display: block;
}
</style>
</head>
<body>
<p id="default">This is para</p>
<p id="updated" style="display:none">This is updated</p>
<p><input type="button" value="Click" id="button1" /></p>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("#default").addClass("none");
$("#updated").addClass("display1");
});
});
</script>
</body>
</html>
Do this instead:
$("#default").hide();
$("#updated").show();
And you can get rid of the none and display1 classes.
What's happening to you is that the style="display:none" takes precedence over a class, so it will never show that way.
Why are you not just using show() and hide()?
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("#default").hide();
$("#updated").show();
});
});
</script>
If you just want to change the text, instead of having two elements, why not remove the updated element and use .text(), like so:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("#default").text("This is updated");
});
});
</script>
Your "addClass" call is (probably) working, but the style directly on the element trumps the style offered by the CSS.
Personally I prefer to do that sort of thing by changing "class" values like that, but you can't really mix and match the two approaches. (Well, you can, but it's confusing and error-prone.) Instead of starting your element with that style, give it instead your "none" class.