Most of my code is from the website: http://www.w3schools.com/html/html5_draganddrop.asp.
I've added the snippets of my .css and .html code. I'd like to be able to drag either of the two .gif images into the "first" box, though I'm not able to do this (in CoffeeCup Free HTML Editor). Perhaps I'm not using IDs correctly?
div.content {
height:70px;
width:350px;
border:1px solid #aaaaaa;
float:left;
margin:5px;
}
div#first:{
}
div#second:{
}
div#third{
}
div#fourth{
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style1.css" rel="stylesheet" type="text/css"/>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div class="content" id="first">Block 1</div>
<div class="content" id="second">Block 2</div>
<div class="content" id="third">Block 3</div>
<div class="content" id = "fourth">Block 4</div>
<div id="first" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="squig.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="squig2.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
I have two Solutions for you, choose which you need.
1. You need this in your HTML-Code:
<div class="content" id="first" ondrop="drop(event)" ondragover="allowDrop(event)">Block 1</div>
<div class="content" id="second">Block 2</div>
<div class="content" id="third">Block 3</div>
<div class="content" id = "fourth">Block 4</div>
You have to delete this line:
<div id="first" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
2.Another Solution without changing nothing in your HTML-Code.
Add this in your CSS-Code:
#first {
height:70px;
width:350px;
border:1px solid #aaaaaa;
float:left;
margin:5px;
}
Related
i have a simple webpage made by using bootstrap.now i want to embed it in another webpage but i have a problem in setting the height .
here is my webpage:
<html>
<head>
<style>
#above1 { margin-bottom:6px; }
#iframe1 { height:100%; width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px; }
</style>
</head>
<body>
<div class="container-fluid">
<div id="above1">
<div class="row"> [content here]</div>
<div class="row"> [more content here]</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<iframe id="iframe1" src="home.html"></iframe>
</div>
</div>
</div>
</body>
</html>
here is my home.html webpage which i want to embed is:
`<htlm>
<head>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-md-6">
<img src="image/2.png" >
</div>
<div class="col-md-6">
<img src="image/1.png" >
</div>
</div>
</div>
</body>
</html>`
when i implement this i got scrollbar in iframe how i gonna fix this issue?
Remove height and width in #iframe1
This Script to help you to auto-adjust the width and height of the iframe to fit with content in it.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe id="iframe1" src="home.html"></iframe>
I'm having trouble linking my external file sheet to the separate html page. The .css file and html file are in the same folder also but when i run it the content is only appearing. Any help is appreciated. Thanks!
CSS Code
div
{
border-radius:5px;
}
#header
{
z-index:1;
width:97.%;
height:60px;
background-color:red;
margin-top:-20px;
margin-bottom:10px;
position:fixed;
}
#name
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#email
{
float:left;
margin-left:5px;
padding-top:5px;
font-size:16px;
font-family:Verdana, sans-serif;
color: #ffffff;
}
#sidebar
{
left:90px;
top:160px;
position:fixed;
width:200px;
height:600px;
background-color:gray;
}
#content
{
left:290px;
top:160px;
position:fixed;
width:600px;
height:600px;
background-color:lightblue;
}
p
{
padding-left: 50px;
padding-top: 50px;
}
HTML Code
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</body>
</html>
That's what you need. See there please. I noticed lost div , check your code.
http://jsfiddle.net/vo9hLzqf/
If you feel problems with other styles like #email #name etc. check that in HTML you set right type
if your css is #email you should use <div id="email">%yourcode%</div>
and .email will be <div class="email">%yourcode%</div>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<title>HTML Project</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink">Home</div>
<div class="topNaviagationLink">About</div>
<div class="topNaviagationLink">Portfolio</div>
<div class="topNaviagationLink">Services</div>
<div class="topNaviagationLink">Contact</div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Project</div>
<div id="headerSubtext">HTML Project</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>content </p><br />
<p>Content.</p><br />
<p>Other Content.</p></div>
</div>
</div>
this is my code :
<!DOCTYPE>
<html>
<body>
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="clear:both"></div>
<div id="div2" style="border:1px solid red;margin-top:20px;background-color: #FFF; ">2</div>
</div>
</body>
</html>
in Chrome margin-top is enabled , div1 and div2 Apart 20px;
but in IE8 , div1 and div2 are always keep together。
you can float:left in second div too.
and with adding a div in the second div you can disable aspects of floated div check http://jsfiddle.net/SzgGz/3/
HTML:
<div class="main">
<div id="div1" style="float: left;height: 200px;border:1px solid red; ">1</div>
<div style="float:left; clear:both"></div>
<div id="div2" style="margin-top:20px; float:left; width:100%;"><div style="border:1px solid red;background-color: #FFF;">2</div></div>
</div>
I have implemented many onclick functionality. But it is not functioning here alone.
My HTML
<body style="background-color:#333333;">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="home()"/></div>
</div>
My CSS
.wrapper_other
{
width:auto; margin:0auto; overflow: hidden;
}
.header
{
float:left; height:44px; line-height:44px; margin:0%; width:100%;
}
.header_title
{
height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight:bold; width:100%;
}
Myfunction
function home()
{
window.location.href="index.html";
}
EDIT
My file structure
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function test()
{
window.location.href="index.html";
}
</script>
</head>
<body style="background-color:#333333;">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="info()"/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100% />
<div id="element_name_image" class="element_name_image"></div>
</div>
<div id="parameters" style="background-image:url(img/icons_bg.png);" class="parameters">
<div id="abc" class="abc"></div>
<div id="def" class="def"></div>
<div id="ghi" class="ghi"></div>
<div id="jkl" class="jkl"></div>
</div>
<div id="wrapper" class="wrapper">
<div id="scroller" class="scroller">
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><ul class="scroller ul"><li></li></ul></strong></h1>
</div>
<div id="desc" class="desc">
<p><ulclass="scroller ul"><li></li></ul></p>
</div>
</div>
</ul>
</div>
</div>
Please,help me identify my mistake.
<div id="home" class="home"><img src="img/home.png" onClick='window.location.href="index.html";'/></div>
Why don't you use the location.href inside the onClick()?
You have used "home" in id attribute and function name. When you use home() onclick, you might have faced not a function exception as Browser refer HTMLDivElement (due to an id attribute). Change the value in id attribute or function name and check
Here's the HTML for script.
<script type="text/javscript">
function home()
{
window.location.href="index.html";
}
</script>
Now, place the code either the following:
inside the <head> tag or
above the </body> tag
Though placing above the ending <body> tag is highly recommended.
Update
Given the directory structure is like this:
- index.html
- script.js <- assuming the function is in there
Here's the line of code
<script type="text/javascript" src="script.js"></script>
Then place the code either the following:
inside the <head> tag or
above the </body> tag
What is your error? Its working fine see the DEMO
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="test();"/> </div>
</div>
</div>
function test()
{
window.location.href="index.html";
}
EDIT
Found your problem
1) Function not defined (test should changed to ->info)
2) onclick (C was capital)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function info()
{
window.location.href="index.html";
}
</script>
</head>
<body>
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" alt="clickme" onclick="info()"/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100% />
<div id="element_name_image" class="element_name_image"></div>
</div>
<div id="parameters" style="background-image:url(img/icons_bg.png);" class="parameters">
<div id="abc" class="abc"></div>
<div id="def" class="def"></div>
<div id="ghi" class="ghi"></div>
<div id="jkl" class="jkl"></div>
</div>
<div id="wrapper" class="wrapper">
<div id="scroller" class="scroller">
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><ul class="scroller ul"><li></li></ul></strong></h1>
</div>
<div id="desc" class="desc">
<p><ulclass="scroller ul"><li></li></ul></p>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
Wrong here I can find is
1- U have used home in as id attribute of div and function name.
<div id="home" class="home"> <img src="img/home.png" onClick="home()"/> </div>
2- Try to write onclick all in small and put [;] after function call
show write it like onclick="home();" there will be no error!
All browser accept it.
Try to debug using Chrome console or Internet Explorer(after un-checking - disable script debugging and disable all script debugging).
Here is Solution:
HTML CODE with Java Script: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="yourcss.css" />
<script type="text/javascript">
function navigator() {
alert("Test is called!");
window.location.href = "justchill.html";
}
</script>
</head>
<body style="background-color: lightyellow">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title">
<img src="Dream_home6.jpg"
alt="welcome" onclick="navigator();" />
</div>
</div>
</div>
</body>
</html>
Tested and verified on Chrome and Mozila Firefox.
Hope it will help.
I am having a div in which an image1 is there. when I drag and drop a new image2 over the previous image1, my new image2 is getting hidden and the previous image1 is displaying.
and also to that I want to get back my previous image1 when I drag and drop image2 out of that div
So I want to overcome this issue
____________________________________________
<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
<style type="text/css">
div[id^="place"]
{float:left;
width:80px;
height:80px;
margin:3px;
padding:3px;
border:1px dotted #333333;
background-color:#ffff99;
}
span
{float:left;
width:80px;
margin:3px;
padding:3px;
border:1px solid #999999;
color:#333333;
}
.pics, .nums
{
clear:both;
text-align:center;
}
</style>
<script type="text/javascript">
function dragIt(theEvent) {
theEvent.dataTransfer.setData("Text", theEvent.target.id);
}
function dropIt(theEvent) {
var theData = theEvent.dataTransfer.getData("Text");
var theDraggedElement = document.getElementById(theData);
theEvent.target.appendChild(theDraggedElement);
theEvent.preventDefault();
}
</script>
</head>
<body>
<p>This is a demo </p>
<!--element with draggable pictures-->
<div class="pics">
<div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="pic1.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />
</div>
<div id="place2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="pic2.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic2" />
</div>
<div id="place3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place5" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
</div>
<div class="nums">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
enter code here