I bought a html template in themeforest and customized. It has a slider with 3 images. I want to stop the slider after completing 1 loop.
<div id="slider" data-auto="true">
<div id="slide1"><img></div>
<div id="slide2"><img></div>
<div id="slide3"><img></div>
</div>
Now I want to change parent div's attribute to false when slide3 div loads. I'm trying this now.
<script>
$(document).ready(function(){
$("#slide3").load(function(){
$("slider").attr("data-auto", false);
});
});
</script>
I believe data-auto tag simply starts the slider automatically. try searching options like loop: into the js init script to disable slider looping
Related
I am working on a website in which I want to hide next and previous buttons when there is only one image on the carousel and show next and previous buttons when there are multiple images.
The php code which I have used which I have used in order to rendered multiple images at the front end are:
<div class="col-9 text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->gallery))
{
foreach ($data['item']->gallery as $gallery)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$gallery->url.'">
</div>
</div>';
//'.$gallery->url.';
}
}
?>
</div>
</div>
Problem Statement:
I am wondering what carousel code I need to add so that next and previous buttons show up when there are multiple images, and no next and previous buttons show up when there is single image.
What I have tried:
<script>$('#owl_item_images').owlCarousel({nav : false});</script> By using that, all images get visible (with images lining up side by side) inside the carousel.
I also tried with the following code:
$('#owl_item_images').trigger('change.owl.carousel', { nav: true }); but it didn't work as well.
Not tried it but this should do the trick:
if(size($data['item']->gallery)<=1)
{
echo "<script>
$(function(){
$('#owl_item_images').owlCarousel({nav : false});
});
</script>";
}
put this after foreach loop
If I am not missing something, what you asked for is pretty much out of the box.
if you set nav:true owl.carousel itself will show navigation if there is more than one item, and no navigation if there is only one item, as seen in that pen:
https://codepen.io/optionsit/pen/BPGzvV
what version of owl.carousel are you using? and do you have anymore markup in your carousel?
You can count the number of images in the carousel using jQuery. Then, only show the nav if there is more than one image.
Try this:
<script>
var imageCount = $('#owl_item_images .item_images_carousel').length;
var showNav = false;
if (imageCount > 1) showNav = true;
$('#owl_item_images').owlCarousel({nav : showNav});
</script>
I have multiple divs as follows -
<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
...
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>
Content of divs is loaded through mysql.
I want to display only one div at a time, rest are hidden. There are Navigation buttons to update the display of Next/Previous div.
So far I am hiding all the div in $(document).ready as follows -
<script>
$(document).ready(
function() {
var a = 2, max = 150;
while (a <= max)
{
$('#' + a).hide();
a++;
}
});
</script>
But, the problem in using this is, until the page is loaded completely, all divs are shown.
Page appear perfectly fine once everything is loaded.
How can I delay the display or something like that to avoid this. Also, if possible, how to show the custom wait message, "Loading. Please wait" until page is loaded 100%, for the awareness of viewer.
(p.s. I am tagging html, jquery, javascript and php, because honestly I don't know which one these would be the best to correct my problem)
Thanks.
You could hide the elements via CSS, and then, after the whole page is loaded, display the first one.
Regarding the loading message, add an element containing it, which you can hide (or remove) as soon as the page is fully loaded.
HTML:
<div id="loading">Loading, please wait...</div>
<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>
CSS:
.divs_nav {
display: none;
}
JavaScript:
$(document).ready(function(){
$('#loading').hide();
$('.divs_nav').first().css('display', 'block'); //or whatever display value you want
});
DEMO: http://jsfiddle.net/Zzg5M/
I have a parent div that is initially hidden. Inside the div I have an easyui accordion div. When I called the show() method on the parent div, the easyui div displays with a width of 0px. If the div isn't initally hidden, it calculates a width fine.
Does anyone know the proper way to initially hide a div and then when showing it calculate the proper width?
<div id='masterDiv' style='display:none;'>
<div class="easyui-accordion" style='height:475px;' data-options="border:false" >
<div title="Overview" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Checklist" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('#masterDiv').show();
});
</script>
hey i ran into the exact same problem for the exact same reason as the comment you made. I ended up doing the display:none then manually added each css change that was made. First i made the masterDiv into a class
$('.masterDiv').css("display", "block");
$('.masterDiv' .accordian).css('width', '300px);
accordian being whatever the class easyUI set to a width of 0px. It ended up being a lot of css code but it works until Jquery EasyUI can come up with something.
Why you are hiding the div, if it has to be shown after pageload ?
Did you try
document.getElementById("masterDiv").style.display="block";
I have been trying to get a jQuery slideshow (on click) working for a while now and can't figure out where I'm going wrong. I'm working with Ryan Florence's jQuery slideshow nav here:
http://ryanflorence.com/jquery-slideshow/demos/slideshownav/
I've put together a jsFiddle here:
http://jsfiddle.net/hAvXt/3/
I've made sure to include the jQuery UI. There are three javascript files incorporated in his example on his site (demo.js, jquery.rf.slideshow.js, jquery.rf.slideshownav.js). I've taken them all and put them into the javascript section of the JSFiddle.
Basically, when I click on the correct button, it updates the 'slideshow' div to the right content but it's not giving me the transition. At first I thought it was because I was using 'divs' instead of images but I've used his simpler slideshows in the past with divs and it works fine. Thanks so much for the help.
This is my nav bar:
<div class="slideshow" id="slideshow" style="width:1105px; height:1402px;">
<div id="red" style="background-color:red;height:1402px; width:1105px;">TEST 1</div>
<div id="green" style="background-color:green;height:1402px; width:1105px;">TEST 2</div>
<div id="blue" style="background-color:blue;height:1402px; width:1105px;">TEST 3</div>
</div>
And this is the implementation of the jQuery function:
$(function(){
$('#slideshow').slideshownav({
transition: 'push(#{direction})',
mode: 'vertical',
navSelector: '> ul > li > a',
duration: 400,
autoPlay: false
});
});
I had it set up weird (for anyone who has this problem in the future). With that slideshow, the actual anchor href doesn't do anything which was confusing in the source code on the site for this demo.
It has to do with the order of the anchor tags and the order of the slides. The first one corresponds to the first one, etc.
I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.
Fiddle: http://jsfiddle.net/gentrobot/9b5Xg/3/
HTML:
<div style="position:relative;width:400px;height:100px;overflow:hidden;">
<div id="1" style="width:200px;float:left;position:absolute;left:0px;">
Test
</div>
<div id="2" style="width:200px;float:left;position:absolute;left:200px;">
<!-- Drag Slider div starts -->
<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>
<!-- Drag Slider div ends -->
</div>
</div>
Click to slide
jQuery(other than JS for Dragdealer):
$('#clk').click(function(){
$('#1').animate({left:'-200px'});
$('#2').animate({left:'0px'});
});
It works if you drag it to the right long enough, where it used to be before.
What you can have though is specifying a callback parameter that reinitializes the thing.
$('#2').animate({left:'0px'}, function(){
new Dragdealer('my-slider');
});
Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.
$('#2').animate({left:'0px'}, function(){
var t = $(this);
var random_placeholder = $('<div></div>').insertBefore(t);
$(this).insertAfter(random_placeholder);
random_placeholder.remove();
new Dragdealer('my-slider');
});