Jump to content
Sign in to follow this  
rhishi20

How to call javascript function from onload event of Div

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

Share this post


Link to post
Share on other sites

That's right, a div does not have a load event, so what event are you trying to capture? Why not put the Javascript code below the div?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...