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.
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
Ok so i have one div and inside it a canvas:
my html file:
<div id="container">
<canvas id="game" width="600px" height="2000px">
</div>
my css file:
#game{
background: -moz-linear-gradient(top, #00b7ea0%, #008793 14%, #04b9b 43%, #1f00ea 74%, #008793 89%, #009ec3 100%);
bottom: 0px;
position: absolute;
}
#container{
position: relative;
width:600px;
height:500px;
}
And here is my question:
What code should be used in a javascript file, if i want to control the bottom property of #game?
What i mean i that i want the user to press a botton, e.g. W(=87), and the bottom property to change negative or possitive direction is irrelevant, the need is to make a code that when a key is pressed the magnitude of the bottom property will change.
I hope that i described the probel well, if more info is needed please ask...
Looking forward for a reply :-)
If you want to set the bottom property dynamically you can do this as follows-
function setHeight (bottomValue) {
if (typeof bottomValue === "number") {
bottomValue = bottomValue + "px";
}
var gameElement = document.getElementById("game");
if (gameElement) {
gameElement.style.bottom = bottomValue;
}
}
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style
Alternatively using jQuery-
$('#game').css('bottom', bottomValue);
See http://api.jquery.com/css/
Using jQuery you could add the following code to your key press handler:
var newBottomValue = 13;
$("#game").css("bottom", newBottomValue);
If you are not using jQuery I would do something like:
var newBottomValue = 13;
document.getElementById("game").style.bottom = newBottomValue + "px";
I am working on making a number list with each number on its individual div. So far I am able to remove the div with Javascript (on click), but I would like to enable JQuery so that I am able to add a class to a div and then remove all divs of that class with a button or something like that.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
h4 {
font-family: Verdana;
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<h4>Double click para borrar un numero</h4>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
divTag.ondblclick = function(){this.parentNode.removeChild(this)};
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
http://jsfiddle.net/ramonfabrega/AZSy8/
For simplicity, I just tried hiding the div's clicked, but JQuery does not seem to work. So something must be off.
Two issues:
1) jQuery wasn't loaded.
2) You were trying to bind the click event on an invalid selector (divTag instead of div)
Here's an updated fiddle: http://jsfiddle.net/LFC3A/2/
Regarding #2 - jQuery allows you to select an element multiple ways. The most common is to use a selector. The majority of selectors jQuery supports are from CSS 1 - 3, though jQuery supports some of its own custom selectors (such as div:eq, div:gt, and so on...) Check out the selectors page here: http://api.jquery.com/category/selectors/
Now, if your markup was:
<body>
<divTag>My Custom Div Tag</divTag>
<div>My regular DIV</div>
</body>
Then your original fiddle would have worked. In fact, here's an updated fiddle demonstrating that: http://jsfiddle.net/FpMAw/ (I updated your createElement to return a custom element, divTag)
The other way of accessing jQuery is by passing it a DOM element. Something like:
var $body = $(document.body) is equivalent to var $body = $('body')
If you reference that, you now have a jQuery object with a bunch of useful helper methods. So, in our previous example, we can now do:
$body.css('color', 'red')
Hopefully this helps explain a bit more why it didn't work. If you have any other questions, feel free to ask :)
Fiddle Demo
you are not including jQuery library in the fiddle
change $('divTag') to $('div')
Read $( "element" )
$(document).ready(function () {
$('div').click(function () {
$(this).hide();
});
});
Start Learning
jQuery API Documentation
This will create and add a click handler at the same time.
$('<div>').click(function(e){ this.addClass('active');})
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;