Essentially what I want to achieve is a a dynamic portion of text - in the middle of a paragraph, that is dynamic. I am having trouble creating an in-line div (or span) that can contain something like an unordered list or several other spans which I can move up or down to show them. Think a window (with overflow) that contains 4 divs stacked on top of each other, with only enough room to show one of them (the rest are hidden). I want to be able to move this stack up and down to show other parts of this stack.
I was hoping someone could reply with a jsfiddle that shows a big block of text with a dynamic portion in the middle of it, in line with the rest of the text in the paragraph.
You could start with something like this, using jQuery Draggable.
http://jsfiddle.net/RqHFL/
Apply the "draggable" to you div like this:
$( "#draggable1" ).draggable({ axis: "y" }); //constrained to y axis movement
After some consideration, vertical-align: bottom seemed to be my best friend.
Related
Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
I have a responsive design that mostly works. Images are in their own DIV, and that div is floated left or right. Captions for the images are in the div, so they stay with the image. By default image div width is set to 30%
If I put sufficient text between successive divs I get a pleasing display, with the text wrapping around the image.
If the images are too close, however they stack, and I end up with 2 images floating next to each other, and a tiny column of text.
The use of "clear" eliminates the text too.
Is there a way to float a div so that:
Text flows around it.
A second image does not stack adjacent to it even if there is nominally room for it.
In essence I want to float an image, but ensure that it is flush to the left margin, and not be on top of something else.
At this point my process is to try each page at multiple effective widths, and add more text/move the div as needed. This is fairly time consuming. I expect with a bit of time I will find out that I need X words between DIVS,
In some cases, I will stack multiple images within a single DIV. This works well for related images.
Example of a page with the issue about 3/4 of the way down the page.:
http://sherwoods-forests.com/Trees/Leaf_Trees/Poplars/Columnar_Poplars.html
CSS file for the site:
http://sherwoods-forests.com/2col.css
Put the floated image DIVs into the text container, not as a sibling to the text container. That way the text should float around it and won't be affected by a clear in one of the image DIVs.
If that doesn't work, you'll have to post your code - this general answer is all I can give you without the actual code...
I have an image that is displayed from an awesomefont character with text next to it. The problem I have is I don't want the text to appear under the image, but in right-justification to the right of the image. I've tried using a separate container and different types of alignment codes, but I can't get it to do what I need.
To view the problem, go to www.gibsonits.com and scroll down to the table of 6 points (2 rows, 3 columns). There you will see the text wrapping around the icon.
You need to add two divs side by side inside wrapper div. In first div, add font awesome icon and in second div add text. Look at working example here
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I have a design consisting of three divs ( http://jsfiddle.net/herrturtur/Mem6u/ ), put next to each other by display: inline-block, but for some reason the last div appears in the middle of the page.
If possible, I'd like to display the three divs next to each other, with the height of the switch div adjusting automatically to the height of the div containing the select element.
What is the function of the switch? you may be able to work this with the float method and strategically placed "clear"..
if you have the option to use JQuery there is a handy tool called accordion (or accordian as there are a couple) that can perform the actions you want relatively easy.. have you already developed the code to perform the actual switch?
UPDATE:
I think is is similar to what you are looking to do .. let me know
working url with this code:
http://home.comcast.net/~elkins35/test.html
Just view the source to see the edits to the code you were using