Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
In my Application I am using 3 sliding divs.
My system resolution is 1280*1024

If I open this any higher resolution systems(1336*768) its not fitting.

I am not getting where I need to modify this thing.


My requirement is like, when i click first slide div it should open and remaining 2 slide divs should go down and place it just before the footer dive in any window resolution.

Please check my code here.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"  runat="server">
    <title></title>
    
    <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="CSS/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap.js" type="text/javascript"></script>
          
        <script type="text/javascript">
      
           
   </script>
    <script  type="text/javascript">
        
        $("document").ready(function () {

            if ($("#HiddenField1").val() == "block") {
                $("#FiltersliderDiv").css("display", "none");
            }
            if ($("#HiddenField1").val() == "none") {
                $("#FiltersliderDiv").css("display", "block");
            }
            $("#Filters").click(function () {
                $("#ReportsliderDiv").slideUp("slow");
                $("#FiltersliderDiv").slideToggle("slow");
                $("#MapAndChartsliderDiv").slideUp("slow");
            });
        });
        $("document").ready(function () {

            if ($("#HiddenField2").val() == "block") {
                $("#MapAndChartsliderDiv").css("display", "none");
            }
            if ($("#HiddenField2").val() == "none") {
                $("#MapAndChartsliderDiv").css("display", "block");
            }
            $("#MapAndChart").click(function () {
                $("#FiltersliderDiv").slideUp("slow");
                $("#ReportsliderDiv").slideUp("slow");
                $("#MapAndChartsliderDiv").slideToggle("slow");
            });
        });
        $("document").ready(function () {

            if ($("#HiddenField3").val() == "block") {
                $("#ReportsliderDiv").css("display", "none");
            }
            if ($("#HiddenField3").val() == "none") {
                $("#ReportsliderDiv").css("display", "block");
            }
            $("#Report").click(function () {
                $("#FiltersliderDiv").slideUp("slow");
                $("#MapAndChartsliderDiv").slideUp("slow");
                $("#ReportsliderDiv").slideToggle("slow");
            });
        });
 
            </script>
            <style type="text/css">
            #Filters
{
    margin: 0;
    padding: 0;
    left: 0;
    color: #FFFFFF;
    width: 100%;
    height: 22px;
    margin-top: 97px;
    background-color: #0082AA;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    line-height: 22px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #FFFFFF;
}
#MapAndChart
{
    background-color: #0082AA;
    color: #FFFFFF;
    width: 100%;
    height: 22px;
    cursor: pointer;
    text-align: center;
    
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    line-height: 22px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #FFFFFF;
}
#Report
{
    background-color: #0082AA;
    line-height: 22px;
    color: #FFFFFF;
    width: 100%;
    height:22px;
    
    cursor: pointer;
    text-align: center;
   
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
}
#FiltersliderDiv
{
width: 100%; 
height: 80%;
overflow-x: scroll; /* Hide horizontal scroll bar*/
overflow-y: scroll; /*Show vertical scroll bar*/
}
#MapAndChartsliderDiv
{
margin-top: 10px;
width: 100%; 
height: 70%;
}
#ReportsliderDiv
{
width: 100%; 
height: 70%;
}
.stripe
{
    width: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 95px;
    background-image: url('img/MainHeader.png');
    background-color: #0082AA;
    text-align: right;
    background-repeat: no-repeat;
}
.FooterStripe
{
    width: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
}
#linksignout
{
     margin-right: 20px;
      
      text-decoration:none;
}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
html {height:100%;}
body {height:100%; margin:0; padding:0;}

 </style>
</head>
<body>
    <form id="form1"  runat="server">
     <div id="bg">
     <div class="stripe">
      <asp:LinkButton ID="linksignout" runat="server" Text="Signout" 
           ForeColor="White" Font-Bold="False"></asp:LinkButton></div>
          
    <div id="Filters">
                    Filters</div>


                    <div id="FiltersliderDiv"> 
                  
 <asp:Button ID="Button1" runat="server" Text="Button" /><br />
 <asp:Button ID="Button2" runat="server" Text="Button" /><br />
 <asp:Button ID="Button3" runat="server" Text="Button" /><br />
 <asp:Button ID="Button4" runat="server" Text="Button" /><br />
 <asp:Button ID="Button5" runat="server" Text="Button" /><br />
 <asp:Button ID="Button6" runat="server" Text="Button" /><br />
