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.
Related
I have the classical Progress bar in Javascript. I Would like to simply place the vertical bar without seeing it moving on the screen.
function progressbar() {
var vertical_bar2 = document.querySelector("#P5 .vl5");
var element = document.getElementById("myprogressBar");
var ValueSet = 25
var width = 0;
document.getElementById("vl5").style.display='';
document.getElementById("value2").style.display='';
document.getElementById("value1").style.display='';
var identity = setInterval(scene, 10);
function scene() {
if (width >= ValueSet) {
clearInterval(identity);
} else {
width++;
vertical_bar2.style.left = `${width}%`;
document.getElementById("value2").innerHTML = ValueSet
}
}
}
I am trying the following script but it is not working
function progressbar() {
var vertical_bar2 = document.querySelector("#P5 .vl5");
var element = document.getElementById("progressBar");
var CE = 25
var width = 0;
document.getElementById("vl5").style.display='';
document.getElementById("Value2").style.display='';
document.getElementById("Value1").style.display='';
vertical_bar2.style.left = 25;
document.getElementById("Value").innerHTML = CE
}
Based on the code your provided, it looks like you just need to set a unit for the left property of your bar. Currently you are only setting a value (25), but without a unit (%, px, em, etc.) it will not apply anything.
vertical_bar2.style.left = "25%";
or
vertical_bar2.style.left = `${CE}%`;
I want to dynamically adjust the position of a YouTube video element using javascript based on the browser dimensions. I am not looking for a purely CSS Solution, I know that I can do that with padding, I am looking for a javascript solution which alters CSS of the div.
In this instance my DIV is "wrappervideo"
<script>
var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;
var narrowPadding = (((viewWidth/1.7777)-(viewHeight/1.5))/2);
var tallHeight = (viewHeight/1.5);
var tallWidth = (viewHeight/1.5)*1.7777;
var tallPadding = ((viewWidth)-(viewHeight/1.5)1.7777)/2;
function findAspectRatio() {
if ( viewWidth/(viewHeight/1.5) >= 1.777) {
setTimeout(narrow,0)}
if ( viewWidth/(viewHeight/1.5) <= 1.777) {
setTimeout(tall,0)}
if ( viewWidth/(viewHeight/1.5) == 1.777) {
setTimeout(equal,0)}
}
function equal() {
wrappervideo.style.top = '0px';
wrappervideo.style.width = '100%'; }
function narrow() {
wrappervideo.style.top = narrowPadding;
wrappervideo.style.width = '100%'; }
function tall() {
wrappervideo.style.right = tallPadding;
wrappervideo.style.width = tallWidth; }
</script>
Edited - This is what I have currently. Any thoughts on why this isn't working?
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;
In my html document I have a div with id="containerRight". In the same directory where the html document is I have an image that needs to be added to the html. Using javascript I want to add 5x the same image into the div and scatter them randomly within the div. I'm struggling with adding 5x the same image from the hdd and positioning them randomly within the div. I have tried this so far:
<!DOCTYPE html>
<html>
<head>
<script>
function insert_picture(){
var newPicture = document.createElement("img");
var destinationParent = document.getElementByID("containerRight");
destinationParent.appendChild(newPicture);
}
function ImgRandomPosition()
{
var left = generateRandom();
var top = generateRandom();
var image = insert_picture();
var imagestyle = document.getElementById("imgRight").style;
imagestyle.position = "absolute";
imagestyle.top = top;
imagestyle.left = left;
}
</script>
</head>
<body onclick="insert_picture()">
<div id="containerRight">
<img id="imgRight" src="smiley.png" alt="" />
</div>
</body>
</html>
I have changed the code to the following and it adds images to the div containerRight next to each other:
function insert()
{
var imgDestination = document.getElementById("containerRight");
var imgAdded = document.createElement("img");
imgAdded.src = "smiley.png";
imgDestination.appendChild(imgAdded);
}
Then the next issue is to position images randomly within the same div id="containerRight".
The code below does add images randomly to the body of the html not the div.
Any further thoughts greatly appreciated:
function insert()
{
var imgDestination = document.getElementById("containerRight");
var imgAdded = document.createElement("img");
imgAdded.src = "smiley.png";
imgDestination.appendChild(imgAdded);
ImgRandomPosition(imgAdded);
}
function ImgRandomPosition(imgAdded)
{
var left = Math.floor((Math.random() * 400) + 1)+"px";
var top = Math.floor((Math.random() * 400) + 1)+"px";
var imagestyle = imgAdded.style;
imagestyle.position = "absolute";
imagestyle.top = top;
imagestyle.left = left;
}
change your code to
function insert_picture()
{
var newPicture = document.createElement("img");
var destinationParent = document.getElementByID("containerRight");
destinationParent.appendChild(newPicture);
newPicture.src = "smiley.png";
ImgRandomPosition(newPicture);
}
function ImgRandomPosition(imgObj)
{
var left = generateRandom();
var top = generateRandom();
var imagestyle = imgObj.style;
imagestyle.position = "absolute";
imagestyle.top = top;
imagestyle.left = left;
}
Now when you click on the body <body onclick="insert_picture()"> this method will add an image somewhere on the body
I've used some source for a transparent overlay in JavaScript:
function grayOut(vis, options)
{
var options = options || {};
var zindex = 50;
var opacity = 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark=document.getElementById('darkenScreenObject');
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode);
/*
var pTag = document.createElement("P");
var txtProcessing = document.createTextNode("Processing GIF...");
tnode.appendChild(txtProcessing);
*/
}
if (vis)
{
// Calculate the page width and height
if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) )
{
var pageWidth = document.body.scrollWidth+'px';
var pageHeight = document.body.scrollHeight+'px';
}
else if( document.body.offsetWidth )
{
var pageWidth = document.body.offsetWidth+'px';
var pageHeight = document.body.offsetHeight+'px';
}
else
{
var pageWidth='100%';
var pageHeight='100%';
}
//set the shader to cover the entire page and make it visible.
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= pageWidth;
dark.style.height= pageHeight;
dark.style.display='block';
var txt = document.createTextNode("This text was added.");
dark.appendChild(txt);
}
else
{
dark.style.display='none';
}
}
My problem is I'm trying to get some text to show up on the transparent layer but I can't get it to work. Any thoughts?
Your text node is created on overlay but is invisible cause of text color.
check Fiddle where text color is set to red.
dark.style.color = 'red';