Hello I am trying to add a download bottom for lightbox. The use were unable to click on the image directly, so currently I redirect them to the page of the image when they click on the download bottom.
However, I would like to allow the user to download the image directly as soon as they click on the download bottom. Below is the simplified code, but I can only change this part: function(){window.location = $(this).attr('href'); return false}
<a class='lb-download' href='www.XXXX.com/picture.jpb'></a>
<script>
$('.lb-download').on('click', function(){
window.location = $(this).attr('href'); return false})
</script>
Thank you so much!
Edit: Yeh, sorry for the syntax error, I have corrected it, but it was mistake. My real problem is how can I force download instead of going to the page of the image?
You have a syntax error here
try
$('.lb-download').on('click', function({
window.location = $(this).attr('href');
return false});
The key points are the dot before the className and the position of the parentheses.
When you click an anchor with a href, it changes the windows location to the href.
Right now you're doing exactly what the anchor does with your javascript ?
To download the image when the anchor is clicked, you can use the download attribute in newer browsers
<a class='lb-download' href='www.XXXX.com/picture.jpg' download="picture.jpg"></a>
FIDDLE
In older browsers you need to link to a page that sets the right content disposition headers, and passes the image as an attachment.
Related
My links are javascript functions which show a loader, then navigate to the target link:
<script>
function go(url) {
document.body.innerHTML = "some loader html";
window.location = url;
}
</script>
Click here
However this link wouldn't work when the user right clicks it and wants to navigate to test.php in a new tab.
I want the link also to function when the user wants to open it in a new tab/window. Is there a javascript/jquery way I can achieve this?
Thanks
Your links should be links, not JavaScript functions. Their primary purpose is navigation. You can add the extra behavior later, in a click handler:
document.body.addEventListener('click', evt => {
const link = evt.target.closest('a.use-loader');
if (!link) return;
evt.preventDefault();
document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
window.location.href = link.href;
});
<a href="https://example.com" class="use-loader">
This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
This one, too.
Or with jQuery:
$('body').on('click', 'a.use-loader', function () {
document.body.innerHTML = '<h1 style="color:red">LOADING</h1>';
window.location.href = $(this).attr('href');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com" class="use-loader">
This loads <em>really slow</em>, and it's my responsibility to fix that.
</a>
<br>
This one, too.
This way, the links still work for any agent that isn't running JavaScript, including browsers opening new tabs and users running NoScript.
Firstly, "My links are javascript functions which show a loader, then navigate to the target link" sounds like bad design decision.
To answer your question...
window.open('test.php', '_blank');
the second parameter will be the name of the target window
see How to simulate target="_blank" in JavaScript
The only way to get a right click 'open in a new window' is to have your tag like this
Click here
I highly recommend that you do not open the link using javascript, this is usally bad practice and you will most likely run into popup blocker issues.
I would do this personally
Click here
Maybe this "loader" you want to show is supposed to imitate an AJAX loading approach where you load new HTML and insert it into your page without causing an actual page reload
you might be interested in this
How do I load the ajax data into a div with jquery?
Basically, I have a page with social media share buttons. Some of them work as they should (they open up in a new window), however, others open up both in a new window and in the same window. I have been going crazy for a day now over this and I cannot seem to find a way to fix it.
For reference, this is the page: http://www.inetsolutions.org/gsa-search-engine-ranker-ultimate-tutorial-and-genuine-review-seo-software-of-the-gods/
Link that works as expected (Facebook, Twitter, Pinterest):
<a href="javascript:void(0)" class="ism_link" onclick="indeedPinterestPopUp(2513);ism_fake_increment('.pinterest_share_count', 'pinterest', 'http://www.inetsolutions.org/gsa-search-engine-ranker-ultimate-tutorial-and-genuine-review-seo-software-of-the-gods/');">
Link that opens the URL to share in both a new window and in the same:
<a href="http://www.stumbleupon.com/badge/?url=http://www.inetsolutions.org/gsa-search-engine-ranker-ultimate-tutorial-and-genuine-review-seo-software-of-the-gods/&title=GSA%20Search%20Engine%20Ranker%20Ultimate%20Tutorial%20and%20Genuine%20Review%20%E2%80%93%20SEO%20Software%20of%20the%20Gods" class="ism_link" onclick="ism_fake_increment('.stumbleupon_share_count', 'stumbleupon', 'http://www.inetsolutions.org/gsa-search-engine-ranker-ultimate-tutorial-and-genuine-review-seo-software-of-the-gods/');return !window.open(this.href, '', 'width=700,height=575');">
What I have tried:
I have tried to remove the "href" attribute of the tag and insert the URL string into the window.open function instead of using "this.href". When I do that, the link opens only a new window, but doesn't open the share page of the respective social media, but rather, the target URL.
I have tried to add "return false" after the non-working window.open function.
I have also tried to remove the "ism_fake_increment" function just to test, but again, to no avail.
I have contacted the plugin author, but they requested to access my website internally, which is not going to happen.
Any ideas will be strongly appreciated. Thank you for your time!
I advise that you don't use the onclick attribute because it leads to extremely messy code. Instead, use the .addEventListener() in the DOM.
To disable the link from opening the link in the same window, just disable the default even. This can be done with .addEventListener() in the callback by calling the .preventDefault() method of the object passed into the callback:
//Get our link:
var link = document.getElementById("stumbleupon");
//Bind the click event:
link.addEventListener("click", function(event) {
//Prevent the link from opening regularly with .preventDefault():
event.preventDefault();
//The following code with the plugin does not work because we haven't included the plugin in the code snippet, but as you can clearly see if you click the link, the link has clearly been disabled because of the above call to .preventDefault().
//Do different stuff with the plugin:
ism_fake_increment('.stumbleupon_share_count', 'stumbleupon', 'http://www.inetsolutions.org/gsa-search-engine-ranker-ultimate-tutorial-and-genuine-review-seo-software-of-the-gods/');
return !window.open(this.href, '', 'width=700,height=575');
});
<!-- Set the ID attribute so we can find this link in the DOM: -->
<a id="stumbleupon" href="http://www.stumbleupon.com/badge/?url=http://www.inetsolutions.org/gsa-search-engine-ranker-ultimate-tutorial-and-genuine-review-seo-software-of-the-gods/&title=GSA%20Search%20Engine%20Ranker%20Ultimate%20Tutorial%20and%20Genuine%20Review%20%E2%80%93%20SEO%20Software%20of%20the%20Gods" class="ism_link">Hello! This is a link to stumbleupon.com!</a>
I want to open 2 URLs on click.
This can be done through jquery, javascript whatever I don't care.
I prefer lightweight and speed but at this point anything is fine with me.
I tried including onclick in the a href and also open.window in jquery.
Both gave me a: "popup blocked"
What is the correct way to do this?
HTML
Click Here
JS:
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('http://yoururl1.com');
window.open('http://yoururl2.com');
});
Otherwise do it in simple way
multiopen
Setup a link with target="_blank" to ensure the popup opens as _blank is okay with all browsers.
Then after it is opened, substitute current address with javascript's window.location;
2 links
<script>
$('a.bob').on('click', function(e){
window.location.href="http://yahoo.com"
});
</script>
I am working on a JS program which should open a webpage www.mysite.com & click on a link inside that webpage to download a pdf.
The link to click looks like this:
<a onclick="download();return false;" href="#noWhere">Click to Download</a>
Ordinarily, manually clicking the link, calls the following function to download the pdf:
function download() {
document.forms[0].action = path + "/xxW04_sv_0140Action.do";
document.forms[0].target = "_self";
document.forms[0].submit();
}
My code is simplified javascript code to open the page & click on the "Click to Download" button is this:
<script>
var linkname = "http://www.mysite.com";
var windowname = "window_1"
// Opens a new window
var myWindow = window.open(linkname, windowname ,"width=400,height=600");
//should open a link to download pdf
myWindow.document.getElementById('href = \"#noWhere\"').click();
</script>
So far I can open the webpage "mysite.com" in a seperate window using but for some reason no button clicking is happening and certainly no pdf is downloaded.
Of course if I manually click the "Click to Download" button it downloads.
Can anyone tell me what i'm doing wrong? Why I cannot simulate a click with the above js code?
Or possibly give me some things to try. Any help much appreciated and Than you.
UPDATE:
From the initial answers below, possibly this method is doomed for failure! Can anyone suggest a better way I could be downloading these pdfs?
You'd better use:
<a href="http://www.mysite.com/mypdf.pdf">
This should download that pdf file.
It won't work. The same-origin policy will prevent you from accessing the content of any pages loaded from another domain.
Also, as #kamilkp pointed out, you have to provide the getElementById() function with an id value. You can't just plug any old stuff in there and expect it to work.
Another problem is your reliance on clicks for this to work. What about users that use the tab key to select links and then press Enter to follow the link?
If we have some pictures shown on the page as thumbnails, and when the user click on the picture , the page show the full picture using any JavaScript or JQuery methods.
how we can change the browser url address to point to picture instead of the main page website while keeping the user on the current page.
for example:
if we visit any instagram account for example
http://instagram.com/fofo
and when we click on any photo the script will change the address url in the browser to
http://instagram.com/p/ReTycBy2Bj/
for example
how we can do something that?
Thanks for help
You can achieve that by manipulating the browser history using the history.pushState() method on supported browsers. See https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries for details.
Here is an example of a script that will solve my question
After review +lshearer answer and start searching about "pushState" and while im searching I found this url http://html5.gingerhost.com/seattle which helps me to understand how to change the URL of browser address bar without loading it's content.
<html>
<head>
<title>some title</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<script>
$( document ).ready(function() {
// Handler for .ready() called.
var original_url = window.location.pathname;
$("#show").click(function() {
href = "picurlhere.jpg";
// HISTORY.PUSHSTATE
history.pushState('sss', 'New URL: '+href, href);
});
$("#close").click(function() {
// HISTORY.PUSHSTATE
history.pushState('sss', 'New URL: '+original_url, original_url);
});
});
</script>
<body>
<button id="show">showpic</button>
<button id="close">closepic</button>
<pre></pre>
</body>
</html>
I tested it on FireFox 25+, Chrome 31+
And it works.
When I click on 'showpic' button the script will change the url to 'picurlhere.jpg' and when I click back to 'closepic' button it will return me the original page URL.
This will help us while showing images using JQuery or JavaScript methods so we can change the browser url because if the user copy the link and send it to any one it will point him to the picture url not to the site page. and that is exactly used on instgram.
but in real show you have to make this script more smarter.
Thanks for Help.
No need to use any script, just plain HTML. Wrap your image like this:
<img src="your-image.jpg" alt="">