I have been looking around google/forums and havent really found an answer to this. I am wondering if I can, in CSS, size a div to 50% width of its contents. I see that calc() doesnt work with auto, but basically what I want to accomplish is width: calc(auto/2). Can I do this in CSS, or does it have to be done after the page is loaded in javascript/jquery?
Note:the height will be 100% with an image in it so I wont want to use px values.
Assuming that your internal content is just the image, maybe something like this:
var innerwidth = $('.parentdiv').children('img').width();
$('.parentdiv').css('width', innerwidth);
Maybe I'm misunderstanding the question, but I don't see why this wouldn't work. Hope it helps :)
Edit: I am agreeing with what the comments said - there really isn't a way to use CSS to figure out the size of a child.
Related
The main idea is to get width and height from divs (boxes) from Backend and then I want a function or something in react that will structure page like this.
I found this name is Mansory, I want to do a it like it.
Sometimes the big box (Mentions) can stay on top right.
I want the small boxes to occupy empty space. I was thinking about using tables to structure it but I can't figure out how to make a function to do this automatically and dynamically.
So the idea is to never have free space, there always be a box there.
I think you guys got the idea.
Thanks.
You can use the CSS flexbox to do so.
setting flex-wrap: wrap in the container and using flex-grow: #desiredSize for items will probably do.
here is a great guide by css-tricks:
A Complete Guide to Flexbox
I'm not sure receiving width and height dimensions from the backend is a good idea, this will not result in a responsive website. For your use case, CSS may be the best solution.
You can use either Flexbox or CSS Grid. In my opinion, a screen like this can work really well with CSS Grid and template-areas. Take a look at this.
I'm very new with JS, and I don't even know whether what I try to do is doable. Some guys told me "try javascript", and google can't help me because it's too specific.
Ok so, firstly I have some huge text in the center of my page. So far so good. Call it the "main text"
Then, on the side of the main text, there has to be another column containing more text blocs. But this time, these blocs have to align with the height of specific words found in the main text.
You will probably understand better with this picture :
Any idea how to do that ? thanks !
Use CSS and HTML, there is no need for JavaScript. In CSS you can use top:; to vertically align an element, e.g.
.text {
top: 40%;
}
This will align an element with class "text" 40% of the pages height from the top. Use % as your units to make the text align correctly no matter what size the window is.
You don't need JavaScript to do what you're trying to do. All you need is CSS and html.
First of all you need to take a look at basic html layout here.
Take a look at this Fiddle its something similar to what you need
Guys didn't understand you. It is really hard to find out the x/y position of the word in the div for a lot of reasons. The best way for you is to wrap the needed word with some tag (kind of span or something). Here's a jQuery plugin to do that.
Then seems you will not have troubles to find out the position of your tag for example with jquery position method and to give this position to your left column text.
Do you know any script which can help to achieve effect like on whis website: http://www.julianabicycles.com/
When you clik on any bike, you can see lightbox sizing effect, but most important is that it is fullscreen.
I tryed to achieve look alike effect with colorbox and similar scripts, but i cant find option for width and height 100%.
I also tryed to examine code of that website, but i consider myself newbie in js, so that's why i'm looking for your help.
Thanks in advance!
That site is using swipe.js. https://github.com/bradbirdsall/Swipe
But, colorbox has a width parameter. The 100% will be of the containing div, so make sure that is also 100%. You might want to show what you've tried.
I've created a small javascript Rich Text Editor, but when I open it in an iframe, the padding of certain objects are not correct. Here's an image of what it looks like from the source:
But, when I put it in the iframe and use this source, it looks like this:
I tried changing the DOCTYPE and changing the margin: and padding: to 0px, but nothing changed. I can't seem to fix this. Any help would be greatly appreciated. Thank you!
As far as I can see, what's happening is that the iframe's width is not enough. From the source the colorpicker box can fill all the space it needs, but in the iframe it's cramped, shrinking everything inside it and making the color bands at the end and the gray 16, 32, 64 fall to another row. Also, the offset for the colorpicker seems to be off; are you using percentage-widths and offsets, maybe? You can do many things to solve this: just increase the width of the iframe (you can't make the box only spill out of the iframe), move the colorpicker box to the left, make the picker's size fixed (you'll need to resize the iframe or make it scrolling for this, etc. It's probably not a DOCTYPE problem, though. More details would be appreciated, but I hope this helps!
Ok. I figured out what I needed to do. I had the colorpicker div set to be at a specific .offset() with jQuery, but it didn't fully function in the iframe. The reason was because the div's width was variant on the color bit function. Because of this, jQuery had trouble determining the left positioning of the colorpicker div since the offset function I wrote uses the width of the div. So, all I needed to do was set the width of the colorpicker. ;) Thanks for the help!
My example here,
Shows an image in the center of CSS3 generated columns. I need the text in the column to the right of the image to wrap around the image so that it doesn't appear in front of the image. This to my understanding is not doable in current css.
Does someone have a NON-OBTRUSIVE way of achieving what I am looking for?
I'd love to achieve this look here,
without the title and misc stuff located in the top left of course. The idea would be to allow the adding of images anywhere in the markup and have it look correctly.
I dont care about browser support at this time, so - any solution is great!
Thanks in advance....
Erik
Without doing JavaScript hacks, I don’t believe there is any pure CSS way of doing this. There is the column-span property, which is supported by Opera (currently not in a public build), but it only has two values; none and all. The spec currently doesn’t allow you to specify the number of columns, which would be very useful. It’s something I’d love to see.
Maybe the column span property can help if you create an additional container for the image and set the column-span width to the cumulated width of the middle columns.
You could also make the middle column larger and remove the need for another column, so the text and the image will be nicely aligned, but at this step, it is design consideration.
http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns
Knock out the height and width img attributes - they're not needed - and use CSS max-width:100%;
There are some backwards compatibility issues (notably with IE), but they can be plugged with JS. This method is the future.
A useful related article with references:
http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/
Best,
Instead of defining the number of column you could define their size to adjust to the size of pictures.
Or you can define a size for every column, then you add a css selectors on images for making them automatically resize depending the width of the column.
Something like that
.column{
columns: 12em;
}
.column img{
width: 10em;
}
This is not exact answer to your question but at least there is possibility to wrap text around the image inside one column. Check "Example X" from here.