>>>Hi,
>>>
>>>pretty new to jquery and CSS and struggling as to how to get this to work.
>>>
>>>I have an ASP.NET application with some static pages and a scrollable area between the header and footer areas (see the screen shot attached).
>>>
>>>I want to resize the inner area bounded by the double light blue rectangle so that it's height changes as the user resizes their browser. I have the width changing automatically already.
>>>
>>>I have my CSS defined like this:
>>>
>>>.myContent
>>>{
>>> padding: 50px;
>>> font-family: 'Times New Roman',Tahoma;
>>> font-size: large;
>>> border:double;
>>> border-width:thick;
>>> border-color:lightblue;
>>> overflow:auto;
>>> height:500px;
>>>}
>>>
>>>Then in my ASPx file I'll have it like this:
>>>
>>>
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
>>> <div class="myContent">
>>> <asp:BulletedList ID="BulletedList1" runat="server" CssClass="lallUL">
>>> <asp:ListItem>CUSTOMS ADVISING</asp:ListItem>
>>> <asp:ListItem>IMPORTS</asp:ListItem>
>>> <asp:ListItem>EXPORTS</asp:ListItem>
>>> <asp:ListItem>TRANS-SHIPMENTS</asp:ListItem>
>>> <asp:ListItem>FREIGHT FORWARDING</asp:ListItem>
>>> <asp:ListItem>INLAND HAULAGE</asp:ListItem>
>>> <asp:ListItem>24 HOUR SHIPPING ADVICE</asp:ListItem>
>>> <asp:ListItem>APPLICATION FOR ALL PERMITS</asp:ListItem>
>>> <asp:ListItem>APPLICATIONS FOR RELEVANT LICENCE</asp:ListItem>
>>> <asp:ListItem>PREPARATION – Applications for Customs Bonds</asp:ListItem>
>>> <asp:ListItem>CHARTERING - AIRPLANE / VESSEL (For sensitive cargo)</asp:ListItem>
>>> <asp:ListItem>TRANSPORTATION</asp:ListItem>
>>> <asp:ListItem>BROKERAGE CONSULTANCY</asp:ListItem>
>>> <asp:ListItem>PREPARATION OF LETTERS (Government and Agencies)</asp:ListItem>
>>> <asp:ListItem>AFTER HOUR SERVICES (Including ALL Public Holidays)</asp:ListItem>
>>> <asp:ListItem>AIRPORT ATTENDANCE</asp:ListItem>
>>> <asp:ListItem>WAREHOUSING CARGO</asp:ListItem>
>>> <asp:ListItem>COLLECTION OF DOCUMENTS / PAYMENTS</asp:ListItem>
>>> </asp:BulletedList>
>>> </div>
>>>
>>></asp:Content>
>>>
>>>I found a jquery function which is supposed to let me get the height to change when the browser is resized:
>>>
>>>
$(function () {
>>> $(window).load(function () { // On load
>>> $('#div').css({ 'height': (($(window).height())) + 'px' });
>>> });
>>> $(window).resize(function () { // On resize
>>> $('#div').css({ 'height': (($(window).height())) + 'px' });
>>> });
>>> });>>>
>>>I have tried putting this in my Root.Master (which is inherited by all pages) within script tags in the the page's head tags.
>>>
>>>So 2 questions:
>>>
>>>1. Is that the right place to put the script?
>>
>>That way this script will be loaded from all pages based on that master.
>>
>>>
>>>2. How do I refer to div's with class of myContent only in the script?
>>
>> $('.myContent')
>>>>
>>>
>>>(I know I'll have to adjust the script to take in consideration of the header and footer heights, but that will be the next issue) :)
>
>Hey Boris,
>
>I downloaded jquery-3.1.0.min.js from the jquery site and put it in the root of my site (just to make it easy for the pathing while I work this problem out).
>
>I put this in my master file:
>
>
<head runat="server">
> <meta charset="UTF-8" />
> <title></title>
> <link rel="stylesheet" type="text/css" href="Content/Site.css" />
> <script src="~/jquery-3.1.0.min.js"></script>
> <script>
>
> $(function () {
> $(window).load(function () { // On load
> $('.myContent').css({ 'height': (($(window).height())) + 'px' });
> });
> $(window).resize(function () { // On resize
> $('.myContent').css({ 'height': (($(window).height())) + 'px' });
> });
> });
>
> </script>
></head>>
>but I'm still not seeing any change.
>
>Can you se anything wrong that I've done?
Press F12 and depending of the browser debug the script.
First see if you have any error messages in console.
Against Stupidity the Gods themselves Contend in Vain - Johann Christoph Friedrich von Schiller
The only thing normal about database guys is their tables.
