I would like to know the best possible way to style a width of a box with button click. I want to create a code where every time i click a button, the width of the box (in this case) increases.
var btn = document.querySelector(".btn");
var box = document.getElementById('bebo');
var range = ['100px','200px','300px','400px','500px','600px'];
btn.addEventListener('click', function(){
box.style.width = range[0],
box.style.width = range[1],
box.style.width = range[2],
box.style.width = range[3],
box.style.width = range[4],
box.style.width = range[5];
});
This is what i tried but it doesn't work. I've also tried this:
var range = ['100px','200px','300px','400px','500px','600px'];
btn.addEventListener('click', function(){
box.style.width = range.shift();
});
The range.shift() option did work for me but i don't feel like that's the efficient way to code for what i want.
I would really like some advice.
Your code actually works fine, but since it mutates the array, you cannot reuse it. In addition, when the array is empty, more clicks would cause the width to be undefined.
I would use a counter. You can increment the counter, and when you reach the end of the array, you can go back to the start (like in this example).
Example:
var btn = document.querySelector(".btn");
var box = document.getElementById('bebo');
var range = ['100px', '200px', '300px', '400px', '500px', '600px'];
var counter = 0;
btn.addEventListener('click', function() {
box.style.width = range[counter];
counter = (counter + 1) % range.length;
});
#bebo {
background: red;
width: 10px;
height: 100px;
}
<button class="btn">Btn</button>
<div id="bebo"></div>
Related
I am creating a canvas alike without using canvas tag , by creating new div each time mouse is down, i can't figure out how to run a second event.
Like mousedown then mousemove event where the seconed event occur only after the first one is true?
also if you can help with the offset coordinates
var paintbox = document.getElementById("canvas");
var start = function() {
paintbox.addEventListener("mousedown", drawOnCanvas);
};
var newColor = document.getElementById("colorPick");
var drawOnCanvas = function() {
var newClick = document.createElement("div");
newClick.setAttribute("id", "smallDiv");
newClick.style.backgroundColor = newColor.value;
newClick.style.width = "10px";
newClick.style.height = "10px";
newClick.style.position = "absolute";
paintbox.appendChild(newClick);
}
Set the handler on the mousemove event instead of mousedown and in the handler check whether the mouse button is down.
It would be better to move the 10px/position style settings in a CSS class. Also, don't generate elements with the same id attribute value: that generates invalid HTML. Use a class instead.
For the positioning you can use the pageX and pageY properties of the event object.
Finally, as the events will be triggered on the small divs when you make small moves, an extra check might be necessary to verify the mouse is still in the paint box.
var paintbox = document.getElementById("canvas");
var start = function() {
paintbox.addEventListener("mousemove", drawOnCanvas);
};
var newColor = document.getElementById("colorPick");
var drawOnCanvas = function(e) {
if ((e.buttons & 1) === 0) return; // Mouse button is not down
// Extra check to see we are well within the box boundaries:
var box = paintbox.getBoundingClientRect();
if (e.clientX - 5 < box.left || e.clientX + 5 > box.right
|| e.clientY - 5 < box.top || e.clientY + 5 > box.bottom) return;
var newClick = document.createElement("div");
newClick.className = "smallDiv"; // Don't create duplicate ID; put CSS in class
newClick.style.backgroundColor = newColor.value;
paintbox.appendChild(newClick);
newClick.style.left = (e.pageX-5) + "px";
newClick.style.top = (e.pageY-5) + "px";
}
start();
#canvas {
height: 150px;
width: 300px;
border: 1px solid;
display: inline-block;
margin: 10px;
}
.smallDiv {
width: 10px;
height: 10px;
position: absolute;
}
Color: <input id="colorPick" type="color"><br>
<div id="canvas"></div>
var btn = document.querySelector('.btn');
btn.style.position = "fixed";
btn.style.bottom = "100px";
btn.style.right = "100px";
/* here the bottom and right is not fixed - and value 100px is also not fixed
- this values are given user - a user may select postion to top left, top right, bottom left */
/* An example - this are user given values - and based on this values how can i set the positon */
var position_1 = "top";
var position_2 = "right"
var position_1_value = "100px";
var postion_2_value = "100px";
var dynamic_btn = document.querySelector('.dynamic-btn');
dynamic_btn.style.position = "fixed";
/* dynamic_btn.style.top = position_1_value; */
dynamic_btn.style.position_1 = position_1_value;
/* dynamic_btn.style.right = postion_2_value; */
dynamic_btn.style.position_2 = postion_2_value;
<button class="btn">hello</button>
<button class="dynamic-btn">Dynamic button</button>
Have to change the Styles using JavaScript
var btn = document.querySelector('.btn');
btn.style.position = "fixed";
btn.style.bottom = "100px";
btn.style.right = "100px";
This is some thing like static. - with know values we did;
But In our case user will give the position name, value.
User may choose any position - bottom, right, top, left and can add any value like 10px, 100px
something I tried, but unable to add the position name
var position_1 = "top";
var position_2 = "right"
var position_1_value = "100px";
var postion_2_value = "100px";
var dynamic_btn = document.querySelector('.dynamic-btn');
dynamic_btn.style.position = "fixed";
/* dynamic_btn.style.top = position_1_value; */
dynamic_btn.style.position_1 = position_1_value;
/* dynamic_btn.style.right = postion_2_value; */
dynamic_btn.style.position_2 = postion_2_value;
Demo
You can change the style using square brackets:
dynamic_btn.style[position_1] = position_1_value;
This way, you can access values of dynamically named properties.
This maybe can help you, let me know if it's right or you need some more info.
document.getElementById("xyz").style.setProperty('padding-top', '10px');
// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');
If you need you can replace "getElementById" with "getElementsByClassName".
I've found the answer in this question on stackoverflow https://stackoverflow.com/a/46754513/6821907
This JSFiddle could help you, basically by setting the button with a relative position inside a div with a specific height you are allowed to move the control freely inside that div
JavaScript
document.querySelector('.move').addEventListener('click', function () {
var dynamicBtn = document.querySelector('.dynamic-btn');
var top = document.querySelector('#top');
var left = document.querySelector('#left');
dynamicBtn.style.position = 'relative';
dynamicBtn.style.top = top.value + 'px';
dynamicBtn.style.left = left.value + 'px';
});
CSS
.main {
height: 100%;
}
.controls {
height: 10%;
}
.space {
height: 90%;
}
HTML
<div class="main">
<div class="controls">
<button class="move">move</button>
<input type="number" placeholder="top" id="top" value="10" />
<input type="number" placeholder="left" id="left" value="20" />
</div>
<div class="space">
<button class="dynamic-btn">Dynamic button</button>
</div>
</div>
Using the Yahoo Weather API.
When trying to set the style margins via JS, nothing happens.
Here is my script:
<script>
var cBackFunction = function (data) {
console.log(data);
var location = data.query.results.channel.location;
var condition = data.query.results.channel.item.condition;
var wind = data.query.results.channel.wind;
var units = data.query.results.channel.units;
var link = data.query.results.channel.link;
var lastUpdated = data.query.results.channel.lastBuildDate;
var conditionCode = condition.code;
var conditionText = condition.text;
var img = document.createElement("IMG");
img.src = "https://s.yimg.com/zz/combo?a/i/us/we/52/" + conditionCode + ".gif";
img.style.marginLeft = "140px";
document.getElementById('Weather-Description2').appendChild(img);
document.getElementById('Weather-Location2').innerHTML = location.city;
document.getElementById('Weather-Region2').innerHTML = location.region;
document.getElementById('Weather-Temp2').innerHTML = condition.temp;
document.getElementById('Weather-Unit2').innerHTML = units.temperature;
document.getElementById('Weather-WindSpeed2').innerHTML = wind.speed;
document.getElementById('Weather-Link2').href = link;
document.getElementById('lastUpdate2').innerHTML = lastUpdated;
document.getElementById('Weather-text2').innerHTML = "["+conditionText+"]";
document.getElementById('Weather-text2').style.marginLeft = 'auto'; //not working
document.getElementById('Weather-text2').style.marginRight = 'auto'; // not working
}
HTML:
<strong id="Weather-text2"></strong>
If I change the auto to a specific pixel like "100px" then it works.. can auto be used in JS for margins? The reason for auto on both marginLeft and marginRight is to auto-center the element. If so, how do I implement that correctly?
A <strong> element is, by default, display: inline.
Auto margins centre elements which are display: block (although since you would have width: auto as the default, this would have no practical effect unless you also reduced the width).
Set text-align: center on the nearest block ancestor element to centre the text.
I have the svg map with pins on it. I want to make the application that shows the description of the pin, when user put the mouse on it. The thing is, that the description should be in the mouse position. I've already done things like changing color onMouseOver and manipulate with all different css parameters. But I have problem with changing the div position.
In the same part of code when I put:
document.getElementById("test").style.color = "red";
the color is changing.
but when I do this:
document.getElementById("test").style.left = 500;
nothing happens.
I was trying with all those solution:
$("test").css({top: 200, left: 200});
and lots of others, but I have no idea why it doesnt work.
my jQuery code:
jQuery(document).ready(function() {
jQuery('img.svg').each(function(){
var mouseX;
var mouseY;
var $img = jQuery(this);
var imgURL = $img.attr('src');
jQuery.get(imgURL, function (data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Replace image with new SVG
$img.replaceWith($svg);
// Add an handler
jQuery('#pins path').each(function () {
jQuery(this).click(function () {
var post_slug = jQuery(this).attr('id');
var url = "http://127.0.0.1:8000/posts/post_slug".replace("post_slug", post_slug); //TODO
window.location = url;
});
jQuery(this).mouseover(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
var post_slug = jQuery(this).attr('id');
// using string concat due to name conficts with "path id" in svg map
//document.getElementById("popup_".concat(post_slug)).style.display = 'block';
document.getElementById("popup_".concat(post_slug)).style.top = mouseY;
document.getElementById("popup_".concat(post_slug)).style.left = mouseX;
document.getElementById("popup_".concat(post_slug)).style.color = "red";
});
jQuery(this).mouseout(function () {
var post_slug = jQuery(this).attr('id');
// using string concat due to name conficts with "path id" in svg map
document.getElementById("popup_".concat(post_slug)).style.display = 'none';
});
});
});
});
});
The divs are dynamically created according to objects in my django template.
for (var i = 0; i < pin_slugs.length; i++) {
var popup = document.createElement("div");
popup.id = "popup_".concat(pin_slugs[i]);
popup.title = pin_slugs[i];
popup.innerHTML = pin_slugs[i];
document.body.appendChild(popup);
}
I'm struggling with it for a long time. Can anyone help?
left, right, top, bottom properties will not work with default position value which is static. You should give position:absolute/relative. Best one to give in this scenario is absolute.
I solved it out. The solution was simple.
mouseX + "px";
and in my css I needed to put:
position: absolute;
I just started working with the easeljs library. I have created a canvas with a stage and it works.
I want to add bitmaps as buttons and add them side by side in the bottom on the stage.
I have tried with the following, but it place the bitmaps on top on each other.
var button = new createjs.Bitmap(queue.getResult("largebrick"));
var contentWidth = document.getElementById("content").offsetWidth;
var contentHeight = document.getElementById("content").offsetHeight;
var container = new createjs.Container();
stage.addChild(container);
stage.enableMouseOver(10);
for(var i = 0; i <10; i++){
button.x = 0 + button.getBounds().width * i;
button.y = contentHeight - button.getBounds().height;
button.addEventListener("mouseover", function() { document.body.style.cursor = 'pointer'; });
button.addEventListener("mouseout", function() { document.body.style.cursor = 'default'; });
button.addEventListener("click", function(event) {addBricks(button); });
container.addChild(button);
}
I hope some of you guys can help.
A couple things here. You need to create a new instance of the button inside the loop, otherwise you are just moving the original instance of button on each iteration. In this example, I simplified everything a bit by using a shape, but you could easily do the same with your Bitmap.
var xPos = 0;
for(var i = 0; i < 10; i++){
var button = new createjs.Bitmap(queue.getResult("largebrick"));
button.cursor = "pointer";
button.x = xPos;
button.y = contentHeight - 50;
xPos += 60;
container.addChild(button);
}
Also, createjs supports defining cursors as a property of a display object like so
button.cursor = "pointer";
which should simplify your code a little.