jQuery UI tabbed widget add scrollbar when to many tabs - javascript

Hi I am using the jquery UI tabbed widget and I am trying to create a horizontal scroll bar for the tabs.I have created the code to add new tabs on click when the tabs total width is bigger then the containers.The problem is that the tabs move to the second line witch is not what I want.I want them all to stay on the same line and later I will add 2 buttons to scroll from left to right.Here is the code I created:
jsfiddle
As you can see from what I posted the tabs move on the second line even if I added on the container overflow:scroll.

To get you started, checkout this fiddle.
Here's the additional JS:
(function() {
var $tabsCont = $('#tabs_container'),
$tabs = $tabsCont.children(),
widthOffset = 10; // The width calculated below is a bit too large...
$tabsCont.wrap('<div class="tab_cont_wrapper"></div>');
$tabsCont.width($tabs.length * $tabs.first().width() - widthOffset);
$tabsCont.height($tabs.first().height());
})();​
I'll leave it to you to find a better tabs width calculation.
The CSS:
#tabs_container {overflow:hidden !important;}
.tab_cont_wrapper {overflow:auto;}
​

The overflow cannot apply because the height is not set. If you limit the height then it will class the other tabs as overflown.
Just simply add some styling, as so...
<style type='text/css'>
#tabs_container{
max-height:70px;
overflow:scroll;
}
</style>
Hope this helped :)

Related

Show the button at the table bottom even when the window is very small

I have a table sorter html page, the sample is here.
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'scroller'],
widgetOptions: {
scroller_height: 400
}
});
How can I make the bottom button visible even when the windows height is very small (say, can only show one or two rows)? Ideally scroller_height can be some type like $(window).height()/2 and it can automatically update when the window is resized.
The expected is that even when the window is small, the bottom button appears in the screen without scroll action.
If you want to make the scroller window dynamically adjust its height, there are two demos on the main wiki page under Widgets > Scroller.
http://jsfiddle.net/Mottie/txLp4xuk/2/
http://jsfiddle.net/Mottie/abkNM/8037/
Essentially, all you need to do is adjust the outer scroll window height
$('.tablesorter-scroller-table').css({
height: '',
'max-height': height + 'px'
});
Here is the demo you shared updated, and has a minimum height set to 100px.
I'd say that there are a few ways to achieve what you want, and one easy way is to:
create a function that checks the visibility of your table versus the viewport;
Code below:
function checkVisible() {
var bottom_of_table = $("#mytable").offset().top + $("#mytable").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
if(bottom_of_screen > bottom_of_table){
$("#buttons-container").removeClass('bottom-fixed');
}
else {
$("#buttons-container").addClass('bottom-fixed');
}
}
If it exceeds the viewport, add a CSS class to your buttons container that fixes it to the bottom of the screen. Otherwise, remove this class and display the button container normally, at the bottom of the table.
You'd want to run this function-check on load and on window resize, as follows:
$(document).ready(function() {
checkVisible();
$(window).on('resize', checkVisible);
});
I've updated your fiddle: http://jsfiddle.net/12nt19vg/12/show/
Try resizing the window and let me know if this is the behavior you're looking for.
EDIT: Incorporating your additional spec in the comments, I've added an outer div to your buttons container and modified your CSS to visually create the effect that I think you're looking for.
Please take a look at this fiddle: http://jsfiddle.net/12nt19vg/27/show/

Text Not Ellipsis at certain point using jQuery Plugin

I currently have a 'widget' div which has a static height, within it is an image which also has a static height. The only thing that can have a dynamic height is the title which can change from 1-3 lines long.
What's happening is that I'm trying to make the description within the div (which can be quite long) ellipsis before the containing div ends, taking into account the title which can vary in height.
I'm using a jQuery plugin called dotdotdot which docs can be found here http://dotdotdot.frebsite.nl/
The plugin is working but I think my JS might be off a bit. Would love some help as I just can't get my brain around it.
Fiddle Here
You can see it clearly on the fiddle but JS below.
$(document).ready(function () {
$(".caption").each(function () {
var authorheight = $('.meta').height();
var h2height = $('h4').height();
$(".desc").height(250 - h2height - authorheight);
$(".desc").dotdotdot({
after: "a.readmore"
});
});
});
Any help would be brilliant!
Thanks
You were doing everything right except for calculating the Height.
var authorheight = $('.meta').innerHeight();
var h2height = $('h4').innerHeight();
the above help you get the height along with the padding and everything.
Then next id you left padding which you have applied to .caption so your
height for .desc becomes as below
$(".desc").height(250 - h2height - authorheight -40);
UpdatedFiddle

