Hey guys I have a problem with uikit slideshow + angularjs. When I am using ng-repeat trying to bring all images to uk-slideshow then images are not showing. Is there someone has similar problems? When I remove ng-repeat tag from div images are coming back. I am very confused right now.
<div class="uk-width-1-2" ng-repeat="property in properties">
<div class="uk-slidenav-position" data-uk-slideshow="{animation: 'scroll'}">
<ul class="uk-slideshow">
<li ng-if="property.pictures.length > 0" ng-repeat="pp in property.pictures">
<img src="../img/2_wide.jpg" />
</li>
</ul>
</div>
</div>
Just add "data-uk-check-display"
<div class="uk-slidenav-position" data-uk-slideshow="{animation: 'scroll'}" data-uk-check-display>
Related
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
Hi I hope someone can help with this. I'm building a wordpress plugin. I just have basic knowledge of php and i managed to build the whole plugin except pagination. I have tried so many code using javascript but none is working for me. Here is the image. I want to divide the items with pagination
Thank you in advance!
A good approach will be to think about the pages like tabs. Then the page link will behave like buttons that show/hide based on the page link clicked.
Here's an example using jQuery
// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
// Save the page number that was clicked
var pageNum = $(this).data('page-id')
// Hide any open 'pages'
$('.page-content').hide();
// Find and show the selected page
$('[data-page=' + pageNum + ']'').show();
});
For this to work, you'd need a HTML structure a bit like this
<!-- The Page Link -->
<div>
<ul>
<li class="page-link" data-page-id="1">Page 1</li>
<li class="page-link" data-page-id="2">Page 2</li>
<li class="page-link" data-page-id="3">Page 3</li>
</ul>
<!-- The Page Content -->
<div class="page-content" data-page="1" style="display: none;">
Page 1 content
</div>
<div class="page-content" data-page="2" style="display: none;">
Page 2 content
</div>
<div class="page-content" data-page="3" style="display: none;">
Page 3 content
</div>
</div>
Here is a super basic jsfiddle
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
Here's the code I used:
<div style="top-buttons">
<img src="images/sandwich.gif" class="sandwich" width="30" height="30">
</div>
<ul id="tinyDrop" class="f-dropdown" data-dropdown-content>
<hr>
<li class="navitem"><img src="images/group-25.png"/> Trends / Activity</li>
<hr>
<li class="navitem"><img src="images/settings2-25.png"/> Settings</li>
<hr>
<li class="navitem"><img src="images/help-25.png"/> Help</li>
<hr>
<li class="navitem"><img src="images/star-25.png"/> Rate Clustir</li>
<hr>
<li class="navitem"><img src="images/exit-25.png"/> Logout</li>
<hr>
</ul>
I also tried specifying a class (open) which is supposed to be added when the user taps/clicks the button:
<script>
$(document).foundation({
// specify the class used for active dropdowns
active_class: 'open'
});
</script>
with the following css to see if this class can even do anything. It looks like it's not even being utilized.
.open{
display:none;
}
Any ideas how I can fix this probably with jquery or a better css. I hope this is not a Foundation bug.
Are you on Foundation 5? I noticed after upgrading from 4 to 5 that you need the "data-dropdown-init" attribute on the parent element as shown below
<img src="images/sandwich.gif" class="sandwich" width="30" height="30">
Without the above modification, I see javascript errors in the console complaining about undefined properties in foundation.dropdown.js.
I am looking for a hint on how to handle a strange effect on rerendering a datagrid. I have the following grid structure:
<rich:dataGrid id="allProductsGrid" value="#{allProducts}" var="_product">
<s:div styleClass="grid-element">
<s:link view="/product.xhtml">
<s:div styleClass="product-element">
<h:graphicImage value="/content/images?id=#{_product.image.id}&width=170"/>
</s:div>
<div id="title">
<h:outputText value="#{_product.name}" />
</div>
<f:param name="productId" value="#{_product.id}" />
</s:link>
</s:div>
</rich:dataGrid>
The grid gets reRendered on a onkeyup-event fired by an search input field. No magic so far. Now the problem is that the reRendering changes the structure of the html produced (DOM). As a result the links are not working anymore.
The firebug-html-inspect on the first rendering of the page is as follows:
<div id="j_id86:allProductsGrid:0:j_id124" class="grid-element">
<a id=".. " onclick=".." href="/portal/product.vc?productId=22&cid=69">
<div id="j_id86:allProductsGrid:0:j_id126" class="product-element">
<img src="/portal/content/images?id=&width=170">
</div>
<div id="title">Sample Product</div>
</a>
</div>
After reRendering the grid the html output is that:
<div id="j_id86:allProductsGrid:0:j_id124" class="grid-element">
<a id=".." onclick=".." href="/portal/product.vc?productId=22&cid=76"></a>
<div id="j_id86:allProductsGrid:0:j_id126" class="product-element">
<img src="/portal/content/images?id=&width=170">
</div>
<div id="title">Sample Product</div>
</div>
The result is that the a-tag is not wrapping the product-element anymore. Can anybody give me a hint on what might be wrong here??
Any help appreciated.
Thanks in advance.
josh
ps: using Seam 2.2.2 / JSF Mojarra 2.0.3 / RichFaces 3.3.3
Make sure your allProducts bean has ViewScope instead of RequestScope. So in rerender the data will persist in the call.