I have a html file like:
<!DOCTYPE html>
<html>
<head>
<title>Drag-Drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="myJavascript.js"></script>
</head>
<body height="10000" width="10000" style="position: relative; left: 0px; top: 0px">
<svg id="svgBackground" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgTempArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgForwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgBackwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgArrowHeads" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
</body>
</html>
And in myJavascript.js I have:
window.onload = function background()
{
...
var elements = Array.from(document.getElementsByTagNameNS(svgNS, 'svg'));
elements.forEach(function(el){
el.addEventListener("mousedown", startDraw);
el.addEventListener("mousemove", draw);
el.addEventListener("mouseup", endDraw);
});
function startDraw(ev)
{
...
}
function draw(ev)
{
...
}
function endDraw(ev)
{
...
}
It has worked, but It only works in one area in a web page (The mouse envents seem only effect in upper area of web page).
I don't know why is it. Can you help me? Thanks
Is there a problem here?
document.getElementsByTagNameNS(svgNS, 'svg')
and your position all the same
i have done some changes to your code and now it is working fine with me
i used jquery
var elements = $('svg');
for(var i=0;i<elements.length;i++){
elements[i].addEventListener("mousedown", startDraw);
elements[i].addEventListener("mousemove", draw);
elements[i].addEventListener("mouseup", endDraw);
}
Related
I'm designing an avatar module. The point is that when clicking on the hair or the eyes, they have to move at the top of the head. Instead of getting that, they do not move at all but the code also does not alert from an error.
Here's the HTMLcode:
<style>
#cabeza{
position: absolute;
z-index: auto;
left:225px;
top:125px;
}
#ojos {
position: absolute;
z-index: 1;
left: 8px;
top: 300px;
}
#pelo {
position: absolute;
z-index: 2;
left: 0;
top: 125px;
}
</style>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="cabeza"><img src="assets/img/cabeza.png"/></div>
<div id="pelo"><img src="assets/img/pelo.png" /></div>
<div id="ojos"><img src="assets/img/ojos.png" /></div>
</div>
</div>
<script>
alert('NOSeSiFunciona');
document.getElementById("pelo").onclick = function() {document.getElementById("pelo").style.left = "225px";};
document.getElementById("ojos").onclick = function() {document.getElementById("ojos").style.left = "235px"; document.getElementById("ojos").style.top = "200px";};
</script>
</body>
I want to create HTML page which should look like this, but without using image
There is a concept SVG (Scalable Vector Graphics) in HTML5.
Inclined Line
Code for drawing Incliented line is given below using SVG.
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
Output will be
See More explanations and tutorial on SVG
Outer Rectangle
For drawing outer rectangle use SVG Paths
What you want is exact here,
option through html and css:
HTML and css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>-Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<style>
.cust-well{
border: 1px solid #ccc;
border-radius: 0;
float: left;
min-height: 350px;
width: 100%;
position:relative;
}
.first-text {
float: left;
font-weight: 700;
}
.second-text {
bottom: 37px;
position: absolute;
right: 50px;
}
.lt-line {
border-top: 2px solid #000;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
.lt-line2 {
border-top: 2px solid #000;
left: 0;
position: absolute;
bottom: 0;
width: 40%;
}
.lt-line3 {
border-top: 2px solid #000;
right: 0;
position: absolute;
bottom: 0;
width: 50%;
}
.lt-line4 {
border-top: 2px solid #000;
right: 0;
position: absolute;
top: 0;
width: 40%;
}
.cust-well {
border-color:white #000 white;
border-style:none solid;
border-width:2px;
float: left;
min-height: 350px;
position: relative;
width: 100%;
}
.cust-well::after {
border: 1px solid #000;
content: "";
height: 390px;
left: 50%;
position: absolute;
top: -20px;
transform: rotate(9deg);
}
</style>
</head>
<body>
<div class="container-fluid" style="margin-top:200px;">
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<div class="well cust-well">
<span class="lt-line"></span>
<span class="lt-line2"></span>
<span class="lt-line3"></span>
<span class="lt-line4"></span>
<div class="first-text">
<h2>Hello</h2>
</div>
<div class="second-text">
<h2>Hi</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this will help you!!!
Thankyou everyone I came up with a solution, check it out.
<!DOCTYPE html>
<html>
<body>
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1280 720">
<polyline points="708,30 30,30 30,660 462,660" style="fill:none;stroke:black;stroke-width:3" />
<text x="140" y="140" fill="black" font-size="70" font-weight="bold">Hello</text>
<polyline points="768,0 512,720" style="fill:none;stroke:black;stroke-width:3" />
<text x="1100" y="530" fill="black" font-size="70" font-weight="bold">hi</text>
<polyline points="828,60 1250,60 1250,690 572,690" style="fill:none;stroke:black;stroke-width:3" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
It may be useful to you.
demo.html
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<title>Untitled 4</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
</canvas>
</body>
</html>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello",8,30);
ctx.fillText("hi",165,90);
ctx.beginPath();
ctx.moveTo(115,0);
ctx.lineTo(-1000,3000);
ctx.stroke();
</script>
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 320px;
height: 400px;
border: 1px solid red;
}
#top {
width: 320px;
height: 80px;
border: 1px solid blue;
}
</style>
<script>
var type;
function one(){
type = One.js
}
function two(){
type = Two.js
}
</script>
</head>
<body>
<div id="top">
<button onclick="one()">One</button>
<button onclick="two()">Two</button>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="pause()">Pause</button>
</div>
<div style="position: relative;" id="container">
<canvas id="myCanvas" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="trail" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="plane" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="cloud" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings2" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script type="text/javascript" src=type> </script>
</body>
</html>
Is it possible to have a button before a script is activated to define which script is being played. So a drop down box to edit which script is being activated. I do not know how to do this what so ever.
Thank you :)
you can pass a value to your function to select which one you want to use. For example:
function select(which){
switch(which)
{
case 1:
// execute One.js
break;
case 2:
// execute Two.js
break;
default:
//
}
}
I thing this is what you're looking for something like this:
<body onload="load(0);">
<button onclick="load(0);">One</button>
<button onclick="load(1);">Two</button>
<script>
var myScripts = [
"./js/scriptOne.js", "./js/scriptTwo.js"
];
function load(i){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", myScripts[i]);
document.getElementsByTagName("head")[0].appendChild( fileref );
}
</script>
This way you're dynamically load your scripts.
I'm trying to create a sliding image gallery where every interval they will slide along and the first image will fade out and the new image will fade in. The fading in and out is working and my images are set as 'position: absolute', but they won't slide. I set up a jsfiddle so you can see what's happening:
http://jsfiddle.net/9awwF/
The HTML code:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="position: relative; left: 0px; top: 0px;">
<p id="discoImg1a"><a href="includes/images/discoImg1.png">
<img src="http://edubuzz.org/lawprimaryp6/files/2011/11/250px-Disco_ball41.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 0px; z-index: 1"/></a></p>
<p id="discoImg2a"><a href="includes/images/discoImg2.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 250px; z-index: 1"/></a></p>
<p id="discoImg3a"><a href="includes/images/discoImg3.png">
<img src="http://fivestaralaska.com/wp-content/uploads/2012/04/disco1.jpeg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 500px; z-index: 1"/></a></p>
<p id="discoImg4a"><a href="includes/images/discoImg4.png">
<img src="http://st.depositphotos.com/1005534/1272/v/950/depositphotos_12726061-Glass-Circle-Color-Disco-Ball.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 750px; z-index: 1"/></a></p>
<p id="discoImg5a"><a href="includes/images/discoImg5.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1000px; z-index: 1"/></a></p>
<p id="discoImg6a"><a href="includes/images/discoImg6.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/party.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1250px; z-index: 1"/></a></p>
<p id="discoImg7a"><a href="includes/images/discoImg7.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/karaoke.gif" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1500px; z-index: 1"/></a></p>
<p id="discoImg8a"><a href="includes/images/discoImg8.png">
<img src="http://www.djjdee-mobiledisco.co.uk/images/discolights.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 1750px; z-index: 1"/></a></p>
<p id="discoImg9a"><a href="includes/images/discoImg9.png">
<img src="http://www.armagh.co.uk/wp-content/uploads/2013/09/Trad-Disco.jpg" alt="img1" width="200" height="200" style="position: absolute; top: 0px; left: 2000px; z-index: 1"/></a></p>
</div>
</body>
The script:
$(document).ready(function () {
$("#discoImg6a").hide();
$("#discoImg7a").hide();
$("#discoImg8a").hide();
$("#discoImg9a").hide();
var currentFirstSlide = 1;
var maxSlides = 9;
function updateSlides() {
// Fade out the first image shown
$("#discoImg" + currentFirstSlide + "a").fadeOut(3000);
// Go through every image and move them to the left by 250px
for (var x = 1; x < 10; x++) {
var left = $("#discoImg" + x + "a").position().left;
$("#discoImg" + x + "a").animate({ left: left - 250 + 'px' });
}
// Calculate which slide the new one will be and fade it in
var newSlide = currentFirstSlide + 5;
if (newSlide > maxSlides) { newSlide = 1; }
$("#discoImg" + newSlide + "a").fadeIn(3000);
// Increment the current first slide ready for the next update
currentFirstSlide++;
if (currentFirstSlide > maxSlides) { currentFirstSlide = 1; }
}
// Move the slides every 3.5s
setInterval(function () { updateSlides() }, 3500);
});
Thank you in advance for any help!
You're animating the left property of the p element, but it has a default position of static, so this doesn't do anything. You should either animate left on the img element or give absolute or relative positioning to the p element.
The problem is that the p element has the id, not the img
<p><a href="includes/images/discoImg1.png">
<img id="discoImg1a" src="..." style="position: absolute; ..."/></a></p>
There is no effect with property left without position absolute or fixed.
On your css try giving that absolute positions a left: 0px; may be it's going to slide automatically, and don't forget to give it a relative container.
I have tried some usual document object commands like getElement by id/by tag/by name. They all give null, only bale to identify iframe id"my_dash" but can not access innerHTML. Either gives undefined or nothing in alert. I was trying to access the iframe "iframe_Content_portlet1" to change its src by making a javascript function to work on click link but was not working. Please suggest how to access it....
Given below is the code one finds in firebug.
*regarding context from my main code *
<tr>
<td colspan="10">
<!--this is the iframe accessible by main jsp-->**
<iframe id="my_dash" width="990px" height="935px" padding-left:="200px" src="http://172.31.144.171:8080/pentaho/content/dashboards?solution=airport&path=%2FMain&action_name=ATM-Dashboard.xdash">
<!--content inside the main iframe-->**
<html class=" ext-strict" xmlns:pho="http:/www.pentaho.com">
<head>
<body id="ext-gen6" class="pentaho-transparent ext-gecko ext-linux pentaho-page-background">
<div id="wrapper" class="wrapper">
<div id="dashboard-content">
<div id="titlebar" class="title" style="position: absolute; display: block; left: 0px; top: 0px; width: 990px; height: 23px;">
<h1 id="dashboard-title" class="pageTitle">New Dashboard</h1>
</div>
<div id="widget-area" class="widget-area" scrollexception="true" style="display: block; top: 29px; width: 990px; height: 906px; left: 0px; z-index: 30;">
<div id="widget-area-scroll-shim" style="width:100%;height:100%;"></div>
<div id="select-frame-left"></div>
<div id="select-frame-top"></div>
<div id="select-frame-bottom"></div>
<div id="select-frame-right"></div>
<div id="FilterPanel" class="povContainer" style="position: absolute; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 30; display: none;" pho:panel="FilterPanel">
<div id="hbox1" style="position: absolute; top: 0px; width: 990px; height: 300px; left: 0px;">
<div id="Panel_1" class="widgetContainer" style="position: absolute; top: 5px; width: 567.044px; height: 290px; left: 5px; z-index: 30;" pho:panel="Panel_1">
<div class="widget">
<div id="wgtHead-Panel_1" class="wgtHead" ondblclick="pentahoDashboardController.panelTitleDoubleClick('Panel_1')" onclick="pentahoDashboardController.panelTitleClick('Panel_1', true);">
<div id="dataContainer-Panel_1" class="dataContainer" style="height: 265px;">
<div class="rightCorner">
<div class="wgtData">
<div id="content-area-Panel_1" class="panel-contentarea" onclick="pentahoDashboardController.panelTitleClick('Panel_1', false)" style="top: 23px; width: 567.044px; height: 265px; left: 0px;">
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->**
<iframe frameborder="0" src="http://172.31.144.171:8080/pentaho/pentaho-solutions/airport/ATM/scorecard/common1.jsp?dashboard_id=1&portlet_id=1" border="0" style="width:100%;height:100%;border:0px">
<html>
<head>
<body>
<style type="text/css">
<div>
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->
<iframe id="iframe_Content_Portlet1" width="100%" height="100%" style="overflow:hidden;"src="http://172.31.144.171:8080/pentaho/content/reporting/reportviewer/report.html?solution=airport&path=%2FATM%2Fscorecard&name=atm_scorecard.prpt&locale=en_US&username=joe&password=p##ssw0rd">
<html class="dj_gecko dj_contentbox" xmlns:pho="http:/www.pentaho.com">
<head>
<body class="tundra body pentaho-page-background">
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
<div id="wgtFooter-Panel_1" class="wgtFooter">
<div class="rightCorner"></div>
</div>
</div>
</div>
How are you trying to reach what's inside your frame?
Because something along the lines of frames["my_dash"].document.getElementById("XXXX") should work.
See https://developer.mozilla.org/en-US/docs/DOM/window.frames for a little doc on frames.