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.
Related
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/
I'm trying to build a simple responsive gallery.
Code pen here
There only a simple CSS setting for images now:
img {
height: 150px;
float: left;
margin: 2px;
}
I want my gallery rows to be 100% in width and scale the image heights in each row accordingly keeping the aspect ratio.
The scenario is something like this:
On window load and resize:
1. Wrap each row into #div
2. Calculate image height for each row (overriding the initial fixed value)
Desired result
I was trying to find a pure CSS way, but looks like I can not get away without some JavaScript here.
EDIT: I was able to make this with some jQUery "mad skills":
codepen.io/ztm/pen/NGwaEL
$(document).ready(cascade);
$(window).on('resize',cascade);
function cascade() {
$('img').css({ 'height': 150 + "px" });
var wdth = $(".box").width();
var img_width = 0;
$('img').each(function() {
img_width += $(this).outerWidth( true );
if(img_width < wdth){
$(this).addClass('active');
$('.result').html('Ratio: '+wdth/img_width);
}
});
var ratio = (wdth-24)/img_width;
$('img').css({ 'height': 150*ratio + "px" });
}
It calculates a single row of image with initial height.
And so far the best solution to my problem I found was this:
miromannino.com/projects/justified-gallery/comment-page-4/
Based on your 'Desired result' link, it looks to me like you are wanting a Google+/Google Photos style gallery layout. In this style of gallery, images are added to a row until they fit the width of the row and then a new row is started.
The reason you can't get away with just css is that some trickery is needed to get images of various sizes to fit perfectly into the width of each row. The simplest solution to this is to add images until they exceed the width of the row, then crop all those images down to fit the row perfectly, that method is outlined in detail with jQuery and CSS here: Google+ Style Image Gallery
There are other methods you can use, like adding images until it is a certain percentage under the width of the row then scaling up the size of the images on that row so they fit perfectly, but the idea remains the same: add images until they are within a range of their parent container, then grow or shrink the images to make them the exact width.
Not sure if you are looking for this solution. Works fine in Chrome.
[1]: http://codepen.io/sridharspeaks/pen/meBwNN
You may look at the Isotope or Masonry plugins that could help you with this.
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');
}
Im using flexslider2 to show my slides.
But i have the problem, that the width of my li-elements are computed wrong at the first page load.
when i open firebug and click on the inline style, the width changes and everything is displayed correctly. Also when I just resize my browser, everything is correct.
Why do I have this problem?
When i look into the flexslider code, i find this:
slider.computedW = slider.itemW - slider.boxPadding;
which should be alright .... because on resize, it only uses the computedW:
if (vars.smoothHeight) methods.smoothHeight();
slider.newSlides.width(slider.computedW);
slider.setProps(slider.computedW, "setTotal");
please help me!!!
Do you have your flexslider inside a container? If so you can set flexslider to automatically adjust to that specific height when the page loads.
$(document).ready(function(){
var containerheight = $(".flexcontainer");
var borderWidth = $('.flexslider').css('height', containerheight.outerWidth());
});
Also, if your container is slightly another height than your flexslider should be you can use below. (The "5" is by how many pixels you want to change the height with)
$(document).ready(function(){
var containerheight = $(".flexcontainer");
containerheight = containerheight -5;
var borderWidth = $('.flexslider').css('height', containerheight.outerWidth());
});
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 :)