I am writing this code in html:
<!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 language="javascript" type="text/javascript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<title>Welcome to the memory game</title>
</head>
<body>
<h1>Welcome to the memory game!</h1>
<input type="button" name="type" value='Show Layer' onclick="setVisibility('sub3', 'inline');"/>
<input type="button" name="type" value='Hide Layer' onclick="setVisibility('sub3', 'none');"/>
<div id="sub3">Message Box</div>
</body> </html>
It suppose to make the "div" disappear and reapper, but it works in chrome and not in explorer.
Anyone has any idea how can I make it work in explorer (I tried allowing blocked content when that message about activeX appears in explorer)?
Thanks,
Greg
Can I suggest that you try using jQuery? It is very cross-browser friendly and has a .toggle() function to show/hide a DOM object.
Your function in jQuery would look like
function setVisibility(id) {
$('#' + id).toggle();
}
Related
I'm trying to make a text input field where visitors can enter a value and then hit go or submit.
Based on the digit number they would be send to a new page.
For example if they enter 123 and hit submit it would send them to http://www.example.com/page/123
Could anybody please help me get this up and running?
Thank you
Here we go have fun. just copy the code and save it as html. you don't need php or such. it is way too simple to need a server side code.
<!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>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
</head>
<body>
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
I have made javascript bookmarklet for firefox. Now i want to access it in javascript like other document/ DOM elements are accessed through their id or class. Please anybody tell me how i can access my javascript bookmarklet . Actually i want to make it blink /change it color by accessing it.
My bookmarklet code
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>Untitled Document</title>
<script>
</script>
</head>
<body>
<div id="toolbar" >
<a id='button' href='javascript:alert("my bookmarklet");'
>Lysted</a>
</div>
</body>
</html>
Now i want to access bookmarklet in "script tags/ javascript". Please please help anybody
I have a page below which is using jquery to append some html.
It simply append an input tag in the specified DIV
<!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>
<script src="../../jquery-1.10.2.min.js" type="text/javascript" xml:space="preserve"></script>
<script type="text/javascript" xml:space="preserve">
var i = 0;
function test(){
var totalQuantity = '<input type="number" name="order' + i + '.totalQuantity" />';
$(".test").append(totalQuantity);
i++;
}
</script>
</head>
<body>
<div class="test"></div>
<input type="button" onclick="test()" value="Add" />
</body>
</html>
When I run this on server in tomcat using spring, on inspect element the javascript becomes something like:
var totalQuantity = '<input type="number" name="order'+i+ '.totalQuantity" />';
All the ( ' ) characters replaced by code (#&39).
what is the problem actually? Why it is not showing character ( ' ) but rather showing its html code?
Is this a problem with using spring because when I separately(not in a container or spring framework) open this html file, it works fine.
While this is a workaround, i think it's the proper way to insert javascript into html.
Move your javascript into an external file so that whatever is pre-processing your HTML won't touch your javascript.
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();
});
});
I have a html main.html as given
----- main.html----------------
<title>FlexTrail</title>
<script src="main.js"></script>
<frameset rows='200,200'>
<frame id='one' src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder='0' />
<frame id='two' src="" frameborder='0' />
</frameset>
</head>
<body >
</body>
here the first frame contains a html generated by Flex Builder 3 and on button click on that flex project i am calling function func2() in main.js using External Interface.
---- main.js-----------------
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html";
parent.frames['two'].location="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project2/bin-debug/project2.html";
}
I want the other file to open in same window bellow the first one.But the problem here is when i run this in IE8 the other frame opens in a different window but in Firefox im not getting any respose.
Note:- Javascript is enabled in both browsers and popup are not blocked
Plz tell me where i m wrong
Thanks in advance
Prashant Dubey
Your frameset is wrong. A frameset is not a page, so it doesn't have a body:
<html>
<head>
<title>FlexTrail</title>
<script src="main.js"></script>
</head>
<frameset rows='200,200'>
<frame id="one" src="file:///C:/Documents%20and%20Settings/demo/Desktop/FlexTrail/project1/bin-debug/project1.html" frameborder="0" />
<frame id="two" src="" frameborder="0" />
</frameset>
</html>
Ok, found fix. Need to add NAME tag to Frames as well as ID tags. Also need properly formatted frameset tags as others have answered, but without NAME tag it still won't work.
Edit (again): Also, noticed your other quest about multiple files and single script. I just dumped the script inline for my example below, but you could make it a .js file as well. Rather load it to all html files, you could just use parent.function() style js calls in the secondary files that get loaded into frames. Again, depends on how much code is there and what you are trying to do etc. Mileage may vary. =) (You'll notice I didn't need to add script in my 1.html file.)
See below...
Main html:
<HTML>
<HEAD>
<TITLE> Title Goes here </TITLE>
<script type="text/javascript">
var flag2=0;
function func2()
{
flag2=1;
parent.frames['one'].location="1.html";
parent.frames['two'].location="3.html";
}
</script></HEAD>
<FRAMESET rows="115,*">
<FRAME SRC="1.html" ID="one" name="one">
<FRAME SRC="2.html" ID="two" name="two">
</FRAMESET>
</HTML>
Then, 1.html:
<HTML>
<HEAD>
<TITLE> Cow goes Moo </TITLE>
</HEAD>
<body>
One.html
<input onclick="parent.func2();" id="Button1" type="button" value="button" />
</body>
</HTML>
2.html and 3.html can be anything really, doesn't matter.
The problem with this setup is that IE looks for the ID tag in the javascript, but FireFox is looking for NAME attribute of the frame. Above pages work in IE, FF and Chrome.
Here is an example with iframes that may help
Main.htm
<!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 loadTwo()
{
document.getElementById('two').src = 'two.htm'
document.getElementById('two').style.display='block';
}
function loadThree()
{
document.getElementById('two').src = 'three.htm'
document.getElementById('two').style.display='block';
}
</script>
<title>Untitled Page</title>
</head>
<body>
<iframe id="one" src="One.htm"></iframe>
<iframe id="two" style="display: none" src="Two.htm"></iframe>
</body>
</html>
One.htm
<!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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function load2_onclick() {
parent.loadTwo()
}
function load3_onclick() {
parent.loadThree()
}
// ]]>
</script>
</head>
<body bgcolor="#ff0000">
<input id="load2" type="button" value="Load 2" onclick="return load2_onclick()" />
<input id="load3" type="button" value="Load 3" onclick="return load3_onclick()" />
</body>
</html>
Two.htm
<!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>
<title>Untitled Page</title>
</head>
<body bgcolor="#00ff00">
</body>
</html>
Three.htm
<!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>
<title>Untitled Page</title>
</head>
<body style="background-color: #0000ff">
</body>
</html>
Frames were used to segmentate webpages, just like slices in design tools. They cannot overlap each other.
Maybe you could achieve what you want by using iframes instead of using a frameset. See this site for a demonstration.
But then again, I wouldn't be surprised if there are browsers that do not support overlapping iframes.