I'm trying to use Lightbox's title function as a simple way to put PDF download links and website URLs so that people are able to see designs in full detail and actually visit interactive websites they've seen as images. I do it this way:
<a href="projects/img_full/my_project.png" data-lightbox="project1" data-title="<a href='http://example.com/' target='_blank'>Visit site</a>">
<img src="projects/thumbs/my_project.png" alt="Project 1" />
</a>
The link outputs correctly under the Lightbox's image, and target='_blank' remains if I inspect it in my browser. However, the link still opens in the same tab.
Why does this happen? Is there a way to avoid it?
I have the same problem, on my project page I have gallery of places, and in title I have an url to wiki site with description of current place, when I click on the link page opens in the same window, in firebug everything looks fine (with attribute target etc.)
I found something in Lightbox library that I think is responsible for running urls
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. #https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function(event){
location.href = $(this).attr('href');
});
}
but I'm not 100% sure that is this, could someone show where I can update code and depened opening links by the "target" attribute?
EDIT:
ok, found solution to this, need to replace code above with this and it works for me, found it on github
https://github.com/lokesh/lightbox2/pull/299/files
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function (event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
} else {
location.href = $(this).attr('href');
}
});
}
Related
I can't figure out how to open a new tab using JavaScript. I went through related questions but nothing worked for me. I want the browser to open a new tab when someone clicks on the link (example.com) below. What code should I add and where should I place that code?
My html code is here -
<section id="work-grid" class="site-inner">
<div class="work-item" data-groups='["all", "webdesign"]' data-url="http://example.com">
<figure class="image-container"><img src="images/work/web-one.jpg" /></figure>
</div>
Thank you in advance.
Use the attribute newtab on the a element.
Code for driver for newtab a attribute:
(()=>{document.getElementsByTagName("a").map((e)=>{if(e.newtab==="newtab"){e.target="_blank";e.rel="noopener noreferrer";}return e;});})();
Beautified version without an anonymous function:
document.getElementsByTagName
(
"a"
).map
(
(e) =>
{
if (e.newtab === "newtab") {
e.target = "_blank";
e.rel = "noopener noreferrer";
}
return e;
}
);
You can only put the compressed version on your page due to uncompressed-code checking.
Is there a way I can use a button(input type="button") to show the Bootstrap modal. Basically the default is using anchor based on the documentation. I have tried experimenting but no luck.
I'm not sure if my coding is wrong or the Bootstrap modal can only be activated if it is an anchor tag. I have also tried googling or researching if anyone has created this kind of result.
This should work the same way as with an anchor tag.
The problem is, it's based on the href attribute, referring to the id of the modal window, and placing this attribute on a button might cause some html validation to go wonky.
If you don't care about that kind of stuff you can just replace your a tag with a button tag.
Edit: just noticed you were using an input element rather than a button. Either way, it should still work.
Edit2: Just verified if what I was saying wasn't total BS by looking at the bootstrap code (2.3.2), and found this snippet:
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
, href = $this.attr('href')
, $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})
Looking at this, the href attribute isn't required, and you can use data-target instead when working with inputs and buttons.
simply u can fire event on Button Click and call function "onclick=showModal()"
JS CODE
function showModal()
{
$("#modal-window-id").modal("show");
}
I would like to add a section to an existing webpage, but only make it visible if the user types the URL with a particular anchor link. Is this possible? Or is it possible to redirect to a new page if the URL has a certain anchor link?
Since you don't mind using JS, you can listen to the onhashchange event to decide whether the specific section should show.
http://jsfiddle.net/C3kHT/
window.addEventListener("hashchange",function(){
if(location.hash=="#trap") /*show section*/
},false);
Sorry that I don't have an IE 8 at hand, so I'm not sure if the fiddle code actually work in IE 8.
To redirect if a url has a certain anchor:
var anchor = "#tag";
var url = "http://www.google.com";
if(window.location.indexOf(anchor) !== -1){
window.location = url;
}
Maybe try this. Start out with your hidden section set to display: none;, then use jQuery to unhide it based on the hash in the url.
CSS:
.hiddenDiv {
display: none;
}
jQuery:
function showDiv() {
if (window.location.hash === '#hashNecessaryToShowDiv') {
$('.hiddenDiv').css('display', 'block');
}
}
showDiv();
How can I prevent the page from "jumping up" each time I click a link? E.g I have a link somewhere in the middle of the page and when I click it the page jumps up to the top.
Is the anchor href="#"? You can set it to href="javascript:void(0);" instead.
If you are going to a prevent default please use this one instead:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
Let's presume that this is your HTML for the link:
Some link goes somewhere...
If you're using jQuery, try like this:
$(document).ready(function() {
$('a#some_id').click(function(e) {
e.preventDefault();
return false;
});
});
Demo on: http://jsfiddle.net/V7thw/
If you're not on jQuery drugs, try with this pure DOM JavaScript:
window.onload = function() {
if(document.readyState === 'complete') {
document.getElementById('some_id').onclick = function(e) {
e.preventDefault();
return false;
};
}
};
It will jump to the top if you set the link href property to # since it is looking for an anchor tag. Just leave off the href property and it won't go anywhere but it also won't look like a link anymore (and make sure to handle the click even in javascript or else it really won't be of much use).
The other option is to handle the click in javascript and inside your event handler, cancel the default action and return false.
e.preventDefault();
return false;
How can I make a link a href="#" does not show # in URL when clicked and does not scroll up the page?
I have seen it in http://www.offroadstudios.com/creative-agency
But could not learn how they did it.
Left menu contains a href="#" but it behaves in the way I am asking.
Looking at that site it would appear they are using jQuery to change the visible content. To prevent a # from appearing in your browser bar, you can preventDefault:
$("a.myLinkClass").click(function(e){
e.preventDefault();
//do something..
});
See Demo: http://jsfiddle.net/SJuwL/show
In topic author link, they used this:
jQuery(document).ready(function() {
jQuery('.product-selector').each(function(i, element) {
jQuery('.product-selector.product-' + i).click(function() {
jQuery('a#products-top').focus();
if (producttool == false) {
producttool = true;
}
// Return false so that the page doesn't switch.
return false;
});
});
});
So, the answer on your question, is to return false; in onclick event.
Demo here: http://jsfiddle.net/FSou1/K3p2W/
$('a[href="#"]').click(function(event){
event.preventDefault();
});
Attack a click handler to the link and prevent the default action
$('a').click(function(){return false});
http://jsfiddle.net/MjyzK/show/
To link-jump to a position in the HTML file it is possible to use a named anchor tag.
<a name="here"></a>
LINK <!-- jumps to the position "here" -->