How to fix too long css dropdown in Foundation 4 top bar?

I'm trying to fix a web page using the Foundation 4 framework. The page has a css dropdown menu that's taller than the height of the screen. Items that don't fit on the screen are inaccessible, see the menu Baggers | Paris on this simplified demo page:
http://janosgyerik.github.io/BrownBagLunch/dropdown-issue.html
It would be great to make the dropdown menu scrolling, for example as demonstrated on this page:
http://css-tricks.com/examples/LongDropdowns/
and explained on this page:
http://css-tricks.com/long-dropdowns-solution/
I copied the code from the explanation, but I'm not a CSS wiz, and I've been struggling to adopt that code to my demo page above. Can somebody help me out here? I'm open to other kind of solutions too, doesn't have to be this particular trick.
UPDATE
Inspired by #topless' answer, I solved it like this:
function fixDropdown() {
var maxheight = $(window).height() - $('nav.top-bar').height();
var dropdown = $('ul.dropdown ul.dropdown');
dropdown.css({ 'max-height': maxheight, 'overflow-y': 'auto' });
}
$(window).on('load', fixDropdown);
$(window).on('resize', fixDropdown);
I don't see any other solution than scrolling when the height is greater than the size of the browser window. With css I would do it like this. If you don't want the options to reach the bottom of the page you can define a max-height property.
ul {
max-height: 300px;
overflow-y: scroll;
}
And to achieve the effect you posted for the long drop downs, you can follow the instructions
from the same guy from css-tricks.
I'm using foundation 5 and I've implemented a slightly different approach. Instead listen to the window resize, I prefer to listen to the dropdown opened event.
I have a navbar and a container with content, I add a padding to the container to compensate the cutted dropdown height.
$('body').on('opened.fndtn.dropdown', '[data-dropdown-content]', function() {
var dropdownPosition = $(this).offset();
var dropdownHeight = $(this).outerHeight(true);
var containerHeight = $('#main').outerHeight(); // my container is #main, what is yours?
var missingPadding = dropdownPosition.top + dropdownHeight - containerHeight - $('nav.top-bar').height();
$('#main').css('padding-bottom', missingPadding + 'px');
}

Responsive swipe gallery

I'm working on a snippet for a swipe gallery for mobile.
You can see it here http://codepen.io/piatra/full/Edtlq
[].forEach.call(slides, function(s){
s.style.width = mainContainer.offsetWidth + 'px';
});
My problem: Because the content is made up of multiple panels they need to be on the same line to the right. The size of a panel should be 100% of the screen so you only see one panel at a time. But i cannot set the size of the panel in css to 100% because that would push each panel on its own row.
Currently I am solving this in JS, ontouchstart I get the size of the main parent and set each slide to that width but I don't like this solution because when switching for landscape to portrait you have to touch the gallery for it to update, and even if I add an event lister to the change its still not a pretty solution.
Can I achieve this effect in CSS only? A gallery of panels on the same row with the width variable based on the parent ?
PS : Chrome dev tools > Emulate touch events
PPS :
Wrote down a simplified version http://codepen.io/piatra/pen/usaHo
Any improvement to this version is very much welcomed :)
A nice example is http://csscience.com/responsiveslidercss3/ but when adding a new panel you have to edit the CSS
I think this cant be done with pure css, especially since you want it to be easyly maintainable without need to change css when adding more panes.
One solution would be to use jquery to count the panes, then set the wrappe width and panes width accordingly to achieve the desired effect:
http://jsbin.com/idufaj/6/edit
You can add as many panes as you like, and the effect will allways presist.
$(document).ready(function() {
var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
$(".pane").css({width: panewidth });
});
In this example i use body as the wrapper, but it can be any element. In this case, as there are 3 panes the body width is set to 300% and the panes width is set to 33.3%. If you add another pane the body width will be 400%, and the pane width will be 25% and so on.

jScrollPane Scrollbar height relative to div

I have a resizable div which is using custom scrollbars of jScrollPane.
I want to have vertical scrollbar above the resize handle, is it possible to do so?
I tried changing verticalTrackHeight to be always 40 less and bar size reduces too, but when we scroll the scroller goes to the bottom.
Here is my code http://www.jsfiddle.net/WRMSn/4/
It seems like some extra space is somehow being added below the scrollbar. You can use a jspCap to get around this using some code like this:
.jspCapBottom {
display: block;
height: 22px;
}
I added that to your fiddle and it seems to work well:
http://www.jsfiddle.net/UnEqt/
You forgot ; on var pane = $("#container")
It should be var pane = $("#container");

Categories