Making a div with text that overflows scroll - css

Now I have a span with its overflow hidden like so in HTML and CSS - I'm using it for the twitter post on this website: http://benjaminpotter.org/clients/c3carlingford/
HTML & inline CSS
<span style='width:686px; height:50%; display:block; white-space: nowrap; padding-top:14px; padding-left:10px; overflow:hidden;'></span>
Now I need to somehow detect when the div does overflow, and then when it does, allow the text to scroll through with jQuery or something similar.
Any idea how to do these two things?

You can do it by wrapping the overflowing span with a div element and have the div be overflown:
<div id="twitWrap" style="overflow:hidden;">
<span id="myTwitter">A new Twit appears</span>
</div>
This way when you add your new twit to the html you can check if the span element's width is larger than its parent element:
if( $("#twitWrap")[0].offsetWidth < $("#myTwitter")[0].offsetWidth) ) ...
And then apply any jquery code you would like.

you can accomplish some tricks like placing an ending element:
<span style="...">Tweet twweeeet ...
<span id="endd" style="visibility:hidden"> </span>
</span>
then you check if #ender is out of its container width:
function toolarge() {
var ender = $('#endd');
return ender.offset().left - ender.parent().offset().left > ender.parent().width()
}
their might be some adjustements to make like using position() instead of offset() and playing with position:absolute property, but you get the idea.

You could perhaps have an inner container that is set to full width of the content (overflow:visible). If this inner container is wider than the outer (overflow:hidden) container then you need to scroll. Move the inner container to scroll.

Related

Why is css text-align:center, not centering text? Underlining in the same format is working

I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>

Changing or adding attribute to span within a div

My display code could look like this:
<div class="displayApproved">
<span class="bold">this is my text</span>
</div>
My .displayApproved has a padding-top:8px; to align to its neighbor element, and this works fine with non-bold content.
When there's a <span 'class="bold"'> inside, is there a way to adjust the padding on the div to 9px without creating a new class "displayApprovedBold" (several content pages would need changing)? If there's an advanced CSS rule though that would adjust that div's padding if the div contained that bold span, then one change and I'm done.
With jQuery you can just do:
$('.displayApproved:has(.bold)').css('propery', 'value');

div positioning on the website, how to position divs without using "top"

I have a problem with positioning divs on my page, I don't want to use top:50px; because I want to have comments in there as well so here comes my question is there any other way to position divs apart from "top" such as display:block in list styles?
thank you so much for any help!
Divs will appear naturally in the DOM flow. They will take up 100% of the width of their parent container by default and will base their height from the non-floated content within them. Use margins to space them out accordingly. By default they have position:static. If you want list styles, use <li> which are display:list-item and not display:block.
Example:
HTML:
<div class="comments"> Some really long comments </div>
<div class="foo"> Something that should appear below the comments </div>
CSS:
.foo {
margin-top : 50px;
}

why the background property is not running?

There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>​
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}​
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/

Make Div as wide as it needs to be

To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.

Resources