3 Replies - 402 Views - Last Post: 07 November 2018 - 09:07 PM

#1 dgriz13   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-November 18

Need help adding a menu to the left side of my website

Posted 07 November 2018 - 12:13 PM

-1
down vote
favorite
I need help adding a control panel on the left side of the page with the following buttons:

Speed Up This makes the animation go faster by reducing the timer interval by a factor of two, subject to the constraint that the if interval is already below 50 milliseconds when this button is hit, then no further reduction of the interval will be done. You can set the initial interval to 1000 milliseconds in the aspx web page.

Slow Down This slows the animation down by increasing the interval of the timer by a factor of two, subject to the constraint that if the interval is already above 10,000 milliseconds when this button is hit, then no further increase of the interval will be done

Set Animation Mode When the animation mode is set to 1, then the pictures rotate clockwise. When the animation mode is set to 2, then the pictures flip in a criss-cross fashion. The user enters the value of the animation mode in the text box for the animation mode in the control panel.

Error Message - Input validation must be done to ensure that the user has entered a legitimate value for the animation mode or the picture mode. An error message is displayed in the control panel area beneath the buttons to indicate the nature of the error. If the user types non-numeric characters or a decimal point number or an integer below 1 or an integer greater than 2, then the program must recognize each of these types of errors and print out an error message depending on the type of error made.

I need it to look like this: https://ibb.co/cqyJXq

Here is the my current code:
Page Language="C#"%>


<!DOCTYPE html> 


 


<html xmlns="http://www.w3.org/1999/xhtml"> 


<head runat="server"> 


    <title></title> 


    <script runat="server"> 


        protected void Timer_Tick(Object sender, EventArgs e)


        {


            if (heading.Text == "Cleveland Browns")


            {


                heading.Text = "History";


                heading.BackColor = System.Drawing.Color.DarkBlue;


                heading.ForeColor = System.Drawing.Color.YellowGreen;

                table1.BackColor = System.Drawing.Color.DarkBlue;


                table1.ForeColor = System.Drawing.Color.YellowGreen;

                table2.BackColor = System.Drawing.Color.DarkBlue;


                table2.ForeColor = System.Drawing.Color.YellowGreen;

                table3.BackColor = System.Drawing.Color.DarkBlue;


                table3.ForeColor = System.Drawing.Color.YellowGreen;

                table4.BackColor = System.Drawing.Color.DarkBlue;


                table4.ForeColor = System.Drawing.Color.YellowGreen;


            }


            else


            {


                heading.Text = "Cleveland Browns";


                heading.BackColor = System.Drawing.Color.SaddleBrown;


                heading.ForeColor = System.Drawing.Color.OrangeRed;

                table1.BackColor = System.Drawing.Color.SaddleBrown;


                table1.ForeColor = System.Drawing.Color.OrangeRed;

                table2.BackColor = System.Drawing.Color.SaddleBrown;


                table2.ForeColor = System.Drawing.Color.OrangeRed;

                table3.BackColor = System.Drawing.Color.SaddleBrown;


                table3.ForeColor = System.Drawing.Color.OrangeRed;

                table4.BackColor = System.Drawing.Color.SaddleBrown;


                table4.ForeColor = System.Drawing.Color.OrangeRed;


            }





            if ( img1.ImageUrl == "helmet.png")


            {


                img1.ImageUrl = "stadium.jpg";


                img2.ImageUrl = "helmet.png";


                img3.ImageUrl = "dawg.jpg";


                img4.ImageUrl = "brown.jpg";


            }


            else


                if (img1.ImageUrl == "dawg.jpg")


            {

                img1.ImageUrl = "helmet.png";


                img2.ImageUrl = "dawg.jpg";


                img3.ImageUrl = "brown.jpg";


                img4.ImageUrl = "stadium.jpg";








            }


            else


                if (img1.ImageUrl == "brown.jpg")


            {


                img1.ImageUrl = "dawg.jpg";


                img2.ImageUrl = "brown.jpg";


                img3.ImageUrl = "stadium.jpg";


                img4.ImageUrl = "helmet.png";


            }


            else


                if (img1.ImageUrl == "stadium.jpg")


            {


                img1.ImageUrl = "brown.jpg";


                img2.ImageUrl = "stadium.jpg";

                img3.ImageUrl = "helmet.png";


                img4.ImageUrl = "dawg.jpg";








            }


        }








    </script> 


</head> 


<body style="background-color:orangered; color:black"> 


    <form id="form1" runat="server"> 


    <div> 

        <asp:UpdatePanel runat="server">
            <ContentTemplate>
        <asp:Timer runat="server" Interval="2000" OnTick="Timer_Tick"></asp:Timer> 


        <asp:ScriptManager runat="server"></asp:ScriptManager> 


    <asp:Table runat="server" Width="100%" ID="table1" CellPadding="0" CellSpacing="0"> 


      <asp:TableRow> 


        <asp:TableCell ColumnSpan="3" HorizontalAlign="center"> 


            <asp:Label runat="server" ID="heading" Font-Size="XX-Large" Text="Cleveland Browns" BackColor="OrangeRed" 


                ForeColor="Black" Width="100%"> 


 


            </asp:Label> 


 


        </asp:TableCell> 


      </asp:TableRow> 


      <asp:TableRow> 


          <asp:TableCell> 


              <asp:Image runat="server" ID="img1" ImageUrl="helmet.png" Width="300" Height="200"/> 


          </asp:TableCell> 


          <asp:TableCell> 


              The Cleveland Browns are a professional American football team based in Cleveland, Ohio. The Browns compete in the National Football League (NFL) as a member club of the American Football Conference (AFC) North division. The Browns play their home games at FirstEnergy Stadium, which opened in 1999,[7][8] with administrative offices and training facilities in Berea, Ohio. The Browns' official colors are brown, orange and white.[3] They are unique among the 32 member franchises of the NFL in that they do not have a logo on their helmets 


 


          </asp:TableCell> 


          <asp:TableCell> 


              <asp:Image runat="server" ID="img2" ImageUrl="dawg.jpg" Width="300" Height="200"/> 


          </asp:TableCell> 


      </asp:TableRow> 
        </asp:Table>
                </ContentTemplate>
            </asp:UpdatePanel>

        <asp:Table runat="server" width="100%" CellPadding="0" CellSpacing="0">


        <asp:TableRow> 


            <asp:TableCell> 

                <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Table runat="server" Width="100%" ID="table3" CellPadding="0" CellSpacing="0">
                    <asp:TableRow>
                        <asp:TableCell Height="404">
                The history of the Cleveland Browns American football team began in 1944 when taxi-cab magnate Arthur B. "Mickey" McBride secured a Cleveland, Ohio franchise in the newly formed All-America Football Conference (AAFC). Paul Brown, who coach Bill Walsh once called the "father of modern football",[1] was the team's namesake and first coach. From the beginning of play in 1946 at Cleveland Municipal Stadium, the Browns were a great success. Cleveland won each of the AAFC's four championship games before the league dissolved in 194
