I want to get current window location using JavaScript and use it in the following code:
<img src="http://shook.eu.org/qrc.php?text=CURRENT_WINDOW_URL" />
If you are building the html from a string:
var img = '<img src="http://shook.eu.org/qrc.php?text=' + encodeURI(window.location.href) + '" />';
document.body.innerHTML = img;
Edit: You should encodeURI the string you want to pass.
var url = window.location.href;
var img = '<img src="http://shook.eu.org/qrc.php?text='+url+'" />';
$('#img').html(img);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img"></div>
Related
I am trying to execute the following code:
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id + '" height="600px" width="100%" />';
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + link ;
}
</script>
</div>
But while executing, the & in src="" converts to & which breaks the original URL and doesn't go to the desired destination. I looked up on the internet but as I am a noob, I was not able to figure it out. Please help me to make this work!
All you need to do is
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id +
'" height="600px" width="100%" />';
var new_link = link.replaceAll('&','&');
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + new_link;
}
</script>
This is definitely a blogger issue, and the reason behind happening is :
The character "&" is an ISO HTML reserved character used to denote the start of a parameter.
To overcome this the Blogger editor translate the & you enter to the HTML entity, & , that will display & when the page or URL is rendered in a browser, so that you don't have to do it yourself.
I've an image tag with a parent div which contains image_wrap class. Now I want to download this image using javascript. I've got some solution to download this image, but this code is not working for me. Can anyone help me please?
Here is my code:
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download></a>',
downloadable_tag = img_wrap.append(anchor);
downloadable_tag.click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrap">
<img height="100px" width="200px" src="https://s3.envato.com/files/248564292/01_eduma.__large_preview.__large_preview.jpg" />
</div>
You have a few problems there in your code.
First, you are appending the wrong element to img_wrap element. You should be appending the anchor element instead of the downloadable_tag.
Then, .click() should be used on dom objects, not on Jquery objects. So I think you should fix that line too.
Finally, the download attribute will show the download window only for files which are in the same domain. It doesn't work for cross origin requests for security purposes.
So with all the mentioned fixes, this is how your code should be:
<div class="image_wrap">
<img height="100px" width="200px" src="01_eduma.__large_preview.__large_preview.jpg" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = $('<a href="' + src + '" download>hello</a>'),
downloadable_tag = img_wrap.append(anchor);
anchor[0].click()
Notice that I have used a local path for the image. Here's a plunker demo.
http://plnkr.co/edit/eK1yJTYPUzF5p4DVTRem?p=preview
Hope it helps :) Feel free to ask if you have any doubts!
Try following script:
http://jsfiddle.net/h4JXs/8928/
$(document).ready(function () {
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download>hello</a>',
downloadable_tag = img_wrap.append(anchor);
downloadable_tag.trigger('click')
});
It seems you want to download the image rather than navigating it. The attribute download works only for same origin URLs. Check documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
You have assigned the same variable in the append statement
downloadable_tag = img_wrap.append(downloadable_tag);
Change it with the below one.
downloadable_tag = img_wrap.append(anchor);
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download>hello</a>',
downloadable_tag = img_wrap.append(anchor);
downloadable_tag.click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrap">
<img height="100px" width="200px" src="https://s3.envato.com/files/248564292/01_eduma.__large_preview.__large_preview.jpg" />
</div>
I am trying to do image light box using JavaScript. Here is my html code
<div id="lightbox2">
</div>
<div id="lightbox">
<button onclick="lgBox('www.w3schools.com/howto/img_fjords_wide.jpg')"><img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt=""></button>
</div>
I am sending current clicked link as a parameter in lgBox function.
Here is my Js function.
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
It shows the url in alert box properly that I passed.
But why this link is not working here "<img src='u' />";
Thanks in advance.
The method what you are using is wrong as it places the string u as it is in the src tag. You want to replace this u with the actual value of that variable. See below:
function lgBox(url){
var u = url;
alert(u);
//this is wrong and will throw an error in console (404)
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
Instead of the above you should do something like this
function lgBox(url){
var u = url;
alert(u);
//ES6 template literals or if this is not supported then you can use
//concatenation also.
document.getElementById("lightbox2").innerHTML=`<img src=${u} />`;
document.getElementById("lightbox").style.display="none";
}
You need to concat the var u to the string with + like this:
'<img src="' + u + '" />'
In your code:
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML='<img src="' + u + '" />';
document.getElementById("lightbox").style.display="none";
}
You simply passe the u string in the html tag, you have to actually concatenate the url like this :
document.getElementById("lightbox2").innerHTML = '<img src="' + u + '" />';
I am trying to do something that I thought I've done 100 times already... I'm getting and making a new image after an ajax call and am trying to insert it into an appropriate, pre-existing div
The HTML looks like this
<div class="preload">
<div class="createYourOwn">...</div>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
</div?
The AJAX call does this:
$.post("script.php", {phone:phone}, function(data){
if(data){
var newImage = "<img src='https://api.twilio.com" + data + "/>";
$(newImage).insertAfter('.createYourOwn');
}
});
I've tried this as well:
$("<img src='https://api.twilio.com" + data + "/>").insertAfter('.createYourOwn');
And this:
$(newImage).append('.preload');
even though that doesn't have the desired outcome.
I'd like to insert the image that I receive with the data just after the .createYourOwn div inside of .preload.
Not sure what's going on. But nothing is happening, no errors, not even an image with a borked src. Nothing at all happens.
Anyone have any ideas?
Thank you!
Concatenate string properly:
Replace this:
var newImage = "<img src='https://api.twilio.com" + data + "/>";
// you're missing to close quote for src here ^^
With this:
var newImage = "<img src='https://api.twilio.com" + data + "' />";
Or switch the quotes:
var newImage = '<img src="https://api.twilio.com' + data + '" />';
I want a simple way to display a picture in html within a google maps infobox from a variable in javascipt. Currently the infobox displays the image link:
var address = xmldata.getElementsByTagName('postalCode')[0].firstChild.data;
var picture = xmldata.getElementsByTagName('viewItemURL')[0].firstChild.data;
var info_text = picture + '<br />' + address;
I have tried
var info_text = address + '';
try this:
var info_text = address + '<img src="'+picture+'" alt="some alt text" />';