Develop Reference

The effct of hide of jquery ui can not work

I chose jQuery UI in my project. I had defined two dialogs(dialogDIV and dlgTrn). Both show and hide of dialogDIV works fine, and show of dlgTrn works fine also.
But hide of dlgTrn works fail. When closing it, it has no explode effect.
Here is my js code:
$(function(){
$("#dialogDIV").dialog({
autoOpen:false,
height:500,
width:800,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#dlgTrn").dialog({
autoOpen:false,
height:250,
width:400,
show: {
effect:"blind",
duration:1000
},
hide: {
effect:"explode",
duration:1000
}
});
$( "#tabs" ).tabs({
});
});
Here is my html code:
<div id="dialogDIV" class="DIV">
<div class="div1"></div>
<div id="tabs" class="div2">
<ul>
<li>a</li>
<li>b</li>
</ul>
<div id="tabs1" style="height:70%;"></div>
<div id="tabs2" style="height:70%;"></div>
</div>
</div>
<div id="dlgTrn" title="stTrn"></div>
It is very strange. Who can help me ?

Slick slider - Adding active class to first < a > in currently open foundation tab

Trying to add an active class to the first a tag within a selected tab.
My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab2</li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>

Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.
So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)
// create a new jQuery function
$.fn.extend({
createTabSlider: function() {
var $self = $(this)
// $self is the tab, to get an element you DONT use $('something')
// you use $self.find("something")
var $slideshow = $self.find(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
})
$self.find(".links").on("click", "a", function(e) {
var slideIndex = $(this).closest("li").index()
$slideshow.slick("slickGoTo", slideIndex)
})
$slideshow.on("afterChange", function(event, slick, i) {
$self.find(".links li a").removeClass("slick-current")
$self.find(".links li a").eq(i).addClass("slick-current")
})
$self.find(".links li a").eq(0).addClass("slick-current")
}
})
// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()

You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.

Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using ids.
var $slideshow1 = $("#slider1").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
var $slideshow2 = $("#slider2").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
You should still be able to hook in your events to both at once using the classes though.

Use Owl Carousel Url Hash Navigation to Change Button Style

Here is my owl carousel HTML and javascript.
HTML:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" data-hash="slide1">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide2">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
<div class="item" data-hash="slide3">
<img src="images/mainslider.png">
<h1>Heading</h1>
<p>Paragraph Text</p>
</div>
</div>
JavaScript:
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
URLhashListener:true,
autoplayHoverPause:true,
startPosition: 'URLHash'
});
I have a navigation block below it that uses Url Hash Navigation.
<nav class="navbar navbar-default secondary-navbar">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
</div>
When a slide is clicked to or comes on screen, I need the corresponding link to change it's styles to show it is the one currently active.
I haven't found any native way to do this in Owl Carousel and wasn't sure how to accomplish this with Javascript

After playing around for a long time, I came up with the solution.
Add #link as class in hash navigations, and one more additional class in this case "slidetabs" e.g. <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
Get the current slide item and then its data-hash
Feed that data hash as a class in on changed function for adding class to navigation button
Then repeat same for change event to remove active class
Add a css to .slidetabs.active
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.
following is the full code:
Slider HTML:
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">
<div class="item" data-hash="cowboy_coaster">
<!-- Slide Content -->
</div>
</div>
<div class="owl-item">
<div class="item" data-hash="night_tubing">
<!-- Slide Content -->
</div>
</div>
<!-- . -->
<!-- . -->
<!-- . -->
<!-- . -->
</div>
</div>
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev">
<img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
<div class="slider-counter">1 / 4</div>
</button>
<button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
<ul>
<li>
<a class="dining slidetabs active" href="#dining">DINING</a>
</li>
<li>
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
</li>
<li>
<a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
</li>
<li>
<a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
</li>
</ul>
</div>
Javascript:
jQuery(document).ready(function($) {
$('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
if (!e.namespace) {
return;
}
var carousel = e.relatedTarget;
$('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
}).owlCarousel({
nav:true,
navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
loop:true,
slideSpeed : 300,
paginationSpeed : 400,
items:1,
dots:false,
URLhashListener:true,
startPosition: 'URLHash',
autoplay:true,
autoplayTimeout:9000,
autoplayHoverPause:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:true
},
1000:{
items:1,
nav:true
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).addClass('active');
});
$('.owl-carousel').on('change.owl.carousel', function(event) {
var current = event.item.index;
var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
$('.'+hash).removeClass('active');
});
});
CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}