<asp:Button ID="Button8" runat="server" Text="Button" /><br />
<asp:Button ID="Button9" runat="server" Text="Button" /><br />
<asp:Button ID="Button10" runat="server" Text="Button" /><br />
<asp:Button ID="Button11" runat="server" Text="Button" /><br />
<asp:Button ID="Button12" runat="server" Text="Button" /><br />
<asp:Button ID="Button13" runat="server" Text="Button" /><br />
<asp:Button ID="Button14" runat="server" Text="Button" /><br />
<asp:Button ID="Button15" runat="server" Text="Button" /><br />
 <asp:Button ID="Button7" runat="server" Text="Button" /><br />
 <asp:Button ID="Button16" runat="server" Text="Button" /><br />
<asp:Button ID="Button17" runat="server" Text="Button" /><br />
 <asp:Button ID="Button18" runat="server" Text="Button" /><br />

        </div> 
         <div id="MapAndChart">
                    Map and Chart</div>
                    <div id="MapAndChartsliderDiv"> 
        </div>
        <div id="Report">
            
                    Report</div>
                    
                    <div id="ReportsliderDiv"> 
</div>    
<asp:HiddenField ID="HiddenField1" runat="server" Value="block"/>
    <asp:HiddenField ID="HiddenField2" runat="server" Value="block"/>
    <asp:HiddenField ID="HiddenField3" runat="server" Value="block"/>
    <asp:HiddenField ID="HiddenField4" runat="server" Value="block"/>
    
            <div class="FooterStripe"> <img src="img/MainFooter.png" style="width: 100%;" /></div>
            </div>
    </form>
</body>
</html>
Posted
Updated 13-Nov-13 16:26pm
v8
Comments
Kornfeld Eliyahu Peter 13-Nov-13 3:48am    
I'm believe, that your problem is the mixed px and % declarations for heights. This can create interesting effects...
D-Kishore 13-Nov-13 4:21am    
But every place I used 100% width and height only
bluesathish 13-Nov-13 5:36am    
Change all px value into interm of % values. for (ex) style .stripe
{
width: 100%;
height: 25%;
}
D-Kishore 13-Nov-13 5:53am    
Yes I changed it, but no success, kindly guide me.
bbirajdar 13-Nov-13 21:18pm    
The only problem you have is that you have hardcoded values in px; You should always use in %

Hi,

Option 1:

Please avoid using defined value for size like this,
width: 100%; [Correct]
height: 22px; [Vary upon screen resolution]

Try to use (%), so that it won't effect in any browser or resolutions.


Option 2:

ajaxlibrary-accordion-sample[^]

Here in Ajax tool kit there is an option named [accordion], which solves your problem.

See the demo in the same URL under the topic [accordion]
 
Share this answer
 
Comments
D-Kishore 13-Nov-13 23:52pm    
hi Mohan, if i give height in % the div is not showing on the screen
[no name] 14-Nov-13 4:10am    
Try this option:

Press F12 - in IE browser and you can see the Inspect Element option.
Use the Mouse POinter and try to click on the DIV.
select the Div and try to change the Hieght and Width as you require.

If this not works, may be your Div may be hidden by other Element, so Try the Attribute [z-index:9999 !important;] in the CSS Class for a single Div and check, is that visible.

Please update your result.
Perhaps you have to embrace the liquid, fluid and elastic design, referenced in my past answer: To Get Screen resolution[^].

—SA
 
Share this answer
 
Comments
D-Kishore 14-Nov-13 1:06am    
Yes sergey I am checking your links,
But I don't know why i am not getting even i am maintaining 100% width and height.
Sergey Alexandrovich Kryukov 14-Nov-13 2:26am    
You will learn it. What is suspicious in your CSS code with "width: 100%": you use '#' selectors, but this is selecting by the attribute "id" which is should be unique per HTML. If it is not unique, this is invalid HTML, the behavior is unpredictable, it if is, you can only provide style for only one element... Use classes, '.' selectors...
—SA
Sergey Alexandrovich Kryukov 14-Nov-13 2:27am    
You will learn it. What is suspicious in your CSS code with "width: 100%": you use '#' selectors, but this is selecting by the attribute "id" which is should be unique per HTML. If it is not unique, this is invalid HTML, the behavior is unpredictable, it if is, you can only provide style for only one element... Why not using CSS classes instead?..
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900