Hello,
I am trying to add static labels and textboxes for username and password on a carousel; I want it to be static while the images in the carousel is switching images. here is the code for the webpage where I want the event to occur. where the image of cars is
where i want to put my carousel and make it switch while the labels and textboxes remain static.
On the same page, I want to add facebook, twitter and LinkedIn icon links on the footer as well
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
18 Points
98 Posts
Carousel Issue
Mar 16, 2020 12:12 PM|Donald416|LINK
Hello,
I am trying to add static labels and textboxes for username and password on a carousel; I want it to be static while the images in the carousel is switching images. here is the code for the webpage where I want the event to occur. where the image of cars is where i want to put my carousel and make it switch while the labels and textboxes remain static.
On the same page, I want to add facebook, twitter and LinkedIn icon links on the footer as well
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Homepage.aspx.cs" Inherits="Homepage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Home</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;"> <form id="form1" runat="server"> <div> <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li> <li><a href="#" style="color: #FFFFFF">Services</a></li> <li><a href="Login.aspx"style="color: #FFFFFF">Sign Up</a></li> </ul> </div> </div> </div> </div> <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:130px;"> <div class="container"> <br /><br /> <h1 style="color: red; margin-top:-2.5%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification</h1> </div> </div> <!--Carousel Start--> <div id="Carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top:-4%"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!--wrapper for slides--> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/homeimg.jpg" alt="..." /> <div class="carousel-caption"> <div class="form-horizontal col-md-6" style="margin-right:0%;"> <h1 style="font-size:x-large; margin-top:-3%; color:#200662;">Login</h1><hr style="color:#200662";/><br /> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Username"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label2" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-md-2"></div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Font-Size="larger" Class="btn btn-success" OnClick="Button1_Click" /> <br /> <asp:Label ID="Label7" runat="server"></asp:Label> </div> </div> </div> </div> </div> </div> <!--controls--> <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">next</span> </a> <!--wrapper ends--> </div> <!--Carousel Ends--> <div class="container"> <div class="row"> <div class="section"> <div class="col-md-4"> <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">Inclusive Services...</h2> </div> </div> </div> </div> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="section"> <div class="col-lg-4"> <img class="img-circle" src="images/Toyota-2016-Lineup.png" alt="Toyota-2016-Lineup" width="250" height="150"/> <br /><br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Vehicle(s) Verification</h2> <hr /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> <div class="col-md-4"> <img class="img-circle" src="images/phoneimg.png" alt="phoneimg" width="250" height="150"/><br /> <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone(s) Verification</h2> <hr /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/BarCode img.png" alt="BarCode img" width="250" height="150"/><br /> <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">(Product) Bar Code & QR Code Verification</h2> <hr /> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Ut fermentum justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> </div> <hr /><footer class="container" style="background-color:black; width:auto; height:100px;"> <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p> <p style="color: white;">Copyright © 2018 Doxtrak Tech. All Rights Reserved. · <a href="Homepage.aspx">Home</a> · <a href="About.aspx">About Us</a> · <a href="#">Contact</a> ·</p> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>All-Star
53041 Points
23622 Posts
Re: Carousel Issue
Mar 16, 2020 01:48 PM|mgebhard|LINK
Use standard CSS like float left or right, z-index, and HTML.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Homepage.aspx.cs" Inherits="WebFormsDemo.Homepage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Home</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link href="Content/Site.css" rel="stylesheet" /> </head> <body style="background-color: #DCDCDC; background-image: url('images/Dox.png'); overflow-x: hidden;"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" style="border: 1px solid green; background-color: white;"> <div class="carousel-item active" style="z-index: 1;"> <img class="d-block w-100" src="..." alt="First slide" /> </div> <div class="carousel-item" style="z-index: 1;"> <img class="d-block w-100" src="..." alt="Second slide" /> </div> <div class="carousel-item" style="z-index: 1;"> <img class="d-block w-100" src="..." alt="Third slide" /> </div> <div style="float: right; border: 1px solid pink; margin: 5px; padding: 5px; z-index: 100; background-color: grey;"> <form id="form1" runat="server"> <div> <asp:TextBox ID="Username" runat="server"></asp:TextBox> </div> <div> <asp:TextBox ID="Password" runat="server"></asp:TextBox> </div> <div> <asp:Button ID="Login" runat="server" Text="Button" /> </div> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>Contributor
3730 Points
1424 Posts
Re: Carousel Issue
Mar 17, 2020 06:12 AM|yij sun|LINK
Hi Donald416,
Accroding to your description,I suggest you could use bootstrap Carousel to carousel image and show text use carousel-caption.
Besides, I suggest you could use HyperLink to link to another page.
More details,you could refer to below codes:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Home</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;"> <form id="form1" runat="server"> <div> <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" style="color: white">JOSCHECK</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li> <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li> <li><a href="#" style="color: #FFFFFF">Services</a></li> <li><a href="Login.aspx"style="color: #FFFFFF">Sign Up</a></li> </ul> </div> </div> </div> </div> <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:130px;"> <div class="container"> <br /><br /> <h1 style="color: red; margin-top:-2.5%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification</h1> </div> </div> <!--Carousel Start--> <div id="Carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top:-4%;text-align:center"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!--wrapper for slides--> <div class="carousel-inner" style="height:300px; margin-left:12%"> <div class="item active"> <img src="image/chicago.jpg" alt="..."/> </div> <div class="carousel-caption"> <div class="form-horizontal col-md-6" style="margin-right:0%;"> <h1 style="font-size:x-large; margin-top:-3%; color:#DCDCDC;">Login</h1><hr style="color:#200662";/><br /> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Username"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label2" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-md-2"></div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Font-Size="larger" Class="btn btn-success" /> <br /> <asp:Label ID="Label7" runat="server"></asp:Label> </div> </div> </div> </div> <div class="item"> <img src="image/chicago.jpg" alt="Chicago" /> </div> <div class="item"> <img src="image/chicago.jpg" alt="New York" /> </div> </div> <!--controls--> <a class="left carousel-control" href="#Carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#Carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> <!--wrapper ends--> </div> <!--Carousel Ends--> <div class="container"> <div class="row"> <div class="section"> <div class="col-md-4"> <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">Inclusive Services...</h2> </div> </div> </div> </div> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="section"> <div class="col-lg-4"> <img class="img-circle" src="images/Toyota-2016-Lineup.png" alt="Toyota-2016-Lineup" width="250" height="150"/> <br /><br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Vehicle(s) Verification</h2> <hr /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> <div class="col-md-4"> <img class="img-circle" src="images/phoneimg.png" alt="phoneimg" width="250" height="150"/><br /> <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone(s) Verification</h2> <hr /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> <div class="col-md-4"> <img class="img-circle" src="images/BarCode img.png" alt="BarCode img" width="250" height="150"/><br /> <br /> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">(Product) Bar Code & QR Code Verification</h2> <hr /> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Ut fermentum justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> </div> <hr /><footer class="container" style="background-color:black; width:auto; height:100px;"> <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p> <p style="color: white;">Copyright © 2018 Doxtrak Tech. All Rights Reserved. · <a href="Homepage.aspx">Home</a> · <a href="About.aspx">About Us</a> · <a href="#">Contact</a> ·</p> <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/image/download.jpg" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </body> </html>Result:
Best regards,
Yijing Sun
Member
75 Points
161 Posts
Re: Carousel Issue
Mar 17, 2020 05:09 PM|Prathamesh Shende|LINK
Please use Slider.js for carousel its so easy to use
its has so many options and its free too