Owl Carousel supports this natively, see here in the docs:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

toggle opacity and reload div

I have a tabbed system on my page. Currently when clicked the opacity is toggled to show that div using:
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'slow'} });
which is loaded in a javascript in the head of the page. I am trying to add an on-click event handler so that the div is also reloaded but it is having no effect, how can I get it to do both?
<div class="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
<div class="clear"></div>
<div class="bordered_box">
<div id="tabs-0"><?php include('timesheets.php'); ?></div>
<div id="tabs-1"><?php include('abscencerequestform.php'); ?></div></div>
<div id="tabs-2"><?php include('abscencerecords.php'); ?></div>
</div>
<script type="text/javascript">
$(function () {
$("a#tabs-0").on("click", function () {
$("#tabs-0").load("timesheets.php");
});
$("a#tabs-1").on("click", function () {
$("#atabs-1").load("abscencerequests.php");
});
$("a#tabs-2").on("click", function () {
$("#atabs-2").load("abscencerecords.php");
});
});
</script>

If I understand correctly, you want to have the tab content reloaded as you select each tab?
Just point your tabs directly to the PHP content, which will force load it each time the tab for a particular page is clicked. JQuery will build the panels for you, so you only need this code below instead of the contents of <div class="bordered_box"> :
<div id="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
</div>
This is just a simulated example, since I can't load active PHP scripts here:
$(function() {
$( "#tabs" ).tabs({
fx: { opacity: 'toggle', duration: 'slow'},
activate: function(event ,ui){
//console.log(event);
alert("Simulating refreshed PHP content in Tab #" + ui.newTab.index());
}
});
});
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
</div>

I don't know much about PHP, but I do know that jQuery can chain methods, try this:
$('#tabs').tabs(function(event) {
fx: { opacity: 'toggle', duration: 'slow'};
$(this).find('a').bind('click', function(event) {
var link = $(this).attr('href');
$(window).load(link);
});
event.stopPropagation();
});
I'm sure there's something that's not right...

jQuery Mobile iScroll5 Bind

I have a simple jQuery Mobile example with 2 pages and listviews. I'm trying to figure out the best way to bind iScroll. Please checkout my pen below. Currently I've included iScroll but I'm not sure how to properly bind and refresh
http://codepen.io/aherrick/pen/LzCFJ
HTML:
<div id="first" data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>iScroll-ify Me Please!</h1>
</div>
<div role="main">
<div id="scroll-wrap">
<ul id="my-list" data-role="listview"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div id="second" data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Home
<h1>Scroll Me <span id="id"></span></h1>
</div>
<div role="main">
<div id="scroll-wrap2">
<ul id="my-list2" data-role="listview"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
JS:
$(function () {
$.mobile.paramsHandler.addPage('second', ['id'], null, secondLoad);
$.mobile.paramsHandler.init();
});
$(document).on('pageinit', '#first', function() {
// simulate an AJAX call
setTimeout(function() {
var text = '';
var list = $('#my-list').empty();
for (i = 0; i < 100; i++) {
text += '<li>data loaded from AJAX '+i+'</li>';
}
list.append(text).listview('refresh');
}, 1000);
});
function secondLoad(parms) {
$('#id').text(parms.id);
// simulate a long AJAX call
setTimeout(function() {
var text = '';
for (i = 0; i < 100; i++) {
text += '<li><img src="http://images.nike.com/is/image/DotCom/THN_PS/Nike-Strike-Football-SC2140_144_A.jpg?fmt=jpg&qty=85&wid=620&hei=620"><h2>data loaded from AJAX '+parms.id+'</h2></li>';
}
$('#my-list2').empty().append(text).listview('refresh');
}, 2500);
}
function initScroll(elmId) {
var $this = $(elmId);
$this.css('position', 'absolute')
.css('overflow', 'hidden')
.css('top', '0')
.css('bottom', '0')
.css('left', '0')
.css('width', '100%');
return new IScroll($this.get(0), {
eventPassthrough: false,
scrollX: false,
scrollY: true,
preventDefault: false,
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'clip',
useTransition: false,
bindToWrapper: true,
bounceEasing: 'elastic',
bounceTime: 1200,
probeType: 3, // watch the scroller
fadeScrollbars: false
});
}

How about right after appending the listitems and refreshing the listview:
list.append(text).listview('refresh');
var page1Scroll = initScroll("#scroll-wrap");
and
$('#my-list2').empty().append(text).listview('refresh');
var page2Scroll = initScroll("#scroll-wrap2");
Updated PEN