LCP is defined as the time that it takes to paint the largest content item above the fold.
How do responsive content wrappers fit into that mix? Like say that I have the following structure:
<body>
<div id="wrapper">
<div class="some_above_the_fold_content">
<p>Whatever</p>
</div>
<div class="some_visually_below_the_fold_content">
<p>large content</p>
</div>
</div>
</body>
Visually, the second div is "below the fold", but it is a child element of the main wrapper div, which is "above the fold" since it's the primary page element.
What does LCP compute it's time from? What's visually below the fold (div #2) or the parent div?
In your example, <p>Whatever</p> is the LCP element.
LCP elements are either text, images, or video. The #wrapper element contains a text element - but isn't itself a text element.
As a side note: If a user happens to enter the page at a position further down the document (for example, they are linked to an anchor link that exists partially down the page) it's possible that <p>Large Content</p> would now be above the fold, and therefore the LCP element.
Related
I've tried several remedies after searching here but can't seem to make this work.
2 separate divs: 1 div with 4 image links in separate columns (each has a CSS fade rollover effect), and one div underneath with a simple line of text in a full-width column. I'm trying to hide the text div and reveal it upon triangle image rollover.
Here's a link with the images and the first text blurb shown below: http://goodsouldesign.com/redmont
<div id="triangles>
<a>image1</a>
<a>image2</a>
<a>image3</a>
<a>image4</a>
</div>
<div id="blurb1>Text here</div>
<div id="blurb2>Text here</div>
<div id="blurb3>Text here</div>
<div id="blurb4>Text here</div>
Any ideas are appreciated!
Now that I know exactly how you have it laid out, I'm writing a new answer. While you may need the blurbs to span the full width, they are still very close to the elements, which means they could be made into siblings. Take this for example:
<div id="wrapper">
<a id="tri1"></a>
<a id="tri2"></a>
<a id="tri3"></a>
<a id="tri4"></a>
<div id="blurbs">
<div id="blurb1">Text here 1</div>
<div id="blurb2">Text here 2</div>
<div id="blurb3">Text here 3</div>
<div id="blurb4">Text here 4</div>
</div>
</div>
The blurbs are now a child of the blurbs container, which in turn is a sibling of the triangles. This would allow you to use the css sibling selector ~ to access them.
Alternatively, you don't even need the blurbs container.. It might make styling a little easier, but you could accomplish this layout simply by having the blurbs be block elements, whilst the triangles are display: inline-block;. This would put all the triangles on the same line, and bump a blurb down below it. Give it 100% width, and it should be what you want.
Here's a fiddle that shows how to do this with no container, and the sibling selector:
#wrapper #tri1:hover ~ #blurb1 { display: block; }
http://jsfiddle.net/cJJtc/1/
Hope that helps!
UPDATE:
I realized that my answer might have been a bit to quick to dismiss what you were doing.. I assumed that you had the text blurbs in a different area than the triangles which would make this impossible... However, if the text is meant to be right underneath the images or some similar layout, you can move the blurbs to be inside of the triangles wrapper, underneath their corresponding triangle image, and then use an adjacent css selector (exactly like the example you posted in the comments) to hide and show them. Let me know if you need an example.
Pure CSS cannot be used to create an effect such as this. The reason for this is that CSS is sequential, and can only be applied in an inward and onward fashion.. Basically, a CSS selector can only apply to an element, it's siblings which come after it, or it's children. Selecting parent elements, or elements outside of an element's "family" is not something that CSS should be used for.
An effect like this would typically be done with Javascript, which has much more power of selection.
For example:
document.getElementById('tri1').onmouseover=function(){
document.getElementById('blurb1').style.display = "block";
};
document.getElementById('tri1').onmouseout=function(){
document.getElementById('blurb1').style.display = "none";
};
See this fiddle for a full example:
http://jsfiddle.net/tQjd4/
(I'm not expert on javascript, so I'm sure there are more efficient ways to do it, but that works!)
I tend to use jQuery to shortcut my javascript, which would be something like:
$('#triangles a').hover(function(){
$('#'+$(this).attr('rel')).css('display','block');
}, function(){
$('#'+$(this).attr('rel')).css('display','none');
});
assuming that you've given each triangle a rel attr equivalent to the blurb text id
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
You can find my current work here: http://mp3dj.free.fr/affix/site/
However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: http://jsfiddle.net/namuol/Uaa3U/
Current code:
<div class="container">
<div class="row affix-top" data-spy="affix" data-offset-top="60">
<div class="span12">
<div class="row">
<div class="span3">
<img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
</div>
<div class="span9"><h1>Samantha Sam</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
</div>
</div>
</div>
Any help appreciated!
What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).
Another part of the JS code:
$('#nav').affix({
offset: $('#nav').position()
});
makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
The height of the complete navbar is set using the small piece of JS code.
When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back.
Possible solution 2: add a margin-top to the next element once the navbar sticks
update:
https://stackoverflow.com/a/15177077/1059884
an excellent solution using CSS
So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.
Is there any way to select a css file by saving the screen width to a jsp variable?
Is there a way to align a div below another div and use the above div as a sort of container for it? This question is a little complicated
Goal: To have an image with a text label underneath it. Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.
Here's something like what I'm doing.
<div id="container">
<div id="inner">
<div class="1">--stuff</div>
<div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
<div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
<div class="1">2.0</div> <-- Want the text at 25% of the image (right)
<div class="2">4.0</div> <-- Want the text at 50% of the image (right)
<div class="3">6.0</div> <-- Want the text at 75% of the image (right)
<div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>
What you are wanting to do - Responsive Design - is very cool but also gets pretty complicated. It takes a bit of learning, but CodeSchool has a high quality course called Journey Into Mobile that covers adaptive screen sizes and should get you on the right track.
You'll need to dig into Responsive design, Media Queries & Fluid layouts.
As mentioned above Codeschool does have a great course covering these areas.
I've worked with CSS enough that I can get columns to work alongside content if I have a set number of columns: I simply define the sidebar(s) in the HTML prior to the content, and specify that they float to the left or right, while giving the content a margin-left or -right such that it doesn't flow into the space below the end of the sidebar.
I have a new challenge though, whereby the number of columns may vary between pages. In my HTML, I don't want to specify the sidebar content prior to the main page content though, which is the only way I know how to do it.
Essentially, I want the HTML to look like this:
<div id="container">
<div id="content">
<!-- Main body content goes here. -->
</div>
<div class="sidebar">
<!-- Sidebar DIV should appear to the right of the content DIV. -->
</div>
<div class="sidebar">
<!--
Another sidebar DIV, with this one *preferably* appearing to the
right of the one above, since it appears lower in the code and is
assuming LTR. I'm open to CSS that makes this sidebar appear to
the left instead of the right, however.
-->
</div>
<!-- Any number of additional sidebar DIV's can appear here. -->
</div>
I'm not sure if I should be trying to float the content/sidebar DIV's, make them position absolute, specify the width, etc. to make the content stretch automatically with the variable number of sidebars. It's probably worth noting that the size of each sidebar will be constant.
div.sidebar {
width: 100px;
}
On final note: if there's an improvement I can make to the HTML that will help, (e.g.: surrounding all the sidebar DIV elements in a parent DIV such as <div id="sidebars">), I'm open to suggestions there as well.
I guess I'll have to accept the fact that this requires HTML tables since no one can offer a CSS solution for this.
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>