<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 750px;
width: 100%;
margin-top:-10px;
background-color:#0d0d0d;
position: relative;
z-index: 1;
}
</style>
<body>
<!-- <img id="image" src="img/bg.jpg" height="710px" width="100%" /> -->
<script type="text/javascript">
var ypos,image;
function parallex() {
image = document.getElementById('image');
ypos = window.pageYOffset;
image.style.top = ypos * .7+ 'px';
}
window.addEventListener('scroll', parallex),false;
</script>
</head>
<script type="text/javascript">
var imlocation = "img/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
var insert = imlocation + randomimage();
document.write("<img src='" + insert+ "'>");
</script>
<div id="content"></div>
</body>
I am trying to set my height of my insert image to 710px and the width to be 100%. What am I doing wrong?
I have tried editing the insert.height and the insert.width but that seems not to work.
Firstly, your code is not running correctly, here's why:
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
As might notice, the lack of semicolons means that each of your statements above are not being closed. The above should become:
image = new ImageArray(6);
image[0] = 'bg.jpg';
image[1] = 'bg2.jpg';
image[2] = 'bg3.jpg';
image[3] = 'bg4.jpg';
image[4] = 'bg5.jpg';
image[5] = 'bg6.jpg';
var rand = 60/image.length;
function randomimage() {
currentdate = new Date();
image_number = currentdate.getSeconds();
image_number = Math.floor(image_number/rand);
return(image[image_number]);
Let me know if you now have any errors after sorting this out, I will then evolve my answer accordingly! :)
Part 2:
Instead of this:
var insert = imlocation + randomimage();
insert.height = "710px";
insert.width = "100%";
document.write("<img src='" + insert+ "'/>");
Let's use CSS, we have two options:
Option 1 - Use style attributes:
var insert = imlocation + randomimage();
document.write("<img style='height:710px;width:100%' src='" + insert + "'/>");
Option 2 - Use a class
var insert = imlocation + randomimage();
document.write("<img class='ourclass' src='" + insert + "'/>");
To finish off option 2, we now define "ourclass" in CSS:
.ourclass {
height:710px;
width:100%
}
Related
I'm currently learning JS and I'm doing this canvas exercise, the task is to "draw" circles on a rectangle by the parameters that the user enters (x and y for positioning the first circle, the radius of the circles and the amount of circles), each circle's x should grow by 1 each time and be positioned accordingly.
The thing is I just can't position the circles no matter what I do! I'm pretty sure it's related to my CSS(which I suck at).
Does anyone know how to position the circle at a specific point?
var container = document.getElementById('container');
var rectangle = document.createElement('div');
rectangle.setAttribute('id', 'rectangle');
container.appendChild(rectangle);
var style = document.createElement('style');
style.innerHTML = "#rectangle {height:300px; width: 400px; background-color: #e1c699; position: relative;}";
document.head.appendChild(style);
var formElement = document.createElement('div');
formElement.setAttribute('id', 'form');
var xInput = createInput("x", "Please enter x");
var yInput = createInput("y", "Please enter y");
var radius = createInput("radius", "Please enter radius");
var numOfCircles = createInput("numOfCirc", "Please enter number of circles");
formElement.appendChild(xInput);
formElement.appendChild(yInput);
formElement.appendChild(radius);
formElement.appendChild(numOfCircles);
var submitBtn = createBtn('submit', 'Submit');
formElement.appendChild(submitBtn);
container.appendChild(formElement);
submitBtn.onclick = function() {
var numOfCirc = document.getElementById('numOfCirc').value;
var raidus = document.getElementById('radius').value;
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
for (var i = 1; i <= numOfCirc; i++) {
drawCircle(x, y, raidus, i);
x = parseInt(x) + 1;
}
}
function drawCircle(x, y, raidus, id) {
var circle = document.createElement('div');
circle.setAttribute('class', 'circle');
circle.setAttribute('id', id);
var style = document.getElementsByTagName('style')[0];
if (id == 1) {
var circleSize = ".circle {height: " + radius.value + "px; width: " + radius.value + "px; background-color: #555; border-radius: 50%;}";
var position = "#" + id + " {position: absolute; left: " + x + "px; top: " + y + "px;}"
style.insertAdjacentHTML('beforeend', circleSize);
style.insertAdjacentHTML('beforeend', position);
} else {
var position = "#" + id + " {position: absolute; left: " + x + "px; top: " + y + "px;}"
style.insertAdjacentHTML('beforeend', position);
}
rectangle.appendChild(circle);
}
function createInput(id, displayName) {
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("placeholder", displayName);
return input;
}
function createBtn(id, displayName) {
var btn = document.createElement("button");
btn.setAttribute("id", id);
btn.innerText = displayName;
return btn;
}
<div id="container">
Also, if you have any general propositions for improvements I'd love to hear them!
I'am changing the html code from javascript and want to call same function from created "div"s. but it is not called.
As you can see 'html' which is formed after function invoke also has class="screen" but created 'div's doesn't support it.
var i;
var clear = 2;
$("#container").click(function() {
var clickid = $(this).attr('id');
var left = document.getElementById(clickid).offsetLeft;
var top = document.getElementById(clickid).offsetTop;
var height = document.getElementById(clickid).offsetHeight;
var width = document.getElementById(clickid).offsetWidth;
var x = document.getElementById(clickid).value;
orient = prompt("vertical or horizontal ?");
numdiv = prompt("How many divisions should be created ?");
var divsper = [];
var html = "";
for (i = 0; i < numdiv; i++) {
per = prompt("Percentage of " + (i + 1) + "th division ?");
divsper.push(per);
}
if (orient == "vertical") {
for (i = 0; i < numdiv; i++) {
l = Math.floor(left + ((i * divsper[i] * width) / 100));
w = Math.floor((divsper[i] * width) / 100);
html = html + "<div id=" + clickid + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
}
document.getElementById(clickid).outerHTML = html;
//document.getElementById(clickid).unwrap();
}
});
* {
padding: 0px;
margin: 0px;
}
body {}
#container {
background-color: pink;
top=0%;
left=0%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>
Replace '$("#container").click(function() {' this line with '$("html").on('click', '[id*=container]', function() {'.
It will work for you.
var i;
var clear = 2;
$("html").on('click', '[id*=container]', function() {
var clickid = $(this).attr('id');
var left = this.offsetLeft;
var top = this.offsetTop;
var height = this.offsetHeight;
var width = this.offsetWidth;
var x = this.value;
orient = prompt("vertical or horizontal ?");
numdiv = prompt("How many divisions should be created ?");
var divsper = [];
var html = "";
for (i = 0; i < numdiv; i++) {
per = prompt("Percentage of " + (i + 1) + "th division ?");
divsper.push(per);
}
if (orient == "vertical") {
for (i = 0; i < numdiv; i++) {
l = Math.floor(left + ((i * divsper[i] * width) / 100));
w = Math.floor((divsper[i] * width) / 100);
html = html + "<div id=" + clickid + (i + 1) + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
}
this.outerHTML = html;
//this.unwrap();
}
});
* {
padding: 0px;
margin: 0px;
}
body {}
#container {
background-color: pink;
top=0%;
left=0%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>
Try using $('#container').on('click') instead. Dynamically generated html event handling is slightly different.
Is there a way to make the below javascript just display the random images with out a link?
var imagenumber = 10 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
var URLs = new Array() ;
images = new Array
images[1] = "images/headerpics/fall/fall17.png"
images[2] = "images/headerpics/fall/fall1.png"
images[3] = "images/headerpics/fall/fall2.png"
images[4] = "images/headerpics/fall/fall3.png"
images[5] = "images/headerpics/fall/fall4.png"
images[6] = "images/headerpics/fall/fall5.png"
images[7] = "images/headerpics/fall/fall6.png"
images[8] = "images/headerpics/fall/fall7.png"
images[9] = "images/headerpics/fall/fall8.png"
images[10] = "images/headerpics/fall/fall9.png"
var image = images[rand1] ;
var linknumber = 1 ;
var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
links = new Array
links[1] = "index.htm"
var link = links[img1];
document.write('<a href="' + link + '"><img src="' + image + '"
border="0"></a>') ;
Thanks for any help!
Just Remove the Anchor (<a>) tag from the document.write
document.write('<img src="' + image + '"border="0">');
i write function which output top and left all div within div id=container
var main = $('#container'),
res = $('#result'),
bw = parseInt(main.css('border-left-width'), 10),
mT = main.offset().top + bw,
mL = main.offset().left + bw;
$('#btn1').on('click', function () {
var allCoords = $('div', main).map(function () {
return getCoords(this);
}).get().join('<br>');
res.html(allCoords); });
function getCoords(el) {
var $that = $(el),
pos = $that.offset(),
posTop = pos.top - mT,
posLeft = pos.left - mL;
var pos = el.id + ' top: ' + posTop + 'px; left: ' + posLeft + 'px;';
return pos;}
How can I get the value(left and top) in % relative div id container
please help me.Thank
Use math formula 100*yoursreensize/yourelementdivorsomething, like this:
var width = $(window).width();
var left = $('#me').position().left;
var percent = parseInt(100*left/width);
alert(percent);
#me{
position:relative;
left:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="me">Me</div>
I'm having an issue here in my code that is driving me nuts. I have all my code and variables declared in an external .js file and I'm trying to print them out into an table which will be created in Javascript. Here is the external .js file and the HTML which references it.
loadImage.js
var pos = [];
var xAvg;
var yAvg;
var cirCtr;
var radAvg;
var defAvg;
var comPer;
var img=new Image();
img.onload=function(){
var can = document.getElementById('C');
var ctx = can.getContext('2d'); //creates canvas and image data
ctx.drawImage(img, 0, 0);
var imgdata = ctx.getImageData(0,0, img.width, img.height);
var data = imgdata.data;
var index = [];
var vertical;
var horizontal;
for (var i = 0; i < data.length; i += 4) {
if (data[i] == 255) { //finds position of piexel in data array
index.push(i);
}
}
for (var i = 0; i < index.length; i++) { //finds coordinate postion of pixel
var vertical =
Math.floor((index[i] / 4) / 400);
var horizontal =
Math.floor((index[i] / 4) % 400);
pos.push(horizontal, vertical);
}
var xTot = 0;
var yTot = 0;
for (var i = 0; i < pos.length; i+=2){
xTot = xTot + pos[i]; //finds x value of circe center
xAvg = xTot/( (pos.length+1) / 2);
};
for (var j = 1; j < pos.length; j+=2){
yTot = yTot + pos[j]; //finds y value of circle center
yAvg = yTot/( (pos.length+1) / 2);
};
cirCtr = [xAvg, yAvg];
alert("The center of the circle is " + cirCtr);
var radTot = 0;
//finds average radius of traced circle
for (var i = 0; i < pos.length; i+=2){
radTot = radTot + Math.sqrt(Math.pow((pos[i+1] - cirCtr[1]), 2) + Math.pow((pos[i] - cirCtr[0]), 2));
radAvg = radTot / ( (pos.length+1) / 2);
}
var defTot = 0;
for (var i = 0; i < pos.length; i+=2) {
defTot = defTot + (Math.abs(Math.sqrt(Math.pow((pos[i+1] - cirCtr[1]), 2) + Math.pow((pos[i] - cirCtr[0]), 2)) - radAvg));
defAvg = defTot / ( (pos.length+1) / 2);
}
comPer= 100 * ((Math.PI * Math.pow(radAvg,2))/(Math.PI * Math.pow((radAvg + defAvg), 2)));
alert(defTot);
alert("The radius of the circle is " + radAvg);
}
img.crossOrigin="anonymous"; //this had to do with the DOM Exception 18 thing
img.src="https://dl.dropboxusercontent.com/u/196150873/tile_0000_session_23220.skl.png";
the HTML
<html>
<head>
<script src="loadImage.js" type="text/javascript"></script>
<script> function();</script>
</head>
<body>
<h1>200 Circles</h1>
<canvas id="C" height="400" width="400"></canvas>
<div>
<table border="1">
<thead>
<tr>
<th>Center</th>
<th>Regular Radius</th>
<th>Derived Radius</th>
<th>Area proportionality</th>
</tr>
</thead>
<tbody id="log"></tbody>
</table>
</div>
<script>
for (var i=0; i < 10; i++) {
addRow();
}
function addRow() {
var newRow =
"<tr>" +
"<td>" + cirCtr + "</td>" +
"<td>" + radAvg + "</td>" +
"<td>" + (radAvg + defAvg) + "</td>" +
"<td>" + comPer + "</td>" +
"</tr>";
document.getElementById("log").innerHTML += newRow;
}
</script>
<body>
</html>
The issue us that the .js file is not loaded yet, when you
are referencing these variables.
I would use jquery ready event - http://api.jquery.com/ready/
If you can't use jquery, then see answers for this question - $(document).ready equivalent without jQuery
Another option is to keep both scripts on the same place, either in js file or in html.