Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to use some variables as the link in both JavaScript and HTML but it is not working for either the script src portion or the a href. Any help is greatly appreciated.
<script>
// Please change these values
var Sermon_JWPlayer = "//content.jwplatform.com/players/l9aqB9m4-7l7ZMsAW.js" // JW Player Link
var Sermon_Address = "http://content.jwplatform.com/videos/l9aqB9m4-EnqDUKfa.m4a" // Actual file url
// Should not need to modify below
var Share_Facebook = "https://www.facebook.com/sharer/sharer.php?u=" + Sermon_Address
var Share_Twitter = "https://twitter.com/home?status=" + Sermon_Address
var Share_GooglePlus = "https://plus.google.com/share?url=" + Sermon_Address
<script src="" + Sermon_JWPlayer + ""></script>
<!-- Link Generator: http://www.sharelinkgenerator.com -->
<div align="right">
<!-- Download Link -->
<img src="https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_download.png">
<!-- Facebook Share Link -->
<img src="https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_facebook.png">
<!-- Twitter Share Link -->
<img src="https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_twitter.png">
<!-- Google Plus Share Link -->
<img src="https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_googleplus.png">
</div>
</script>
UPDATE
Thanks everyone for the input. I understand that I can't simply toss JS variables into HTML, I should just use JS entirely for having images with links. Here is how I resolved this:
<script>
// Only modify these two links
var sermon_JWPlayer = '//content.jwplatform.com/players/l9aqB9m4-7l7ZMsAW.js';
var sermon_directURL = 'http://content.jwplatform.com/videos/l9aqB9m4-EnqDUKfa.m4a';
// Should not need to modify below
var icon_download = 'https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_download.png';
var icon_facebook = 'https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_facebook.png';
var icon_twitter = 'https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_twitter.png';
var icon_googleplus = 'https://dl.dropboxusercontent.com/u/53823971/temp_images/icon_googleplus.png';
var Share_Facebook = 'https://www.facebook.com/sharer/sharer.php?u=';
var Share_FacebookFull = Share_Facebook.concat(sermon_JWPlayer);
var Share_Twitter = 'https://twitter.com/home?status=';
var Share_TwitterFull = Share_Twitter.concat(sermon_JWPlayer);
var Share_GooglePlus = 'https://plus.google.com/share?url=';
var Share_GooglePlusFull = Share_GooglePlus.concat(sermon_JWPlayer);
var img = new Image();
img.src = "" + icon_download + "";
img.onclick = function()
{window.location.href = sermon_directURL;};
document.body.appendChild(img);
var img = new Image();
img.src = "" + icon_facebook + "";
img.onclick = function()
{window.location.href = Share_FacebookFull;};
document.body.appendChild(img);
var img = new Image();
img.src = "" + icon_twitter + "";
img.onclick = function()
{window.location.href = Share_TwitterFull;};
document.body.appendChild(img);
var img = new Image();
img.src = "" + icon_googleplus + "";
img.onclick = function()
{window.location.href = Share_GooglePlusFull;};
document.body.appendChild(img);
</script>
Use document.getElementById('myLink').href = Sermon_Address inside your javascript code and give an id to your <a> element by using id attribute.
<a id='myLink'>
Related
I am trying to create an image link based on the location of the server it is hosted on. If the server is server1. I want the image to be linked to http://server1/dod" I'm trying to get two images with this shot. However, nothing is loading. I am missing a piece and I don't know where. I'm also hosting this on an IIS server.
<!DOCTYPE html>
<html>
<body>
<div>
<p id="Images"></p>
</div>
<script>
var local = location.hostname;
//SP Edit, save a reference to the images node
var Images = document.getElementById("Images");
var dodlink = document.createElement(a);
dodlink.href = "http://" + local + "/DoD/";
var dodimg = document.createElement("img");
//SP Edit dodimg.src ="DOD.png";
//SP Edit dodimg.width = 256;
//SP Edit dodimg.height = 256;
dodimg.setAttribute("src", "DOD.png");
dodimg.setAttribute("width", "256px");
dodimg.setAttribute("height", "256px");
dodlink.appendChild(dodimg);
//SP Edit document.getElementByID("Images").innerHTML = dodimg;
Images.appendChild(dodimg);
var derlink = document.createElement(a);
//SP Edit derlink.href = "http://" + local + "/DER/";
deflink.setAttribute("href", "http://" + local + "/DER/");
var derimg = document.createElement("img");
//SP Edit derimg.src ="DER.png";
//SP Edit derimg.width = 256;
//SP Edit derimg.height = 256;
derimg.setAttribute("src", "DER.png");
derimg.setAttribute("width", "256px");
derimg.setAttribute("height", "256px");
deflink.appendChild(derimg);
//
Images.appendChild(deflink);
Try this:
var local = location.hostname;
var dodlink = document.createElement('a');
dodlink.href = "http://" + local + "/DoD/";
var dodimg = document.createElement("img");
dodimg.setAttribute("src", "DOD.png");
dodimg.setAttribute("width", "256");
dodimg.setAttribute("height", "256");
dodlink.appendChild(dodimg);
document.getElementById("Images").appendChild(dodlink);
var derlink = document.createElement('a');
derlink.href = "http://" + local + "/DER/";
var derimg = document.createElement("img");
derimg.setAttribute("src", "DER.png");
derimg.setAttribute("width", "256");
derimg.setAttribute("height", "256");
derlink.appendChild(derimg);
document.getElementById("Images").appendChild(derlink);
The image sizes are wrong. You need to specify the type eg
derimg.width = "256px";
instead of
derimg.width = 256;
also you are changing the
"innerHtml", which is wrong. You need to change the src of an IMG tag and then append it to the "innerHtml".
Also what value is 'a'? Since you've included a whole page I can't see 'a' defined.
What is the best way to change images based on the last 3 characters on the URL?
I have 3 pictures but when click - needs to stay as the selected image,
but the page refreshes and goes back to original image
<script type="text/javascript">
function image_swap() {
var URLChar = $(location).attr('href').charAt($(location).attr('href').length - 3)
if (URLChar("NSW"); image.src = "../MCFILES/NSW1.jpg"
if (URLChar("VIC"); image.src = "../MCFILES/VIC1.jpg"
if (URLChar("QLD"); image.src = "../MCFILES/QLD1.jpg"
} else {
image.src = "../MCFILES/NSW1.jpg"
}
}
function newDocNSW() {
var CurrentURL = window.location.href;
var OriginalURL = CurrentURL.replace(/\&.*/, '');
window.location.assign(OriginalURL + "&St=NSW");
}
function newDocQLD() {
var CurrentURL = window.location.href;
var OriginalURL = CurrentURL.replace(/\&.*/, '');
window.location.assign(OriginalURL + "&St=QLD");
}
function newDocVIC() {
var CurrentURL = window.location.href;
var OriginalURL = CurrentURL.replace(/\&.*/, '');
window.location.assign(OriginalURL + "&St=VIC");
}
</script>
<body>
This is the images i need to change when on hover and when click
runs another script to change URL.
When the page refreshes i need the option to have change picture
when page refreshes to change the URL
<img id="image_swap" src="../MCFILES/NSWO.jpg"
onclick="newDocNSW()"
onmouseover="this.src='../MCFILES/NSW1.jpg';"
onmouseout="this.src='../MCFILES/NSWO.jpg';">
<img id="image_swap" src="../MCFILES/QLDO.jpg"
onclick="newDocQLD()"
onmouseover="this.src='../MCFILES/QLD1.jpg';"
onmouseout="this.src='../MCFILES/QLDO.jpg';">
<img id="image_swap" src="../MCFILES/VICO.jpg"
onclick="newDocVIC()"
onmouseover="this.src='../MCFILES/VIC1.jpg';"
onmouseout="this.src='../MCFILES/VICO.jpg';">
</body>
</html>
This line will only extract a single character
var URLChar = $(location).attr('href').charAt($(location).attr('href').length - 3 )
If you want the last three characters then use this:
var URLChar = $(location).attr('href').substring($(location).attr('href').length - 3, $(location).attr('href').length);
A much simpler plain/vanilla JavaScript approach would be:
var URLChar = location.href.substring(location.href.length - 3, location.href.length);
Your if conditions are also syntactically incorrect. Here's how it should be:
if (URLChar === "NSW"){
image.src = "../MCFILES/NSW1.jpg";
} else if (URLChar === "VIC"){
image.src = "../MCFILES/VIC1.jpg";
} else if (URLChar === "QLD"){
image.src = "../MCFILES/QLD1.jpg";
} else {
image.src = "../MCFILES/NSW1.jpg";
}
I think this should do if I'm understanding the problem correctly.
I am trying to create a web-app which allows the user to upload an image from their pc, and from that, it will create an object, and add it into an array (to have record of it and its properties) and also display it on screen.
I have created a codepen: https://codepen.io/eve_mf/pen/XebVWv
html:
<form id="form" action="" method="post" enctype="multipart/form-data">
<div class="file-uploader-wrapper">
<input id="file-uploader" class="file-uploader-input" type='file' onchange="retrieveImageFromUpload(this);"/>
<button class="file-uploader-btn" type="button">Select an image</button>
</div>
</form>
<div id="map-view"></div>
js:
let allImages = [];
let displayImages = document.getElementById("map-view");
let imagesCounter = 0;
$(".file-uploader-btn").click(function() {
$("#file-uploader").click();
});
function retrieveImageFromUpload() {
let imgReader = new FileReader();
imgReader.readAsDataURL(document.getElementById("file-uploader").files[0]);
imgReader.onload = function (imgReaderEvent) {
let imageUploadedName = imgReaderEvent.target.result;
return readUploadedImage(imageUploadedName);
};
}
//create HTML image from the uploaded img
function readUploadedImage(imageUploadedName) {
imagesCounter++;
let img = document.createElement('img');
img = {
"id": 'screen-' + imagesCounter,
"src": imageUploadedName,
"alt": 'Default-alt'
};
allImages.push(img);
console.log(allImages);
var imgHTML = img.cloneNode(true);
imgHTML = "<img id='"+ img.id + "' src='" + img.src + "' alt ='" + img.alt + "' />";
displayImages.appendChild(imgHTML);
console.log("-------------");
}
My problem begins after creating the image element; I think I am getting confused but I can not really understand where or why.
I create an image with "let img = document.createElement('img');"
Then, I set its properties as object, and I think it is here where I get messed up. Then, I put this object into my array (called allImages), so, this is what I want so far.
But then, a part from adding this object into my array, I want to display it as an HTML image, I am trying this with "appendChild", But definitely is something really wrong because I get the error that I am not operating with a node element.
Can someone give me a push to the right path?
Thank you
Here I corrected your codepen.
You have to create a DOM element in order to add it to the page:
var imgHTML = document.createElement("IMG");
imgHTML.setAttribute("id", img.id);
imgHTML.setAttribute("src", img.src);
Tested and working.
You're redifining img as a regular object literal, loosing the image in the process.
You have to set the properties one by one
let img = document.createElement('img');
img.id = 'screen-' + imagesCounter;
img.src = imageUploadedName;
img.alt = 'Default-alt;
What you're doing is pretty much the same as
let x = 'image';
x = {id : 4};
console.log(x); // no suprise, it's just {id : 4} and the string was lost
It was a node element:
let img = document.createElement('img');
But then you got rid of the node element and replaced it with a custom object:
img = {
//...
};
This completely removed the node element, now all img has is your custom object with those three properties. Instead of creating a new object, just set the properties directly:
let img = document.createElement('img');
img.id = 'screen-' + imagesCounter;
img.src = imageUploadedName;
img.alt = 'Default-alt';
http://jsfiddle.net/738wtmhs/1/
using above example in fiddle in my own project: for the purpose of this exercise I am using DOM methods to create and append the elements.
function GetFeatureProperties(feature) {
//add header to 1st FirstTabContent
var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var FirstTabContent = document.createElement('div');
FirstTabContent.id = "tabs-1";
FirstTabContent.innerHTML = featureHeader;
//Second Tab
var SecondTabContent = document.createElement('div');
SecondTabContent.id = "tabs-2";
var newImage = document.createElement("img");
newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
newImage.width = "100";
newImage.height = "100";
SecondTabContent.appendChild(newImage);
//add li and ul
var DivHolding2Tabs = document.createElement('div');
DivHolding2Tabs.class = "shoptab";
var header2 = document.createElement('h2');
header2.innerHTML = "Feature";
DivHolding2Tabs.appendChild(header2);
var _ul = document.createElement('ul');
var _anchor1 = document.createElement("a");
_anchor1.href = "#tabs-1";
_anchor1.innerHTML = "Info";
var _li1 = document.createElement('li');
_li1.appendChild(_anchor1);
var _anchor2 = document.createElement("a");
_anchor2.href = "#tabs-2";
_anchor2.innerHTML = "Images";
var _li2 = document.createElement('li');
_li2.appendChild(_anchor2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
DivHolding2Tabs.appendChild(_ul);
DivHolding2Tabs.appendChild(FirstTabContent);
DivHolding2Tabs.appendChild(SecondTabContent);
var jelm = $(DivHolding2Tabs); //convert to jQuery Element
var htmlElm = jelm[0]; //convert to HTML Element
var OuterDiv = document.createElement('div');
OuterDiv.id = "loc-list";
OuterDiv.appendChild(htmlElm);
return OuterDiv.innerHTML;
}
and this looks like the image seen below....if I click on the link 'image' the page jumps a bit but nothing happens and nothing happens when I press 'info' also I have included the CSS in my project so why arnt the tabs showing and yes I am using jquery ui 1.10.3.custom.js
---------------------------------------------------------------------------------------------
UPDATE
<ul id="list"><li><div><h2>Feature</h2><ul><li>Info</li><li>Images</li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>
Also changed from jquery 1.10.3 custom to jquery 1.11.2.custom with all the downloaded tabs selected
If you look at this fiddle, I managed to make it work.
Here's the possible problems
1) I changed return OuterDiv.innerHTML because I needed the <div id="loc-list"> to be part of the code to initialize it. You gave it an id so my guess is you wanted it to be included but by doing innerHTML, you didn't get it.
2) Once your function returns, you need to initialize the tabs with $('#loc-list').tabs();
I'm trying to replace the urls in the html using javascript but it is not working although when I test it by I "alerting" them the values pop up correctly, but when I publish it and click on the images the new urls are not applied. Any help would be greatly appreciated
Could you please look at the code and tell me what is going on?:
<script>
var rutaBase = "assets/fotos/";
function cambieFotos(cualFoto) {
var listaFotos = ["360.jpg", "foto3.jpg", "mathura.jpg"];
var numFotosLista = listaFotos.length;
var foto1 = document.getElementById("foto1");
var foto2 = document.getElementById("foto2");
var foto3 = document.getElementById("foto3");
for (i = 0; i < 3; i++) {
var fotoAleatoria = listaFotos[Math.floor(Math.random() * numFotosLista)];
var fotoRoll = document.getElementById("foto" + (i + 1));
fotoRoll.src = "assets/fotos/" + fotoAleatoria;
fotoRoll.href = "assets/fotos/" + fotoAleatoria; //this code is not working.
var sacarFotoLista = listaFotos.indexOf(fotoAleatoria);
listaFotos.splice(sacarFotoLista, 1);
numFotosLista = listaFotos.length;
}
}
</script>
<div id="contenedor">
<img id="foto1" onMouseOver="cambieFotos(this)" src="assets/fotos/360.jpg"> <--!this needs to update-->
<img id="foto2" onMouseOver="cambieFotos(this)" src="assets/fotos/foto3.JPG"><--!this needs to update-->
<img id="foto3" onMouseOver="cambieFotos(this)" src="assets/fotos/mathura.jpg"><--!this needs to update-->
</div>
<!--contenedor-->
fotoRoll is an <img>, not the surrounding <a>. You should modify the parent instead:
fotoRoll.parentNode.href="assets/fotos/"+fotoAleatoria;
You're setting the href on the image element, not the hyperlink element. Try something like
fotoRoll.parentNode.href="assets/fotos/"+fotoAleatoria;