I am making an application where tags can be added to posts, much like stackoverflow's tagging system. I want to display a list of all common tags, each in a little box that fits the tag perfectly (like the <input type="submit"> tag stretches to fit the size of the word). How can I do this and have the <div>s align themselves horizontally with text-wrapping in their containing div? I.e. something like this, where each word has <div id="tag">:
tag1 thisisalongtag
biology physics
thiswordwraps science
one two three four
The easiest solution is to style the tag elements with display: inline-block, which allows text-wrapping while preventing margin-collapsing.
DEMO
display:inline-block
doesn't work on all browsers (older IEs... including 7)
try this instead:
http://jsfiddle.net/mtwDX/
tags are inline but with white-space:nowrap; and a proper line-height set
hope this helps
I'm not sure that I completely understand your question but there are different ways to achieve this "tag" effect.
You could set the div's to float:left, clear:left and give it a little padding (5px on all sides). Then put all of your tags in a fixed-width container and they should tile themselves horizontally until they run out of room, at which point they will wrap down to the next "line" below.
An even simpler way is to just use inline elements, such as anchor tags, which are being used on this site (stackoverflow). The elements naturally flow horizontally until they run out of room and then wrap. If you inspect them you'll see there is not much to their styles. And they are behaving the way an inline element is expected to behave.
Sometimes the solution is simpler than you think. You might not need to bother with div's or floating. But without more information it's hard to say exactly what will work for you.
Related
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.
my friend has designed my webpage for me, but has now gone on holiday and i only know the very basics. I want to reduce the width of my buttons on one of my pages.
I think this is the part of the coding (where it says (".betbutton) i need to change but just don't know how - hope somebody can help me - thanks
$(".betbutton").click(function(){
$("#numberofbets").html(this.attributes["nob"].value);
bet = this.attributes["bet"].value;
This is the problem with how it actually looks on my site and need the size to reduce so the buttons all shift to the left.
http://freebetoffersonline.com/bet-calc.php
Instead of giving you a fish I will teach you to fish.
First use Firefox and then install the Firebug extension. Restart Firefox.
Once you have restarted there should be a Firebug menu, open it.
Once Firebug is open click on the blue arrow icon and that will let you choose the element inspector.
Then use the element inspector to inspect the "button" elements.
Firebug has a "style" tab on the right, it will show you the styles, including the width from various CSS classes. It will also show you where the CSS style sheet is located.
Even nicer, you can CHANGE the styles including the width to test and see if the changes you think may work will actually do what you think they will.
When you look at the buttons with Chrome's Web Inspector you see that they have a dynamic width. The container, which has class name .bidlist has a fixed width of 880px. Change it to ~560px and you should be fine :-)
I'm not really sure which buttons you want to change the size of, so this answer will be rather generic.
You need to use CSS. Inside the HTML for your button put style="width:100px;" or whatever width you want. If there is already a style attribute in the button's HTML, just add the width:100px; to the style.
In style.css, line 797, there is the .bidlist width property. Reduce that to something like 580px and see them shrink :)
Your friend made the buttons 25% of the width of the bidlist container, so there would be 4 fitting in each row. If you reduce the parent container's width, they shrink, too. In the style.css file, the design of all the elements are implemented, including the container width. So that is the part you change, not somewhere in the HTML (markup).
I have two simple textareas where in i want to highlight the javascript code being written.
As soon as the user types the function in the text area , the keywords etc have to be displayed in different color or so.
I tried to hack this script . But couldnt get what i wanted.
You could check Ace (demo) and CodeMirror (demo).
I suppose Textarea that can do syntax highlighting on the fly? and Online Code Editor questions will be useful for you as well.
I've always been interested in having textarea elements with added functionalities such as code highlighting, while still remaining as simple editable textareas. I've experimented a little bit here: http://www.dcc.uchile.cl/~jmunoz/
It's far from optimal and quite buggy, but still... It allows text highlighting using arbitrary rules. I used to have a working version which allowed to change the text color (And not just the background), but It had some issues.
Basically what I do is adding a div overlay with exactly the same content and font style as the text area but with transparent fonts. The text inside has span elements wrapping certain words and phrases which may have special backgrounds, borders, etc.
To allow for different font colors, I tried making the textarea text transparent while showing the overlay div text. The main issue there was that the cursor became transparent too.
I would say that using a div with editablecontent seems like a much better option.
I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo
If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task
Because a text area cannot contain markup, you cant so highlighting per se. The approach I used for an inline spell checker was to overlay divs for words that were spelled incorrectly. This was possible because it was possible to get the x and y location of words inside the text.
However it may be preferable to overlay the textarea with a content editable div which would allow you to wrap content in spans etc and then apply styling.
[CLOSED]
On this page, there is a div box which holds a code example, where a certain line is supposed to be given a background color. This background color is actually done by using regular expressions to replace a start and end symbol with the code to make a div with our red background. This works fine, we have our red background, the regular expressions are doing their work.
However, if we scroll over a bit in code box, we notice that the red background color stops where the actual edge to the code box is (but we can scroll over, so it's not the end). This should illustrate what I mean:
I've tried pretty much every CSS value I could think of with firebug, including trying every possible overflow option. With width, if I manually give an absolute width, it can extend it further, but this won't do because the background coloring is generated automatically, with javascript using a method with good fallback in case the javascript fails to load or is disabled.
So, does anyone know a way to get those backgrounds extending all the way to the end? I considered counting the characters, but since the background colors often cover more than a single line, and even hundreds of lines on some other pages, it seems impractical and rather resourcy. A CSS method would be prefered, though should it come to it, I'll go with a javascript fix.
If you want to take a look at the page for yourself, feel free, that one is just a sandbox to show the specific problem, and the script that replaces certain comments with div elements to make this background image is found here.
Thanks in advance for any help and/or advice.
<pre> and overflow:auto doesn't play nice together, and is likely the base of your problem.
Try to use a <div> as scroll container instead.
So:
<div style="overflow: auto">
<pre>
...content...
</pre>
</div>
Instead of
<pre style="overflow: auto">
...content...
</pre>
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.