I need to load some external html content into a container, everything works fine, when I click the trigger button, it load the content, but the problems comes because the external content has a gallery, and a dropdown menu, and when the content is loaded, the css works fine, but the javascript just doesn't work at all. I need to know how to make this work.
This is an example of my code:
Container (Index.php):
<button class="button" id="load">LOAD</button>
<div id="loaded-content">
<!-- Loaded content goes here -->
</div>
Content to load (to-load.html)
<div class="column large-12">
<img src="img/some_image.jpg" alt="Hikari">
</div>
<div class="column large-12">
<button class="button small expand load-trigger alert">Ver más</button>
</div>
<div class="column large-12">
<div class="column large-12 load-collapsable">
<div class="column large-12">
<h1 class="load-collapsable-title">Café</h1>
</div>
<div class="column large-12 load-collapsable-gallery">
<ul>
<li>
<img src="img/main-slide/img_1.jpg" alt="">
</li>
<li>
<img src="img/main-slide/img_2.jpg" alt="">
</li>
<li>
<img src="img/main-slide/img_3.jpg" alt="">
</li>
<li>
<img src="img/main-slide/img_4.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
Javascript (main.js)
$(document).on('ready', function(){
collapsable_gallery.owlCarousel({
autoPlay: true,
slideSpeed: 200,
paginationSpeed: 1000,
singleItem: true,
theme: 'owl-theme',
})
$('.load-trigger').on('click', function(event){
event.preventDefault();
$('.load-collapsable').toggle();
});
$('#load').on('click', function(event){
event.preventDefault();
$('#loaded-content').load('some/directory/to-load.html');
});
});
The gallery doesn't work and not even the "window" that should be opened when ".load-trigger" is clicked.
You are trying to add event handlers using jQuery for dynamically added elements. Adding event handlers works in a different way for such DOM elements.
You need to use jQuery .on().
e.g.
/**
* "selector" is DOM object available before this
* event handler was executed
*
* "dynamic_selector" is the DOM object which will
* be dynamically added as a child of "selector"
*
* "event" can be replaced by values like "click" etc.
*/
$('#selector').on("event", "#dynamic_selector", function(){
//Attach your handler here
});
Selectors can be used just as normally in jQuery.
You need to use something like that
jQuery('body').on('click','.element',function(){
//do some stuff
});
Related
I'm trying to target dynamic added elements to work with lightgallery.js. See the exemple bellow:
<div id="animated-thumbs" class="page-divs-middle">
<!-- STATIC EXAMPLE -->
<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
<a href="assets/img/01.jpg" data-lightbox="image-1">
<img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
</a>
</div>
<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar">
<a href="assets/img/01.jpg" data-lightbox="image-1">
<img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg">
</a>
</div>
<!-- STATIC EXAMPLE -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animated-thumbs').lightGallery({
thumbnail:true,
selector: 'a',
download:false,
share:false,
autoplayControls: false,
});
})
</script>
The code above is a static example that's demonstrate how to use lightgallery script, this works as expected. But I'm trying to make the script works adding elements dynamically, like this:
<div id="animated-thumbs" class="page-divs-middle">
<!-- Elements here were dynamically added -->
<!-- Elements here were dynamically added -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animated-thumbs').lightGallery({
thumbnail:true,
selector: 'a',
download:false,
share:false,
autoplayControls: false,
});
})
</script>
JavaScript
var target = $('#animated-thumbs');
target.append('<div class="col-md-3 col-xs-3 text-nowrap spacer-page-models fit pulsar"><img class="img-responsive img-responsive-center cover" src="assets/img/01.jpg"></div>');
But it's not working because document was loaded previously. Someone can help me?
You need to append html to id="animated-thumbs" before initialising gallery, or reinitialize gallery after appending html.
Something like:
$('#animated-thumbs').lightGallery().destroy(true);
$('#animated-thumbs').append('<div><h3>some html to add</h3></div>');
$('#animated-thumbs').lightGallery({ //params });
Please note that this is just description code and it will not work if you just copy it. Check gallery documentation on how to call destroy method (usually they all have it) and apply it to your code. Or if there is 'reinit' method you can skip destroy and just reinit gallery after html appending.
Im working on a flipbook, and im trying to make my script load when second pages is visible. What i have tried right now is
With if ($('#bubble').is(':visible')) added the bubble script still loads even when i am not on the right page.
Javascript
if ($('#bubble').is(':visible')) {
$(document).ready(function() {
$('.small').fadeOut(1);
$('.small').removeClass('hidden');
$(".small").delay(1000).fadeIn(2000);
});
$(document).ready(function() {
$('.big').fadeOut(1);
$('.big').removeClass('hidden');
// $('.big').fadeIn(1500);
$(".big").delay(2000).fadeIn(2000);
});
$(document).ready(function() {
$('.test').fadeOut(1);
$('.test').removeClass('hidden');
$(".test").delay(3000).fadeIn(2000);
});
}
HTML
<div class="bb-item" id="bubble">
<img class="fixedsize" src="images/1.png" alt="image02" /></a>
<div class="test">
<div class="oval-thought">
<p>Text inside bubble</p>
</div>
</div>
<div class="small">.</div>
<div class="big">.</div>
</div>
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
There is a bootstrap carousel that is changing automatically:
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
Only one div is set to active at a time, and it cycles through like that.
How can I bind all of carousel's children to another element so that it can set it's specific child to be active as well.
For example:
<div id="copy-cat">
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
</div>
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
How can I bind copy-cat to have the same child active as carousel? Keep in mind, I don't want to copy all of the class attributes- just detect that one is active, and set that same numbered child to active also.
I'd use Bootstrap's slid event callback:
http://jsfiddle.net/isherwood/6xF7k/
$('#carousel').on('slid.bs.carousel', function () {
// get the index of the currently active panel
var myIndex = $(this).find('div.active').index();
// set the element with that index active, deactivating the others
$('#copy-cat').find('li').removeClass('active').eq(myIndex)
.addClass('active');
})
Notice that I changed #copy-cat to ul to make it valid HTML.
http://getbootstrap.com/javascript/#carousel-usage
Given an element x, you can get the index of x in its parent's .children() by calling x.index(). In your example, $("div.active").index() would return 0, the div following would return 1, etc. So you should be able to do something like the following:
$("#copy-cat :nth-child("+(1+$("#carousel div.active").index()) + ")").addClass("active");
(nth-child is 1-index-based, so you need to add 1. You could also call eq(), which is 0-based.)
See this jsFiddle for a rough example.
But this is only a general answer. If there are Bootstrap methods for this purpose, by all means use them.
The Bootstrap carousel has some events that you can tap into.
Information about the events can be found in the "Events" section under the Carousel documentation.
I would recommend doing something like:
<div id="copy-cat">
<div id="copy-1" class="active"></div>
<div id="copy-2" class=""></div>
<div id="copy-3" class=""></div>
<div id="copy-4" class=""></div>
</div>
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-transition-to="#copy-1">
<p>something1</p>
</div>
<div class="item" data-transition-to="#copy-2">
<p>something2</p>
</div>
<div class="item" data-transition-to="#copy-3">
<p>something3</p>
</div>
<div class="item" data-transition-to="#copy-4">
<p>something4</p>
</div>
</div>
</div>
Add a listener as described in the event section, and inspect the relatedTarget.
Use the data-transition-to to figure out the class to add the active class to.
Javascript to support this approach:
$('#carousel').carousel({
interval:false //or whatever options you want
});
$('#carousel').on('slide.bs.carousel',function (event) {
$('#copy-cat .active').removeClass('active');
$(event.relatedTarget.dataset.transitionTo).addClass('active');
});
$('#carousel').carousel('next');
This is is the fiddle ...I disabled transitioning & you will have to inspect the DOM to see that the copy-cat div is being changed.
I'm trying to add scripts to a modal (simplemodal) jquery plugin but they won't run, is this functionality simply not available when running in the modal or am I missing something.
Here's how I'm calling simplemodal:
$('#modal').modal({
onClose: function (dialog) {
$App.setLocation('#/');
$.modal.close();
}
});
and here's the html of the modal, which includes the addthis script (i've taken out the real username for posting here):
<div class="article clearfix">
<div class="article-post">
<h2 class="title">{{header}}</h2>
<p class="date">Posted in {{feed_source}}, {{date}}</p>
<ul class="tags clearfix">
<li>tag 1</li>
<li>tag 2</li>
</ul>
<div class="body">
{{{body}}}
</div>
</div>
<div id="single-article-comments" class="article-comments">
<h3 class="comments-header">Comments:</h3>
</div>
</div>
<div class="sidebar clearfix">
<div class="sidebar-inner">
<p class="sidebar-logo">Logo Text</p>
<ul class="sidebar-menu">
<li>Comment</li>
<li>Rate</li>
<li>Slate</li>
<li>Report</li>
<li>Email</li>
<li>Tweet</li>
<li>Like</li>
</ul>
<ul class="sidebar-action-addthis addthis_toolbox addthis_default_style" addthis:url="http://www.allaboutmidleton.ie/#/article/{article_id}" addthis:title="Tweet by {user}" addthis:description="{tweet}">
<li><img src="/assets/img/ico-email.png" width="26" height="23" border="0" alt="Email" /></li>
<li><a class="addthis_button_tweet"></a></li>
<li><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></li>
</ul>
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=username"></script>
<!-- AddThis Button END -->
<div class="sidebar-ads">
<ul class="advertising-ad-list">
<li>Advertisement</li>
<li>Advertisement</li>
<li>Advertisement</li>
</ul>
</div>
</div>
</div>
All of this code works fine outside of the modal. Does anyone know a way to run the script inside the modal.
Thanks
What is $App.setLocation('#/'); doing?
I don't see any reason why it wouldn't work, but intended the onClose callback to be used mainly for closing animations.
My suggestion would be to use the onShow callback and bind your own function to the "close" event. For example:
$('#modal').modal({
onShow: function (dialog) {
$('.close', dialog.data[0]).click(function () {
$App.setLocation('#/');
$.modal.close();
return false;
});
}
});
SimpleModal is more powerful than, I would like to believe, even Eric Martin knows.
Create your modal hidden div within your main document;
Create WHATEVER FULL HTML/ASP/JAVASCRIPT page you want to process in that modal;
Load the hidden div with the HTML/ASP/JAVASCRIPT page using jquery.load();
Display the modal