Why are multiple HTML Object Objects not displaying? - javascript

I'm trying to get user-controlled display of content from 3rd party websites. In the demo setup, onmouseover of a link causes an object to be displayed, which then disappears onmouseout.
The demo works for one of the objects, and for all of them in turn if I delete the other objects, so I'm guessing the issue is about the objects interfering with each other.
I made a guess at z-index, but that didn't seem to work.
Here's the demo file:
<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}
</style>
</head>
<body>
Link 1 |
Link 2 |
Link 3
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" />
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" />
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" />
</body>
</html>
Thanks in advance.

I inspected it in firebug, and realized the other objects weren't being rendered at all. I made a guess that the object tag needed a closing </object>
Code fixed below:
<!DOCTYPE html>
<html>
<head>
<title>On mouseover show object</title>
<script>
function toggleDiv(id, flagit)
{
if (flagit === 1){
document.getElementById("demo").innerHTML="Over";
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.zIndex=1;
}
else {
document.getElementById("demo").innerHTML="Not over";
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.zIndex=-1;
}
}
</script>
<style type="text/css">
#div1, #div2, #div3 {visibility:hidden; position:absolute; width:400px;}
#div2 {left:400px;}
#div3 {left:800px;}
</style>
</head>
<body>
Link 1 |
Link 2 |
Link 3
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<object id="div1" type="text/html" data="http://en.m.wikipedia.org/wiki/Woodworking" > </object>
<object id="div2" type="text/html" data="http://en.m.wikipedia.org/wiki/Ironwork" /> </object>
<object id="div3" type="text/html" data="http://en.m.wikipedia.org/wiki/Stonemasonry" /> </object>
</body>
</html>

Related

Document.write created script does not work

I have a finished JQuery for moving a 360° object (picture) with mouse actions.
The code is working:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;">
<img src="v/1.png" />
<img src="v/2.png" />
<img src="v/3.png" />
<img src="v/4.png" />
<img src="v/5.png" />
</div>
</center>
</body>
</html>
The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)
So basically it's like that:
<button id="click1" onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write(' jQuery(document).ready(func');
document.writeln('tion() {');
document.write(" jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln(' });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">');
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>
The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.
Thank for your help!
document.write overwrites any code you have.
Example:
function overwrite() {
document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="overwrite()">Click me!</button>
</body>
</html>

How to print a html with entire iframe(s) content in it

I'm working on a printing function for a web mail client, currently as we need to show some additional mail infos, so display an email by embedding a iframe, iframe height is dynamic based on inner content height, when I click 'Print' menu of browser then the print preview dialog pops up, find that can not print entire iframe content. Anybody know why? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
iframe{
width: 100%;
border: 1px solid #ECECEC;
}
</style>
<script>
function loaded(evt) {
const frame = evt.target;
frame.height = frame.contentWindow.document.body.scrollHeight;
};
function reloadFrame(frame) {
frame.height = 'auto';
loaded({target: frame});
}
window.onresize = function() {
reloadFrame(frame1);
reloadFrame(frame2);
}
</script>
</head>
<body>
<div class="container">
<h2>additional info</h2>
<iframe id="frame1" src="child.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
<h2>additional info</h2>
<iframe id="frame2" src="child2.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>
Here are some screenshots:
Html Page
Print Preview

Completely Hide frame in framesets using Javascript or Jquery

Please go thorough below HTML files code. Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Example Title (Replace this section with your own title)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
$(document).ready(function(){
$("button").click(function(){
$('frame[name="topFrame"]').fadeToggle("slow");
$("#top").toggle();
});
});
</script>
</html>
content.html
<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:30px;
background-color:#ffcc00;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>Content</h1>
<br>
<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$('button').on('click',function(){
$( "p" ).toggle( "slow" );
$( "h1" ).toggle( "slow" );
});
</script>
</body>
</html>
menu_1.html
<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#ff9900;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
$('img, button').on("click" , function (e) {
$('p').toggle();
});
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p>White Page</p>
</body>
</html>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
var origCols = null;
function receiveMessage(event)
{
if(origCols!=null)
showFrame()
else
hideFrame();
}
addEventListener("message", receiveMessage, false);
function hideFrame() {
var frameset = document.getElementById("frameSet");
origCols = frameset.rows;
frameset.rows = "0, *";
}
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
}
</script>
</html>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
Try using IDs
Here's a short example..
<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>
<script type="text/javascript">
$('#thumbnail').click(function() {
$('#showhide').toggle();
});
</script>

Javascript not working for: onclick show hidden div from textarea

I am trying to allow a user to click in a textarea and when they start typing it shows an initially hidden div. Here is my script and html, but this does not work, not sure where I am going wrong.
<head>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</head>
<body>
<textarea name="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
</body>
</html>
Just some minor changes based on what the guys have commented on above.
Added an id to the textarea
Moved JS script so that the the elements exist before you call the JS.
<html>
<head>
</head>
<body>
<textarea name="showPanel" id="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
document.getElementById("thePanel").style.visibility = "visible";
}
</script>
</body>
</html>

Show a Static image if browser not supporting 3D image

In my html page want to insert a 3d image if canvas is supported by the browser and a static image if it is not. The image should be inserted on page load dynamically.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Hello Modernizr</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="modernizr.js"></script>
<script>
if (Modernizr.canvas)
{
$(document).ready(function()
{
$("p").show();
});
alert("This browser supports HTML5 canvas!");
}
else
{
$(document).ready(function()
{
$("p").hide();
});
}
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>eseardsa
</body>
</html>
You can just add the image in your else statement similar to the code below. Although you probably want to manipulate a div instead of a p.
} else {
$(document).ready(function(){
$('p').text('<img src="yourImg.png" />');
}
}
change the java script
to display image in all browser
<div class="cont_machines_3d">
<div class="cont_3d">
<iframe height="600" scrolling="auto" src="3d/3dimage.html" width="800">
</iframe>
</div>
</div>
to display image in ie
<div class="cont_machines_3d_ie"><img src="/3d/images/img.jpg" width="800" /></div>
</div>

Categories