I'm using shadowbox to open links in an overlaying iframe.
If people navigate to mysite.com/#/link123 the link is automatically clicked and opens up in a shadowbox.
<script type="text/javascript">
window.onload = function() {
var pageURL = document.location.href;
var SBlinkRegEx = /(.*)(\/#\/)(.*)/;
var SBlinkRegExCG = SBlinkRegEx.exec(pageURL);
if(SBlinkRegExCG){
var SBhashtag = "#"+SBlinkRegExCG[3];
alert(SBhashtag);
$(SBhashtag).trigger('click');
}
}
</script>
This code works perfectly for all links EXCEPT for clickable div's. They show some strange behaviour. When people navigate to mysite.com and click on a clickable, it opens up nicely in the shadowbox. However, if people navigate to mysite.com/#/div123 the shadowbox opens the whole page(mysite.com) instead of just the div. The unwanted behaviour also happens when people navigate to mysite.com/#/link123, then close that shadowbox, and click on the div.
Here's a code from a normal link
<div class="normal-width">
<a id="link123" onclick="window.history.replaceState( {} , '', '#/link123' );" rel="shadowbox[All]" href="mysite.com/link123.html">Link 123</a>
</div>
Here's the code for my clickable div
<div id="abc" class="text">
//some content
<a id="div123" onclick="window.history.replaceState( {} , '', '#/div123' );" href="#abc" rel="shadowbox[All]" class="filldiv"></a>
</div>
Thanks for your time.
Figured it out...
rel="shadowbox[All];player=inline"
Related
I'm triggering Fancybox popup automatically when the page is loaded.
Inside that popup there's a HTML content with link to other page.
That link doesn't work when it's loaded with Fancybox.
Here's my code:
<div class="popup">
<div class="container">
<h4>Description text...</h4>
<a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
</div>
</div>
<script>
$(document).ready(function() {
$('.popup').fancybox({
transitionEffect : "zoom-in-out",
}).trigger('click');
});
</script>
How can I set that link to work?
I'm using Fancybox v3.1.28
First, links, buttons, etc are working perfectly fine in fancybox.
The problem in your example is caused by the fact that you have used .popup selector to initialize fancybox, but that matches element containing your link. So, your code can be translated to 'start fancybox when user clicks on element having class ".popup"'. But, your link is inside element with class name ".popup", therefore it starts fancybox.
Finally, your code does not make any sense. If you wish to immediately start fancybox, then use $.fancybox.open() method, see https://fancyapps.com/fancybox/3/docs/#api for samples
I've been searching everywhere on the internet now but I can't find a solution to my problem.
I'm using the shadowbox for my galleries and it's working perfectly fine if I don't use a fixed height or/and width. If I set one or both of these attributes the link opens in a _blank page.
This is what my code looks like
<div id="imprint">
<a href="subpages/imprint.html" rel="shadowbox;width=645" title="Imprint">
Imprint
</a>
</div>
thanks for your replies
mlp
update:
<script type="text/javascript">
$(document).ready(function(){
var options = {
resizeLgImages: true,
displayNav: false,
handleUnsupported: 'remove',
keysClose: ['c', 27] // c or esc
};
Shadowbox.init(options);
});
</script>
In my meteor based application i am using an I frame to show some contents to the user. It is working properly. But i want to place a close button which unloads the Iframe from the template when clicked.
I tried it as in the code given below by placing a button, but I am unable to get click event on it. means button click is not working. I am working with iframes for the first time.
Is this the right way to unload an iframe?
If not then how can i unload it, or what is the best way to unload an Iframe?
<template name="preview">
<div style='display:none'>
<div id='preview' style='padding:10px; background:#fff;'>
<button id="close_content_file">Close</button>
<iframe frameborder="1" src="{{preview_url}}" align="left" width="100%" height="500px" >
</iframe>
</div>
</div>
Template.preview.events({
'click #close_content_file':function(){
console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
},
});
I placed a <button></button> in the div to close or unload the Iframe. but click is not working on that button.If I place the button in the div which is hidden. The button is working there. Iframe is opening on the complete screen. means it over lays the omplete screen as bootstrap modal dialogbox.can i place a button in the Iframe itself? . help will be appreciable
There is an issue with the binding of event with the button. Use this way.
$("#close_content_file").bind("click", function() {
//console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
});
I don't know which JS lib you are using, and also I'm a little confused about the
<div style='display:none'>
but I make a little modification so it works fine with jQuery ,
here is the link http://jsfiddle.net/QHxac/
So I want to click on a link of a page which redirects to another one that has 3 different div's which trigger scripts on their href. I am not being able to do this. I tried using anchors but it does not trigger the href...
1st page
<a href="second_page.html#anchor">
2nd page
<div>
<a id="header" href="javascript:showonly('header');" name="anchor">
</div>
You need an onload handler in the head section of your second page which catches the hash and runs your action(s). Something like this should work:
<script type="text/javascript">
window.onload = function(){
if( window.location.hash == '#anchor' ) showonly('header');
}
</script>
You dont need the <a id="header" href="javascript:showonly('header');" name="anchor"> in your markup for this to work
I have an html page and basically it contains 2 div blocks and 2 links. Now, when I click one link then the content of first div should get opened in a new window. Similarly, when I click second link content of second div should get opened in another new window.
Here's a code - http://jsfiddle.net/PAJWV/5/
I do agree that it is impossible, but in case there is a workaround. Thanks.
function printPage(divid)
{
elementId=divid;
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName,'left=500,top=500,width=500,height=500');
printWindow.document.write('<html><head></head><body>'+printContent.innerHTML+'</body></html>');
}
Try above code by calling the function onclick
Just create a page with the content from div1 inside of it and call your script to open this page. Same thing with div2.
You can pull the content from another file for div1 using an iframe and do the same for div2.
Why can't you do it this way?
Try this code :
http://jsfiddle.net/PAJWV/9/
will not run fine in jsfiddle but will run fine with actual code due to some limitations.
I didnt try this but you can link as
window.open("index.html#second");
and along with that hiding other divs with id not #second will work fine
you can create separate html for div1 and div2 like
window1.html
<body>
<div id="first">
First Div contents.
</div>
</body
window2.html
<body>
<div id="second">
second Div contents.
</div>
</body
main.html
<div>
<a id="link1" href="window.open('window1.html')">Open div 1</a><br />
<a id="link2" href="window.open('window2.html')">Open div 2</a>
</div>