Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with script to resize div element on page.

    Dear reader,
    I am having a problem in my webpage and thought I could maybe use a javascript to fix it. Im rather new to javascript so my problem might be stupid or worse not possible. Let me start with a short description of the issue.
    I have two divs on top of each other called #pagecontent and #pagequestion. These divs change in height depending on their contents. However what I want is that they will alwats fill the entire height of the page. I've tried the following code to extract their heights and resize them if their sum is less than the #body height (div filling page).

    Could someone maybe take a look and tell me why it's not working and a possible fix?

    <code>
    $(document).ready(function () {
    var content_height = $("#pagecontent").height();
    var question_height = $("#pagequestion").height();
    var body_height = $("#body").height();
    if (content_height + question_height < body_height) {
    var diff = (body_height - (content_height + question_height)) / 2;
    }
    else {
    var diff = 0;
    }
    $('#pagecontent').css("height", content_height + diff + "px");
    $('#pagequestion').css("height", question_height + diff + "px");
    });

    $(document).ready(function () {
    $(window).resize(function () {
    var content_height = $("#pagecontent").height();
    var question_height = $("#pagequestion").height();
    var body_height = $("#body").height();
    if (content_height + question_height < body_height) {
    var diff = (body_height - (content_height + question_height)) / 2;
    }
    else {
    var diff = 0;
    }
    $('#pagecontent').css("height", content_height + diff + "px");
    $('#pagequestion').css("height", question_height + diff + "px");
    });
    });
    </code>

    In advance thanks for your time and input. Hope that someday I can return the favor.

    Kind Regards,
    Lennaert

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,300
    Thanks
    23
    Thanked 612 Times in 611 Posts
    All of this is for your information.
    Technically your using jquery, a framework of javascript.
    To use that you need to call it's library with something like this:
    Code:
    <script type='text/javascript' src='javascript/jquery.js'></script>
    or it don't work. You didn't show that you did so just saying.
    You have two
    Code:
    $(document).ready(function ()
    A no-no. Only need one.
    You have the same code in both of yours. One is a function and has to be called, I don't think you want that so take that one out.
    When you write out a message look in the tool bar above you. There is a hash mark #. Click this to put your code inside of the code tags.

    What's more important here is you don't need jq for this. I do believe it can be done with html/css only. Why not just post your html/css code and we'll see what can be done.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your quick response. I sadly enough can't provide you with the complete code. Secondly after doing some research the only thing I can really do with CSS, which is of course my final resort is to set the height of the first div element to auto (this fills up the height of the content) and the second to 100% (this fille up the page completely). The only issue with this is, that I rather have two elements of similar sizes than for example having the first (upper) div be very small and the bottom one be massive.

    Once I get to work tomorrow I'll try deleting one of the functions. Is the script besides that correct?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,300
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Just wanted to see div placement. No problem here is a jquery to do what you want. Adjust to your needs:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Playing Around</title>
    <script type='text/javascript' src='javascript/jquery.js'></script><!-- CALL YOUR OWN FROM WHERE YOU PUT IT-->
    <script type="text/javascript">
    $(document).ready(function(){
    	var new_height = $(document).height() - $("#header").height() - $("#footer").height();
    	$('#main').css('height', new_height);
    	$(' #side').css('height', new_height);
    });
    </script>
    <style type="text/css">
    body{   /*this is needed*/
    	margin: 0;
    	padding: 0;
    }
    #container{
    	width: 960px;
    	margin: auto;
    
    }
    #header{
    	width: 100%;
    	height: 70px;
    	background-color: purple;
    }
    #side{
    	width: 120px;
    	height: 100%;
    	float:left;
    	background-color: #66FF66;
    }
    #main{
    	height: auto;
    	width: 800px;
    	padding: 20px;
    	background-color: silver;
    	float:right;
    }
    #footer{
    	clear:both;
    	width: 960px;
    	position:absolute;
    	bottom: 0px;
    	background-color: pink;
    	text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="header">This is the header</div>
    	<div id="side">A few words in a box as long as the main</div>
    	<div id="main">Lorem ipsum ei noster fabulas mei, nihil congue dolores no sed. Sit atqui dolorem et. Sed hinc dicant splendide ne, vim legimus tincidunt efficiantur id. Animal laboramus id vix, percipit pertinax praesent ad ius. Nam atqui quaestio ut, cum eu minim tibique accusamus, in qui mutat oportere interpretaris. In cum quas deleniti, essent intellegat mea an.
    Sit legendos consequat no, diam dicunt ei qui. His ut errem omittam, ei mea latine dolores. Mei ut amet esse, sea an laoreet iudicabit vituperata, nostrum honestatis persequeris cum at. Iusto nusquam eam te, ut amet solum posse vis, has iisque sanctus deseruisse ut. Eu cum movet intellegebat, sed alii habeo at.
    Nec no blandit molestie, eu eos elitr integre postulant, vim dicam antiopam no. Usu mutat eirmod eu, te eum assum graece voluptua. Vim verear accusata definitiones eu. In minimum moderatius nec, an ullum summo phaedrum mea. Nisl definitiones eu sit. Mea zzril petentium adolescens id, prima quodsi ex mei.
    Ornatus euripidis te vel, pro autem laoreet democritum in, eu vis animal sententiae. At atqui alterum legendos eos, ius euismod convenire honestatis in. Cu vix mediocrem prodesset adolescens, eum ex populo dolores salutatus, nam veniam consequat ei. Tota solet facilisis eu ius. Ut volumus antiopam est, pro ea nusquam legendos. Primis feugait urbanitas quo id.
    Ut aeterno similique vix. Pro ne etiam takimata necessitatibus. Tale utinam ea nec, nisl ridens vim no. Mea percipit expetenda eu, ornatus assentior eos ut. Quis dicunt dolorem ne vix. Duo cu mazim lobortis salutatus, volumus rationibus est ut. Duo posse etiam aperiam no, vis ea nisl volutpat suscipiantur.
    Prima denique incorrupte vel id, ut sonet dolores appellantur his, an nam vitae invidunt. Nisl tation adversarium eos ut, mea dico aliquam mandamus ad. Sed ne nobis dissentiunt, quo ubique veritus nostrum ei. Et mucius signiferumque qui, ad appareat probatus convenire vim. Possit percipitur appellantur at has, ea duo minim veniam.
    Debet melius vel eu. Est libris prodesset deseruisse ea. Vero splendide pro cu, scripta eripuit id mea. Etiam nulla affert ei per, dolores postulant mea id, vix te animal torquatos. Ut usu ullum menandri singulis, ei nec noluisse suscipiantur signiferumque.
    Cu putent tincidunt est, duo an ridens denique. Mei libris nominavi mediocritatem eu. Cu eos fastidii adipisci disputationi. Est an persequeris neglegentur, mel veritus voluptua copiosae id, quaeque graecis placerat et has. Ei tota nominati signiferumque vis, vel at consul iriure complectitur.
    Vis ut illum rationibus definitionem, eum cibo impedit no, his an minimum inimicus. At nam idque copiosae iudicabit. Oratio option te eum, liber theophrastus an per, ne latine incorrupte repudiandae eam. Id reque appellantur vis. Mei ne doming aliquid. Zzril fabulas molestiae te duo. Est eu molestiae rationibus, sint meliore incorrupte quo ut.
    Mea docendi praesent at, pro ei electram maiestatis, sint sanctus percipit eu nec. Mollis lucilius comprehensam sea ne. Magna dicat salutandi at mel, usu malis delicatissimi id, cu probo delectus vis. Ea mel habeo ubique singulis, graeci graecis signiferumque ut sea. Duo ei liber regione salutandi, eu viderer eligendi sed, est ex omnis putent nusquam.
    </div>
    
    	<div id="footer">I've got a hand like a foot<br>(Card players lement)</div>
    </div>
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    lennaertdeboer (11-02-2012)

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much, I will try it out once I get back in the office on monday.
    Have a nice weekend and again, thank you for your time.

    Regards,
    Lennaert


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •