I'm having trouble getting a Featherlight modal window to show content on page load.
https://github.com/noelboss/featherlight/#usage
https://jsfiddle.net/axxdy4we/
Open Featherlight DOM with Link
Open some DOM in lightbox
This link loads html content from the data-featherlight attribute
Clicking the link will load "My Content".
On Page Load
$.featherlight($('.my-content'), {});
This only loads whats between the <a> tags, "Open some DOM in lightbox".
How to call "My Content" from the data-featherlight attribute on page load?
I need to have the html inside the data-featherlight, not outside in a div.
I thought it might be something like
$('.my-content').featherlight();
$('.my-content').featherlight.current();
Call .featherlight() on your content to ensure that the modal window is configured, and then use jQuery to .click() it right after the page loads:
$('.my-content').featherlight().click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://noelboss.github.io/featherlight/release/featherlight.min.js"></script>
<a href="#" class="my-content" data-featherlight="<p>My Content</p>">
Open some DOM in lightbox
</a>
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 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
I have menu with anchor tag, on click of menu link I want to open a new jsp page into a div tag on the same as tag.
My jsp file:
<ul>
<li>Music</li>
<li>Dance</li>
</ul>
<div class="main-container" id="div_displayfrom">
</div>
Please help....Thanks in advance!!
If you want to use jQuery then you can do this:
<ul id='mainTabs'>
<li>Music</li>
<li>Dance</li>
</ul>
then you can do this in jQuery:
$('#mainTabs a').click(function(e){
e.preventDefault();
$('#div_displayfrom').load(this.getAttribute('href'));
});
Try this:
Use .load() function to load the page contents into specified div.
$('ul > li > a').click(function(){
$('#div_displayfrom').load($(this).attr('href'));
return false;
});
The short answer is that you cannot.
The behaviour you describe is that of an iframe, not a div.
You could fake it by using JavaScript (Ajax) to fetch the content and then put the fetched HTML in the div (but you would have to account for stylesheets, scripts, different URLs that relative URLs in the document will be resolved against, etc). jQuery has a load method to help with this.
The target attribute specifies where to open the linked document.Following are the valid attribute values,
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same frame as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window framename Opens the linked document in a named frame
See How do I load an HTML page in a <div> using JavaScript? to load the page in the div.
try like this:
<ul>
<li>Music</li>
....
</ul>
<div class="main-container" id="div_displayfrom">
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