We Keep Coding

bxslider stop on mouse hover custom pagination

I have a bxSlider on my webpage.
I'm trying to stop slider when mouse hover my custom paginator.
Here is my html:
<ul id="slider">
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
</ul>
<!-- Paginator -->
<ul id="slider-paginate" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
</ul>
And here is my js;
// Main Slider
var slider = jQuery('#slider').bxSlider({
auto: true,
speed: 500,
delay: 5000,
autoHover: true,
stopAuto: false,
pagerCustom: '#slider-paginate'
});
Here is what i've tried so far:
$(document).on('hover','#slider-paginate',function() {
slider.stopAuto();
slider.startAuto();
});
Unfortunately it didn't work. What am i missing? What is wrong with my javascript code?
How can i stop bxslider when mouse is hover on paginator elements?

I found answer myself;
i used 2 events;
First one for hover and other for mouseleave
Solution:
$('#slider-paginate').hover(function(){
slider.stopAuto();
});
$('#slider-paginate').mouseleave(function(){
slider.startAuto();
});

Scroll to anchor within div of set height

I am hoping somebody can help me out with my Javascript. The JSFiddle shows you how far I have got, I'm not far off...but I am basically trying to get the content of the enclosed DIVs to align to the top of the '.news_window' box when the nav is clicked.
http://jsfiddle.net/s5sxa0sk/2/
I realise that the scrollTop going to 'this' is incorrect, but I don't know how else to proceed.
Any input would be very much appreciated.
The HTML:
<ul class="news_archive">
<li class="active">December</li>
<li>November</li>
<li>October</li>
</ul>
<div class="news_window">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
The Javascript:
<script>
$(".news_archive li").click(function(e){
e.preventDefault();
$('.news_window').animate({scrollTop:$(this).position().top}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).addClass('active');
});
</script>

Your main issues is you're using the #new_archive link's top position to animate the scroll instead of the #news_window item's top position. You need to find the #news_window element based on which link is clicked and use that element's position().top.
You will also need a wrapper around the #news_window items otherwise each element's position().top will change based on the current scroll position of the #news_window element. This wrapper will need position: relative set.
Here's what I mean:
<ul class="news_archive">
<li class="active">
<a data-id="dec_2014" href="#">December</a>
</li>
<li>
<a data-id="nov_2014" href="#">November</a>
</li>
<li>
<a data-id="oct_2014" href="#">October</a>
</li>
</ul>
<div class="news_window">
<div class="wrapper">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
</div>
And the Javascript:
$('.news_archive li a').click(function(e) {
e.preventDefault();
var newsWindowEl = $('#'+$(this).data('id'));
$('.news_window').animate({
scrollTop: newsWindowEl.position().top
}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).parents('li').addClass('active');
});
Here's a working version of your fiddle: http://jsfiddle.net/s5sxa0sk/42/

How to implement the jquery page transition?

I am developing phonegap application . I want to add native slide page transition while switching the pages. I am not using jquery mobile. Instead of that I am using the bootstrap . But the problem is there is nothing for page transitions in the bootstrap. so is there any way in jquery or javascript using which it can be implemented in the application.I have searched a lot but all the example are only for the div transitions .

You can use a CSS library called Animate.css (http://daneden.github.io/animate.css/). You can add animation classes to the pages & slide then in left & right. I had some time so made a working demo of how it will work -
WORKING DEMO - http://codepen.io/nitishdhar/pen/FIzst
So basically I have created a page structure & on click on page links, I am assigning them the required class for the slide effect. This also handles next & previous page handling so if you move from 1st page to 2nd, the slide would be from right to left & if you go from 2nd to 1st the slide would be left to right.
HTML Structure
<ul class="nav navbar-nav">
<li><a class="page-link" href="#" data-page="1">Page 1</a></li>
<li><a class="page-link" href="#" data-page="2">Page 2</a></li>
<li><a class="page-link" href="#" data-page="3">Page 3</a></li>
</ul>
<div class="container">
<div class="page active" id="page-1" data-page="1">
<h1>Page 1</h1>
<p>
Next »
</p>
</div>
<div class="page" id="page-2" data-page="2">
<h1>Page 2</h1>
<p>
« Prev
Next »
</p>
</div>
<div class="page" id="page-3" data-page="3">
<h1>Page 3</h1>
<p>
« Prev
</p>
</div>
</div> <!-- /container -->
jQuery Code
$(document).ready(function(){
$('.page-link').click(function(){
var goToPage = $(this).data('page');
var nextPage = $('#page-' + goToPage);
var currPage = $('.page.active');
if(goToPage > currPage.data('page')) {
currPage.addClass('animated slideOutLeft');
nextPage.addClass('active animated slideInRight');
} else if(goToPage < currPage.data('page')) {
currPage.addClass('animated slideOutRight');
nextPage.addClass('active animated slideInLeft');
}
currPage.removeClass('active animated slideInRight slideInLeft slideOutRight slideOutLeft');
});
});

How to use Snap.js panels with jQuery Mobile?

Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});

I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});

As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa

Hide current tab and display the next tab based on href?

I am trying to hide the current tab which is displayed and fadein the new tab based on its href using jquery...
Here is my HTML
<div id="leader">
<ul id="llist">
<li class="t current"><span>sage solutions</span></li>
<li class="m"><span>credit mangement solutions</span></li>
<li class="b"><span>third party additions</span></li>
</ul>
<div id="lcontent">
<div id="solutions" class="tab">
<h2>Title</h2>
Description
</div>
<div id="management" class="tab">
<h2>Title</h2>
Description
</div>
<div id="thirdparty" class="tab">
<h2>Title</h2>
Description
</div>
</div>
</div>
And the JQUERY (which also slides an image to the tab which is selected)
$('#leader #llist li').click(function() {
$('#leader #llist li').removeClass('current');
var thisTop = $(this).offset().top;
$('.pointer').animate( {'top': thisTop} );
$(this).addClass('current');
$('.tab').fadeOut();
});
The current tabs dont currently fadeout or fadein when the links in the list are clicked...any help would be appreciated.

Here is an example of what I think you are looking for.
http://jsbin.com/iceli4/edit
Hope this gets you started.
Bob