slides.js has virtually no documentation. I've got it set to automatically change the slide, and have the prev/next buttons hidden. Is there a way to also hide the "stop/play" button?
$(function () {
$("#slides").slidesjs({
play: {
active: false, /* this hides the stop/play button */
auto: true,
interval: 5000,
swap: true
}
});
});
use display none property of css
for example if your play button class is ".play" then put in css
.play
{
display:none;
}
Related
I have a hidden menu on the right of the screen, it shows and hide by clicking a button.
function open_menu() {
document.getElementById('slide').innerHTML = "<a href='javascript:clo_menu()'></a>";
}
function clo_menu() {
document.getElementById('slide').innerHTML = "<a href='javascript:open_menu('></a>";
}
Right now it fades and all I want is to slide from right (out of the screen). Is it doable?
JSFIDDLE — http://jsfiddle.net/th1uj5wr/
Thanks.
One possible solution would be to add overflow-x: hidden; to your body style. This will allow you to move the menu out of the screen without creating a scrollbar:
body {
overflow-x: hidden;
}
I'm using jQuery to move the menu later on:
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({right:'-100px'}, {queue: false, duration: 500});
});
Check out this JSFiddle to view my working example.
This is the JavaScript code where when the user clicks on a new tab the contents on that page have a fade out effect by setting the opacity to 0. However the flaw is that all links from other pages are still clickable because it is only the opacity that has changed. What edit can I make to this code to keep the animation but hide the page content after the animation. (The same animation is when the page loads, but the opacity changes to 1.)
Code:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Can you please re-paste the code with the edits as I am not the best at JS.
Can you post your css and html? It's hard to diagnosis this, but you could use .fadeOut() or .animate({"display":"none"}). I'm not sure if this is what you need, you'll have to post the rest of the code.
Simply set the display property to none in the callback (or just call hide()):
complete: function() {
jQuery(this).hide();
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
Obviously you then have to take care to show the elements back again before animating them back in. ;-)
I am facing a silly problem with bxSlider plugin. My slider only shows 4 slides with auto sliding mode. But when someone clicks on a particular nav link I am appending another slide relates to that link. But I wanted to remove that new slide when someone clicks on prev/next control and reload the default slider with 4 slides. But it's not working for that prev/next controls.
Here is the code:
//Default Slider
var slider= $('.bxslider').bxSlider({
displaySlideQty : 4,
moveSlideQty : 4,
maxSlides: 4,
auto: true,
autoStart: true,
preloadImages: 'visible',
mode: 'fade',
pager: false,
});
//If someone clicks any link on navigation
$('#how').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
slider.reloadSlider({
mode:'fade',
auto: false,
autoStart: false,
pager:false,
});
slider.goToSlide(4);
});
When the slide for #How tag is the current slide and then if I want to click any next/prev control I wanted to remove the slide 'li.added' and reload the default slider with 4 slides. That's I tried the following code
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
but nothing happens! Can anyone please help me on this? What wrong I'm doing? Here is the Live testing site for you convenience.
I found that you need to bind the next button click function every time once you call reloadSlider, as it re-bind the next-previous control so it will lose the event binding if you do it at page load. So please rebind the click event every time you reload.
var bindNext = function(){
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
}
and then when you call reloadSlider then call the bindNext() function after calling it.
$('#forSellers').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
slider.reloadSlider({
auto: false,
autoStart: false,
pager:false,
mode:'fade',
});
slider.goToSlide(4);
bindNext();
});
Its working at my side.
I'm using the Flowplayer plugin inside the AnythingSlider control. I'd like to stop the slider from moving to the next slide when the user clicks to interact with the Flowplayer. I've tried the following but the slider continues to move to the next slide; the .click() call on the #start-stop item didn't work either. I'd like it to stop when the user clicks on any part of the Flowplayer, though in this case I tested it for the onStart.
$f("vid", "flowplayer-3.2.1.swf", {
clip: {
autoPlay: false,
autoBuffering: true,
onStart: function(clip) {
//$('#start-stop').click();
$('.anythingSlider').anythingSlider.startStop(false);
}
});
Thank you.
Make sure you get the latest version of AnythingSlider, then try this:
$f("vid", "flowplayer-3.2.1.swf", {
clip: {
autoPlay: false,
autoBuffering: true,
onStart: function(clip) {
$('.anythingSlider').data('AnythingSlider').startStop(false);
}
}
});
How do I default an accordion to be closed on start-up. here is the sample view here
Here is the code:
<script>
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h3', effect: 'slide'});
});
</script>
<script>
// add new effect to the tabs
$.tools.tabs.addEffect("slide", function(i, done) {
// 1. upon hiding, the active pane has a ruby background color
this.getPanes().slideUp("slow").css({backgroundColor: "#fff"});
// 2. after a pane is revealed, its background is set to its original color (transparent)
this.getPanes().eq(i).slideDown("slow", function() {
$(this).css({backgroundColor: 'transparent'});
// the supplied callback must be called after the effect has finished its job
done.call();
});
});
</script>
You can do it like this:
$("#accordion")
.tabs("#accordion div.pane", {tabs: 'h3', effect: 'slide', collapsible: true})
.tabs('select', false);
This marks it as collapsible, then selects a tab that's not there to display, using false.
put in your css:
#accordion div.pane: display:none;