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.
Related
How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution
<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.
Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}
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
});
How can I display each content in twitter bootstrap pagination? I can only display the first content. I used tag to display the contents but I don't know how to get all the element ids.
Here is the javascript code that get the element id to display it in pagination:
<div class="container">
<div class="row-fluid">
<div class="bs-docs-example">
<p class="well demo content1">
Dynamic content here.
</p>
<p class="demo demo1"></p>
</div>
<!-- Demo time! -->
<script type="text/javascript">
var pageNumber = 0;
$('.demo1').bootpag({
total: '${count}',
page: 1
}).on("page", function(event, num){
$(".content1").html(document.getElementById("child")); // or some ajax content loading...
$(this).bootpag({total: '${count}', maxVisible: '${count}'});
});
</script>
</div>
</div>
Here is the code the generates the dynamic data in gsp page:
<g:each var="item" in="${faxDocument}">
<div id="child">
<center><img src="data:image/png;base64, ${item} " width="850" height="1200" /></center>
</div>
</g:each>
i think with twitter bootstrap you dont need no js at all, try to generate the pagination "by hand" sth. like:
<ul class="pagination">
<g:each in="${1..count}" status="i" >
<g:if test="${i == offset}>
<li class="active">${i}</li>
</g:if>
<g:else>
<li>${i}</li>
</g:else>
</g:each>
</ul>
Simple solution would be to add the missing classes and tags via jQuery e.g.
// Fix pagination
// Wrap all direct children into a list element
$('ul.pagination >').wrap('<li class="page-item"></li>');
// add the missing class to the href tags
$('ul.pagination li a').addClass('page-link');
// Handle active element
$('span.currentStep').parent().addClass('active');
I have a banner made out of JavaScript wherein when you hover a particular text the image in the banner changes.
I was wondering how to make it compatible in ie8..
I used this tutorial to come up with the js:
http://www.javascriptkit.com/script/script2/rolldifferent.shtml
I'm also trying to mouse out too then the image will change.
Here are the js codes:
<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>
<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>
Here is the css:
<div id="base"><div id="mapcontainer"><img src="map_wm.gif" name="targetimage" border=0></div>
<div id="textcontainer"><div class="textboxinner1">8CCC REQUESTS/TALKBACK</div>
<div class="textboxinner2">Alice Springs 8952 7771</div>
<div class="textboxinner2">Tenant Creek 8952 7182</div>
<div class="textboxinner3"><span class="t3nonelink">...other contact details here</span></div>
I believe this is an issue with IE where animated gifs are not loaded properly in javascript. A workaround is to put the images in a hidden div in the HTML code instead of loading them in the script. A positive side-effect is that this greatly simplifies the javascript. See http://jsfiddle.net/5pZLT/7
HTML:
<DIV id=base>
<DIV id=mapcontainer><IMG border=0 name=targetimage src ="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif"> </DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1><A onmouseover=changeimage(2,this.href)
href="index.html">8CCC REQUESTS/TALKBACK</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(1,this.href)
href="index.html">Alice Springs 8952 7771</A> </DIV>
<DIV class=textboxinner2><A onmouseover=changeimage(0,this.href)
href="index.html">Tenant Creek 8952 7182</A> </DIV>
<DIV class=textboxinner3><SPAN class=t3nonelink>...other contact details <A
onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV></DIV></DIV><div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
By the way there were lots of ;s missing in your original code which would tend to stop it working.
Here is my accordion how can i apply some stylesheet to this, so that looks like a tree.
eg: + when accordion tab is closed and - when accordion is open
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showPatchesSpan();">Patches</a><br/>
<a onClick="showNetworkSpan();">Network</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" > <a onClick="showNone();">User Environment</a></div>
<div class="AccordionPanelContent">
<a onClick="showEnvironmentVariableSpan();">Environment Variables</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">{mainData::#product}</a></div>
<div class="AccordionPanelContent">
<a onClick="showOdbcSpan();">ODBC</a><br/>
<a onClick="showBitmodeSpan();">Bitmode</a><br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
If you look in the SpryAccordion.css stylesheet you will find
.AccordionPanelTab {}
.AccordionPanelOpen .AccordionPanelTab {}
You can set whatever background image you like on those two to get the effect you are after .AccordionPanelTab will affect the normal state and .AccordionPanelOpen .AccordionPanelTab will affect the open state. There are also comments in the stylesheet telling you what the different classes do.
use css background image propeties and apply it to proper css class when its open and closed.