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;
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';
I have an animation of an abstract character who is to rotate 90 degrees in time with the beat of a song (which hasn't been added yet), but when I click the play button, I start a loop of functions and my character lags inconsistently and I don't know why. If anyone could help me out, I'd really appreciate the help.
window.onload = function()
{
var paper = new Raphael(0,0,800,600);
var backGround = paper.rect(0,0,800,600).attr({fill: "#AAAAAA"});
var outerBody = paper.circle(300,400,60);
var innerBody = paper.circle(300,400,45);
//Initially bottom foot
var foot1pt1 = paper.path(["M300,490 C300,470 340,470 340,490z"]); //main foot shape (semi circle)
var foot1pt2 = paper.path(["M300,490L340,490"]); //bottom of foot
var foot1pt3 = paper.path(["M300,460L300,490"]); //leg
//Initially right foot
var foot2pt1 = paper.path(["M390,360 C370,360 370,400 390,400z"]);
var foot2pt2 = paper.path(["M390,400L390,360"]);
var foot2pt3 = paper.path(["M360,400L390,400"]);
//Initially top foot
var foot3pt1 = paper.path(["M260,310 C260,330 300,330 300,310z"]);
var foot3pt2 = paper.path(["M300,310L260,310"]);
var foot3pt3 = paper.path(["M300,340L300,310"]);
//Initially left foot
var foot4pt1 = paper.path(["M210,400 C230,400 230,440 210,440z"]);
var foot4pt2 = paper.path(["M210,400L210,440"]);
var foot4pt3 = paper.path(["M240,400L210,400"]);
//Modifying parts
outerBody.attr({fill: "#000000"});
innerBody.attr({fill: "#AAAAAA"});
foot1pt1.attr({fill: "#000000"});
foot2pt1.attr({fill: "#000000"});
foot3pt1.attr({fill: "#000000"});
foot4pt1.attr({fill: "#000000"});
//Grouping whole character
var character = paper.set();
character.push(
outerBody,innerBody,
foot1pt1,foot1pt2,foot1pt3,
foot2pt1,foot2pt2,foot2pt3,
foot3pt1,foot3pt2,foot3pt3,
foot4pt1,foot4pt2,foot4pt3
);
//Animation variables
var rotationOne = Raphael.animation({transform:"R90,300,400"},150,'ease-in',rotationTwoFunc);
var rotationTwo = Raphael.animation({transform:"R0,300,400"},0,'ease-in',rotationOneFunc);
function rotationOneFunc() {
character.animate(rotationOne.delay(300));
}
function rotationTwoFunc() {
character.animate(rotationTwo.delay(300));
}
var overlayBackground = paper.rect(0,0,800,600).attr({fill: "#555", opacity: "0.6"});
var playIcon = paper.path(["M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z"]);
playIcon.attr({fill: "#000", stroke: "none"}).transform("t388.834,276.037 s6,6");
var playButtonOverlay = paper.set();
playButtonOverlay.push(
overlayBackground,
playIcon
);
//Hovering over the play button
playIcon.hover (
function() { //Hover in animation
playIcon.animate({fill: "#410000"});},
function() { //Hover out animation
playIcon.animate({fill: "#000"});}
);
//Start animation clicking on play button
playIcon.click (function() {
playButtonOverlay.animate({opacity: 0}, 300);
rotationOneFunc();
});
};
If you want to have transition continuously, you need to add ... in front of every transform string like the one below:
transform:"...R90,300,400"