CSS - grab elements and display them inline (absolute positioning?)
I have a web page with DOM elements and I want to output all the h3s from that page and display them side by side at the top of the page. The question is, what is even possible?
<h3>I want</h3>
There are tons of other content between them so...
<h3>These headers</h3>
Keep in mind the're separated by many DOM elements...
<h3>To be displayed</h3>
Luckily no other h3s between them...
<h3>Inline next to</h3>
Thank you for trying to help :)
<h3>Each other </h3>
Here's a jsfiddle where I tried to use absolute positioning, but I'm sure it will be difficult to accept this path (fields):
I need code that works for at least IE7 and up and I cannot use JS / jQuery (it will be quite easy to do with jQuery). Of course I cannot edit the html myself either .
Any ideas, or impossible ones?;)
source to share
Is this very easy to do with jQuery / Javascript?
I just messed up a bit and came up with this: http://jsfiddle.net/zLbuP/19/
The code just gets content from all H3s, deletes them, and creates a new combined H3.
//When then DOM is ready
jQuery(document).ready(function($) {
//Cache the content of the headings to a variable so it may be removed before creating a new H3
//this allows us to select the new H3 without having to use more complex selectors
var h3text = $('#WhatIHaveNow h3').text();
// remove the old H3 now that we have their content
$('#WhatIHaveNow h3').remove();
// create a new, empty H3 at the top of the parent div
$('#WhatIHaveNow').prepend("<h3></h3>");
//insert our cached content
$('#WhatIHaveNow h3').text(h3text);
});
source to share
Unfortunately, you cannot avoid using JS. You can set all tags h3
to an absolute position and have them all on top, but you need to use JQuery to set their margin. I made a small script to dynamically define the margin for each tag h3
based on the width of the previous sibling:
var margin = 0;
$("#TryMe h3").each(function () {
margin += $(this).prev().width();
$(this).css("margin-left", margin + "px")
margin += 20;
});
You can see a live example here: http://jsfiddle.net/VezCA/2/
source to share
You might be able to use nth-child; those.
h3 { position:absolute; left: 0px; top: 0px; }
h3:nth-child(1) { margin-top: 15px; }
h3:nth-child(2) { margin-top: 30px; }
IE7 doesn't support nth-child, but it's pretty hacky even though you can get it to work the way you wanted it to. As others have said, this is easy to do in jQuery or just JS.
source to share