Is it possible to use Javascript or HTML to change the the HTML contents?
For example, I have
<HTML>
<head>
<title>Hello!</title>
</head>
<body>
Click the button below to go to page two.
<button type="button" onclick="gotopage2">Click Me!</button>
</body>
</html>
and I am trying to make it to where when the button is clicked, the page changes to:
<HTML>
<head>
<title>Hello!</title>
</head>
<body>
Welcome to page 2!
</body>
</html>
That way, a user can simply click the button and have the page seemingly change without having to load a new page. Like going into a house on a video game.
This is for a mini webapp I'm making, so that when a user clicks an icon, it takes them to a new screen depicting an image and a body of text.
we can use the innerHTML property to change the html element value,
make use the following code sample.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome to page 2!";
}
</script>
<HTML>
<head>
<title>Hello!</title>
</head>
<body id="demo">
Click the button below to go to page two.
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
Try this
function load_html() {
$("html").html("<head><title>Hello!</title></head><body>Welcome to page 2!</body></html>");
//or another file then use
//$( "html" ).load( "/resources/load.html html" );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<HTML>
<head>
<title>Hello!</title>
</head>
<body>
Click the button below to go to page two.
<button type="button" onclick="load_html()">Click Me!</button>
</body>
</html>
if you'e going to be swapping out a lot of content or multiple pages worth you could use Jquery's .load() to replace the content with a different file:
HTML
<div class="content">
Click the button below to go to page two.
<button type="button" class="replace">Click Me!</button>
</div>
CSS
$(".replace").click(function(){
$(".content").load( "file.html" );
});
otherwise you can just have the text in a variable and swap it like so:
$(".replace").click(function(){
var text = "Welcome to page 2!"
$(".content").html(text);
});
FIDDLE
Or you could just use innerHTML like Manu K M suggested if you want a pure Javascript solution.
Just try this,you just need to Id for your body and in your onclick function should be onclick="gotopage2()" instead of onclick="gotopage2"
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=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body id = 'newPage'>
Click the button below to go to page two.
<button type="button" onclick="gotopage2()">Click Me!</button>
<script>
function gotopage2()
{
var text = "Welcome to page 2!"
$("#newPage").html(text);
}
</script>
</body>
</html>
Related
I am currently working on the beginning stages of js and trying to create buttons and alerts with it. when i write my code, the alerts work but my buttons are not appearing. when i inspect my webpage, the buttons dont even appear in the code. any suggestions on what i can do to fix this?
alertmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<script type="text/javascript" src="js/code.js">
</script>
</body>
</html>
code.js
window.alert("Welcome to Javascript");
buttons.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button 2">Click me.</button>
<script>
document.getElementbyId("button 2").onclick=function(){
alert("You have just clicked me!");
}
</script>
</body>
</html>
well at first try not to use spaces when you create your buttons ids e.g (id="button 2")
instead use id="button2"
I modified your code adding the event listener on document ready find the below code hope that is what you are looking for, it should get your started.
Note: for posting here when you write your message paste your code under your message text and select the code then Press ctrl+K that should identify your code area then post it and all should work fine...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert message</title>
</head>
<body>
<p>Javascript.</p>
<button onclick="alert('How can I help you?')">Click me.</button>
<button id="button2">Click me.</button>
<script>
$(document).ready(()=>{
document.getElementById("button2").addEventListener("click", function(){
alert("You have just clicked me!");
});
})
</script>
</body>
</html>
I want to access variable from iframe without editing iframeContent.html page. I don't know why alert window still shows 'undefined'
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var iframe0=0;
var iframe0document=0;
var inputIframe=0;
function getIframeText() {
var iframe0 = document.getElementById("iframe123");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("wynik2");
alert(inputIframe.value);
};
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe123" src="iframeContent.html" >
</div>
</body>
</html>
iframeContent.html:
<html>
<head>
<title>IFrame Child Example</title>
<script type="text/javascript">
var asd="12";
</script>
</head>
<body>
<div id="wynik2"></div>
<script type="text/javascript">
document.getElementById("wynik2").innerHTML=asd;
</script>
</body>
</html>
Frame on parent page looks good (shows number 12). I'm testing my page on Chrome but through command window typing 'allow file access from files'. So this isn't problem. Global variables are also set (am I doing it right?) so I don't know why is still udefined.
use inputIframe.innerText instead of inputIframe.value . "wynik2" is a div, right? cheers! :)
I want to do popup like gmail chat popup window as well as I want to do pop-in like the way gmail does.
once the pop-out is done particular div should be open in new window and once the pop-in done the particular div should be placed in the position where it was been already, so far I am able to do the pop up the window in new window with the following code, but I don't have the idea how to do pop-in
Please note: once the pop-out done particular div should be open in another window and the variables in the main window also should be accessible in the pop-out window.
work out in Jsfiddle
Pop out demo
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
//<![CDATA[
$(function(){
$('.popup').click(function (event) {
event.preventDefault();
window.open($(this).attr("href"), "popupWindow",
"width=600,height=600,scrollbars=yes");
});
});//]]>
</script>
</head>
<body>
google
</body>
</html>
UPDATE
I have found the option how to open the div in new window the code as follows, now I am able to pop out the window with contents in the div, now I need to know how can I access the variable value in the pop out window and how to attach back the pop out window into that original place
Jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Popup demo
</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
</script>
</head>
<body>
<a href="#" class="popup">
google
</a>
<div id="toNewWindow">
Testing
<input type="button" onclick="test()" value="click">
</div>
<script type="text/javascript">
//<![CDATA[
$('.popup').click(function (event) {
event.preventDefault();
var w = window.open("","myWin","height=400px,width=600px");
w.document.write( $("#toNewWindow").html() );
$('#toNewWindow').detach();
});
var a=3;
function test()
{
alert(a);
}
//]]>
</script>
</body>
</html>
Second edit
Now I have found the way to access the variables in between opener and child, code as follows
Now my problem is
if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.
Opener
<!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>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
//var s=document.getElementById('page');
winObj.document.write(s);
//win.parent.detach(win);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
Child
<!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 type="text/javascript">
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
I would create a Named Window on the page your window expands from called eg. "HomeWindow".
Then expand window using similar to what you have, except rather using _blank give it a specific name like "ExpandedWindow"
eg.
window.open("http://YourLink.TLD","ExpandedWindow","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
then in the pop up to Retract window use these in a click function.
window.open(document.URL,"HomeWindow");
ExpandedWindow.close();
If I understand the question correctly, you want state preserved when you popout the window. It looks like you are populating the popout HTML from the #page node, which contains an iFrame.
First of all, know that when using an iFrame, any reparenting of the iframe node will cause a reload, losing all state. It's unfortunate ;(
If I were you, I would make it so that all event handling and state management is done in the main window. You're somewhat on the right track. When you open up the popout, if the main window is holding the state you can write that state to the opened window's iframe. Likewise when you close the popout and the iframe mounts back in the main window, you can initialize it with the correct values because the main window is keeping track of the state.
The details of how to do so...I'll leave as an exercise to the reader.
I have some images in my web page, and I want to display a pop up when the user hover the mouse near each image, and when the user move the mouse elsewhere, the pop up disappears
I see this functionality in a lot of site but I don't know how I can do it
I saw jquery UI but the dialog doesn't match to my goal
do you have any idea
I just tested that but no result :
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#hover1").mouseenter(function() {
$("#content").fadeIn('fast');
});
$("#hover1").mouseleave(function() {
$("#content").fadeOut('slow');
});
</script>
</head>
<body>
<p id="hover1">
Hover here!
</p>
<div id="content" style="display:none">
Content here!
</div>
</body>
</html>
thank you
wrap image with relative container and put inside absolute container (popup), show him (display:block; from display:none;) onbly then wrap container is hovered. do not forget to set z-index for popup.
You need to use jQuery mouseenter and mouseleave functions:
<p id="hover1">
Hover here!
</p>
<div id="content" style="display:none">
Content here!
</div>
$("#hover1").mouseenter(function() {
$("#content").fadeIn('fast');
});
$("#hover1").mouseleave(function() {
$("#content").fadeOut('slow');
});
http://jsfiddle.net/SzgqR/
Documentation
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/
Edit
Remember to include jQuery into your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I have an input which at some points happens to have the focus. If the user click in the "background" of the page, the input loses its focus. I was trying to simulate the click on the background with the following code, but this doesn't work (you will notice that the input still has the focus). Any suggestion on how to write code that simulates a click on the "background" of the page?
<!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"/>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("input").focus();
document.getElementById("main").focus();
});
</script>
</head>
<body>
<div id="main">
<form action="/">
<p>
<input type="text" id="input"/>
</p>
</form>
</div>
</body>
</html>
I would imagine using blur() would do the trick:
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("input").focus();
document.getElementById("input").blur();
});
</script>
Try using the blur event. If you're using jQuery there is a method you can call on the DOM object to raise this event. The blur() method should also work without jQuery.
http://docs.jquery.com/Events/blur
Your idea is right, but there is a little problem.
document.getElementById("main").focus();
<div id="main">
as shown in your code, actually the div HTMLElement doesn't have a focus method.
so you can call other elements that have a focus method or call blur() on the input element