I have a bootstrap table with overflow set to auto inside it's container, and a locked first column. A horizontal scroll bar appears to see additional data, but I'd like to add a button too. The visitor would be able to use their mouse, the scrollbar, or the buttons, to navigate horizontally in the table.
How would I go about building this out?
I can get my code working with a div (https://codepen.io/gregbarbosa/pen/axjKbL), but not the table (https://codepen.io/gregbarbosa/pen/eojbrJ). My only guess is that the JS animate doesn't apply to tables?
$("#right-button").click(function() {
event.preventDefault();
$("#content").animate(
{
scrollLeft: "+=300px"
},
"slow"
);
});
$("#left-button").click(function() {
event.preventDefault();
$("#content").animate(
{
scrollLeft: "-=300px"
},
"slow"
);
});
Target .table-responsive instead of #content.
$("#right-button").click(function() {
event.preventDefault();
$(".table-responsive").animate(
{
scrollLeft: "+=300px"
},
"slow"
);
});
$("#left-button").click(function() {
event.preventDefault();
$(".table-responsive").animate(
{
scrollLeft: "-=300px"
},
"slow"
);
});
Here's an updated CodePen.
Related
I'm using this function to scroll down the page from one element to another. Everything works fine, except that with this function, it scrolls to halfway down the div, instead of just scrolling to the top of the div. How can I fix this?
jQuery(document).ready(function () {
jQuery('.request-tour-scroll').click(function () {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, 2000, function () {
jQuery('#show').focus();
});
jQuery('#tour-option-section').css('display', '');
return false;
});
});
Your scrollTop call needs to have the scroll position set to the top of the div you want to scroll to, not the height of the document.
jQuery("html, body").animate({ scrollTop: $('#tour-option-section').offset().top }, 2000, function () {
jQuery('#show').focus();
});
Codepen for example: https://codepen.io/jamiecalder/pen/LYYVqqX
I am trying to scroll my page (on click) to the top of en element. The problem here is that my page is to short to scroll to the top of the element. IS this possible?
Here's my code
$('.x-class').on('click', function(e) {
moveWindowTo($('.yclass').eq(0));
});
function moveWindowTo($target) {
$('body,html').animate({ scrollTop: $target.offset().top }, 'slow');
}
This code uses .parent() to scroll up to the top of the containing div:
$('.x-class').on('click', function(e) {
moveWindowTo($(this).eq(0));
});
function moveWindowTo(target) {
$('body,html').animate({
scrollTop: target.parent().offset().top
}, 'slow');
}
Here is a working jsFiddle. Scrolling down and clicking the red box will scroll it to the top of the containing div.
I use in menu icon search for show in wordpress search toogle bar. Wordpress theme use simple js custom file. This is all about website and menu. But for newsletter i have take plugin newsletter subscription.
If you see menu icons position visit website here
My problem is : I want to block in menu bar icon search and newsletter icon the same position. Now if you click search icon you will see change newsletter position.
This is my js file :
jQuery(document).ready(function( $ ) {
//Javascript Detection
$('body').removeClass('no-js');
//Read More Link
function readmorelink() {
$('a.more-link').closest('p').css('text-align', 'center');
}
readmorelink();
//Flexslider
function flexslider() {
$('.flexslider').flexslider({
animation: "fade",
slideshow: false,
});
$(".flex-next").html('<i class="icon-chevron-right"></i>');
$(".flex-prev").html('<i class="icon-chevron-left"></i>');
}
flexslider();
//Fitvid
function fitvids() {
$(".featured-preview").fitVids();
}
fitvids();
//Comments Toggle
$(".comments-wrapper").hide();
$("#comments-title").attr('class', 'comments-close');
$("#comments-title").toggle(function () {
$(".comments-wrapper").slideDown();
$(this).attr('class', 'comments-open');
$('html, body').animate({
scrollTop: $("#comments-title").offset().top
}, 0);
return false;
}, function (){
$(".comments-wrapper").slideUp();
$(this).attr('class', 'comments-close');
return false;
})
//Infinite Scroll
if ((custom_js_vars.infinite_scroll) == 'no') {
} else {
$('.posts').infinitescroll({
loading: {
msgText: "...Loading Posts...",
finishedMsg: "- End of Posts -"
},
nextSelector: '.post-nav-next a',
navSelector: '.post-nav',
itemSelector: 'article',
contentSelector: '.posts',
appendCallback: true
},function () {
fitvids();
readmorelink();
flexslider();
});
}
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").toggleClass("newClass");
});
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").delay(1000).queue(function(next){
$(this).toggleClass("newClass");
next();
});
});
//Cabinet Toggle
$('#cabinet-toggle, #cabinet-toggle-mobile').click(function () {
$("#cabinet-slider").slideToggle(0);
$(".icon-plus-sign").attr('class', 'icon-minus-sign');
return false;
}, function () {
$("#cabinet-slider").slideToggle(0);
$(".icon-minus-sign").attr('class', 'icon-plus-sign');
return false;
});
//Responsive Menu
$('.nav').mobileMenu();
$('select.select-menu').each(function(){
var title = $(this).attr('title');
if( $('option:selected', this).val() != '' ) title = $('option:selected',this).text();
$(this)
.css({'z-index':10,'-khtml-appearance':'none'})
.after('<span class="select"></span>')
});
});
In your CSS, you have this:
body:not([class*=nksub_mobile]) .nks_cc_trigger_tabs.nksub_tab {
top: 327px !important;
}
This will make the icon appear 327 pixels from the top of the screen always. So, when you click on the search icon, the search field appears on top and the 327px is not enough to keep the email newsletter icon on the same level with the search icon.
Workaround: in your:
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").toggleClass("newClass");
});
In the above function, add some CSS Class to your newsletter selector to adjust the position. Something around 327px + the height of the search box that appears on top.
Hope this helps!
I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>
Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.
basically, I want to show a table, and when the user clicks a link, I want the table to slide out to the left and another table to slide in from the right to the position where the original table was.
I've come so far (http://jsfiddle.net/JqkyA/4/):
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 } );
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
Problem is, while the second table is sliding in, its x-position is correct but it is always displayed below the original table. I don't want that - I want the second table to slide in at the exact same y-position as the original table.
Any ideas on how to achieve this?
EDIT:
To be clear, I would like the new table to slide in on the same y-coordinate as the old table, but I still want the old table to be shown during slide-out. I also would like to have the new table slide in right next to the old one (no 'pause' between the tables as wm.p1us suggested).
Thanks for any help.
I think you should go with a different approach.
Instead of sliding the 2 tables just slide their container using negative margin and then hide the first table using the complete callback.
I also added display: inline-block to both tables.
Something like this:
$(".grids").animate({'margin-left': -110 }, 5000, function () {
$('table.grid-1').hide();
$(this).css("margin-left", 0);
});
See this working demo
$( function() {
$( "a" ).click( function() {
$( "table.grid-1" ).css({'position': 'absolute'});
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 });
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
I've forked your JSFiddle
I added
<div class="inner">
as an inner wrapper and floated the tables to the left. animation is done by changing margin-left of the first table.
This will work as you wanted - the first table is still visible when the second one comes in..
Try this,
$( function() {
$( "a" ).click( function() {
if($( "table.grid-1" ).css('display') != 'none')
{
$( "table.grid-1" ).hide();
}
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
Let me know is it usefull?.