Scrollable DIV scrolls to top when TD is clicked - javascript

I have an interesting problem that I cannot seem to find an answer for on Google. I have a scrollable div that a simple table in it. There are 'heading' rows ('.sl-bucket') that when clicked the script shows the associated rows below that, hiding other shown rows. In Chrome and IE, there is no issues. In Firefox on a fresh load, when you click the first element, it scrolls the div back to the top. Everything else works great after that.
Any thoughts on how I could fix this?
Here is the example jsFiddle.
Here is my javscript:
$(window).on('click', '.sl-bucket', function() {
var bucket = $(this).attr('rel');
if ($('.sl-'+bucket).is(':visible') == false) {
$('.sl-unitRow:visible').hide();
$('.sl-'+bucket).show();
} else {
$('.sl-'+bucket).hide();
}
return false;
});

Working for me by using
$('.sl-'+bucket).css("display", "block");
instead of
$('.sl-'+bucket).show();

Related

Add div programmatically to a refreshing table

I am currently working on my own ColumnResizer for a table. I know that there are some PlugIns that are doing exactly this, but I would love to write my own one.
To create a resizable column I am appending a div to each th-Element of the table programmatically like this:
jQuery.each($("#table > table > thead > tr > th"), function() {
if(this.id !== ""){
var div = createDiv($(this).outerHeight());
$(this).append($(div));
$(this).css('position','relative');
this.width = $(this).outerWidth()
console.log(div)
}
});
The function "createDiv()" looks like this:
function createDiv(tableHeight){
var div = document.createElement('div');
$(div).css('top','0');
$(div).css('right','0');
$(div).css('width','2px');
$(div).css('position','absolute');
$(div).css('cursor','col-resize');
$(div).css('userSelect','none');
$(div).css('height',tableHeight + 'px');
return div;
}
This is working fine then entering the page.
The problem is that the table can be multi-paged. So you can switch between pages of the same table. Each page switch is refreshing the table and here is the problem: After such a refresh I cant append the div to the th-elements .... Its just not working. I am calling exactly the same methods when the table is being refreshed. I also added a timeOut because I thought that the table isnt finished loading yet but it also didnt help.
I already tried to add
$(document).ready()
but it also didnt work.
One funny thing is that then I am adding an
alert("test")
to the refreshTable() function, the divs are there after closing the alert.
Does any one know how to solve this problem?

how to detect scrollbar on application?

I have an SAPUI5 app where I display a table which goes off the screen. I have a button that I the user can click to go back to the top. The problem is that button is always displayed, even when not needed. I only want it to show up when the table goes off the screen. I've been looking for solution to this but nothing has worked so far.
Here is my button defined in my xml view
<html: a id="toTop" href ="#_xmlview0--top">
<Button id="backToTopBtn" text = "back"/>
</html:a>
and then I have this defined at the top of my view
<html:div id = top"></html:div>
I've tried different solutions I found using jquery but nothing has worked so far. I thought something like this would work
if($('body').height()>$(window).height()){
//go back to top here
}
but looking at these values body height and window height are the same. Any ideas?
To not have your button show all the time you need to hide it using styles or javascript. I'll assume you'll use display: none in this case then show it when the user has scrolled a certain amount.
element.scrollTop and element.scrollLeft give you the amount of offset an element has.
If you want to show something only when the body has been scrolled a certain amount you could do:
var page = document.body;
var button = document.getElementById('backToTopBtn');
function showScrollTopButton() {
if (page.scrollTop > xyz) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
return;
}
window.addEventListener('scroll', showScrollTopButton);
Where xyz is the numerical value for when to show and hide the button.

jcarousel images disappear after scroll event

I have an autocomplete text input that triggers a slider using jcarousel to scroll to the image of the selected person. The problem is, if you search once, it works, but searching again makes all the images disappear.
Here is the code that controls the input:
jQuery('#team_select2').change(function() {
var idx = $('#team_select2').val();
if(idx == '')
{
carousel.scroll(1);
$('.details').hide();
return false;
}
carousel.scroll(idx);
$('.details').hide();
$('#'+idx+'_details').show();
});
You can see it breaking in action if you go to http://welchhornsby.com/new-team-page/ and try searching for two of the people in the list.
Anyone have any idea why it would be breaking like that?
Found the answer right after posting this. Just changed the 4th to last row from carousel.scroll(idx); to carousel.scroll(idx*1);

jQuery: Why is by box collapsing on first click

The homepage of our website (legendboats.com) is 4 small cells, that if you click on, the large image changes. Pretty standard stuff, but there is a problem.
When you click on one of them the first time, the large area collapses before the new image reappears. This doesn't happen again, you can continue to click on different images, and they will fade in and out properly. Here is the code I'm using:
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
$('#home_box ' + new_slide).fadeIn().addClass('active');
}).removeClass('active');
});
Any ideas on what I'm doing wrong, or any improvements?
It collapses because you're removing the class="active".
The reason it doesn't collapse after the first time is because jQuery is adding an inline style "display:block" which overrides the missing class="active".
Initially:
<div id="standard_equipment" class="active">
Subsequently:
<div id="more_power" style="display: block;" class="active">
Well I don't know why it happens, but I can see the symptoms. For some reason on first click the content collapses. This causes the odd flashing. If you set a min-height on home_box it sorts it out.
#home_box { min-height: 482px; }
Try doing this way
$('.home_boxes a.content_box').on('click', function(e) {
e.preventDefault();
var new_slide = this.hash;
$('#home_box div.active').fadeOut(function() {
var parent = this;
$('#home_box ' + new_slide).fadeIn(function(){
//You can shuffle following two lines and try
$(parent).removeClass('active');
$(this).addClass('active');
});
});
});
Hope this works you.

JQuery Slide Event and Div Height not changing as expected

I am working with JQuery and I'm trying to change the html of a div box when the child div slides in and out. My problem is that the code below isn't changing the html value of #menu_text. It only displays Hide Menu and is not detecting the real height as changed by slideToggle.
$('#menu').click(function () {
$('#menu_links').slideToggle('slow', function(){
console.log('Debug : %s', $('#menu_links').height());
if ($('#menu_links').height() == 1)
$('#menu_text').html("Show Menu");
else if ($('#menu_links').height() == 20)
$('#menu_text').html("Hide Menu");
});
});
Upon inspection in firebug console, The value of height never changes from 20 unless you click the div really fast multiple times then it will change to 1. (I should add that the height defined in the style sheet is 20)
The doc says that slideToggle only affects the height of the object. Am I missing something? Thank you for the help.
<div id="menu"><p id="menu_text">Show Menu</p>
<div id="menu_links">
Stuff
</div>
</div>
Try:
$('#menu').click(function(){
$('#menu_links').slideToggle('slow', function(){
$('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
});
});
There you'll set the text of the menu depending on if the links element is visible or not. You're probably better off not depending on element's heights and widths, as in the worst case they might vary from browser to browser (and in this case, they'll also change according to the content of the links element).
You could also use data() to save your state. It's a great trick to save state or anything
$('#menu').click(function () {
$('#menu_links').slideToggle('slow', function(){
var $this = $(this);
var toggled = $this.data('toggled');
if (toggled)
$('#menu_text').html("Show Menu");
else
$('#menu_text').html("Hide Menu");
$this.data('toggled', !toggled)
});
});

Categories

Resources