I use the unslider.js slider script.
By the way I can recommend it to everyone.
I'm trying to add an 'to next slide' button inside a slide.
First I added the same class to the button as the class from the next arrow link. But it doesn't work.
Is there a possibility to do this?
Thank you
**JS**
var unslider = $('.banner').unslider({
complete: function() {},
keys: true,
dots: false,
fluid: false,
nav: false
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
unslider.data('unslider')[fn]();
});
**HTML snippet**
To next slide
http://jsfiddle.net/qATC9/45/
first you need to set an href like this:
To next slide
to prevent navigation. Then in jQuery
$('.unslider-arrow').click(function() {
unslider.data('unslider').next();
});
see updated FIDDLE
May be this will help you
just use this code
<div class="row">
<div class="col-md-12">
<div class="banner-wrapper">
<div class="banner">
<ul>
<li> To next slide<img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li>
<li> To next slide<img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li>
<li> To next slide<img src="https://picjumbo.imgix.net/HNCK0785.jpg?q=40&w=1650&sharp=30" /></li>
</ul>
<div class="banner-controls">
←
→
</div>
</div>
</div>
</div>
Check it here on FIDDLE
Related
I am trying to achieve flexslider on in riotjs app. The slider is working fine but when I set custom item width for the slider, it doesn't. According to docs, it is supposed to work.
self.on('updated', function(){
$('.flexslider').flexslider({
animation: "slide",
// itemWidth: 210,
// itemMargin: 5,
controlsContainer: ".flex-container",
start: function (slider) {
$('.total-slides').text(slider.count);
},
after: function (slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
riot component:
<rsc-component id="dropBox" class="mybox col-lg-12">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../images/slide1.jpg" alt=""/>
</li>
<li>
<img src="../images/slide2.png" alt=""/>
</li>
</ul>
</div>
</rsc-component>
Give you flexslider a name, and refer to it internally, rather than hunting for it using jquery.
<rsc-component id="dropBox" class="mybox col-lg-12">
<div class="flexslider" name="flexslider">
<ul class="slides">...</ul>
</div>
<script>
...
//store reference to flexslider
this.on('mount',function(){
this.$flexslider = $(this.flexslider); // from the name property in template
});
this.on('updated',function(){
// I would have at a guess that the flexslider needs to recalc itself, so
// destroy it and regenerate.
this.$flexslider.detach().flexslider({...})
});
</script>
</rsc-component>
I have a home page having fadeslideshow with 5 slides. The plugin used for slideshow is http://plugins.jquery.com/project/fadeslideshow.
In the home page i also have Menu bar with menu items in it. When user clicks the menu item the slideshow content should be removed and one more slideshow should be added with menu items content. One more problem is, I need autoslideshow true for home page, but false for menu items slideshow. So i need to call slideshow.js file twice in the jquery. I tried with this but its not working.
The jquery code where i am calling the plugin. This is used for home page.
slide=jQuery('#slideshow').fadeSlideShow(
{width:936, height:476, autoplay:true});
When user clicks menu item the '#slideshow' content will be removed and menu items div will be loaded.
$('ul.dropdown-menu li a').click( function(event) {
$('#slideshowWrapper1').empty().load('test.html');
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = $(this).attr('id');
alert(newTopicContent);
});
The code for home page with 5 slideshow
<div id="slideshowWrapper1">
<div id="slideshow" class="slides">
<div class="5">
<div class="txtCenter" > <p> This is 5th slide</p></div>
</div>
<div class="4">
<div class="txtCenter" >
<img src="images/new/home4.png" alt="" /></div>
</div>
<div class="3">
<div class="txtCenter" ><p>This is third slide</p></div>
</div>
<div class="2">
<div style="text-align: center;margin-top: 2%;"><img src="images/new/some.png" alt="" /></div>
<br style="clear:both;"/>
</div>
<div class="1">
<div><img src="images/new/recreate.png" alt="" /></div>
<br style="clear:both;"/>
</div>
</div>
</div>
The test.html page has different contents for menu items. Here in my code the first slideshow is working very fine. But after clicking the menu item slideshow is not working. All slide contents coming in the same page.
I need help. Thanks in advance!!
If i understand correctly, you want to remove the first slideshow to replace with a new slideshow returned via test.html ?
I think you must wait for test.html to be load using load(url, callback)
see http://api.jquery.com/load/
$('ul.dropdown-menu li a').click( function(event) {
var id = $(this).attr('id');
$('#slideshowWrapper1').empty().load('test.html', function() {
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = id;
alert(newTopicContent);
});
});
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
I have a code that goes like this on HTML:
<div class="blog_highlight">
<ul class="calendar">
<li>Nov</li>
<li>25</li>
</ul>
<ul class="commentaries">
<li>16</li>
</ul>
<div class="entry_info">
<div>
<img src="images/blog_pix_1.jpg" width="230" height="210" alt="" />
</div>
<h2>Title</h2>
<p>Text</p>
<p>Leer mas</p>
</div><!-- end entry info -->
</div><!-- end blog highlight -->
I would like to achieve that on hover on the UL (with classes calendar and commentaries), the border color for div.entry_info and background of a.read_more changes via jQuery. This is what I have however the second one isn't working.
<script>
$(document).ready(function(){
$('ul.calendar').hover (
function () {
$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');
},
function () {
$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('a.read_more').removeClass('read_more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');
});
});
</script>
My current issue is that everything except the second line works.
This is the line with the issue:
$(this).nextAll('a.read_more').addClass('more_jquery');
I am fairly new to jQuery and have tried siblings and next and everything but it won't work. I tried with eq(0) which worked but how do I loop it? The reason I go with classes and not ID is because this is a box that gets repeated multiple times.
Thank you for you help.
Why not simply use CSS?
ul.calendar:hover ~ .entry_info {
// selects all .entry_info's which are on the same level (siblings) as the ul.calender which is hovered over
}
BTW I'm sure that jQuery's magic $-function also supports the general sibling combinator, so $("item ~ sibling") should work just fine:
$("...").hover(function() {
$("... ~ siblings");
}
See:
http://www.w3.org/TR/selectors/#sibling-combinators (selectors CSS 3)
http://api.jquery.com/category/selectors/ (selectors CSS 1 - 3 are supported)
It does not work because nextAll gets all siblings based on the selector. Your hyperlink is not a sibling. Instead you can use find to search entry_info for the link.
http://jsfiddle.net/U7hNS/
<ul class="calendar">
<li>Nov</li>
<li>25</li>
</ul>
<div class="entry_info">
<p>Leer mas</p> <!-- NOT A SIBLING! -->
</div>
$('ul.calendar').hover (
function () {
$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');
},
function () {
$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');
});