I'm trying to open a new window from another pop up java script window via writing html code in this pop up window, but it doesn't work, please help me as soon as possible.
<html>
<head>
<style>
.larger{ width:750px;}
.standard{ width:600px;}
.orginal{ width:10px;}
</style>
<script type="text/javascript">
function larger()
{
OpenWindow=window.open("", "larger","width=1000,scrollbars=yes");
OpenWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"'+
'http://www.w3.org/TR/html4/strict.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.larger{ width:750px;}'+
'</style></head><body>');
OpenWindow.document.write('high');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "larger";
}
function standard()
{
OpenWindow=window.open("", "newwin",'width=600,scrollbars=yes');
OpenWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'+
'"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
'<html><head><title>Test page</title>'+
'<style type="text/css">'+
'.standard{ width:600px;}'+
'</style></head><body>');
OpenWindow.document.write("<img id='img1' src='webfonts.jpg'>");
OpenWindow.document.write('</body></html>');
OpenWindow.document.close();
OpenWindow.document.getElementById("img1").className = "standard";
}
</script>
</head>
<body>
<img class="orginal"id="img1" src="webfonts.jpg" border="0" />
<span onclick="larger()">fig1</span>
</body>
</html>
You have created the standard function in the first parent script and you are trying to call it from the child pop-up window, which would offcourse not find this function defined within it.
Related
the add class is not working even if it is in document ready. I tried both with document ready and without it. it is not working but alert is working.
var $jbanner = jQuery.noConflict(true);
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
other code
var $jbanner = jQuery.noConflict(true);
$jbanner(document).ready(function () {
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
})
With document ready function even the alert box is not working. is it conflicting with other jquerys in the page.
#wad is an image
<img id="wad" src="images/banner.jpg"/>
thanks
ok this should be pretty easy, but not working for me. I just pasted what i am trying to do in a separate html file. but still not working, any help is appreciated.
<!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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript">
var $jbanner = jQuery.noConflict(true);
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
else {
alert("greater than 1200");
$jbanner("#wad").addClass("show");
}
</script>
<style type="text/css">
.hide{display:none;}
.show{display:block;}
</style>
</head>
<body><div>
<div id="wallpaperad">
<a href="http://www.yaho.com" target="_blank" rel="nofollow">
<img src="http://www.placehold.it/160x160" alt="banners" id="wad" /> </a>
</div>
</div>
</body>
</html>
I am just trying to create a floating banner ad. that hides for smaller screen sizes.
Try to without jbanner.
$("#wad").addClass("hide");
I'm following a tutorial to create a slideshow with JavaScript and HTML.
The first image and the "Next" and "Previous" buttons are on the page however when I click on next or previous it says this webpage can not be found. Can someone help me please?
The tutorial can be found here and I have also included the HTML and JavaScript code below.
The html code is:
<!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>Image Slideshow</title>
<script type="text/javascript"
src="script09.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<h1>Welcome, Robot Overlords!</h1>
<img src="images/robot1.jpg"
id="myPicture" width="200"
height="400" alt="Slideshow" />
<h2><a href="previous.html"
id="prevLink"><<
Previous</a> <a
href="next.html" id="nextLink">Next
>></a></h2>
</div>
</body>
</html>
and The JavaScript code is
window.onload = initLinks;
var myPix = new Array("images/robot1.jpg",
"images/robot2.jpg","images/robot3.jpg");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").
onclick = processPrevious;
document.getElementById("nextLink").
onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src =
myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src =
myPix[thisPic];
return false;
}
Rather than bind your function in a onload init function, try:
<a href="previous.html" id="prevLink" onclick="processPrevious();return false;">
Chances are your have a js error on the page so the functions are ignored and the a tags just follow the link you have used. Open up the console of your browser and check for syntax errors.
You have given HTML page url in href of both the links.
But I think you just need to change the image src attribute...
Use href="javascript:" in both the links. So there is no need of event.preventDefault() in this case...
(href="#" scrolls the page to the top).... :)
The following works well in Internet Explorer and Chrome, but NOT in Firefox.
The idea is to change the background of the parent body after every click within the iframe.
Note that Firefox somehow knows to set the blue background initially.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><script>
function polling() {
if (window.iframeId.change) document.body.style.background = 'red';
if (!window.iframeId.change) document.body.style.background = 'blue';
setTimeout(polling, 1000); }
</script></head>
<body onload="polling();">
<iframe id="iframeId" src="frame.html" style="width:100px; height:100px;"></iframe>
</body>
</html>
frame.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><script>var change=false;</script></head>
<body style="background:yellow;" onclick="change=!change;"></body>
</html>
This is how I could make it work:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function polling() {
if (window.frames['theIframe'].change) {
document.body.style.background = 'red';
}
else {
document.body.style.background = 'blue';
}
setTimeout(polling, 1000);
}
</script>
</head>
<body onload="polling();">
<iframe id="iframeId" src="frame.html" name="theIframe" style="width: 100px; height: 100px;"></iframe>
</body>
</html>
frame.html
<!DOCTYPE HTML >
<html>
<head>
<script>
var change = false;
function load() {
document.onclick = doClick;
}
function doClick() {
change = !change;
}
</script>
</head>
<body style="background: yellow;" onload="load()"></body>
</html>
So what I want to do is to replace the main database loaded into a Google Earth GEPlugin instance in a web browser. If I go to the Code Playground: Here http://code.google.com/apis/ajax/playground/#mars/alternate_server_connectivity
Then I get an example of loading a new database. However, if I try to make the CreateInstance calls multiple times, I keep getting the same database (I am guessing this is due to the GEPlugin.exe running in the background still using the first database. If I remove that instance by killing the geplugin.exe process then the load works)
On that code page for an example edit the HTML and I used the following html/script combo
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback,
{ database: 'http://khmdb.google.com/?db=mars' });
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function loadmoon()
{
delete ge;
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
//http://khmdb.google.com/?db=moon
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
LOAD THE MOON
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
This works in that it reloads the instance, BUT it does NOT change the database.
I should say that I am aware of the option of adding a side database, but if I try to load a side database the Terrain is still mapped to the terrain of the first database. For me this is not acceptable.
Set the innerHTML of 'map3d' to an empty string before creating the instance again.
function loadmoon(){
document.getElementById('map3d').innerHTML = '';
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
}
Take a look at this example, should be exactly what you need. http://earth-api-samples.googlecode.com/svn/trunk/examples/alternate-spheres.html
I am making my own WYSIWYG editor. But i can't make any text bold with the execcommand function. I am using the next code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function loadWysiwyg() {
if(window.navigator.appName == "Microsoft Internet Explorer") {
reactioneditor.document.designMode = "on";
} else {
document.getElementById('reactioneditor').contentDocument.designMode = "on";
}
}
function make_bold() {
document.getElementById("reactioneditor").contentWindow.document.execCommand("bold", false, null);
}
</script>
</head>
<body onload="loadWysiwyg();">
<iframe id="reactioneditor" style="border: 1px solid #CCC;width: 100%; height: 200px;"></iframe>
<button id="makebold" onclick="make_bold();">Maak bold</button>
</body>
</html>
I readed multiple tutorials but with no effect, i don't now how i can fix it.
Is there anyone who can?
Your exact code works for me in IE, Firefox, and Chrome. I wrote some text into the iFrame, selected it, and clicked the button. Are those the steps you are taking? Are you getting any errors?