How can the code below be modified such that I would be able to add a centered "loading..." message inside the box while the progress bar runs in the background? Ie. it would display LOADING..." in the center of the box while the progress bar runs in the background inside the DIV.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var prg_width = 200;
var progress_run_id = null;
function progress() {
var node = document.getElementById('progress');
var w = node.style.width.match(/\d+/);
if (w == prg_width) {
clearInterval( progress_run_id );
w = 0;
alert("done")
} else {
w = parseInt(w) + 5 + 'px';
}
node.style.width = w;
}
function runit() {
progress_run_id = setInterval(progress, 30);
}
</script>
</head>
<body>
<div style="border: 1px solid #808080; width:200px; height:20px;">
<div id="progress" style="height:20px; width:0px; background-color:#DBDBDB;"/>
</div>
</div>
<p>Start</p>
</body>
</html>
<div style="border: 1px solid #808080; width:200px; height:20px;">
<div id="progress" style="text-align: center; height:20px; width:0px; background-color:#DBDBDB;"/>
<div style=" position: fixed; left: 92px ">loading</div>
</div>
</div>
Related
I want two separate objects on a page to be moveable by the user - mouse click and drag.
I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
document.onmousedown = PrepareFloatMove;
document.onmouseup = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
if (event.target.id!="bar") return
offsetx = event.clientX
offsety = event.clientY
nowX = parseInt(document.getElementById("container").offsetLeft);
nowY = parseInt(document.getElementById("container").offsetTop);
cursorInPopUp = true;
document.onmousemove = moveFloat;
}
function moveFloat()
{
if (!cursorInPopUp)
{
document.body.style.cursor = 'default';
return;
}
document.body.style.cursor = 'move';
document.getElementById("container").style.left = nowX+event.clientX-offsetx
document.getElementById("container").style.top = nowY+event.clientY-offsety
return false;
}
</script>
<style>
.container
{
position : relative;
top:0px;
left;15%;
width:60%;
height:60%;
border:2px solid black;
}
.bar
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid red;
cursor:pointer;
}
.contents
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid green;
}
.container2
{
position : relative;
top:0px;
left;75%;
width:60%;
height:60%;
border:2px solid pink;
}
.bar2
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid blue;
cursor:pointer;
}
.contents2
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
<div id="bar" class="bar">
</div>
<div id="contents" class="contents">
</div>
<div>
<div id="container2" class="container2">
<div id="bar2" class="bar2">
</div>
<div id="contents2" class="contents2">
</div>
<div>
<script> initialiseFloating('container');</script>
</body>
</html>
Any ideas will be gratefully received
I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript
I have a basic Graphics User Interface where if the user clicks "move"
then a div (yellow rectangle) moves across the screen.
However, I want there to be an event based on Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv()
{
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv(){
if ($('#myDiv').css == marginTop: '-=15px' ) {
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
errors mostly because im not sure on the syntax :(
hope its help you
You must use var (let, const) when create a new variable
I added CONSTANTS for easy configuration,
isDivCanMoveForward for your:
Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
var MAX_POSITION_OF_DIV_NODE = 400;
var STEP_OF_DIV_NODE = 100;
var div = document.getElementById("myDiv");
var currentPositionOfDivNode = parseInt(div.style.left, 10);
function MoveDiv() {
currentPositionOfDivNode += STEP_OF_DIV_NODE; // increment
if (!isDivCanMoveForward()) {
return; // stop functinon when div have max position
}
div.style.left = currentPositionOfDivNode + "px";
}
function isDivCanMoveForward() {
if (currentPositionOfDivNode > MAX_POSITION_OF_DIV_NODE) {
currentPositionOfDivNode = MAX_POSITION_OF_DIV_NODE // set max of value
alert('hey')// user message
return false;
}
return true;
}
<html>
<head>
<title>Move Div</title>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
I have a working javascript to clone a div and not move the other divs in the same line. But when I try to implement it in html it is not possible to close the maximized div.
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="java_test.js"></script>
<link href="max_css.css" rel="stylesheet" />
</head>
<body>
<div id="box1" class="kaesten" onclick="changeSize('box1', 600, 600)">test1</div>
<div id="box2" class="kaesten" onclick="changeSize('box2', 600, 600)">test2</div>
<div id="box3" class="kaesten" onclick="changeSize('box3', 600, 600)">test3</div>
<div id="box4" class="kaesten" onclick="changeSize('box4', 600, 600)">test4</div>
<div id="dummy" class="absoluteclass" onclick="changeSize('dummy', 600, 600)" ></div>
</body>
function changeSize(id, weight, height){
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style','display:block');
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function(){
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none');
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
.absoluteclass{
position:absolute;
background-color:darkgrey;
width:600px;
height:600px;
left:calc(30%);
display:none;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
<div id="dummy" class="absoluteclass"></div>
Question: How can I implement the JavaScript function into my HTML to make the big div close by onclick?
you can modify your changeSize function like this.
function changeSize(id, weight, height){
var currentAbsoluteElem = document.getElementById('dummy');
if(id == null && weight == null && height == null){
currentAbsoluteElem.setAttribute('style','display:none');
}else{
var elem = document.getElementById(id);
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style','display:block');
/*Extra styling neeed to be done here*/
}
}
and in your html
<div id="dummy" class="absoluteclass" onclick="changeSize()" ></div>
I hope this is what you want.
The following is the javascript code for text scrolling. Can you please extend the javascript so that scrolling will be stopped when the mouse is on text and will start again once the mouse is out of text. Thanks in advance.
<html>
<head>
<style type="text/css">
#scroll{
position : absolute;
white-space : nowrap;
top : 0px;
left : 200px;
}
#oScroll{
margin : 0px;
padding : 0px;
position : relative;
width : 200px;
height : 20px;
overflow : hidden;
}
</style>
<script type="text/javascript">
function scroll(oid,iid){
this.oCont=document.getElementById(oid)
this.ele=document.getElementById(iid)
this.width=this.ele.clientWidth;
this.n=this.oCont.clientWidth;
this.move=function(){
this.ele.style.left=this.n+"px"
this.n--
if(this.n<(-this.width)){this.n=this.oCont.clientWidth}
}
}
var vScroll
function setup(){
vScroll=new scroll("oScroll","scroll");
setInterval("vScroll.move()",20)
}
onload=function(){setup()}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll">This is the scrolling text</div>
</div>
</body>
</html>
If you are looking for a marquee effect that stops on hover
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>
Use clearInterval() to pause the text and setInterval() to resume again
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 20px;
overflow: hidden;
}
</style>
<script type="text/javascript">
var intervalHandle = null;
function pauseScroll() {
clearInterval(intervalHandle);
}
function resumeScroll() {
intervalHandle = setInterval("vScroll.move()", 20);
}
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function () {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) { this.n = this.oCont.clientWidth }
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
intervalHandle = setInterval("vScroll.move()", 20)
}
onload = function () { setup() }
</script>
</head>
<body>
<div id="oScroll" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
<div id="scroll">This is the scrolling text</div>
</div>
</body>
</html>
<marquee behavior="scroll" direction="left" scrolldelay="1" scrollamount="1" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);">
This is a test marquee to pause on hover
onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);"
</marquee>
we can also use javascript event on element for stop and restart marquee.
<html>
<title>Demo</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<marquee id='scroll_news' style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" >
<div style="width:99%">
<div style="float:left; width:100%;" onMouseOver="document.getElementById('scroll_news').stop();" onMouseOut="document.getElementById('scroll_news').start();">
News 1 News 2 News 3 News 4 ....... More news here </div>
<div style="fload:right; width:100%;" onMouseOver="document.getElementById('scroll_news').stop();" onMouseOut="document.getElementById('scroll_news').start();">News 1 News 2 News 3 News 4 ....... More news here1 </div>
</div>
</marquee>
</body>
</html>
Exampl : http://www.delhincrjob.com/blog/marquee-for-scroll-text-and-stop-on-mouseover/
I am trying to slide a div to the left when I show it and slide it to the right when I hide it, but I don't want to use jQuery. Is there a way to do simple animation and support IE7 and IE8 without using a javascript library?
Here is my show/hide js:
function showHide() {
var Elliot = document.getElementById('Daniel').style.display;
if (Elliot == "block") {
document.getElementById('Daniel').style.display = "none";
} else {
document.getElementById('Daniel').style.display = "block";
};
};
HTML would look like:
click me
<div id="Daniel" style="display:block; width: 300px; height: 50px;">
<!-- some stuff -->
</div>
Below is a function that can get you started:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#yea {
margin-left: 100px;
height: 100px;
width: 100px;
background: blue;
border: 1px black solid;
}
</style>
</head>
<body>
<div id='yea'></div>
<input type="button" value="Capacity Chart" onclick="animateMe();" >
<script>
function animateLeft(obj, from, to){
if(from >= to){
obj.style.visibility = 'hidden';
return;
}
else {
var box = obj;
box.style.marginLeft = from + "px";
setTimeout(function(){
animateLeft(obj, from + 1, to);
}, 25)
}
}
function animateMe() {
animateLeft(document.getElementById('yea'), 100, 700);
}
</script>
</body>
</html>
https://jsfiddle.net/geh7ewLx/