9. The team then moved to the more established National Football League (NFL), where it continued to dominate. Between 1950 and 1955, Cleveland reached the NFL championship game every year, winning three times.  
               </asp:TableCell>
                    </asp:TableRow>
                         </asp:Table>
                 </ContentTemplate>
                </asp:UpdatePanel>
           

            </asp:TableCell> 


            <asp:TableCell  HorizontalAlign="Center"> 


                <iframe width="600" height="400" src="https://www.youtube.com/embed/yl8t8nSQL4c?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullsc
reen></iframe> 


 


            </asp:TableCell> 


            <asp:TableCell> 

                <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:Table runat="server" Width="100%" ID="table4" CellPadding="0" CellSpacing="0">
                    <asp:TableRow>
                        <asp:TableCell Height="404">
               McBride and his partners sold the team to a group of Cleveland businessmen in 1953 for a then-unheard-of $600,000. Eight years later, the team was sold again, this time to a group led by New York advertising executive Art Modell. Modell fired Brown before the 1963 season, but the team continued to win behind running back Jim Brown. The Browns won the championship in 1964 and reached the title game the following season, losing to the Green Bay Packers. The team subsequently reached the playoffs three times in the late 1980s, but fell short of playing in the Super Bowl, the inter-league championship game between the NFL and the rival American Football League (AFL) that started in 1966.  
                  </asp:TableCell>
                    </asp:TableRow>
                         </asp:Table>
                </ContentTemplate>
                </asp:UpdatePanel>

            </asp:TableCell> 


        </asp:TableRow> 
            </asp:Table>

          <asp:UpdatePanel runat="server">
            <ContentTemplate>
        <asp:Table runat="server" width="100%" ID="table2" CellPadding="0" CellSpacing="0">
        <asp:TableRow> 


          <asp:TableCell> 


              <asp:Image runat="server" ID="img4" ImageUrl="brown.jpg" Width="300" Height="200" /> 


          </asp:TableCell> 


            <asp:TableCell> 
                
When the AFL and NFL merged before the 1970 season, Cleveland became part of the new American Football Conference (AFC). While the Browns made it back to the playoffs in 1971 and 1972, they fell into mediocrity through the mid-1970s. A revival of sorts took place in 1979 and 1980, when quarterback Brian Sipe engineered a series of last-minute wins and the Browns came to be called the "Kardiac Kids". Under Sipe, however, the Browns did not make it past the first round of the playoffs. Quarterback Bernie Kosar, who the Browns drafted in 1985, led the team to three AFC Championship games in the late 1980s but lost each time.  


 


 


            </asp:TableCell> 


            <asp:TableCell> 


                <asp:Image runat="server" ID="img3" ImageUrl="stadium.jpg" Width="300" Height="200" /> 


 


            </asp:TableCell> 


        </asp:TableRow> 


 


    </asp:Table> 


 </ContentTemplate>
                </asp:UpdatePanel>


 


    </div> 


    </form> 


</body> 


</html> 






Is This A Good Question/Topic? 0
  • +

Replies To: Need help adding a menu to the left side of my website

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15320
  • View blog
  • Posts: 61,433
  • Joined: 12-June 08

Re: Need help adding a menu to the left side of my website

Posted 07 November 2018 - 12:19 PM

Make two DIVs after

228    <form id="form1" runat="server">

The first contains your menu.
The second contains everything else you have there.

In the CSS of the first float that left and give it a width. Float left the second.
Was This Post Helpful? 0
  • +
  • -

#3 Skydiver   User is offline

  • Code herder
  • member icon

Reputation: 7107
  • View blog
  • Posts: 24,130
  • Joined: 05-May 12

Re: Need help adding a menu to the left side of my website

Posted 07 November 2018 - 12:28 PM

Moving to ASP.NET...
Was This Post Helpful? 0
  • +
  • -

#4 Skydiver   User is offline

  • Code herder
  • member icon

Reputation: 7107
  • View blog
  • Posts: 24,130
  • Joined: 05-May 12

Re: Need help adding a menu to the left side of my website

Posted 07 November 2018 - 09:07 PM

Back in the early 2000's, yes you would try to do this using our ASP.NET and ASP.NET controls and table layouts and have all the work done server side. Now that it is 2018, the correct approach is to use CSS, Javascript, and HTML5 and do things client side. Are you doing this retro style for nostalgia purposes? Imagine the number of postbacks that would have to happen if you had even the slowest animation rate. What happens if the user is on a slow network?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1