Apologies if I have created new thread for this, but I didn't get a solution elsewhere.
I am newbie to web designing and I was playing around with the <iframe> tag.
I used javascript to display a graphical chart from Google Sheets. Every time I click on the link which opens the chart (connected by iframe), the chart gets displayed once again below the previous chart and my HTML page gets elongated. I don't want that to happen. Instead, I would like to replace the old chart with the new chart in the same margins of previous generated charts.
<script>
function myFunction() {
var x = document.createElement("IFRAME");
x.setAttribute("src", "#Link_to_Google_sheet_chart");
x.height = "400";
x.width = "545";
x.style.margin = "100px 20px 200px 450px";
document.body.appendChild(x);
}
</script>
First of all, you're not supposed to have a link prefixed with #. Use https://link.com
Have you tried this?
x.src = "https://link.com";
If that doesn't work, maybe try this:
function myFunction() {
var x = document.createElement("IFRAME");
x.setAttribute("src", "https://link.com");
x.height = "400";
x.width = "545";
x.style.margin = "100px 20px 200px 450px";
x.id = "iframe-0";
document.body.appendChild(x);
}
function switch() {
document.getElementById('iframe-0').style.display = "none";
// create new iframe here, then append it
var y = document.createElement("IFRAME");
y.setAttribute("src", "https://link.com");
y.height = "400";
y.width = "545";
y.style.margin = "100px 20px 200px 450px";
y.id = "iframe-1";
document.body.appendChild(y);
}
You can assign a id to the iframe and replace it next time as below
function myFunction() {
var x = document.getElementById('unique-id');
if(typeof(x) !== 'undefined'){ //if iframe is appended only change src
return x.setAttribute("src", "#Link_to_Google_sheet_chart");
}
x = document.createElement("IFRAME");
x.id = 'unique-id';
x.setAttribute("src", "#Link_to_Google_sheet_chart");
x.height = "400";
x.width = "545";
x.style.margin = "100px 20px 200px 450px";
return document.body.appendChild(x);
}
Related
var url_array = ["ulr1", "ulr2", "ulr3", "ulr4", "ulr5"];
var img = document.createElement('img');
for (i = 0; i < url_array.length; i++){
var div = document.createElement('div');
div.setAttribute("id", "div"+i);
document.getElementById('main').appendChild(div);
document.getElementById('div'+i).style.width = ImageWidth+5+"px";
document.getElementById('div'+i).style.height = ImageHeight+5+"px";
console.log("\ncreate all the DIVs. \nFor loop count: "+i);
img.src = loadImage(url_array[i], ImageWidth, ImageHeight);
try{throw img}
catch(c_img) {
document.getElementById('div'+i).appendChild(c_img);
console.log("after load, and append, in Catch: "+img.src);
console.log("div NR = "+document.getElementById('div'+i).id);
console.log(document.getElementById('div'+i).childNodes.length);
} //catch
} // FOR
function loadImage(URL, h, w)
{
console.log("loadImage callaed with URL = "+URL);
return url = URL+Date.now().toString(10);
}
For-Loop is supposed to retrieve urls address of an images (from camera) and append them to DIV. DIV and IMGs are created on the fly. Problem is that only last DIV become image holder.
I am using catch-try to force execute code immediately so each separate Div+i will have distinctive image. Also construction like this one (immediately invoked function expression):
(function(){
something here;
})();
for creating "private" scope gives no hope. Either "Let" - which supposed to define variable locally is not helping. *My knowledge here is limited and I'm relying on data found on web site (can give link later if it is not against rules).
Output of console.log() is not helping much.
Everything goes as it should, except for the childNodes.length which is 1 for each for-loop iteration - that means each DIV have its IMG child I guess... If so - why I can't see them?
I feel I am close to what I want to achieve - using Intervals() refresh each DIV with new camera snapshot, but I need to solve this current issue.
Example of code ready to use:
js.js:
var url_array = [
"https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg",
"https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg",
"https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg"
];
var ImageWidth = 640;
var ImageHeight = 480;
var img = document.createElement('img');
for (i = 0; i < url_array.length; i++){
var div = document.createElement('div');//.setAttribute("id", "div0");
div.setAttribute("id", "div"+i);
document.getElementById('main').appendChild(div);
document.getElementById('div'+i).style.width = ImageWidth+5+"px";
document.getElementById('div'+i).style.height = ImageHeight+5+"px";
var color = ((Math.floor(Math.random() * (16777215)) + 1).toString(16)); // from 1 to (256^3) -> converted to HEX
document.getElementById('div'+i).style.background = "#"+color;
document.getElementById('div'+i).style.width = ImageWidth+5+"px";
document.getElementById('div'+i).style.height = ImageHeight+5+"px";
console.log("\ncreate all the DIVs. \nFor loop count: "+i);
img.src = loadImage(url_array[i], ImageWidth, ImageHeight);
try{throw img}
catch(c_img) {
document.getElementById('div'+i).appendChild(c_img);
console.log("after load, and append, in Catch: "+img.src);
console.log("div NR = "+document.getElementById('div'+i).id);
console.log(document.getElementById('div'+i).childNodes.length);
} // catch
} // FOR
function loadImage(URL, h, w)
{
console.log("loadImage callaed with URL = "+URL);
return url = URL+"?auto=compress&h="+h+"&w="+w;
}
HTML:
<html>
<head>
<meta charset="utf-8">
<STYLE>
div#main {
padding: 5px;
background: black;
}
</STYLE>
</head>
<body>
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<div id="main"></div>
</body>
</html>
The problem is that your
var img = document.createElement('img');
is outside the loop - you're only ever creating one img. When appendChild is called on an element that already exists in the DOM (such as on the second, third, fourth, etc iteration), the element gets removed from its previous location and inserted into the new location.
Create the image inside the loop instead, and try not to implicitly create global variables - when declaring new variables, always use let or const.
Also, when you do
var div = document.createElement('div');
you have a reference to the div you just created - there's no need to assign an id to it in order to select it with
document.getElementById('div'+i)
in below lines in the same scope. Instead, just keep referencing the div:
const ImageWidth = 200;
const ImageHeight = 200;
const main = document.getElementById('main');
var url_array = ["ulr1", "ulr2", "ulr3", "ulr4", "ulr5"];
for (let i = 0; i < url_array.length; i++){
const img = document.createElement('img');
const div = document.createElement('div');
main.appendChild(div);
div.style.width = ImageWidth+5+"px";
div.style.height = ImageHeight+5+"px";
img.src = loadImage(url_array[i], ImageWidth, ImageHeight);
div.appendChild(img);
}
console.log(main.innerHTML);
function loadImage(URL, h, w) {
return URL+Date.now().toString(10);
}
div#main {
padding: 5px;
background: black;
}
<div id="main">
</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 have a google map and
I´m using a hacky solution for infowindows not to show up under a div that overlays the google map if a special user-interaction is done.
i execute this code after user-interaction :
var controlDiv = document.createElement('div');
controlDiv.style.width = '220px';
controlDiv.style.height = '500px';
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlDiv);
that works wonderfully, but if the user closes the overlay i want to remove the element i pushed into the array.
i tryed to splice it out, but i have no idea how to select it, or what it´s index is.
map.controls[google.maps.ControlPosition.RIGHT_TOP].splice("?", 1);
other possibility may be
delete map.controls[google.maps.ControlPosition.RIGHT_TOP]
but i just dont get the element removed
plesea help
thanks in advance
map.controls[google.maps.ControlPosition.RIGHT_TOP] isn't a native array, it's a google.maps.MVCArray
When you add only this single custom control to the array you may simply call:
map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
When there are more custom controls iterate over the controls to find the index of controlDiv and call
map.controls[google.maps.ControlPosition.RIGHT_TOP].removeAt(index);
Another approach: instead of adding/removing the control add the control once and toggle the display of controlDiv.
I found that the setAt() and removeAt() methods do not work well for map controls. Google only uses push() and clear() methods in their code samples.
Also, the display property may result in controls on top of each other after hiding and re-showing them. I found that the visibility property works best. Below a custom control constructor with google map style and a method to show/hide the control.
function CustomControl(options) { // constructor
"use strict";
this.div = document.createElement('div');
this.div.style.visibility = "visible";
var controlUI = document.createElement('div'); // Set CSS for the control border
controlUI.style.backgroundColor = '#fff';
controlUI.style.backgroundClip = 'padding-box';
controlUI.style.border = '1px solid rgba(0, 0, 0, 0.15)';
controlUI.style.borderRadius = '2px';
controlUI.style.boxShadow = 'rgba(0,0,0,.3) 0px 1px 4px -1px';
controlUI.style.cursor = 'pointer';
controlUI.style.margin = '5px 5px 15px';
controlUI.style.minWidth = '120px';
controlUI.style.textAlign = 'left';
controlUI.style.position = 'relative';
if (options.title) {
controlUI.title = options.title;
}
if (options.visibility) { // "visible" or "hidden"
controlUI.style.visibility = options.visibility;
}
this.div.appendChild(controlUI);
var controlText = document.createElement('div'); //Set CSS for the control interior
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '11px';
controlText.style.fontWeight = '500';
controlText.style.padding = '1px 6px';
if (options.text) {
controlText.innerHTML = options.text;
}
controlUI.appendChild(controlText);
if (options.index) {
this.div.index = options.index;
}
if (options.handler) {
google.maps.event.addDomListener(controlUI, 'click', options.handler);
}
if (options.position) {
this.position = options.position;
}
if (options.sequence) {
this.sequence = options.sequence;
}
this.setVisible = function(bolean) { // method
var visibility;
if (bolean) { //true
visibility = "visible";
} else {
visibility = "hidden";
}
controlUI.style.visibility = visibility;
}
}
i'm having a bit of a problem here. I found this script on the web, and changed it around a bit for my needs.
This script shows a preview of the image following the mouse onmouseover.
Originally, there was only one way of doing this. But i have 2 different sections on my website in which i want to display images with different attributes (height, width).
I was able to do that, the problem is that on the second section, the src (file name) is a thumbnail of the actual picture i want to display, so when it dows, it just blows up a very small picture, which looks very bad. But hopefully, this will make things easier: all the thumbnails are named whaterver_small.jpg and the originals, whatever.jpg Now, if i could remove _small or _small.jpg and replace with .jpg from the end of that file, that would display the original picture for me, which would be great. This is how the funcion is called on html:
Original size, no need changing:
<a href=http://www.whatever.net/1.html');">
<img alt="Copper" border="1" height="64" src="http://www.whatever.net/whatever_small.jpg" width="85" onmouseover="showImage1(this.src,this,'Whatever')" /></a>
Show image2, the one i'm having problems with.
<a href=http://www.whatever.net/1.html');">
<img alt="Copper" border="1" height="64" src="http://www.whatever.net/whatever_small.jpg" width="85" onmouseover="showImage2(this.src,this,'Whatever')" /></a>
This is the script
var floatWidth = 150; // set the width of the floating image
var floatHeight = 100; // set its height
var floatWidth2 = 320; // set the width of the floating image
var floatHeight2 = 240; // set its height
var midWindow = 0;
var nContainer = "";
var IE = false;
if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}
function stayHome(m){
if (IE)
{
var currX = event.clientX;
var currY = event.clientY;
}
else {
var currX = m.pageX;
var currY = m.pageY;
}
if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
var iL = document.documentElement.scrollLeft;
var iV = document.documentElement.scrollTop;
}
else {
var iL = document.body.scrollLeft;
var iV = document.body.scrollTop;
}
if (currX > midWindow+80)
{
var msgWidth = nContainer.clientWidth;
if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'}
else {nContainer.style.left = (currX-msgWidth-10)+'px'}
}
else {
if (IE){nContainer.style.left = (currX+15+iL)+'px'}
else {nContainer.style.left = (currX+15)+'px'}
}
if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)+70)+'px'}
else {nContainer.style.top = (currY-(floatHeight/2)+70)+'px'}
}
function hideImage(){
while (nContainer.lastChild)
{nContainer.removeChild(nContainer.lastChild)}
document.getElementById('isFloat').style.display = 'none';
}
function showImage(isImg,currItem,currCaption){
document.getElementById('isFloat').style.display = 'inline';
nIMG = document.createElement('img');
nContainer.appendChild(nIMG);
nIMG.setAttribute('src',isImg);
nIMG.setAttribute('width',floatWidth);
nIMG.setAttribute('height',floatHeight);
nCaption = document.createElement('div');
nCaption.style.textAlign = "center";
nCaption.style.backgroundColor = '#EAE3C6';
nCaption.style.padding = '5px';
nCaption.style.color = '#000000';
nCaption.style.fontFamily = 'Sans-serif';
nCaption.style.fontSize = '10pt';
nCaption.style.borderTop = "1px solid black";
nContainer.appendChild(nCaption);
nCaption.innerHTML = currCaption;
currItem.onmouseout=hideImage;
}
function showImage2(isImg,currItem,currCaption){
document.getElementById('isFloat').style.display = 'inline';
nIMG = document.createElement('img');
nContainer.appendChild(nIMG);
nIMG.setAttribute('src',isImg);
nIMG.setAttribute('width',floatWidth2);
nIMG.setAttribute('height',floatHeight2);
nCaption = document.createElement('div');
nCaption.style.textAlign = "center";
nCaption.style.backgroundColor = '#EAE3C6';
nCaption.style.padding = '5px';
nCaption.style.color = '#000000';
nCaption.style.fontFamily = 'Sans-serif';
nCaption.style.fontSize = '10pt';
nCaption.style.borderTop = "1px solid black";
nContainer.appendChild(nCaption);
nCaption.innerHTML = currCaption;
currItem.onmouseout=hideImage;
}
function getMidWindow(){
if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
midWindow = document.documentElement.clientWidth/2;
}
else {
midWindow = document.body.clientWidth/2;
}
}
function initFloatImg(){
var nBody = document.getElementsByTagName('body')[0];
var nDiv = document.createElement('div');
nDiv.id = "isFloat";
nDiv.style.position = "absolute";
nDiv.style.top = "0px";
nDiv.style.left = "0px";
nDiv.style.border = "1px solid black";
nDiv.style.padding = "5px";
nDiv.style.backgroundColor = "#ffffff"
nBody.appendChild(nDiv);
nContainer = document.getElementById('isFloat');
document.onmousemove = stayHome;
hideImage();
if (!IE){document.captureEvents(Event.mousemove)}
getMidWindow();
}
onload=initFloatImg;
onresize=getMidWindow;
Update:
Ok, so i updated the script in this page, and it works perfectly now.
I ran into another problem, when the picture that has the mouse over, is near the end of the page, the preview is cutoff. I'd like to be able to move the preview up, so there's no scroll bar.
Here's a live example of a functional one: http://www.soccer.com/Navigation.process?Ne=178&N=4294960224+346
Where the picture is never cutoff.
Replace following line in the showImage2 function
nIMG.setAttribute('src',isImg);
with
nIMG.setAttribute('src',isImg.replace(/_small\./, '.'));
This will remove all _small matches from all of your image sources, if I'm understanding what you want correctly:
$("img").each(function() {
$(this).attr("src", $(this).attr("src").replace("/_small(?=\.)/", ""));
});