My question is pretty simple. I have div1 that has a variable offset().top depending on other elements of the page. I want to insert an absolute div next to it (basically with the same absolute top) either with just css or with javascript too.
HTML looks something like
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
Since in the comments you say you want to place div2 after it has been inserted in the DOM, you can try the following:
$('#div2').css('top', $('#div1').offset().top - $('#div2').offset().top)
#div1, #div2 { display:inline-block; }
and
<div id="div3">
<div>
<div id="div2">stuff</div>
</div>
<div>
<div>some divs</div>
<div id="div1">div1 stuff </div>
</div>
</div>
Related
<div id="target">
<div>here</div>
<div>select this<div>it has more div within</div></div>
<div></div>
How to get the last child of target? I tried
$('#target').find('div:nth-child(2)')
Is this even correct? It seems like it will also select div within my target, which is what I don't want, hmm.
$('#target').children().last();
Use :last-child pseudo-class selector with direct child selector(>).
$('#target > div:last-child')
console.log($('#target>div:last-child').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
To select the second child use :nth-child(2) along with direct child selector(>) to avoid nested element.
$('#target > div:nth-child(2)')
console.log($('#target > div:nth-child(2)').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
Let me fix your markup first:
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
As far as I understood, you only want to select the text "select this". I am not sure what you are trying to do, but if you only want to get the text. You can just manipulate the string getting it using text() and then remove the <div>...</div> part. But, if you are trying to put some css attribute like color onto this node. You need to fix your div because of the cascading feature.
So instead, you might want to do this:
<div id="target">
<div>here</div>
<div>
<div>select this</div>
<div>it has more div within</div>
</div>
</div>
and then
$("#target").children().last().children().first();
Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn
All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}
I have a design where on mobiles/tablets all the text is in one div but when on 'desktop' the p tags move to the div below it. (All divs have different background images).
Here's the markup -
<main>
<div class="pane">
<h2>A thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>Another thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A third thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>A fourth thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
<div class="pane">
<h2>The last thing</h2>
<p>This stuff needs to jump to pane-details below when around 48em</p>
</div>
<div class="pane-details">
<p></p>
</div>
</main>
Demo: http://codepen.io/sturobson/pen/aCqDc
So, when the page hits 48em (768px) the <p> in .pane needs to drop down into the following .pane-details
How do I do this without duplicating the content and nastily resorting to display: none;.
Use the window resize event:
$(window).on('resize'), function() {
if ($(window).width()<768) {
// move the element
} else {
// move it back
};
}).trigger('resize'); // force it to run on load
However, you can probably solve this with pure CSS if you rethink your HTML layout a little.
I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help
jQuery Masonry: http://masonry.desandro.com/
Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.
Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.
I have HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to get rid of the div's of class="a" but leave their content. My initial attempt was:
$("div.a").replaceWith($(this).html());
However this is undefined. How would you do this?
try
$("div.a").each(function(){
$(this).replaceWith($(this).html());
});
Replacing elements with their stringified HTML content will nuke any event handlers that might be in place. This won't:
$("div.a").each(function () {
$(this).replaceWith($(this.childNodes));
});
In jQuery you could also use contents and unwrap.
$(".parent").find(".a").contents().unwrap();
<div class="parent">
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>