I've got a scrollable div with rows (and hidden rows). Clicking on one of the rows causes the next hidden sibling to show.
In Firefox, however, clicking on a row causes the scrollable div to jump back up to the top, and only the first time. Scroll back down and click a row, and the scrollbar stays where it is.
IE and Chrome do not reset the scrollbar, which is extra frustrating.
http://jsfiddle.net/xyan/TH4X3/
HTML:
The HTML is lengthy for the purposes of having enough information to have a scrollbar. Because of its length, I won't post it here.
Javascript:
var trackingresults = {
pos: [],
container: {},
data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
if ($(this).next('tr').is(':visible')) {
$(this).find('td.details').removeClass('collapse').addClass('expand');
$(this).removeClass('current');
$(this).next('tr').hide();
} else {
$(this).find('td.details').removeClass('expand').addClass('collapse');
$(this).addClass('current');
$(this).next('tr').show();
}
return false;
});
trackingresults.container.delegate('tr:not(.history)', 'hover', function() {
if ($(this).find('td.details').hasClass('hover')) {
$(this).find('td').removeClass('hover');
} else {
$(this).find('td').addClass('hover');
}
return false;
});
One of the "Similar Questions" links suggested this problem. This seems similar, but might be different enough to warrant this question.
Is there something I can do to prevent the jumping?
I refactored your code a bit and the problem went away: http://jsfiddle.net/TH4X3/6/
You don't need the .hover() handler or the .hover class, just do it in css via :hover. Replace this selector: #test-shipments td.hover with this:
#test-shipments tr.current, #test-shipments tr:hover td {
background-color: #B1C3C4;
}
You don't need a .collapsed class - just make that the default and let .expanded override the defaults.
Rather than showing and hiding the next row explicitly, just use css to do it, based on the previous siblings .expanded class. Use the adjacent sibling selector - +:
#test-shipments tr.expand + tr.history {
display: table-row;
}
With just those css tweaks* you can reduce your JavaScript to just this:
var trackingresults = {
pos: [],
container: {},
data: {}
}
trackingresults.container = $('#test-tracking');
trackingresults.container.delegate('tr:not(.history)', 'click', function() {
$(this).toggleClass("expand");
});
And as a side-effect, your firefox scrolling issue goes away!
* Plus a couple of IE7 hacks, see the jsFiddle
Related
I am trying to show form when user clickes on the button. Form is showing up but there seems to be a bug for a second. form is centered when the slide up function is executing and when it is done it fits normally to the page.
Here is the js:
$(document).ready(function() {
$('.clicked').on('click', function(e) {
var current = $(e.target).next();
var show = current.hasClass('hidden');
if (show) {
current.hide();
current.removeClass('hidden');
current.slideDown('slow');
} else {
current.slideUp('slow', function() {
current.addClass('hidden');
current.slideUp('slow');
});
}
})
});
I do not think there is any bug in js code, most likely missing something in css.
Have a look here and click on blue button "Click Here" http://codepen.io/nikasv/pen/vKEEZr
Thanks.
.trip-form{
width: 100%;
overflow:hidden;
}
will do the trick even with the shaking you experience :)
You should try to set width of class "trip-form" to 100%.
I am trying to replicate the scrolling effect from here: http://www.altisliferpg.com/
I have a feeling that they are using a heavily modified version of Bootstrap Navbar, which I have taken from here: http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module and have changed it to fit into my specific case.
How would I make it so when you scroll down the page, the bar on the top gets "smaller" and scrolls along with the page as you scroll? Thanks
You can use css transitions for the height, font size and whatever else you want changed. Then simply set a scroll listener, which adds a class to the header so the size changes. Quick (and very ugly) example. jsFiddle
$(window).scroll(function () {
if ($(this).scrollTop()) {
$('#header').addClass('small');
}
else {
$('#header').removeClass('small');
}
});
Maybe you should detect the scroll event of the window, after that, set the position of the navbar to fixed and then, perform the animation. Here's an example of the javascript part and a link see it in action:
$(function(){
var performingDownAnimation = false,
performingUpAnimation = false;
var performScroll = function(){
if($("body").scrollTop() > 0) {
if(performingUpAnimation) {
$('#logo').stop();
performingUpAnimation = false;
}
if(!performingDownAnimation){
$('#navbar').addClass('navbar-fixed');
$('#logo').animate({ 'font-size': "12px" }, 1000, function(){
performingDownAnimation = false;
});
performingDownAnimation = true;
}
}else if($("body").scrollTop() == 0){
if(performingDownAnimation) {
$('#logo').stop();
performingDownAnimation = false;
}
if(!performingUpAnimation){
$('#navbar').removeClass('navbar-fixed');
$('#logo').animate({ 'font-size': "48px" }, 1000, function(){
performingUpAnimation = false;
});
performingUpAnimation = true;
}
}
}
$(document).on('scroll', performScroll);
});
On scroll event and position fixed
I edited my response for adding support for the "up" direction too. About using bootstrap for the animation, I have no idea how to do it, and I think it can't be done, because bootstrap is based mainly on applying CSS classes to different elements. CSS classes are discrete, but you are asking for animating something numerical, as the font-size property is. As much, you could create an animation that looks "staggered".
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});
Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);
I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()
Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/
You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.