I'm building a single page which consists of a list (of div's) on the left and a grid (of div's) on the right. I would like to add the ability for a user to click and drag one of the list items and drop it over one of the grid boxes. I'm not using HTML5, but I know it comes with this native capability. I'm trying to avoid HTML 5 at the moment.
The above illustration shows my basic page layout and the red line shows how things will be dragged/dropped. Any of the list items may be dragged into any of the grid boxes. The grid cells are dynamically sized (resizing the page will resize the grid cells) to where everything always fits in the page at any given time, no scroll bars. Each grid cell has an index starting from 0, counting from left-to-right then top-to-bottom. I need to pair the list item ID (could be any number) with its corresponding grid cell index (0-8 in this case).
I don't know even the first thing I need to do to make this drag/drop possible. I just know the very core basics of HTML - so I need some example to demonstrate this, not just some brief explanation of use this and that, because I won't know what this and that means. All the tutorials I can find are related to either HTML 5 in particular or related to just moving a list item within the same list - but in my case I need to move it outside the list.
Here's the page structure which I am working with below. Note that the list items are dynamically added upon page load...
<!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>View Cameras</title>
<script type="text/javascript" language="javascript">
var selIndex = 0;
var lastListIndex = 0;
function selBox(index) {
document.getElementById('b' + selIndex).style.backgroundColor = "Black";
selIndex = index;
document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
}
function pageload() {
AddListItem('rtsp://192.168.1.1', 'Test Item 1');
AddListItem('rtsp://192.168.1.2', 'Test Item 2');
AddListItem('rtsp://192.168.1.3', 'Test Item 3');
selBox(0);
camload('');
selBox(1);
camload('');
selBox(2);
camload('');
selBox(3);
camload('');
selBox(4);
camload('');
selBox(5);
camload('');
selBox(6);
camload('');
selBox(7);
camload('');
selBox(8);
camload('');
selBox(0);
}
function AddListItem(address, caption) {
lastListIndex += 1;
var i = lastListIndex;
var h = '<div id="camlistitem' + i + '" class="camlistitem" onclick="camload(\''+address+'\')">';
h += caption;
h += '</div>';
document.getElementById('divCamList').innerHTML += h;
}
function camload(addr) {
var h = '';
if (addr == '') {
h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
h += ' <img src="Cam.jpg" style="width: 100px; height: 80px;" alt="No Camera Selected"';
h += '</div>';
} else {
h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" ';
h += 'id="player'+selIndex+'" events="True" style="width: 100%; height: 100%;">';
h += '<param name="Src" value="' + addr + '" />';
h += '<param name="ShowDisplay" value="True" />';
h += '<param name="AutoLoop" value="False" />';
h += '<param name="AutoPlay" value="True" />';
h += '<embed id="vcl' + selIndex + '" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" ';
h += 'autoplay="yes" loop="no" target="' + addr + '" style="width: 100%; height: 100%;"></embed></OBJECT>';
}
document.getElementById('divContent' + selIndex).innerHTML = h;
}
</script>
<style type="text/css">
body
{
height: 100%;
}
* { margin: 0px; border: 0px; padding: 0px; }
h3
{
font-size: 14px;
font-weight: bold;
}
div.title
{
height: 40px;
box-sizing: border-box;
overflow: hidden;
}
div.main
{
height: 100%;
}
div.contentmain
{
top: 40px;
bottom: 0;
left: 250px;
right: 0;
overflow: hidden;
position: absolute;
}
div.side
{
top: 40px;
bottom: 0;
width: 250px;
position: absolute;
background: lightgrey;
}
.matrix
{
display: table;
width: 100%;
height: 100%;
}
.row
{
display: table-row;
}
div.contentbox
{
display: table-cell;
width: 33%;
}
table.selecttable
{
width: 200px;
height: 100%;
}
td.selecttable
{
text-align: center;
cursor: pointer;
color: White;
}
div.camlist
{
}
div.camlistitem
{
background-color: Navy;
color: White;
cursor: pointer;
margin-top: 1px;
padding-left: 5px;
}
div.camlistitem:hover
{
background-color: Blue;
}
</style>
</head>
<body onload="pageload()">
<div id="divTitle" class="title">
<h1>View Cameras</h1>
</div>
<div id="divMain" class="main">
<div class="side">
<h3>1) Click box to select view:</h3>
<div style="position: relative; float: left; width: 100%;">
<table class="selecttable" border="1px">
<tr>
<td class="selecttable" id="b0" onclick="selBox(0);" style="background-color: Black;">0<br /></td>
<td class="selecttable" id="b1" onclick="selBox(1);" style="background-color: Black;">1<br /></td>
<td class="selecttable" id="b2" onclick="selBox(2);" style="background-color: Black;">2<br /></td>
</tr>
<tr>
<td class="selecttable" id="b3" onclick="selBox(3);" style="background-color: Black;">3<br /></td>
<td class="selecttable" id="b4" onclick="selBox(4);" style="background-color: Black;">4<br /></td>
<td class="selecttable" id="b5" onclick="selBox(5);" style="background-color: Black;">5<br /></td>
</tr>
<tr>
<td class="selecttable" id="b6" onclick="selBox(6);" style="background-color: Black;">6<br /></td>
<td class="selecttable" id="b7" onclick="selBox(7);" style="background-color: Black;">7<br /></td>
<td class="selecttable" id="b8" onclick="selBox(8);" style="background-color: Black;">8<br /></td>
</tr>
</table>
</div>
<h3>2) Select cam to show in selected box:</h3>
<div style="position: relative; float: left; width: 100%;">
<div id="divCamList" class="camlist">
<div id="camlistitem0" class="camlistitem" onclick="camload('')">
[No Camera]
</div>
</div>
</div>
<h3>3) Can't see the cameras? Click Here.</h3>
</div>
<div class="contentmain">
<div class="matrix">
<div class="row">
<div class="contentbox" id="divContent0"></div>
<div class="contentbox" id="divContent1"></div>
<div class="contentbox" id="divContent2"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent3"></div>
<div class="contentbox" id="divContent4"></div>
<div class="contentbox" id="divContent5"></div>
</div>
<div class="row">
<div class="contentbox" id="divContent6"></div>
<div class="contentbox" id="divContent7"></div>
<div class="contentbox" id="divContent8"></div>
</div>
</div>
</div>
</div>
</body>
</html>
PS - there will be a missing picture Cam.jpg
UPDATE
Thanks to the help of roflmao's effort on the answer below, I got everything working fine now. Just a glitch where when I drag an item, it highlights everything on the page, but that's another story.
Okay, so the first thing you'll want to do right off the bat is use a javascript library, either jQuery or Prototype (jQuery being the more popular one). Manipulating standard JS the way you are is begging for cross-browser compatibility issues.
Once you've put in jQuery, you can just use the jQuery UI library and use the draggable and droppable interfaces. Check this page out.
The code will look something like this:
http://jsfiddle.net/CZNhP/21/
$(function() {
$("#menu li").draggable({reset: true});
$("#container").droppable({
drop: function(event, ui) {
// Here you instantiate your media object.
// You can access the place your object was dropped on with
// "this" and the draggged item with "ui.draggable"
}
});
});
Related
I am new to jQuery. I have a requirement of drag and drop where i got '3 draggable div' with id 'parent1, parent2 and parent3' to be dropped in a "container div drop-parent".
Scenario:
When i drag the div with id 'parent1' on container div 'drop-parent' it get dropped but when i choose 'parent 2' div to drop it isn't able to replace the div 'parent1' and to come at its inital position. Please refer below JSBin link for same [click here]
$(".child").draggable({
revert: "invalid",
containment: ".drag_drop_container"
});
$('.drop-parent').droppable({
accept: ".drag-parent > .child",
drop: function(event, ui) {
Dropped($(this), ui.draggable.click());
}
});
$('.drag-parent').droppable({
accept: function(draggable) {
if($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
return true;
}
},
drop: function(event, ui) {
Reverted($(this), ui.draggable.click());
}
});
function Dropped($this, $item) {
$item.css({'left': '0px', 'top': '0px'});
$this.droppable("disable").css('opacity',0.9);;
if($item.parent().hasClass('drop-parent')) {
$item.parent().droppable("enable");
} else {
$('.text-input').val($item.attr('data-id'));
}
$this.append($item);
$this.sortable();
}
function Reverted($this, $item) {
$item.css({'left': '0px', 'top': '0px'});
$item.parent().droppable("enable");
$this.append($item);
$('.droped_val').val('');
}
.drop-parent {
//border: 1px solid red!important;
/* background-color: red; */
//width: 640px; /*can be in percentage also.*/
height: 42px;
width: 100px;
//margin: 0 auto;
left:-4px;
//padding: 10px;
top:184px;
position: relative;
}
.dragbody {
//border: 1px solid blue!important;
/* background-color: red; */
//width: 281px;
//position: relative;
//height: 53px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
<div class="cards">
<table align="center" class="Table1">
<tr>
<td>
<div class="drag-parent" id="parent1">
<div class="child" data-id=1><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png"/></div>
</div>
</td>
<td>
<div class="drag-parent" id="parent2">
<div class="child" data-id=2><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png"/></div>
</div>
</td>
<td>
<div class="drag-parent" id="parent3">
<div class="child" data-id=3><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png"/></div>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="dragbody">
<div align="center" class="drop-parent">
</div>
<img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px"/>
</div>
</div>
</body>
</html>
I've edited the Dropped() function so that it moves all old elements that where on the body back to their parent and then adds the new one.
$(".child").draggable({
revert: "invalid",
containment: ".drag_drop_container"
});
$('.drop-parent').droppable({
accept: ".drag-parent > .child",
drop: function(event, ui) {
Dropped($(this), ui.draggable.click());
}
});
$('.drag-parent').droppable({
accept: function(draggable) {
if ($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
return true;
}
},
drop: function(event, ui) {
Reverted($(this), ui.draggable.click());
}
});
function Dropped($this, $item) {
$item.css({
'left': '0px',
'top': '0px'
});
if ($item.parent().hasClass('drop-parent')) {
$item.parent().droppable("enable");
} else {
$('.text-input').val($item.attr('data-id'));
}
for (i = 0; i < $this.children().length; i++) {
$oldElement = $($this.children()[i]);
$("#parent" + $oldElement.data("id")).append($oldElement);
}
$this.append($item);
$this.sortable();
}
function Reverted($this, $item) {
$item.css({
'left': '0px',
'top': '0px'
});
$item.parent().droppable("enable");
$this.append($item);
$('.droped_val').val('');
}
.drop-parent {
//border: 1px solid red!important;
/* background-color: red; */
//width: 640px; /*can be in percentage also.*/
height: 42px;
width: 100px;
//margin: 0 auto;
left:-4px;
//padding: 10px;
top:184px;
position: relative;
}
.dragbody {
//border: 1px solid blue!important;
/* background-color: red; */
//width: 281px;
//position: relative;
//height: 53px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
<div class="cards">
<table align="center" class="Table1">
<tr>
<td>
<div class="drag-parent" id="parent1">
<div class="child" data-id=1>
<img data-parent-id="1" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png" />
</div>
</div>
</td>
<td>
<div class="drag-parent" id="parent2">
<div class="child" data-id=2>
<img data-parent-id="2" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png" />
</div>
</div>
</td>
<td>
<div class="drag-parent" id="parent3">
<div class="child" data-id=3>
<img data-parent-id="3" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png" />
</div>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="dragbody">
<div align="center" class="drop-parent">
</div>
<img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px" />
</div>
</div>
</body>
</html>
I am trying to position my image of a butterfly on to the image of flowers
I am able to do it if there is no container elements with margins or padding in %, however if the images is in a responsive website position: absolute; does not produce the right results.
below is the code I'm working with
i have changed the images to online hosted ones and added the css from the external file in the html
please click on step 4 and see that the butterfly is not linked to image of the daisies.
how can I make it so that no matter what the size of the window is, the image of the butterfly stays related to the daisies.
thank you
i have also made a https://jsfiddle.net/aLq8j6r1/ for it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Week 3 Classwork</title>
<link rel="stylesheet" href="week3style.css">
<style>
body{
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul{
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a{
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li{
float: left;
background-color: black;
}
#topNavBar li:hover{
background-color: red;
}
.block{
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone{
display: none;
}
</style>
</head>
<body>
<div id="topNavBar">
<ul>
<li>Classwork Week 3</li>
<li>Homework Week 3</li>
<li>Homepage</li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick=function myfunction(){
move =setInterval(movElem, 10);
}
function movElem(){
if(left>400){
clearInterval(move);
}
elem.style.left= left++ +"px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick=function myOnclickFunctionStep2(){
// (left increase to 400
var iStep2=0;
//the following line will start to move the element to right and down
var vstep2Move1=setInterval(Step2Move1,10);
function Step2Move1(){
elemStep2.style.left= iStep2++ +"px";
elemStep2.style.top= iStep2/2 +"px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if(iStep2>400){
clearInterval(vstep2Move1); vstep2Move2=setInterval(fStep2Move2,10);
}
};
var gStep2=400;
var vstep2Move2;
function fStep2Move2(){
elemStep2.style.left= gStep2-- +"px";
if(gStep2<20){
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3= document.getElementById("elemStep3");
var iStep3=0;
var gStep3 =400;
var hStep3 =20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick=function onclickFunctionStep3(){
vStep3Move1= setInterval(fStep3Move1,10);
function fStep3Move1(){
//move it
elemStep3.style.left= iStep3++ +"px";
elemStep3.style.top= iStep3/2 +"px";
//if statement for stopping vStep3Move1
if(iStep3>400){
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2,10);
}
}
function fStep3Move2(){
elemStep3.style.left= gStep3-- +"px";
if(gStep3<20){
clearInterval(vStep3Move2);
vStep3Move3= setInterval(fStep3Move3,10);
}
}
function fStep3Move3(){
elemStep3.style.left= hStep3++ +"px";
elemStep3.style.top= (hStep3/2)+200 +"px";
if(hStep3> 400){
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;" >
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
<style>
.displayNone{
display: none;
}
</style>
<script>
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1(){
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2(){
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3(){
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4(){
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5(){
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6(){
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
</script>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div><!-- block ends -->
</div><!-- main sedction ends -->
</body>
</html>
Well, an absolute positioned element stays relative to its first positioned (not static) ancestor element
MDN w3schools
So you should add position:relative to it's parent. In your case #step4Div . Then position it how you want. Using top and left and other styles.
My suggestion is you don't use inline styles but write them in the css.
I won't get into the javascript code which definitely needs some refactoring. Too many lines of code that are overkill.
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1() {
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2() {
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3() {
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4() {
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5() {
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6() {
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
body {
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul {
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a {
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li {
float: left;
background-color: black;
}
#topNavBar li:hover {
background-color: red;
}
.block {
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone {
display: none;
}
#step4Div {
position: relative;
}
<div id="topNavBar">
<ul>
<li>Classwork Week 3</li>
<li>Homework Week 3</li>
<li>Homepage</li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick = function myfunction() {
move = setInterval(movElem, 10);
}
function movElem() {
if (left > 400) {
clearInterval(move);
}
elem.style.left = left++ + "px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick = function myOnclickFunctionStep2() {
// (left increase to 400
var iStep2 = 0;
//the following line will start to move the element to right and down
var vstep2Move1 = setInterval(Step2Move1, 10);
function Step2Move1() {
elemStep2.style.left = iStep2++ + "px";
elemStep2.style.top = iStep2 / 2 + "px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if (iStep2 > 400) {
clearInterval(vstep2Move1);
vstep2Move2 = setInterval(fStep2Move2, 10);
}
};
var gStep2 = 400;
var vstep2Move2;
function fStep2Move2() {
elemStep2.style.left = gStep2-- + "px";
if (gStep2 < 20) {
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3 = document.getElementById("elemStep3");
var iStep3 = 0;
var gStep3 = 400;
var hStep3 = 20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick = function onclickFunctionStep3() {
vStep3Move1 = setInterval(fStep3Move1, 10);
function fStep3Move1() {
//move it
elemStep3.style.left = iStep3++ + "px";
elemStep3.style.top = iStep3 / 2 + "px";
//if statement for stopping vStep3Move1
if (iStep3 > 400) {
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2, 10);
}
}
function fStep3Move2() {
elemStep3.style.left = gStep3-- + "px";
if (gStep3 < 20) {
clearInterval(vStep3Move2);
vStep3Move3 = setInterval(fStep3Move3, 10);
}
}
function fStep3Move3() {
elemStep3.style.left = hStep3++ + "px";
elemStep3.style.top = (hStep3 / 2) + 200 + "px";
if (hStep3 > 400) {
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;">
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div>
<!-- block ends -->
</div>
<!-- main sedction ends -->
To explain a bit:
absolute explicitly makes the styled element positioned absolutely compared to the closest parent that is also explicitly positioned.
The butterfly you have correctly positioned absolute because it needs to be positioned on top of the flowers. However it was absolute compared to the closest parent ie the body (it looks like).
Adding relative makes the styled element stay where it would have been without styling relative, however the relative element now forms the closest explicitly positioned parent.
<div class="displayNone" id="step4Div" style="position:relative">
I'd like to add a box containing smileys icons above the comment area which opens using jQuery on click. What I come up with is this:
<div class="emo">
<i href="#" id="showhide_emobox"> </i>
<div id="emobox">
<input class="emoticon" id="icon-smile" type="button" value=":)" />
<input class="emoticon" id="icon-sad" type="button" value=":(" />
<input class="emoticon" id="icon-widesmile" type="button" value=":D" /> <br>
</div>
</div>
css:
.emoticon-smile{
background: url('../smileys/smile.png');
}
#icon-smile {
border: none;
background: url('../images/smile.gif') no-repeat;
}
jQuery:
// =======show hide emoticon div============
$('#showhide_emobox').click(function(){
$('#emobox').toggle();
$(this).toggleClass('active');
});
// ============add emoticons============
$('.emoticon').click(function() {
var textarea_val = jQuery.trim($('.user-comment').val());
var emotion_val = $(this).attr('value');
if (textarea_val =='') {
var sp = '';
} else {
var sp = ' ';
}
$('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);
});
However I have difficulty placing buttons in a nice array and make background image for them (the button values appear before image and the array is not perfectly rectangular. So I'm wondering maybe this is not the best way to render this box.
Any ideas to do this properly?
First show images, on hover hide image and show text. No need for input elements to get text of Dom Node
Something like this:
$(document).ready(function() {
$(".wrapper").click(function() {
var value = $(this).find(".smily-text").text();
console.log(value);
alert("Smily text is '" + value + "'");
});
});
.smily {
background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
width: 45px;
height: 45px;
}
.smily-text {
display: none;
font-size: 20px;
text-align: center;
line-height: 45px;
height: 45px;
width: 45px;
}
.wrapper {
border: 1px solid red;
float: left;
cursor: pointer;
}
.wrapper:hover .smily {
display: none;
}
.wrapper:hover .smily-text {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:)</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:(</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:]</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:[</div>
</div>
I want to design the dialog in html5. This dialog should accept the freetext and image as parameters. I tried to open dialog as below.. Now I want to pass the parameters so that I can use that dialog everywhere..
<!DOCTYPE html>
<html>
<head>
<style>
#overlay
{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
background-image: url(maskBG.png);
}
#overlay div
{
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #400;
padding: 15px;
text-align: center;
}
.close
{
text-decoration: underline;
}
</style>
<script>
function overlay() {
var el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function overlayTest(arg) {
//alert(arg);
var el = document.getElementById("overlay").click(moveImages('Testing123'));
//alert(arg);
// el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function close() {
document.getElementById("overlay").style.visibility = 'hidden';
}
function moveImages(arg) {
alert('in Move Images');
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center">
<button type="button" onclick="overlay()" id="btnEffluentTreatment">EFFLUENT TREATMENT</button>
<button type="button" onclick="overlayTest('My MyTesting')" id="btnTry">Try1</button>
</p>
<div id="overlay" >
<div>
<p>
<img src="010.png" />
Content/Images whatever we want the user to see goes here.
</p>
<button type="button" onclick="overlay()" id="btnEffluentTreatment">Close</button>
</div>
</div>
</body>
</html>
I have an iframe in my HTML document and I'm having a bit of trouble.
I also have a URL bar (fixed position element) at the top of the page that should stay with the user as they scroll. That works fine. I'd like the iframe to fill the remaining space but not be covered up by the URL bar.
This is what I'm talking about. http://s75582.gridserver.com/Ls
How can I fix this so that the URL bar doesn't cover up part of the page? When I try setting padding in the body, it just creates an extra, annoying scroll bar.
Whilst you can't say ‘height: 100% minus some pixels’ in CSS, you can make the iframe 100% high, then push its top down using padding. Then you can take advantage of the CSS3 box-sizing property to make the padding get subtracted from the height.
This:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>
Works on IE8, Moz, Op, Saf, Chrome. You'd have to carry on using a JavaScript fallback to make the extra scrollbar disappear for browsers that don't support box-sizing though (in particular IE up to 7).
It can be done without any Javascript, works in IE7
CSS:
body {
overflow-y: hidden;
}
#imagepgframe {
width: 100%;
height: 100%;
position: absolute;
}
#wrap {
width: 100%;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
}
HTML:
<div id="wrap">
<iframe id="imagepgframe" frameBorder="0" src="http://en.wikipedia.org/wiki/Internet_Explorer_7"></iframe>
</div>
To build on top of bobince's answer:
Erik Arvidsson came up with a way to (kinda, sorta) add box-sizing support to IE6/IE7. However, his solution doesn't support units other than px. Like you, I needed a percentage height, so I added support for percents.
Once you've downloaded and unzipped the zip file, open boxsizing.htc and replace the following border/padding functions:
/* border width getters */
function getBorderWidth(el, sSide) {
if (el.currentStyle["border" + sSide + "Style"] == "none")
return 0;
var n = parseInt(el.currentStyle["border" + sSide + "Width"]);
return n || 0;
}
function getBorderLeftWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getBorderRightWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getBorderTopWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getBorderBottomWidth() { return getBorderWidth((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end border width getters */
/* padding getters */
function getPadding(el, sSide) {
var n = parseInt(el.currentStyle["padding" + sSide]);
return n || 0;
}
function getPaddingLeft() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Left"); }
function getPaddingRight() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Right"); }
function getPaddingTop() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Top"); }
function getPaddingBottom() { return getPadding((arguments.length > 0 ? arguments[0] : element), "Bottom"); }
/* end padding getters */
Then replace updateBorderBoxWidth and updateBorderBoxHeight with the following:
function updateBorderBoxWidth() {
element.runtimeStyle.width = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csw = element.currentStyle.width;
var w = null;
if (csw != "auto" && csw.indexOf("px") != -1) {
w = parseInt(csw);
} else if (csw != "auto" && csw.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
w = Math.max(0, (parseInt(element.parentNode.clientWidth) - (
getBorderLeftWidth(element.parentNode)
+ getPaddingLeft(element.parentNode)
+ getPaddingRight(element.parentNode)
+ getBorderRightWidth(element.parentNode)
)) * (parseInt(csw) / 100));
element.runtimeStyle.display = origDisplay;
}
if (w !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxWidth(w);
} else {
setContentBoxWidth(w);
}
}
}
function updateBorderBoxHeight() {
element.runtimeStyle.height = "";
if (getDocumentBoxSizing() == getBoxSizing())
return;
var csh = element.currentStyle.height;
var h = null;
if (csh != "auto" && csh.indexOf("px") != -1) {
h = parseInt(csh);
} else if (csh != "auto" && csh.indexOf("%") != -1) {
var origDisplay = element.runtimeStyle.display;
element.runtimeStyle.display = "none";
h = Math.max(0, (parseInt(element.parentNode.clientHeight) - (
getBorderTopWidth(element.parentNode)
+ getPaddingTop(element.parentNode)
+ getPaddingBottom(element.parentNode)
+ getBorderBottomWidth(element.parentNode)
)) * (parseInt(csh) / 100));
element.runtimeStyle.display = origDisplay;
}
if (h !== null) {
if (getBoxSizing() == "border-box") {
setBorderBoxHeight(h);
} else {
setContentBoxHeight(h);
}
}
}
Then just use the file as you would otherwise:
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
Here's a pretty thorough test I put together while developing my modifications:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>box-sizing: border-box;</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: yellow;
}
body {
padding-top: 50px;
padding-bottom: 50px;
}
p {
margin: 0;
}
#header, #footer {
height: 50px;
position: absolute;
width: 100%;
overflow: hidden;
}
#header {
background: red;
top: 0;
}
#footer {
background: blue;
bottom: 0;
}
#content {
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
background: black;
color: white;
overflow: auto;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
}
#nested-header, #nested-footer {
position: absolute;
height: 40px;
width: 100%;
background: #CCC;
}
#nested-header {
top: 0;
}
#nested-footer {
bottom: 0;
}
#nested-content-wrap {
height: 100%;
}
#nested-floater {
height: 100%;
float: left;
width: 100px;
}
#nested-content {
height: 100%;
background: green;
color: black;
overflow: auto;
position: relative;
}
#inner-nest {
height: 100%;
position: relative;
}
#inner-head {
height: 30px;
width: 100%;
background: #AAA;
position: absolute;
top: 0;
}
#inner-content {
padding-top: 30px;
height: 100%;
overflow: auto;
}
.border-box {
behavior: url("boxsizing.htc");
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.content-box {
behavior: url("boxsizing.htc");
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
legend {
color: black;
}
form {
margin: 1em 0;
}
.wrap {
height: 100px;
background: #000;
overflow: hidden;
}
.test {
width: 100px;
height: 100%;
background: #AAA;
border-color: #EEE;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 5px;
float: left;
}
.fill {
width: 100%;
height: 100%;
background: #CCC;
}
.gauge {
width: 99px;
background: white;
border-right: 1px solid green;
height: 100%;
float: left;
}
.notes {
background: #8FC561;
}
.clear {
clear: both;
}
/* 120px x 120px square; this will create a black 20px frame on the inside */
.boxtest-wrapper {
width: 100px;
height: 100px;
float: left;
background: black;
color: white;
margin: 1em;
padding: 20px;
}
#boxtest-4-container {
width: 100%;
height: 100%;
}
.boxtest {
width: 100%;
height: 100%;
background: white;
color: black;
border: 5px solid green;
overflow: hidden;
}
</style>
<script type="text/javascript">
function addBorderBox() {
var wrap1 = document.getElementById("wrap-1");
var wrap2 = document.getElementById("wrap-2");
var borderBox = document.createElement("div");
borderBox.className = "test border-box";
var borderBoxFill = document.createElement("div");
borderBoxFill.className = "fill";
var borderBoxContent = document.createTextNode("Generated border box fill");
borderBoxFill.appendChild(borderBoxContent);
borderBox.appendChild(borderBoxFill);
var gauge = document.createElement("div");
gauge.className = "gauge";
var gaugeText1 = "width: 100px";
var gaugeText2 = "height: 100%";
var gaugeText3 = "bottom should be visible";
gauge.appendChild(document.createTextNode(gaugeText1));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText2));
gauge.appendChild(document.createElement("br"));
gauge.appendChild(document.createTextNode(gaugeText3));
wrap1.appendChild(borderBox);
wrap2.appendChild(gauge);
}
</script>
</head>
<body id="body" class="border-box">
<div id="header">
<p>Header - 50px;</p>
</div>
<div id="content" class="border-box">
<div id="nested-header">
<p>Nested Header - 40px;</p>
</div>
<div id="nested-content-wrap">
<div id="nested-floater">
<p>Float - 100px;</p>
<ul>
<li>This element should never scroll.</li>
</ul>
</div>
<div id="nested-content">
<div id="inner-nest">
<div id="inner-head">
<p>Inner Head - 30px;</p>
</div>
<div id="inner-content" class="border-box">
<div style="float: right; ">
<p>The fourth square should look just like the other three:</p>
<div id="boxtest-wrapper-1" class="boxtest-wrapper">
<div id="boxtest-1" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-2" class="boxtest-wrapper">
<div id="boxtest-2" class="boxtest border-box"></div>
</div>
<br class="clear" />
<div id="boxtest-wrapper-3" class="boxtest-wrapper">
<div id="boxtest-3" class="boxtest border-box"></div>
</div>
<div id="boxtest-wrapper-4" class="boxtest-wrapper">
<div id="boxtest-4-container">
<!-- boxtest-4-container isn't special in any way. it just has width and height set to 100%. -->
<div id="boxtest-4" class="boxtest border-box"></div>
</div>
</div>
</div>
<p>Inner Content - fluid</p>
<ul>
<li>The top of the scrollbar should be covered by the “Inner Head” element.</li>
<li>The bottom of the scrollbar should be visible without having to scroll “Inner Head” out of view.</li>
</ul>
<p>Document Compat Mode:
<strong id="compatMode">
<script type="text/javascript">
var compatMode = document.compatMode;
if (compatMode != "CSS1Compat") {
document.getElementById("compatMode").style.color = "red";
}
document.write(compatMode);
</script>
</strong>
</p><br />
<div class="notes">
<h2>Notes</h2>
<ul>
<li>In IE6 and IE7 (and possibly IE8; untested), you'll notice a slight shift of contents that have <code>box-sizing</code> set to <code>border-box</code>. This is the amount of time it takes for box-sizing.htc to finish downloading.</li>
<li>This workaround is not live. Anything that causes a reflow or repaint will not currently trigger an update to widths and heights of <code>border-box</code> elements.</li>
<li>See http://webfx.eae.net/dhtml/boxsizing/boxsizing.html for the original solution to the IE6/IE7 <code>border-box</code> problem. box-sizing.htc has been modified to allow for percentage widths and heights.</li>
<li>To see what this example should look like without the use of box-sizing.htc, view it in Firefox or IE8.</li>
</ul>
</div>
<br class="clear" />
<form>
<fieldset>
<legend>DOM Update Test</legend>
<input type="button" value="Click to add border-box" onclick="addBorderBox(); " />
</fieldset>
</form>
<div id="wrap-1" class="wrap">
<div class="test content-box" id="content-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Content box fill</div>
</div>
<div class="test content-box" id="content-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Content box fill</div>
</div>
<div class="test border-box" id="border-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Border box fill</div>
</div>
<div class="test border-box" id="border-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Border box fill</div>
</div>
<div class="test" id="default-box-1" style="border-width: 5px; border-style: solid;">
<div class="fill">Default box fill</div>
</div>
<div class="test" id="default-box-2" style="border-width: 5px; border-style: solid; padding: 5px;">
<div class="fill">Default box fill</div>
</div>
</div>
<div id="wrap-2" class="wrap">
<!-- subtract 1 from width for 1px right border -->
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge">width: 100px<br />height: 100%<br />bottom should be visible</div>
<div class="gauge" style="width: 129px;">width: 130px<br />height: 100%<br />bottom should be cut off</div>
<div class="gauge" style="width: 119px;">width: 120px<br />height: 100%<br />bottom should be cut off</div>
</div>
<br class="clear" />
<script type="text/javascript">
var lipsum = "<p>Lorem ipsum dolor sit amet.</p>";
for (var i = 0; i < 100; i++) {
document.write(lipsum);
}
</script>
</div>
</div>
</div>
</div>
<div id="nested-footer">
<p>Nested Footer - 40px;</p>
</div>
</div>
<div id="footer">
<p>Footer - 50px;</p>
</div>
</body>
</html>
If by covering up part of the page, you mean the page displayed in the iframe, one thought might be to add a top margin to your iframe, using the margin-top: property in CSS. This would eliminate the scroll bar given that you properly constrained the height of the iframe.
Android Kotlin Answer
For example, I am using padding for iFrame of WebView in this way:
val url = "www.stackoverflow.com"
val iframeExample = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" src=\"$url\" frameborder=\"0\" allowfullscreen></iframe></body></html>"
webView.loadData(iframeExample, "text/html", "utf-8")