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>
Related
I want to load the Birt Report After calling the function in div or iframe.
Tried in below manner :
<html>
<head>
<script type="text/javascript">
function myFunction() {
**//var inn= "<birt\:viewer id=\"birtViewer\" reportDesign=\"test.rptdesign\" pattern=\"frameset\" height=\"500\" width=\"900\" format=\"html\"></birt\:viewer>"
//alert(inn)
//document.getElementById("test").innerHTML = inn;**
**var reporturl = "http://localhost:8080/Sample_Birt_viewer/frameset?__report=test.rptdesign&sample=my+name";**
alert("here");
**$('#reportload').load(reporturl);**
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<button onclick="myFunction()">Click me1</button>
<div id="test">
**<iframe id="reportload" name="myReport" height="300" width="1136" />**
**<%-- <birt:viewer id="birtViewer" reportDesign="test.rptdesign"
pattern="frameset"
height="500"
width="900"
format="html"></birt:viewer> --%>
</div>**
</body>
</html>
I tried in above manner it is not loading
when loading the page if call directly in div it is working(like below), But i want to load through Java script or jquery, because i wand to show selected values as well as report in down.
<iframe id="reportload" name="myReport" height="300" width="1136" src="http://localhost:8080/Sample_Birt_viewer/frameset?__report=test.rptdesign&sample=my+parameter" />
<birt:viewer id="birtViewer" reportDesign="test.rptdesign"
pattern="frameset"
height="500"
width="900"
format="html"></birt:viewer>
How can I over come above problem?
I'm trying to display the title of my image right underneath the image itself. I have an onClick event in the image that changes the title of the image once you click on it.
<!DOCTYPE html>
<html>
<head>
<title>
onClick Handler
</title>
<h3 style="text-align:center">onClick Handler</h3>
</head>
<body style="text-align:center">
<img src="NukaCola.jpg" title="Nuka Cola" id="id1" height="550" width="350" onClick="this.title='You Clicked!';"/>
</br><script>
var x=document.getElementById("id1");
document.write(x.title);
</script>
</body>
</html>
Now, I know it's bad form to use document.write( ), and it doesn't even accomplish what I want to do, because I would like to display the new image title after the user has clicked on the image. How can I achieve this?
<!DOCTYPE html>
<html>
<head>
<title>
onClick Handler
</title>
<h3 style="text-align:center">onClick Handler</h3>
</head>
<body style="text-align:center">
<img src=NukaCola.jpg title="Nuka Cola" id="id1" height=550 width=350 onClick="updateTitle(this)"/>
<p id='id1Text'></p>
</br>
<script>
function updateTitle(img) {
img.title = 'You clicked!';
document.getElementById(img.id +'Text').textContent = img.title;
}
</script>
</body>
</html>
Noticed something: you have a h3 tag declared within the head tag.
When I click the link "show pdf" I want to display the embeded pdf. However there must be something wrong. The pdf will now load. Some help?
Check out my fiddle: http://jsfiddle.net/benjones337/7jkmvLL9/2/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset=utf-8 />
<script type="text/javascript">
window.onload = function() {
document.getElementById("showPDF").onclick = function() {
document.getElementById("thePDF").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div>
<object data="http://www.elml.org/website/en/download/gitta_databases.pdf" type="application/pdf">
<embed id="thePDF" src="http://www.elml.org/website/en/download/gitta_databases.pdf" width="700" height="575" type="application/pdf" />
</object>
<p><a id="showPDF">Show PDF</a></p>
</div>
</body>
</html>
Avoid using onload event in jsfiddle as this event already happened when the page is "loaded".
Hide the object itself (I moved your id to the parent element) as the embed element is not affected with your style.
jsfiddle.net/7jkmvLL9/6/
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>
I'm trying to make web app that will allow user to drag div's in iframe element.
This is my current code in index.html :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
function onDrag(event){
event.dataTransfer.setData('Text', 'Some content');
}
</script>
<div id="items">
<ul>
<li><div draggable="true" ondrag="onDrag(event)">Content1</div></li>
<li><div draggable="true" ondrag="onDrag(event)">Content2</div></li>
</ul>
</div>
<iframe id="box" src="box.html">
</iframe>
And here is my code from box.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function onDrop(event){
event.target.innerHTML += event.dataTransfer.getData('Text');
alert('Ok!');
}
function onDragOver(ev){
ev.preventDefault();
}
</script>
</head>
<body ondragover="onDragOver(event)" ondrop="onDrop(event)">
</body>
</html>
Drag works, and I even get that alert from onDrop function, but the event.dataTransfer.getData('Text') is returning empty string, and I don't know why.
Thanks in advance
You should set drag data in the dragstart event, not the drag event: http://jsfiddle.net/SVtzK/1/.