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/.
Related
I have written a JavaScript alert message code it displays the alert message first in both codes 1 and 2 before Html content. What should I do to run the HTML content first and then a javascript code?
Code 1
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script src="text.js"></script>
</body>
</html>
Code 2
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
alert(" This is alert message.");
</script>
</body>
</html>
There is a load event, which will fire AFTER the page is loaded. You can listen to the event:
window.addEventListener('load', function() {
console.log('All assets are loaded');
alert ("This is an alert MSG");
})
You can use setTimeout() for this
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
setTimeout(()=>{
alert(" This is alert message.")
},2000)
</script>
</body>
</html>
You can use window.onload function. This function called after body load.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World !</title>
</head>
<body>
<h1>I am learning JavaScript.</h1>
<div id="Content">
<p>This is a paragraph tag. Here the content of html.</p>
</div>
<script>
window.onload = function () {
alert(" This is alert message.");
}
</script>
</body>
</html>
In your first code just put defer attribute as below
<script defer src="text.js"></script>
A script that will be downloaded in parallel to parsing the page, and executed after the page has finished parsing
for more detail refer to the URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
create your Script like below
<script type = "text/javascript">
function displayalert() {
alert ("This is an alert MSG");
}
</script>
add this code in your body(this is a button)
<input type = "button" value = "Click me" onclick = "displayalert();" />
when you click on this button you will see the alert
We are using the onclick attribute and call the displayalert() function where the alert() is defined.
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/
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>
having an issue with some JS where the cookie is setting as soon as the page is loading, when it should only be setting when I've click to close the box.
Any help would be appreciated. Code below:
<!doctype html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://resources.site.co.nz/scripts/jquerycookie.js"></script>
<script type="text/javascript">
$(function() {
$('a.close').click(function() {
$(this).parent().fadeOut(1500);
$.cookie('hidden', 'true', { expires: null});
alert($.cookie('hidden'));
return false;
});
if($.cookie('hidden','true')){
$('#errororganinfoinchide-this').hide();
}
});
</script>
</head>
<body>
<div id='boxes'>
<aside class='warning' id='errororganinfoinchide-this'>
<a href='#errororganinfoinchide-this' class='close'><img src='http://resources.site.co.nz/backgrounds/close.png' /></a>
<img src='http://resources.site.co.nz/backgrounds/icon_warning.png' class='messageimg' />
<h4>Warning - Organisation Info</h4>
<p>Sorry, there was an error opening the "Organisation Info" Box. Please try again later.</p>
</aside>
</div>
</body>
Doesn't the line "if($.cookie('hidden','true')){" set the cookie instead of reading it?
It should probably be something like this instead...
if($.cookie('hidden') == 'true'){