I am attempting to create a function where by a button is clicked and the background image is selected for a div. Here is what I have started below but it does not seem to work can anyone point out where Im going wrong... :)
<style type="text/css">
#txt{
width: auto;
height: auto;
border: solid #000;
}
</style>
<script type="text/javascript">
function backg1(){
var test = new string ();
test = document.getElementById('txt');
test.style.backgroundImage="url('cloud.jpg')";
}
</script>
</head>
<body>
<div id="txt">
<input type="button" value="BG1" onclick="backg1()"/>
</div>
Since your <div> originally contains nothing but the button input, it has no size outside the boundaries of that button. You will need to set an explicit width and height (along with position: relative) to see the background.
I would recommend setting them to the same dimensions as your image.
/* in the CSS */
#txt{
/* use the width, height of your image */
width: 400px;
height: 250px;
position: relative;
border: solid #000;
}
Or if you need to set them dynamically:
function backg1() {
test = document.getElementById('txt');
test.style.backgroundImage="url('cloud.jpg')";
// <div> needs a width & height for the background image to be visible outside the
// bounds of the one element contained in the div.
test.style.width = "400px";
test.style.height = "250px";
test.style.position = "relative";
}
There is a javascript error at this line.
var test = new string ();
You can make it like var test = new String(); Then it should work.
Moreover, i observed that you are creating string object and then you are overriding with DOM object. Not sure why it so like that. You can just create a variable like var test;
Related
I am working on a project and I am having difficulty writing out the code I need to make the ball in my project change to the same color as the button in the top left hand corner when I change the color. I need them to be in sync. A few things to keep in mind this is without jquery pure vanilla javascript and ecma 5
With that being said here are the instructions for the project:
Use Javascript form events to adjust the background colour of a circle on the screen.
Fork this repository.
**Make a <form> tag with an <input> inside it—use type="color" for the input.
When the form’s change event fires, adjust the background-color of the ball to match the input’s value.
Run it through Markbot and make sure it passes all the checks.
Here is what my project currently looks like:
When I click on the button in the top left hand corner this pops up:
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>CircleColourr</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="ball"></div>
</body>
<script src="jquery.min.js"></script>
<script src="main.js"></script>
</html>
Here is my main.css
html{
box-sizing: border-box;
}
*, *::before, *::after{
box-sizing: inherit;
}
.ball{
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 200px;
background-color: ;
border-radius: 100px;
}
Here is my main.js
var body = document.querySelector('body');
var h2 = document.createElement('h3');
var forma = document.createElement('form');
var inForma = document.createElement('input');
var h2 = document.createTextNode('Colour');
inForma.type = 'color';
inForma.id = 'listen';
body.appendChild(h2);
forma.appendChild(inForma);
body.appendChild(forma);
var bally = document.querySelector('.ball');
bally.style.backgroundColor = forma; // first attempt
console.log(bally.style.backgroundColor = forma);//first attempt
var button = document.getElementById('listen').addEventListener ('click', change);
function change(e){
document.querySelector('.ball').style.backgroundColor = forma;
}
I have made two attempts the first one just assigns the actual form element to the ball div and the second one nothing appears to be happening. The thought process for me was to assign the forma to the backgroundColor of the ball. I just need some guidance please.
there's a couple issues I see
there's a space here, which will break it
getElementsById is not a valid function, use getElementById
the event listener click will fire when you open the ui, you want to use a change listener, to update value after the user selects color
var button = document.getElementsById('listen').addEventListener ('click', change);
you don't have an element with a class called class, you do have .ball though
document.querySelector('.class').style.backgroundColor
here's a working version
https://jsfiddle.net/rp9kxLyu/
I have a div with some element inside it and I would like to allow the scrolling of the div until the last element.
This is what happens when I scroll:
And this is how I would like to make it:
Is it possible to do it?
Well, it is quite simple without any javascript:
HTML:
<div>
<section>hello</section>
<section>hello</section>
<section>hello</section>
<section>hello</section>
<section>hello</section>
<section>hello</section>
<section>hello</section>
</div>
CSS:
section { height: 100px; }
section:last-child { height: 100%; }
div {
overflow: scroll;
height: 400px;
border: 1px solid black;
}
See fiddle. The concept is just to use the parent div height as a height for the last item.
Try achieve this using JS. Set a bottom margin to a last category equal to wrapper height minus last category height.
var wrapperHeight = $("#wrapper").innerHeight();
var lastCategory = $(".category:last-child");
var lastCategoryHeight = lastCategory.height();
var bottomMargin = wrapperHeight - lastCategoryHeight;
lastCategory.css({margin: "0 0 "+bottomMargin+"px 0"});
DEMO
Also it can be done with scrollIntoView, by scrolling into view the last element, this is the JS snippet:
items = document.querySelectorAll("section");i = items[items.length-1];i.scrollIntoView();
And this is the jsfiddle code
I have a progressbar on my website and this is a part of its css:
.progress-bar span {
display: inline-block;
height: 25px;
width: 78%; //the actual position
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
//other css
}
I have to change the width that indicates the position of the progression (the line you see here). This is the first time I use progress bars and I have no idea about how to setup the javascript code.
Any advice? jsfiddle
Here is the way without jQuery
HTML
<div class="progress-bar" align="left">
<span id="prog"></span>
</div>
JS:
var elem = document.getElementById("prog");
elem.style.width = "88%";
I'd recommend using jQuery to make your javascript calls much simpler. You can download the latest version here: http://jquery.com/download/
First, include the jQuery file in the head of your html like this:
<head>
...
<script type="text/javascript" src="<location of file>jquery-1.10.2.min.js"></script>
...
</head>
Then within your own javascript code, you can move the position of the progress bar like so:
jQuery('.progress-bar scan').css('width', <desired width>);
Hopefully that helps.
You can use:
document.querySelectorAll('.progress-bar span').forEach(function(elem) {
elem.style.width = '<YOUR WIDTH>';
});
no jQuery
I just incremented the width this way:
function increment(){
var width = document.getElementById('progressbar').clientWidth;
var divArray = document.getElementById('progressbar');
if(width<500){
var largura = width+10;
divArray.style.width = largura+'%';
setTimeout("increment()",1000);
}
else{
window.location.href = "http://www.google.com/";
}
}
And does it every second so it will be incremented every second but u can change it the way you want.
I have 2 divs. Since div 1 could be longer, i.e. infinite scroll div, I want to make div 2 the same height with div 1 using javascript. I tried to use the code below, but it does not work. Why?
javascript:
<script type="text/javascript">
document.getElementById("div2").setAttribute("height",document.getElementById("div1").clientHeight);
</script>
my divs:
#div1 {
width: 700px;
background: #FFF;
overflow: hidden;
float: left;
}
#div2 {
width: 300px;
background-image: url(../images/user_panel.png);
background-repeat:repeat-y;
}
What about this:
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.style.height = div1.style.height; // Might have to add +"px" here.
Just from the top of my head.
This should do the trick:
document.getElementById("div2").style.height=document.getElementById("div1").clientHeight+'px';
the setAttribute function is a DOM function to add a new attribute to an HTML element. You are trying to add the height on a div. That would have the effect:
<div id="div2" height="...">...</div>
But HTML does not define such an height HTML element attribute.
What you are looking for is to set the style of the DOM element. That would be the style DOM element property. And inside the style you have the height property that you must set:
document.getElementById("div2").style.height = document.getElementById("div1").clientHeight + "px";
In the above code sample you might also think about div1's padding (probably bringing it into the computation). This is because clientHeight includes the padding but style.height does not.
I want to be able to move an object from one position to another using buttons for example 3 buttons left right and center that always put the object at the exact same positions everytime.
I have tried using style.position="absolute" but it moves left or right or whatever position depending on it last position never the same three positions.
Which one of static, absolute, fixed, relative, inherit would be best to use in this case? and is it possible to get an example of how a particular object would be set to a particular position thanks in advance
position: absolute tells the browser HOW to position your element, but not WHERE to position your element. You still need to position your element by setting left or right and top or bottom values in your css.
Given some markup:
<button id="left">LEFT</button>
<button id="right">RIGHT</button>
<button id="center">CENTER</button>
<div id="wrapper">
<div id="thingy"/>
</div>
and some styles:
#wrapper {
position: relative;
margin-top: 10px;
}
#thingy {
margin: 0 auto;
width: 25px;
height: 25px;
background-color: #f69;
}
You can move the thingy this way:
var thingy = document.getElementById('thingy');
document.getElementById('left').onclick = function() {
thingy.style.position = 'absolute';
thingy.style.right = null;
thingy.style.left = 0;
};
document.getElementById('right').onclick = function() {
thingy.style.position = 'absolute';
thingy.style.left = null;
thingy.style.right = 0;
};
document.getElementById('center').onclick = function() {
thingy.style.position = 'inherit';
thingy.style.left = null;
thingy.style.right = null;
};
Code is posted at: http://jsfiddle.net/TXWfh/1/
You could make it work with absolute, but I think relative might work best in your case.
HTML
<div id="test"></div>
<input type="button" id="left" value="Left">
<input type="button" id="middle" value="Middle">
<input type="button" id="right" value="Right">
CSS
#test {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
input {
padding: 4px;
}
JavaScript
var test = document.getElementById("test");
document.getElementById("left").onclick = function() {
test.style.left = "0px";
};
document.getElementById("middle").onclick = function() {
test.style.left = "250px";
};
document.getElementById("right").onclick = function() {
test.style.left = "500px";
};
Live example
Don't know what you are trying to do, but it really doesn't matter if you don't have a lot of surrounding html code that can get affected by your choice of position value.
following 3 fiddles do same things but with subtle difference that they have different value for position attribute.
http://jsfiddle.net/9uQT8/3/
http://jsfiddle.net/9uQT8/4/
http://jsfiddle.net/9uQT8/5/
try clicking left center right. and see. I used jQuery though, super cool JS framework.