Set border based on padding from content - javascript

As far as I know padding is the space between border and content. I tried using padding but instead of the border shrinking down to the content, the content gets pushed to a new line.
What I want is the content to stay but the border autoscale/auto size to the content. And if possible, if the content is resized (let's say different reso or the browser window gets smaller), the border also follows the content but still keeping the padding value (in my case, 10px)
Been playing around with margin and padding since yesterday, but still no idea how to do it.
Any help will be really appreciated, guys.
td;dr: How to get border to autosize/autoscale to content.
html:
<div id="container">
<div id="eachitem">
</div>
</div>
css:
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
}
Container is for position the whole content into postion based on margin.
Each item is for an individual item based on a list. That is where I want the border to autosize/autoscale to, to the items.
Since different content have different length. I want it to scale down to the max content as shown in image below:

Click Demo
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
float:left;
width:250px;
}

Try to use word-wrap property.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
word-wrap: break-word;
}
Here is an example with your code.
After you edit your question, I see you want border to fit the content exactly? Well, try this.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
display: inline-block;
word-wrap: break-word;
}
Here is an example.

Resizing padding, margins and border weights based on content size is nasty in any language, due to the unpredictable nature of text. Content length, font weight and sizes, display resolution and window size all affect text in myriad ways. Additionally, most high-level languages like JS cannot compute text dimensions without actually rendering it first. This means you must first display the text, then compute how much space it occupies, then twiddle the surrounding properties. And depending on the APIs available, you might not even be able to predict what values to use. In that case, you have to iterate over multiple values, see what it looks like, and if it is not correct, run through all the steps again. Not a fun endeavour to get into.

Related

Body of page not shrinking at all, CSS, HTML

Right now I have a body with a width of 90%, and a left and right margin of 5%, and a border of 1px. Here's what I'm trying to do. I'm trying to make it so that when you zoom out all the way using ctr-, it'll shrink until it's a pin-prick in the middle of the page, but right now the body's width isn't shrinking at all when I zoom out all the way. It's staying the same size. Not sure what I did wrong. Please take a look at my code.
body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
}
P.S: If you're not really understanding what I'm talking about, please either hit ctr-, or ctr and the scroll thing on your mouse until your page's size is around 25%. Do you see how stackoverflow is like a pin-prick smack-dab in the middle? Do you see the width of the entire site being shrunk down to that size? Well, when I do that, the body of my site doesn't shrink at all. It stays the same size.
Change % to px
body {
width: 1000px;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
margin:auto;
}
I think this will fix your problem. Though best not using your body element as a wrapper. Use a div with the ID of wrapper like so.
#wrapper {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid black;
}
<body>
<div id="wrapper">
</div>
</body>
What this code does is sets the width to 90% so auto in margin property to take effect which centers your wrapper in the middle of their screen and uses border-box property so the border 1px width will not effect the layout, though you could use outline: 1px solid black if you do not want to use border-box.

Strange padding on div

The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}

How do you set the width of the background image for this Javascript code?

The freezegframe.js plugin by Chris Antonellis allows you to basically start an animated gif on a mouseover. It has some nice things like fading in the animation as well. This is the required syntax to kick in the plugin: you set
<script type="text/javascript" src="freezeframe.js"></script>
<script type="text/javascript">
freezeframe = new FreezeFrame();
</script>
in your header file, and then simply:
<img src="img/mr_div_retro_sphere.gif" freezeframe />
within your HTML body. The image can then be styled with
figure.freezeframe-container {
border-radius: 3px;
border-top: 1px solid __border__;
border-left: 1px solid __border__;
width: 100%;
margin: 0 auto;
-moz-box-shadow: 5px 5px 3px #888;
-webkit-box-shadow: 5px 5px 3px #888;
box-shadow: 5px 5px 3px #888;
}
As indicated in the documentation (see original link). The problem is that there is currently no way to style the background image. See the test example here.
As you can see from the test, the background image is sized using the original gif. However, because I want the site to be elastic in sizing, then I need for a way to size the initial image.
I've contacted the author, but he explains that the difficulty is that the code currently takes the first frame of the image---it seems unclear how to attach a CSS styling command to it.
That's weird, but a hacky way to make it look decent would be this:
.freezeframe-container { background-repeat: no-repeat; background-size: 78%; }
But it looks like the initial background image doesn't match the animated gif too well.
Hope that helps.

How to create an overflow option that links to another page if text overflows

I need to know how to create an overflow option that will link to another page once the text overflows by either me or by the browser size increases. I have divs with borders one side an image and the other the text. The text is inside a paragraph tag. This is not in a form at all. I prefer the code in JavaScript but will accept any other languages that will get the job done. I understand for the browser size increases that I can set the font-size but I want everybody including the blind to read the content.
Here is my logic::
Get JavaScript to detect the text size.
Determine if the text has passed the outside borders.
Create page for content. (optional)
Create/display link to rest of content.
I appreciate any help that you all can give.
To mrtsherman, if I used overflow it will look like an example I made below (tested in Firefox). I apologize for the confusion but the ultimate goal is to detect that the browser’s current text is too large for the divider tag, display a link to the detailed page and cut off all of the text that would typically overflow. I know I am making this a little complex but I would like for any reader to easily read the content. If you would go to tools > Options > content tab - fonts and colors - size: 28 in Firefox you will see big words in a hard to read overview of what the sentence/paragraph is trying to tell you. Simply put I am trying to make it easier to read the overview for reader who has truble seeing. Thank you for your input.
CSS:
.first_div
{
border: 2px dotted grey;
width: 415px;
height: 200px;
padding: 10px 10px 10px 10px;
overflow: auto;
}
.second_div
{
margin: -13px 0px 0px 205px;
padding: 10px 10px 10px 10px;
width: 200px;
height: inherit;
position: absolute;
overflow: auto;
border-left: 2px dotted grey;
}
#picture
{
background-color: green;
width: 200px;
height: inherit;
color: white;
}
h3
{
font-weight: bold;
color: black;
}
Body
<h3>Overflow Example:</h3>
<div class = "first_div">
<div class = "second_div">
<p>
This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside. This div text will be inside.
</p>
</div>
<div id = "picture">THIS IS A PICTURE</div>
</div>

Need help with Img within Div tag shows above curvy border

I am trying to get a curvy border that works in all browsers which i think have i have achieved now with a curvycorner.js add on i have found.
The trouble i am having now is that if i put an img in the div the corners of the image lay over the border corners.
example here, http://www.cozeez.co.uk/offline/test.php
Any ideas?
Thanks
Lee
The only real answer i can think of is to do it with CSS.
check this JSfiddle
http://jsfiddle.net/gty2G/4/
Set the image as the background to the div.
You just need to add overflow:hidden to the .myBox style declaration. The fix is more apparent when you use an image with a darker background:
http://jsfiddle.net/rsobers/gty2G/
edit
your right you just need to add overflow hidden
.myBox {
display: inline-block;
text-align: left;
border-top: 3px solid #0F0;
border-bottom: 3px solid #0F0;
border-left: 3px solid #000;
border-right: 3px solid #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
overflow:hidden
}
heres a demo
MORE INFO
check out css3-rounded-corners-hide-overflow-in-chrome-opera

Categories

Resources