So i'm trying to use a script to time downloads on my site and i've been having trouble changing what it does when the timer is at 0. This is the code:
else{
//After the counter download the file and end the timer
document.getElementById("time").innerText = "Now";
download();
return;
}
Now instead of it saying "Now" and auto downloading with "download();" how do i make it show a hyperlink instead of the "Now"?
All help is much appreciated. Thanks in advance!
-Matt.
Not quite sure what you are asking, but here goes...
var link = "http://link_to_download";
document.getElementById("time").innerHTML = "Now;
You can create a new a element, and set its onclick event to your download function:
var link = document.createElement("a");
link.onclick = download;
link.innerHTML = "Download";
link.href = "#";
var img = document.createElement("img");
img.src = "images/site_logo.gif";
img.height = 54;
img.onmouseover = function() { this.src = 'images/logo.png'; };
img.onmouseout = function() { this.src = 'images/site_logo.gif'; };
link.appendChild(img);
document.getElementById("time").appendChild(link);
Demo: http://jsfiddle.net/D5qr7/2/
With image: http://jsfiddle.net/D5qr7/4/
Related
Have this issue here: I want to upload several images at once and show them directly afterwards in the browser. Everything is fine. However, doing this on mobile, sometimes I don't get all the images, but duplicates of another one from the file array. I have a suspicion, that this has to do with hardware limitations, since on PC everything works fine, but not on mobile.
Here is the fiddle. You can check it via mobile to see if duplicates appear.
So in result I get this on mobile. It wasn't two images in the selection, only one:
Here I have the Javascript snippet. Is there any room for improvement? Espacially onload processes are really confusing me from time to time. Is there any chance to write it better?
Javascript:
jQuery('.upload-mobile').change(function(){
jQuery('body').toggleClass( "loading" );
var imagecounter = jQuery(this)[0].files.length;
var loadcounter = 0;
for(var i = 0; i<imagecounter;i++){
for(var p = 1;p<=12;p++){
if(jQuery('#preview'+p).length<=0){
jQuery('.image-collection').prepend(jQuery('<div></div>',{id:'preview'+p,css:{'display':'inline-block'}}));
break;
};
}
var file = this.files[i];
var reader = new FileReader();
reader.onload = function(e){
for(var w = 1;w<=12;w++){
if(jQuery('#preview'+w).children().length>0) {
}
else{
var img = document.createElement("img");
img.src = e.target.result;
img.id = 'img'+w;
img.className += " img-responsive";
img.className += " border-blue";
img.className += " image-small";
img.className += " image-cover";
img.style.display='none';
document.getElementById("preview"+w).appendChild(img);
break;
}
}
loadcounter++;
if(loadcounter==imagecounter){
var count = jQuery('.image-collection').children().length;
jQuery('.image-small').delay('1500').fadeIn('3000', function(){
jQuery('#image-counter').text(count+'/12');
jQuery('body').removeClass( "loading" );
if( jQuery('#image-counter').text()=='12/12'){
jQuery('#upload-photos').fadeOut('200', function(){
jQuery('#three-cube-compact').fadeIn('200');
})
}
});
}
};
var image = reader.readAsDataURL(file);
}
});
EDIT:
I tried to use the forEach function. I didn't use the for each loops earlier, so I can not say much about the difference between foreach and for. I can't say if it works better or not, but I have seen less duplicates (maybe I didn't check to often to asume good functionality of it). It almost works, but maybe there is another way to make it work flawlessly?
Javascript:
jQuery('.upload-mobile').change(function(){
jQuery('body').toggleClass( "loading" );
var imagecounter = jQuery(this)[0].files.length;
var loadcounter = 0;
Array.from(this.files).forEach(function (image, index){
for(var p = 1;p<=12;p++){
if(jQuery('#preview'+p).length<=0){
jQuery('.image-collection').prepend(jQuery('<div></div>',{id:'preview'+p,css:{'display':'inline-block'}}));
break;
};
};
var reader = new FileReader();
reader.onload = function(e){
for(var w = 1;w<=12;w++){
if(jQuery('#preview'+w).children().length>0) {
}
else{
var img = document.createElement("img");
img.src = e.target.result;
img.id = 'img'+w;
img.className += " img-responsive";
img.className += " border-blue";
img.className += " image-small";
img.className += " image-cover";
img.style.display='none';
document.getElementById("preview"+w).appendChild(img);
break;
}
}
loadcounter++;
if(loadcounter==imagecounter){
var count = jQuery('.image-collection').children().length;
jQuery('.image-small').delay('1500').fadeIn('3000', function(){
jQuery('#image-counter').text(count+'/12');
jQuery('body').removeClass( "loading" );
if( jQuery('#image-counter').text()=='12/12'){
jQuery('#upload-photos').fadeOut('200', function(){
jQuery('#three-cube-compact').fadeIn('200');
})
}
});
}
};
var pic = reader.readAsDataURL(image);
});
});
EDIT2:
The fiddle was updated
EDIT3:
Added an image of the mobile screen. I also figured out it might has something to do with the file explorer on the mobile device. When I select using the first file explorer, I don't get the duplication bug:
However, by clicking on Browse ("Durchsuchen" on the image), I get to another file explorer. And using that one creates this "duplication bug":
Is there maybe a way to solve this or maybe to disable the Browse button?
Can someone help me add a link to an image that I am adding via Javascript? I know this should be something simple but I can't get it to work.
jsfiddle
<div class="toggle-panel">
Hi there!
</div>
var img = new Image();
var div = document.querySelector('.toggle-panel');
var link = document.createElement('a');
link.setAttribute('href', 'www.google.com');
img.onload = function() {
div.appendChild(img);
};
img.src = 'http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png';
link.appendChild(img);
You still need to add the link to the div, like this:
var img = new Image();
var div = document.querySelector('.toggle-panel');
var link = document.createElement('a');
link.setAttribute('href', 'www.google.com');
img.src = 'http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png';
link.appendChild(img);
div.appendChild(link);
No need to do it on the image's onload event.
Fiddle.
The following is my function that is called on click of a button.
The goal is to get the text value entered by the user and use it as an image source and finally display the image on the html body.
function ButtonClick() {
var link = document.createElement("a");
// create an image element.
var MyImg = document.createElement("img");
var MyImg.src = document.getElementById("textfield").value;
// append it to a list of elements.
link.appendChild(MyImg);
// append the newly added image to the html page body.
document.body.appendChild(link);
// clear textfield for next image src.
document.getElementById("textfield").value = "";
}
The error I receive is on line#7: "var MyImg.src = document.getElementById("textfield").value;"
SyntaxError: missing ; before statement example.js:19
*edited code after the fist suggestion.
MyImg.src = document.getElementById("textfield").value;
you should define variable once,
change
var MyImg = document.createElement("img");
var MyImg.src = document.getElementById("textfield").value;
to
var MyImg = document.createElement("img");
MyImg.src = document.getElementById("textfield").value;
I would like to show my own error image when an image cant load successfully.
I thought of a JavaScript function:
<script type="text/javascript">
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].onerror = onErrorImage(images[i]);
}
function onErrorImage(element){
element.onerror = null;
element.src = 'errorImage.png';
}
</script>
But this doesn't work. This turns every image on the page into my own error image.
Is there another simple way to show my own error image on error?
Or is there another way to bind a function to an event like i did on line 4? Because I'm pretty sure the script fails on that line.
Solution may be in jQuery.
It should be i guess:
images[i].onerror = function(){onErrorImage(this);}
There are a lot of ways to do this, I will show you one of them :
You can make all of your images with "fake-src" and load them when the document is ready. Of course you can make a loader till they are downloading.
Here is a function I write for you:
imagesReady = function () {
var myImgs = document.getElementsByTagName("img");
for (var i = 0; i < myImgs.length; i++) {
getImageReady(myImgs[i]);
};
function getImageReady(el) {
var url = el.getAttribute("src-fake");
var image = document.createElement("img");
image.onload = function() {
el.src = url;
el.style.opacity = 1;
//this image is ok, that why we put his src to be the fake src
};
image.onerror = function (err) {
console.log("err on load :"+image.src);
el.src = url;
//this image fail!
}
image.src = url;
}
}
imagesReady();
I'm trying to create a personalized smilies system to train my JavaScript.
To accomplish that I have an offline system to save the various user smilies (I only save the urls).
After obtaining the data I try to make them appear above the textarea I want. So far so good!
Now, the problem comes when it's time to add the events to the images.
I try to add event listeners to each image but no matter which image I press only the last image event is triggered.
This is: all images appear side by side correctly but what is inserted in the textarea is the last image that is iterated in the cycle.
Meaningful code:
/* Insert the code in the right place in the textarea*/
function putInTxtarea(text, textarea) {
// Mozilla text range replace.
if (typeof(textarea.selectionStart) != "undefined") {
var begin = textarea.value.substr(0, textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;
textarea.value = begin + text + end;
if (textarea.setSelectionRange)
{
textarea.focus();
textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
}
textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else {
textarea.value += text;
textarea.focus(textarea.value.length - 1);
}
var elem = document.createElement("div");
elem.id = "mySmilies";
elem.innerHTML = "";
for each (url in smiliesUrl){
var img = document.createElement("img");
img.src = url;
img.style.cursor = "pointer";
img.addEventListener('click',
function(){putInTxtarea('[img]'+url+'[/img]', document.getElementsByName('message')[0]);
};, false); // here is the event attaching
elem.appendChild(img);
}
Don't use for each...in. This is a construct only available in Firefox (at least it is non-standard).
You are making the typical creating-a-function-in-a-loop mistake. JavaScript has only function scope. Every function you create in the loop has references to the same variables (url in your case) and this variable will have the value of the last URL after the loop finished. You need to introduce a new scope:
function createClickHandler(url) {
var target = document.getElementsByName('message')[0];
return function() {
putInTxtarea('[img]'+url+'[/img]', target);
}
}
// assuming smiliesUrl is an array
for(var i = smiliesUrl.length;i--;) {
var url = smiliesUrl[i];
var img = document.createElement("img");
img.src = url;
img.style.cursor = "pointer";
img.addEventListener('click', createClickHandler(url), false);
elem.appendChild(img);
}
Another possible is to simply access the image from the event handler. It should available via this:
img.addEventListener('click', function(){
putInTxtarea('[img]'+this.src+'[/img]',
document.getElementsByName('message')[0]);
};, false);
This seams to be a closure issue. the variable url points to the url used in the loop, and at the time of execution it is always be the last url.
for(url in smiliesUrl){
var img = document.createElement("img");
img.src = url;
img.style.cursor = "pointer";
var func = function(jUrl){
return function(){
putInTxtarea('[img]' + jUrl + '[/img]',
document.getElementsByName('message')[0]);
};
}(url);
img.addEventListener('click', func, false);
}
For more on closures in javascript see This question