I have a problem that I can't find the answer anywhere on the net.
In my project, I want to have a picture and when hovering it, I want a textarea to appear with some text. This part is working very well.
The part that bug me is that I also want it to stay at opacity:1 when the cursor is focused in the textarea.
I want to achieve this using CSS only if possible.
I am able to have the textarea:focus work since I can make it change the background color easily.
Here's the JS Fiddle to show you all:
http://jsfiddle.net/X7Qu6/
HTML:
<div class="charpicture">
<div class="BACKGROUNDdiv"><span class="BACKGROUNDtitle">Background</span>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales erat justo, nec fermentum mauris tristique vitae. Sed dignissim dapibus imperdiet. Morbi blandit in mi ac tincidunt. Donec at purus. </textarea>
</div>
</div>
CSS:
.charpicture:hover .BACKGROUNDdiv,
.BACKGROUNDdiv:hover{opacity:1;}
.BACKGROUNDdiv textarea:focus{background:green;opacity:1;}
Your textarea is inside BACKGROUNDdiv, so when it's hidden (opticity:0), there is no option to make any of its content visible. Textarea and your background have to be independent. Overlapping can be achieved with some relative/absolute positioning.
Example: http://jsfiddle.net/X7Qu6/1/
Is that what you was looking for?
Related
This question already has answers here:
text-align justify not working
(11 answers)
Closed 3 years ago.
I'm trying to display a block of text with word-wrap but uses a variable size of white spacing so the text fills the width of the box evenly on each line. (see picture)
I'm stumped on this one and google searches haven't come up with anything. I'm also utilizing bootstrap and jquery in the site, so if either of those can create a solution that would be fine too.
You need to justify the text. Use the text-align: justify to do that. More information can be found on CSS Tricks.
.text-justified {
width: 200px;
text-align: justify; /* this is the important line, it justifies the text */
border: solid black 2px;
padding: 5px;
}
<p class="text-justified">This text will be justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor felis et augue tristique euismod. Mauris at rutrum justo. Aenean mollis rutrum arcu, vitae feugiat dolor pharetra et. </p>
I want to target elements which have a visible scrollbar using only CSS. Is this possible without javascript?
For example, If I have 3 divs styled with overflow-y:auto, How do I change the styles for them only when their scrollbar has appeared?
CSS does not cover this selection. You need to use JavaScript.
With pure CSS I doubt it but it doesn't require a lot of javascript code either, look at this example:
document.querySelectorAll('*').forEach(el => {
if (el.offsetHeight > document.documentElement.offsetHeight) {
console.log('I am higher than my father: ', el);
el.classList.add('higher-class');
}
});
.higher-class {
color: red;
}
<div class="container" style="height:50px;">
<div class="some-child" style="height:100px;font-size: 5rem">
Higher element
</div>
</div>
check
offsetHeight property:
https://developer.mozilla.org/es/docs/Web/API/HTMLElement/offsetHeight
And the classList property:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
It's not possible without javascript
However it only requires a single line of JS to toggle a CSS class on when the scrollbar is visible:
el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)
Here's a demo:
//toggles a class on an element when the scrollbar is visible:
function updScrollClass(el) {
return el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)
}
//changes the height of myDiv every second:
setInterval(function(){
var myDiv = document.getElementById('myDiv')
myDiv.classList.toggle('tall')
updScrollClass(myDiv)
},1000)
#myDiv{
width:150px;
height:200px;
overflow:auto;
}
#myDiv.tall{
height:300px;
}
.scrollbarOn{
background:yellow;
}
<div id='myDiv' class='tall'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis nisl in accumsan porta. Etiam in urna orci. Vestibulum elementum, velit ac vestibulum efficitur, est elit auctor massa, nec porta ante nunc eget tellus. Integer eu ligula felis.
</div>
I want to prevent the browser from doing the work to parse and pre-render or paint some "hidden" HTML until I'm ready to show it, so that I can quickly display a minimal set of content, having the browser only do the work the render the visible pieces.
I'm looking for maximum render/paint speed of initial page load.
My current HTML:
<div id="stuff">
<div class="item">
<div class="visible">
<h1>Item 1</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
<img src="/img/1.jpg" alt="" />
</div>
</div>
<div class="item">
<div class="visible">
<h1>Item 2</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
<img src="/img/2.jpg" alt="" />
</div>
</div>
... and so on...
</div>
The actual "invisible" content is MUCH more significant than in this example, and there are 50 "items" per page.
My external CSS:
.invisible {
display: none;
}
Will display: none in an external stylesheet prevent the browser from pre-rendering the hidden content?
Is there a better way to do what I want? Should I put an inline style="display:none" on the div instead?
Thanks!
display: none will not prevent the browser from parsing/loading that markup and associated resources (EDIT by Steven Moseley: tested this and found that display:none will actually prevent the browser from painting the HTML, i.e. applying CSS to the elements inside the hidden div, and will only do the work to parse the HTML to construct the DOM, which will in fact give a performance advantage). It is simply not rendered as part of the page flow until its display value changes. Generally speaking display: none and visibility: hidden have little or no impact on page load time. The main venue for optimization / performance with display: none involves selectively choosing when to display it since that triggers a reflow/rerender of page content, and even that is usually a negligible difference in all but very complex applications.
If you want to wait to load the content until it's needed, don't include it at all (or include empty div placeholders) and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. jQuery makes this very simple with its built in AJAX functions.
Can you avoid building the invisible HTML in the first place? Are you going to at some point set .invisible { display: block }?.
I've found display: none isn't as wonderful for performance as you'd expect. You're better off only adding the extra elements to the screen when your user needs them, with infinite scrolling or pagination.
Try and avoid putting HTML into the page if it's not going to be viewed, and just add what you need in 1 go to minimize DOM manipulation.
Is it likely a user will look at all 50 items per page?
Not sure what the problem is: http://watercookies.topfloorstudio.com/
If you scroll down to "Latest News", I'm trying to get the div with the class .newscontentright to be inline with the image on the left. I've wasted too much time trying to figure it out on my own. Any help?
You need to set the width of newscontentright
.newscontentright {
width: 300px;
}
And remove the following from between newscontentleft and newscontentright
<div style="clear:both;"></div>
As a side note, learn to lay out pages without using clear. Use clear only when absolutely necessary, otherwise things get messy. 'Overflow: auto' is often a better solution.
In this particular case the clear is completely unnecessary so just remove it.
maybe try your clear before your first float?
<div style="clear:both;"></div>
<div class="newscontentleft">
<img class="imageshadow" width="178" height="122" alt="news1" src="images/news1.jpg">
</div>
<div class="newscontentright">
<h3>Fall Blue Ridge Parkway “Bike for the French Broad”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, turpis ut hendrerit porttitor, lectus ipsumegestas sapien, ac tristique metus quam id est. </p>
<a> href="#">Read the full article »</a>
</div>
Usually, I've seen it with forms, but I've found it helpful to group related sets of data (eg when you have multiple tables on a page, using a fieldset around each table or group of related tables to define a visible meaning and a group name (legend)). Is this abusing the fieldset tag to the point where, in my uses, it no longer has semantic meaning?
I believe this would be abuse. http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.10 states "The FIELDSET element allows authors to group thematically related controls and labels".
The "field" bit in the name fieldset refers to <form> fields.
Using fieldset outside forms to group aribtrary data is clearly semantic misuse.
However, your HTML will validate and God will not Kill a Kitten.
fieldset is about form control group. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls.
That does not means a fieldset always group fields within a form, even though the specification discuss fieldset only within the context of user interacting with form...
So the "abuse" can come from the fact the HTML 4 and XHTML specs do not require fieldset and legend to be contained within form elements. FIELDSET can even be the child of the BODY element. It's valid syntax to put fieldsets outside forms.
But, when you describe something as a fieldset that isn't really a fieldset, you just cause confusion.
It's best to think of HTML / XHTML tags as describing the meaning of an element rather than how it will look. Then you can use CSS to make the element look like whatever you want.
If you group data for presentation purpose, you can find here a nice CSS alternative.
For reference:
.fieldset {
border-right: 1px solid #75736E;
border-bottom: 1px solid #75736E;
border-left: 1px solid #F2F0EE;
border-top: 1px solid #F2F0EE;
padding: 10px 3px 3px 3px;
}
.outer {
border-left: 1px solid #75736E;
border-top: 1px solid #75736E;
border-right: 1px solid #F2F0EE;
border-bottom: 1px solid #F2F0EE;
width: 200px; /* CHANGE THIS FOR BOX SIZE */
}
.legend {
float: left;
margin-left: 15px;
margin-top: -8px;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
background: #FFF;
}
<div class="legend">Lipsum.com Is The Best</div>
<div class="outer">
<div class="fieldset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec congue fermentum metus. Quisque vel ante.
Cras purus metus, dignissim at, luctus et, sollicitudin eget, urna.
Maecenas eget lacus. Aenean bibendum risus non erat mattis semper.
Aliquam placerat nibh eget lacus. Sed blandit eleifend justo. Nam elit.
Fusce feugiat orci id eros facilisis laoreet.
Integer vestibulum condimentum purus.
Proin vehicula congue lacus. Quisque placerat diam nec enim.
Nunc lorem. Maecenas nec sem sed nulla tristique faucibus.</div></div>
If you want to group tables, consider using an appropriate heading (h1-h6) element for each group. Individual tables can be described using the 'caption' element. The 'summary' attribute is also available for each table.
From the spec:
Each table may have an associated
caption (see the CAPTION element) that
provides a short description of the
table's purpose. A longer description
may also be provided (via the summary
attribute) for the benefit of people
using speech or Braille-based user
agents.
And for the record, the 'fieldset' element is not intended to be use outside of forms. And within forms, it is intended to conceptually group like input fields - things like 'personal information' or 'billing address', etc.
Here's an interesting article that discusses what screen-reader users hear when navigating fieldsets. http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/
I can see semantic advantages to blocking content into fieldsets with legends.
Although the W3C associated the use of fieldsets and legends with forms, allowing the use outside the form tag opens up new boundaries to experimentation. Potentially similar to definition list in use.
I personally do not think that the "field" in fieldset is specific to form field. It just inherited relationship from it's use within the form tag.
field is in reference to the grouping.
Imagine going to your local parks and recreation to play softball with your friends. There are 3 available fields. All of them are have signs on the fence "BASEBALL ONLY"
Do you pack up your gear and go home?
labeling the use of fieldsets and legends outside the form tag abuse is narrow sighted.
No where in the definition does it mention forms:
The FIELDSET element allows authors to
group thematically related controls
and labels. Grouping controls makes it
easier for users to understand their
purpose while simultaneously
facilitating tabbing navigation for
visual user agents and speech
navigation for speech-oriented user
agents. The proper use of this element
makes documents more accessible.
I consider xhtml tags formatting control. div p blockquote etc.
<h1>The Big Book about Everything</h1>
<fieldset>
<legend>Jokes</legend>
<h2>30 pages of humorous Jokes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Poems</legend>
<h2>20 pages of well written poems</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Horror</legend>
<h2>3 Short and scary stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
<fieldset>
<legend>Mystery</legend>
<h2>3 Short and mysterious stories</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cras nec diam eu lectus condimentum faucibus in et odio.</p>
</fieldset>
The fieldset tag is also of use to screen readers and some other assistive technologies.