Change DIV's height via JavaScript when word-wrap occurs

Question

I don't even know whether this is possible, however, I am hoping that JavaScript could provide a solution to this problem. I have a DIV, that shows the title for each page within a WordPress template that I am working on.

<div class="grid-block" id="page">

  <div id="page-info">

    <h3>#<?php is_home() ? bloginfo('description') : wp_title("",true); ?></h3>

  </div><!-- #page-info -->

</div><!-- .grid-block #page -->

The text that is called into the DIV comes in at various lengths, and sometimes over-exceeds the DIV. When the text exceeds the DIV, it wraps, just as it should, however, I am attempting to adjust the 'height' of this DIV, after a word is wrapped. I do not know if I could add some type of eventListener or something, however, pure HTML and/or CSS does not seem to have the components I need to solve this problem.

In addition, I understand that I 'could' use @media (media queries) to sort of emulate this effect, however, as far as I know, this can only be done in relation to the width of the Window, and I want the DIV to re-size 'only' when a string exceeds the width of this DIV. A demo of what I am attempting to do can be found at http://jsfiddle.net/justinbyrne001/SP3Q2/4/. I appreciate any comments, recommendations, and advice that anyone has regarding this matter. Thanks in advance.

Solution

Do you need the fix height on #page-info? If you just use padding:10, the div#page-info would automatically wrap around the text.

Comments

[sAnS]

i updated the fiddle can you check now..

[Anthon]

I reformatted your code block and change (command) to $ not sure if that is actually what you meant. Please update the question if not.

[Wtower]

What exactly is the question?

[Minix]

Edited the question the way it made sense to me. Could someone review? Hope that clears things up.

[Admin]

Although, yes, by removing the 'height' attribute from the CSS rules, the #page-info DIV would work as I am expecting, it does not when there is a DIV subsequent DIV right after. I apologize for this confusion, and I have updated my code within jsfiddle: jsfiddle.net/justinbyrne001/uamUM/13.

[ilovemondays]

I see there are now two fixed height's. 80px for #page and 36px height for #page-info. I would remove them both and give the #page a margin-bottom. Or are you want to vertical align the 80px #page to another div?

[Admin]

Yes, the #page will be vertically aligned with another DIV, which will 'float: left', against it. However, once the page reaches a specified dimension (i.e.: smaller than 700px wide), that DIV will be placed underneath it. Everything in my actual page in stacked, one DIV on top of another, however, I am using media queries (or @media (min-width and max-width) ) to orient the DIVs beyond a certain width.

[Admin]

I understand, that if I omit the 'height' attribute within the CSS rules, and simply keep padding at '10px', the DIV will wrap how I wish for it to wrap, however, there is a DIV underneath, that it runs over. An example of this can be found here: jsfiddle.net/justinbyrne001/uamUM/13. Moreover, when the page is below 700px in width, a 'different' DIV resides underneath '#page-info', and #page-info runs over this DIV as well... after the text inside wraps. I am attempting to dynamically push the subsequent DIV (below #page-info) down, as the text wraps from within.

[ilovemondays]

Ok, you can resize the other DIV with JS like this: $(function(){ var pageHeight = $("#page").height(); $("#otherDiv").height(pageHeight); }); And perhaps on a resize event: $(window).resize(function() { ... });

[Admin]

An example of the #page-info DIV, running over the subsequent DIV can be found at jsfiddle.net/justinbyrne001/uamUM/15.

[Admin]

Re-sizing the window, while using jQuery to detect when the actual '#page-info DIV' element exceeds a certain height might work. However, I am not sure whether that can be done through a conditional statement.

[ilovemondays]

If you use modernizr, you could detect media queries and declare a flag variable for "responsive only" functions, exmaple: if(Modernizr.mq('only all')) { flgResponsive = true; }

[sonal khandekar]

Hi Anthon,yes this is what i was trying to mean.

[sonal khandekar]

I prepared following script #!/bin/bash username=cpadmin passwd=vpn123 cd /tmp for host in cat servers.txt; do ssh $username@$host $passwd; expert echo "### $host ###" >> output.txt lspci | egrep -i --color 'network|ethernet' >> output.txt done but not getting proper output. its just keep on jumping to next server and never runs the commands

[Ulrich Schwarz]

Kind of sort of. I've never seen a ssh that takes the password like that on the command line, though.

[Ulrich Schwarz]

Could also use a heredoc: ssh user@host > output.file <<EOF (multiple lines of commands) EOF, minus the problem of providing the password.

[Centimane]

@UlrichSchwarz I haven't seen it either, but I assume that because it didn't throw an error for the asker that it might be working. I normally stick to keys if I want to automate, but then you have to set up keys first. Works great if you think of it before grooming 300 machines so their configuration includes them. Otherwise the asker will need expect to get the password in there