I´m trying to code blog and i want to synchronise positions of timeline events and it´s posts. I coded it as two different columns and I´m trying to get height of post with jQuery and then count the size of blank space in timeline event. Everything seems to be set OK, console gives me equivalent numbers and so the programmer tools in chrome. You can see the height of the post here and these are heights of elements next to it: element1, element2, element3. Together, it 740px but the main element-post is also 740px.
So, I would like to know, how is this possible? Thank you.
As you can see in the pictures, the margin is not included in the size. So, for instance, while that "G+" icon may be 32x32, with margins, it taking up what looks to be closer to maybe 48x48. And the height of the article is only referring to up to the green line (the padding).
There are probably multiple ways of solving this, but using what you're doing now, if you wrap those margin-spaced elements in divs, then those wrapping divs will have the correct sizing themselves.
Related
I am using this tablescript to display a virtual table but for some reason after a specific point problems occur.
On Google Chrome after the top value (The position value where the row is displayed in the parent div) of 1.677715e+07px (16777150px) is exceed the rows are missing its border-bottom for some reason. This happens on the newest version of Chrome (v69). On version 68 the rows at this top value and more arent rendert at all.
They are still there, you can see them via the inspect tool on the browser.
Does the number 16777150 has something to do with JavaScript or Google Chrome?
On Edge browser something different happens. If the parent div of the virtual table exceed the height of 10737418px, the rendered height of this div will be only as big as its content height So if the last row is ending at top 900px, the table will be 900px height too. If you scoll further down and the new row is rendert, the div will get bigger too. But in the inspector you can see the right height value in this element and it doesnt change at all.
To post this link I need this code..
Here is the Code exampel.
If you want it to test it yourself, the .js and .css are in the github of this tablescript in the example folder.
Maybe this hase something to do with the browsers or JavaScript so I ask this question here.
I dont know how your table is being displayed.
But it's not a good practice to display this much entries at once. Try to use pagination.
Have a look at https://datatables.net/ and try to dynamically load table entries (like pick it up from database or something like this)
You had mentioned that tablescript also do the same thing and i see that after many records it display so long empty space without data.
But here, I want to confirm with you that if you use the pagination and display 20 rows at a time then it should work without any issue.
Then why you want to display large number of records?
If you have any issue with 20 rows then try to let us know about that.
We will try to find the solution for it.
Regards
Deepak
I'm trying to replicate jQuery slideDown() in GSAP and I'm having trouble working out how jQuery calculates the height of an item which is currently hidden as if it was set to height:auto.
I've tried trawling the code on GitHub but can't find any code which seems to be doing this in jQuery.fn.slideDown or jQuery.fn.animate which it calls.
There are several similar questions on SO and several solutions proposed, all of which seem to have their own problems:
Clone the element, position it off screen and calculate its height. This won't work if the element or any of its child elements have a height set by CSS styles which require the element to be in its original place in the DOM (e.g. an .accordianItem might only be styled if it's inside its .accordian).
Display the item, remove height:0 and quickly calculate the height before hiding the element again and then stating the animation. This might flash the content quickly while calculating the height.
Use visibility:true to show it in place while calculating the height. This would stop the flash and still keep the element in the same position in the DOM for correct height calculation, but it would still push other items below it down because visibility:false items still have a height.
Calculate the height of an item before it's hidden and store it in a data attribute so we know it when we want to open the item later. This won't work if any dynamic content changes the height of the item whilst it's hidden.
jQuery slideDown() "just works" every time so I'd be really interested to know how it works, but I just can't work out where it's doing this. I'm also surprised that GSAP can't do this out of the box, or that nobody has shared a proper solution to this before.
Any help would really be appreciated.
It turns out that if you use $.height() to get the height of an element with display:none it doesn't return 0 as you would expect, it actually sets visibility:hidden, position:absolute etc. and sets display to block to give you the correct height back. I assume this is what's being used internally when doing a slidedown.
This answer helped me a lot.
jQuery: height()/width() and "display:none"
Just to be clear about how this seems to avoid all the problems in my original question. It's basically doing number (3) but avoiding the problem of pushing lower content down the page because it's also set to position:absolute while the height is being calculated. A very simple elegant solution
I'm trying to create a column-based, blog layout. I want the text to wrap to a new column when it hits the bottom of the page. At it's very simplest form something like, when the column height == the_height_of_the_wrapper then column-count++.
The problem with something like that would be the text would be distributed evenly. Also, that would rely on css columns and I want something a bit more browser-friendly. Are there any existing plugins for this functionality or anywhere I can get some ideas?
If anyone is familiar with any of the text-heavy windows 8 "metro" apps (such as the news one) that's the kind of layout I'm trying to mimic.
As i noticed in comments, you cannot use column-count there. But there is solution, check this one please: Continuing overflowed text in a different div?
Alternatively. You can apply a fixed height (even a percentage will work) to the wrapper the columns will fill appropriately. (example: w3schools.com/css3/tryit.asp?filename=trycss3_column-count). It even seems as though you don't have to specify a fixed column count as it appears to create extra columns as the content dictates.
http://jsfiddle.net/yxhzU/1042/
I'm trying to modify this example so that within the top carousel you are able to see 10% of the slides on either side.
Any help getting me pointed in the right direction would be great, thanks!
Viewable area would look something like this:
______ _________________________ _______
______| |_________________________| |_______
prev^ ^current^ ^next
http://jsfiddle.net/yxhzU/1069/
I modified the plugin code you were using. I didn't test it fully, but this will give you a good idea of what you have to do.
I did the following modifications:
Added 2 additional settings
itemwidth - This is a number from 1-100 which symbolizes the percentage of the carosel width that a single item takes up.
startingoffset - Similarly it is the amount of starting space on the left is left open also percentage based (0-100)
Finally I modified all the calculations where the elements are wrapped and animated to use new "calculated" widths that include the above scaling.
The problem you were having is that many jquery plugins and the jquery UI stuff wrap your elements in additional "divs" and other DOM objects. So while you were using styles to change the width of your pages in the carosel, they were actually inside other things. I don't think you could make it work with only css anyway because the animation portions of the code were based off a width that was measured internally.
Edit:
Just FYI, I only viewed it in Chrome.
Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm