i have the following code.
<a href="http://url.com" onclick="trackOutboundLink('http://url.com'); return false;">
i simply need to dynamically insert same link as href url and onclick event.
i tried the following but the onclick event didnt work.
<script type="text/javascript">
var url= "https://www.url.com";
document.write('<a href="' + endurl2+ '" target="_top" onclick="trackOutboundLink(' + endurl2+ '); return false;">');
</script>
You have mistyped some quotes. Try:
var url= "https://www.url.com";
document.write('Test');
You can just track whenever a link is clicked and find out the URL from the JS. E.g.
$('body').on('click','a',function(e){
trackOutboundLink($(this).attr('href'));
})
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'm trying to dynamically generate an HTML link and have that link be the href attribute of my anchor tag inside my AngularJS application. I have the code below:
const objectUrl = baseUrl + s3Bucket + '/' + objectKey;
const link = '<a href=`${objectUrl}`> MyLink</a>';
I thought that using JS's string templating would work but this inserts %60$%7BobjectUrl%7D%60 at the end of URL. I've also tried
const link = '<a href={{objectUrl}}> MyLink</a>';
but that gives me the same literal string %60$%7BobjectUrl%7D%60. Is there any way to insert the variable so that the href link becomes baseUrl + s3Bucket + '/' + objectKey?
try this
const link = '<a href="'+objectUrl+'" > MyLink</a>';
You have the template string the other way around. The ` should go on the outside of your string.
const objectUrl = 'yourURL';
const link = `MyLink`;
console.log(link);
Try
<a ng-attr-href="{{objectUrl}}">My Link</a>
Use template literal like this:
const link = `MyLink`
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 have a series of elements laid out in HTML
I am trying to get the value of the href for each div with the class wsite-com-category-product-wrap and then use this to insert a new button with the same href.
My current code is inserting all the links (for items with the class .wsite-com-category-product-wrap) into themselves meaning that each element has about 10 links in now instead of just the one.
The code I have written to do this:
$(".wsite-com-category-product-wrap").each(function() {
var link = $(this).find("a").attr("href");
$("<a href=" + link + " class='custom-category-button'>Test</a>").insertAfter(".wsite-com-product-price");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wsite-com-category-product-wrap">
Link content
<div>more divs</div>
</div>
You can use a jquery object with .insertAfter, not just a string selector.
So, change this:
$("<a href=" + link + " class='custom-category-button'>Test</a>")
.insertAfter(".wsite-com-product-price");
to:
$("<a href=" + link + " class='custom-category-button'>Test</a>")
.insertAfter($(".wsite-com-product-price", this));
I found that with the insertAfter I needed to add in something ensuring it was only being added to $(this).
I used a new variable insertHere to make it simpler:
$(".wsite-com-category-product-wrap").each(function() {
var link = $( this ).find("a").attr("href");
var insertHere = $(this).find(".wsite-com-product-price");
$( "<a href=" + link +" class='custom-category-button'>Test</a>" ).insertAfter( insertHere );
});
We have uplaod function on our site. And uploaded file, displays link which on click user can see file they have uploaded in new window.
We also use divbox http://jquery.phpbasic.com/divbox
My code is this:
$("#uploader" + queueId).html("
<div class='cancel'>
<input class='button_cancel' name='removeFile' fileName='"
+fileObj.name.replace("'", "%27")+"' type='button'>
</div>
<a class='lightbox' href='" + self.attr("path")
+ fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>");
For some reason when we click on the link, it still opens in new window and doesnt initiate the lightbox.
In my page i see this ( all normal )
<a class="lightbox" href="uploads/nutshell.png">
<span class="fileName">nutshell.png</span>
</a>
Which should fire the lightbox.. Anything scream out at you in the js code I posted above ? I am wondering if its self.attr("path")
Here is what we have::::::
in the js for divbox we have
$('.lightbox').divbox({caption: false});
in the js for the uploader we have.
$("#uploader" + queueId).html("<div class='cancel'><input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'></div><a class='lightbox' href='" + self.attr("path") + fileObj.name.replace("'", "%27") + "'><span class='fileName'>"+fileObj.name+"</span></a>");
Presumably you're doing something like this:
$('a.lightbox').divbox({ ... })
before you add the <a> in question with:
$("#uploader" + queueId).html("...");
$('a.lightbox') only applies to elements that exist on the page when $('a.lightbox') is called, it won't bind DivBox to elements that are added to the page later. You'll have to bind DivBox to the new <a> that you added with something like this:
$("#uploader" + queueId).html("...");
$('#uploader' + queueId).find('a.lightbox').divbox({ /* and whatever options you need */ });
Rough demo of the technique: http://jsfiddle.net/ambiguous/EswfB/
To build off of mu is too short's answer, you could implement like so:
$("#uploader" + queueId).html("
<div class='cancel'>
<input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'>
</div>
<a class='lightbox' href='" + self.attr("path")
+ fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>")
.find('a.lightbox')
.divbox({ /* and whatever options you need */ });
And simply chain the commands into one.