I have N rows of content that user should match using drag and drop (user moves items on the right to the corresponding item on the left). Here is an example:
All blocks should have the same height - the height of the largest item. (In this example the larges item is on the left, #2). Is it possible to do using pure CSS? I can't use flexbox due to browser support. I have managed to implement this using JS, but I don't like that solution :)
Maybe someone could point me to the technique or a similar example?
Thanks in advance.
Try this jquery code it detects the biggest element and sets all of them to that height.
var height = 0;
$(".table").find(".table-cell").each(function() {
height = Math.max(height, $(this).height());
});
$(".table").find(".table-cell").css("height", height);
Here is a JSfiddle example.
You need jquery for this so make sure adding the jquery library to your code.
Related
I am calculating the width of all the elements with a class, on desktop this works fine(all total width is 2862) and I get an exact figure. On mobile however all elements are seen to have the same width(290px) causing the overflow of the scroll to take up 2 lines.
var daywidth = 0;
$(".timetable-day").each(function(){
daywidth += $(this).outerWidth();
});
jsfiddle: https://jsfiddle.net/7j8kskf0/
I have tried width, outerwidth and this.offsetWidth(normal javascript) and I don't know what is causing this problem. Any help would be great.I am using bootstrap 3.
The code you posted here is working on Android & iOS.
See for yourself: http://pascha.org/test/test.php
Your Problem must be somewhere else.
Possible thoughts:
In bootstrap some classes expand to 100% width on mobile browsers.
I think you may have used one of these classes.
OR You have changed some style for mobile output and dont remember;-)
The solution I found from this was to give the timetable-inner/inner scroll div a min-width of 3000px in css, then modify the javascript:
$(".timetable-inner").css("min-width", daywidth + "px");
This works as expected. The space gives all the elements the ability to go on the same line then the JavaScript shrinks the div.
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
I am currently trying to position an element in a way that it always is at the bottom of it's parent. What's special here is that none of the heights or widths are known. I'd like to do this without tables, if at all possible (my superior is against using those. In a very religious way).
I tried the approach of using position:relative on the parent and position:absolute; bottom:0; on the box I want to have at the bottom. This, however, causes the box to overlap with the other content of the parent div since absolute positioning causes the parent to ignore the height of the positioned element. Some JavaScript is used to align the heights of the floating divs to each other. But disabled JavaScript should not completely break the layout (as in: cause content to overlap or break the "flow" of the page).
Here's the fiddle with the exact structure of my markup: http://jsfiddle.net/vbeC2/27/
I did read the "float: bottom" question on SO, but none of the answers really adressed my problem, hence the new question.
It's not the cleanest solution, but since you were already using the maxHeight bit to calculate the sizes, I just added a second each loop to check the max-height of the bottom section, and added it, so that the relative, absolute positioning would work.
http://jsfiddle.net/robsterlini/svcGB/ or http://codepen.io/robsterlini/pen/BcDyt
EDIT When you resize your browser it won't work, but you could just add a resize event that recalculated it, and you'd need to think about creating some javascript-less fallbacks, either using modernizr, or just some simple
Please find the working demo here: JS Enabled
Modified the jquery logic to calculate the height of the maximum height of the container as shown below:
$(document).ready(function(){
//Set the height of the columns to the highest value of all columns
var maxHeight = 0;
$(".same-height").each(function(){
var k = $(this).children('.headline').innerHeight() + $(this).children('.description').innerHeight()+$(this).children('.bottom').innerHeight();
maxHeight = Math.max(maxHeight,k);
});
$(".same-height").css({"height" : maxHeight});
});
If JavaScript is disabled then you should apply different styles as shown in demo here:
JS Disabled
Here is something similar to what you want to atchive but the demo is centering the
http://css-tricks.com/centering-in-the-unknown/
You should use the same trick : using css ::after/::before pseudo classes to set your footer content in your parent div
I'm wondering if this is possible with jQuery or JS.
I have a margin set on a div that is set by getting the height of a container that contains images.
var articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
However, the container's images are essentially a slider, so the height of this container can change.
I'm wondering if it's possible to update the articleImageHeight variable live as the height of the container changes?
I am using slidesJS for the slider in the container.
Here's an example of what I'm working on: http://goo.gl/FdftC
Many thanks,
R
What I would probably do for this is to add your snippet of script as a function and then to call that function every time the slide changes. This will mean you need to make a slight modification to the plugin. Having a look at the plug the main animate function is simply called animate().
So as a quick example
updateHeight = function(){
articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
}
The above adds your bit to a function and then add updateHeight(); to line 236... if you're using the un-minified version of the plugin.
Just above the line that says } // end animate function
.. just a thought a what might look a bit nicer is to use .animate rather than .css for updating the top margin... but hey I don't know what you're working on so is entirely up to you.
----EDIT----
Just an update... we found an animateComplete() callback on the plugin which worked a charm.
Any idea how make a layout like google plus or facebook. You can see at google plus home as example,
at the beginning, if you scroll the page in the main content, they will scroll together (friend post and sidebar), but when you scroll until the bottom of sidebar (in the right of friend post), that sidebar will stop scrolling , but the another content (friend post) will still scrolling. can explain to me how to make layout like that? sample code or demo will be very help.
Fixed positioning with CSS is a very limited approach. There are a number of ways to do this style of "fixed" areas, many of which have already been given in answers to similar questions on here (try the search above?).
One technique (which many are based on) is like so (in brief)..
Capture the browser's scrolling
Get the position from top of chosen element (x)
Check if the scrolling > x, if so apply a class to the element to fix it to a certain position.
The same will work in reverse, for example:
var target = $('#div-to-stick');
var div_position = target.offset().top;
$(window).scroll(function() {
var y_position = $(window).scrollTop();
if(y_position > div_position) {
target.addClass('fixed');
}
else {
target.removeClass('fixed');
}
}
Note: Depending on how you chose to complete the code above, the page will often "jump" as the div's position is modified. This is not always a (noticeable) problem, but you can consider getting around this by using .before with target.height() and appending a "fake" replacement div with the same height.
Hope this helps.
The new approach with css3 is reduce your effort. use single property to get it.
position:sticky;
here is a article explained it and demo.
article
Demo
You are looking for CSS position:fixed (for the scroll-along sidebar), you can set the location with left:[length], right:[length], top:[length], bottom:[length] and the normal width and height combos
You will need to augment it with a window resize and scroll listener that applies the position:fixed property after the window has scrolled past the top of the sidebar.
Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.