Jump to content

How to call javascript function from onload event of Div


rhishi20

Recommended Posts

I am working on asp.net project. i have a gridview which looks consistant on my monitor screen.but when my website's run on different shapes of monitor screen, alignment of gridview disturbes completely.

 

following is my structure of gridview

 

<div class="CSSTableGenerator" id="div1" style=" overflow:scroll ; height:450px" >

 

<asp:GridView ID="GridView2" style="table-layout:fixed;" Width="100%; height:698px" AutoGenerateColumns ="False" AllowSorting="true" runat="server" CellPadding="4" ForeColor="#333333" GridLines="Both" >

 

</asp:gridview>

 

</div>

 

here actually div is responsible for setting height of gridview.

 

now i want to make my gridview flexible in size with any other monitor sizes.

 

and hence i have decided to use window.innerheight and window.innerwidth in javascript but now major problem is how do i call javascript function onload of div. because div don't have onload event. please suggest solution .

Edited by rhishi20
Link to comment
Share on other sites

To Justsomeguy & davej

 

In my case <div> is working like container for gridview. and responsible for setting height of gridview.

my problem is on different monitor sizes gridview height and width are non-consitent. hence i think that i can use windows.innerheight and windows.innerwidth in javascript. so i have define a javascript function which calculates windows.innerheight and windows.innerwidth and thinks that instead of setting height from div we can call this javascript function for setting div's height and hence ultimately gridview's height. but how to call this function from <div> beacause there is no onload event. i have also tried by your way like below

 

 

 

<div>

<gridview> content </gridview>

</div>

 

<script type="text/javascript">

felxibleht();

</script>

 

following is my javascript function

 

function felxibleht() { debugger; var newht; var newwt; newht = window.innerheight; document.getelementbyid("GridView2").style.height = newht; newwt = window.innerwidth; document.getelementbyid("gridview2").style.width = newwt; }

 

but does't work. please suggest any mistake i have commited.

Edited by rhishi20
Link to comment
Share on other sites

Guys, i have resolve my basic problem in some extent. my basic need is my website must work on different monitor sizes and on different resolutions.

 

i have came to know that, i can use css media queries for setting different css style to different resolutions.

 

following is the media query for 1024*768 resolution

 

@media only screenand (min-width : 1000px) and (max-width:1024px){#div1{ width:1012px; height:460px; }#GridView2{ width:1012px; height:460px; } }

 

you can see that i have set width and height for gridview but again i have stuck on how to set different cell width for each cell in gridview by using css. please help if any idea

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...