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
Related
I am using jquery colorbox 'inline'. It is opening first time from a specific link.
<a class="addFile inline" href="#inline_content">
<img src="img/nav-icons/icon_plis.png" alt="">
Add File
</a>
with the jquery written over
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
but when I am trying to open another inline content (#inline_content2) from different link(s) on the same page, the previous inline content (#inline_content) is opening. Please help me to resolve the issue.
-thanks
in click event for
$('.inline').on('click',function(e){
e.preventDefault();
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
or you can use .each();
$('.inline').each(function(){
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
if both of them not work make a specific class for each anchor
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
$(".inline1").colorbox({inline:true, width:"40%",href:"#inline_content1"});
$(".inline2").colorbox({inline:true, width:"40%",href:"#inline_content2"});
... etc
This used to be my (working) code:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
If I'd click the link, I would be taken to http://someotherwebsite.com/. If I'd click somewhere else in the div, I would be taken to http://somewebsite.com/. Perfect.
Then, I decided that I wanted to open http://someotherwebsite.com/ in a new tab upon clicking the link, so I changed my code to this:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
However, if I'd click the link now, I would be taken to http://somewebsite.com/ instead of http://someotherwebsite.com/! Apparently, adding target="_blank" to my anchor tag caused my onclick method to override my anchor tag's href. What's going on?
Edit: It turns out, my code does function properly in Chrome, but not in Safari 7.0.5. What can I do to add Safari support?
Try
<div onclick="location.href='http://somewebsite.com/';" target="_self">
Link
</div>
jsfiddle http://jsfiddle.net/guest271314/8deea/
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/
I came across a strange problem . I have a jsp , which is calling an iframe . The iframe gets loaded with data from java.
Now to render the iframe i am using customized control-modal.js.
Now my iframe is coded after li tag like this :
<li>
<a id="modalLink" href="#myModal">Set up my Modal</a>
</li>
<div id="myModal" >
<div class="modalsubcol">
<p class="close"><img src="/.../close-button.gif" alt="Close"/></p>
<iframe id="modal-frame"style="display:none;" height="430"
width="675" src="<%= getTheModal()%>"></iframe>
</div>
</div>
And i call the modal in the head part of my jsp like this :
<script type="text/javascript">
window.onload=function modalOverride(){
var myModal;
$('modal-frame').style.display ='block';
myModal = new Control.Modal($('modalLink'), {
afterOpen : function(){$$('.close a').invoke('observe','click',function(e){Control.Modal.close(); Event.stop(e);});},
opacity: 0.3,
width: 675,
fade: true,
fadeDuration: 0.1,
autoOpenIfLinked: false
});
}
</script>
Now the link : Set up my Modal is part of a page containing many links. When i bring that page up, the java class that renders the data fro the modal also gets called. But this must happen only when , i click on the Set up my Modal link.
Before some one tells me , this issue is not due to
window.onload
event, i have used it as otherwise the modal does not get loaded when i click the a fore mentioned link. I have tried by removing the window.onload event as well. If i do that, the java class still gets loaded and now my iframe does not get loaded . No errors come up in fire bug as well.
When you drop this on the page:
<iframe id="modal-frame"style="display:none;" height="430" width="675" src="<%= getTheModal()%>"></iframe>
The source of the iframe is loaded regardless pf whether you have the display: none css property set.
Also note, JSPs do not "call" iframes, they simply render an iframe tag in the HTTP response, the browsers than interprets the iframes and renders the iframe src
If you wish to show/hide the iframe you can do so with JQuery:
$('.modal-frame').toggle();
If you truly wish to only include the other page when you click a link, you need to use AJAX to make a request when the link is clicked or load an iframe dynamically with Javascript.
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600