Goodday,
Very confused. Dazzled. Everything.. :-) I have made a page...this is the page:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Contact.aspx.vb" Inherits="Contact" %>
<!DOCTYPE html>
<html lang = "en">
<head runat="server">
<title>blabla</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="bl" />
<meta name="keywords" content="blabla" />
<meta name="author" content="blabla" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/cform.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
$(document).ready(function () {
//
}); //
</script>
<!--[if lt IE 8]>
<div style='text-align:center'><img src="http://www.theie6countdown.com/images/upgrade.jpg"border="0"alt=""/></div>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body class="not-front">
<form id="form1" runat="server">
<div>
<div id="main">
blabla
<div id="inner">
<div class="top2_wrapper">
<div class="bg1"><img src="images/bg1.jpg" alt="" class="img" /></div>
<div class="top2_inner">
<div class="container">
<div class="top2 clearfix">
<h1>contact us</h1>
<div class="breadcrumbs1">Home<span></span>Pages<span></span>Contacts</div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container">
<div class="row">
<div class="span9">
<h2><span>blabla</span></h2>
<figure class="google_map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3894.331481453587!2d99.95368306057432!3d12.5603807486186!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa61d3b0e1607b0!2sBaan%20Khun%20Por%20Hotel!5e0!3m2!1sen!2sth!4v1574141019645!5m2!1sen!2sth" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</figure>
<h3>blabla</h3>
<p>
blabla<br />
blabla<br />
blabla<br />
blabla
</p>
</div>
<div class="span3">
<h2><span>blabla</span></h2>
<ul class="ul1">
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
<li>blabla</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12">
<h2 class="center"><span><%=bt.gettext("contactform", Session("lang"))%></span></h2>
<div id="note"></div>
<div id="fields">
</div>
<div class="row">
<div class="span4">
<div class="control-group">
<label class="control-label" for="inputName">NAme</label>
<div class="controls">
<input runat="server" class="span4" type="text" id="inputName" name="name" value="Your full name:" onBlur="if(this.value=='') this.value='Your full name:'" onFocus="if(this.value =='Your full name:' ) this.value=''">
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input runat="server" class="span4" type="text" id="inputEmail" name="email" value="Your email:" onBlur="if(this.value=='') this.value='Your email:'" onFocus="if(this.value =='Your email:' ) this.value=''">
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="inputPhone">Phone</label>
<div class="controls">
<input runat="server" class="span4" type="text" id="inputPhone" name="phone" value="Phone number:" onBlur="if(this.value=='') this.value='Phone number:'" onFocus="if(this.value =='Phone number:' ) this.value=''">
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="control-group">
<label class="control-label" for="inputMessage">Message</label>
<div class="controls">
<textarea runat="server" class="span12" id="inputMessage" name="content" onBlur="if(this.value=='') this.value='Message:'"
onFocus="if(this.value =='Message:' ) this.value=''">Message:</textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="control-group capthca">
<label class="control-label" for="inputCapthca">Checkbox</label>
<div class="controls">
<div class="g-recaptcha" data-sitekey="6Lf8bMQUAAAAAHswc18w7_FunyOQKa9Z0Tkj79YI"></div>
</div>
</div>
</div>
</div>
<asp:Button ID="Send" runat="server" Text="Send" />
</form>
</div>
</div>
</div>
</div>
</div>
<div class="bot1_wrapper">
<div class="container">
<div class="bot1 clearfix">
<div class="row">
<%=cn.GetCopyRight()%>
<%=cn.Getfootermidden()%>
<%=cn.Getfooterright()%>
<%=cn.GetSocial%>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
</div>
</form>
</body>
</html>`
On the code behind page, I want to send an email after clicking the [send] button. This is the code behind.
`enter code here
Protected Sub Send_Click(sender As Object, e As System.EventArgs) Handles Send.Click
If Len(Request("g-recaptcha-response")) > 0 Then
'Mail versturen
Dim objMail As System.Net.Mail.MailMessage = New System.Net.Mail.MailMessage()
Dim objSMTP As System.Net.Mail.SmtpClient = New System.Net.Mail.SmtpClient()
Dim objCred As System.Net.NetworkCredential = New System.Net.NetworkCredential()
Try
objMail.Subject = "Mail"
'objMail.From = New System.Net.Mail.MailAddress("sssa#soemhing.com")
objMail.From = New System.Net.Mail.MailAddress("blabbla#bla.com")
objSMTP.Host = "secret"
objCred.UserName = "secret"
objCred.Password = "secret"
objSMTP.Credentials = objCred
objMail.IsBodyHtml = True
objMail.Body = "Name: " & inputName.Value & "<br>" &
"Email: " & inputEmail.Value & "<br>" &
"Phone: " & inputPhone.Value & "<br><br><br>" &
"Text: " & inputMessage.Value & "<br>"
objMail.To.Add("blabla#gmail.com")
objMail.CC.Add(inputEmail.Value) 'Sender CC
objSMTP.Send(objMail)
Response.Write("<br/><br/>")
Response.Write("<center>")
Response.Write("<h1>Mail sent. You recieve a CC of the message sent. Home</h1>")
Response.Write("</center>")
Catch ex As Exception
Response.Write("<br/><br/>")
Response.Write("<center>")
Response.Write("<h1>Error sending mail. Please, contact us in another way.<h1><br><br>Error: " & ex.Message)
Response.Write("<h1>Email blabla8#gmail.com directly<h1>")
Response.Write("<br><br>Home")
Response.Write("</center>")
End Try
'objMail = Nothing
Else
Response.Write("<h1>You did not check the 'I am not a robot' checkbox.</h1>")
End If
Response.End()
End Sub
End Class
I really dont understand why it says in code behind (when I build)...
inputName, inputEmail, inputPhone and inputMessage are "BC30451 'inputName' is not declared. It may be inaccessible due to its protection level" and I cant not do a textbox.text but I have to do a textbox.value.
Any Ideas? I appreciate already for reading this.
mo3s
Because that's how this markup:
<input type="text" id="greeting" value="hello" runat="server" />
Is mapped in code:
greeting.Value 'hello is the value, greeting is of type System.Web.UI.HtmlControls.HtmlInputText
If you want textbox behaviour, use a textbox:
<asp:TextBox ID="greeting" Text="Hello" runat="server"><asp:/TextBox>
Then your code is:
greeting.Text 'hello
Related
I have a simple row and 4 columns in there. it displays in one row as long as screen size is MD and above. I wanted to hide these columns so I have added two bootstrap classes in the row that are "d-none d-md-block" as per the documentation it should hide as soon as screen size goes below md.
But the output is weird, for some reason, my columns are not in one row anymore but it displays one below another.
any help??
here is the code, columns should be in one row as long as the screen size is larger than md.
<div class="d-none d-md-block row">
<div class="col-md-3">
<div>1</div>
</div>
<div class="col-md-3">
<div>2</div>
</div>
<div class="col-md-3">
<div>3</div>
</div>
<div class="col-md-3">
<div>4</div>
</div>
</div>
This is it:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="d-none d-sm-block">
<div class="row">
<div class="col">1</div>
<div class=" col ">2</div>
<div class=" col">3</div>
<div class=" col">4</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
you can check : https://jsfiddle.net/sugandhnikhil/muxt6eg1/
Just change d-md-block to d-md-flex and it'll work because by default row has display:flex property in Bootstrap and you are assigning it display:block property
<div class="d-none d-md-flex row">
<div class="col-md-3">
<div>1</div>
</div>
<div class="col-md-3">
<div>2</div>
</div>
<div class="col-md-3">
<div>3</div>
</div>
<div class="col-md-3">
<div>4</div>
</div>
</div>
I have a personal website where I recently added a carousel on the left and text on the right.
Because I added the carousel (previously it was just a static photo), the text is pushed to the next line.
Here's my code:
#profile{
background-color:white;
margin-top:30px;
margin-bottom:10px;
}
#introduction{
background-color:white;
margin-top:50px;
}
.carousel-inner > .item > img {
width:40%;
height: auto;
margin-top:70px;
margin-right:30px;
float:left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="container" id="profile">
<div class="device-md hidden-xs"> </div>
<div class="col-md-12">
<div class="container">
<div class="col-md-6">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
</div>
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
</div>
</div>
</div>
</div>
<div class="col-md-6" id="introduction">
<p class="lead">Some lame text here </p>
</div>
</div>
</div>
</body>
</html>
I know Bootstrap has a 12-column layout, so I set my carousel to 6 and my text to 6. What did I do wrong?
1.do not use more than one container class.
2.use row class to reserve a row and then use column class [2 of 6]. - optional
3.main thing is you placed <div class="carousel-inner"> for only one item class.use it outside all item class
<!DOCTYPE html>
<head>
<style>
#profile{
background-color:white;
margin-top:30px;
margin-bottom:10px;
}
#introduction{
background-color:white;
margin-top:50px;
}
.carousel-inner > .item > img {
/*width:55%;*/
height: auto;
text-align: center;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="container" id="profile">
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="First slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Second slide">
</div>
<div class="item">
<img class="d-block w-100" src="http://i.imgur.com/YsLpnLZ.png" alt="Third slide">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6" id="introduction">
<p class="lead">Some lame text here </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js" type="text/javascript"></script>
</body>
I have a page with an <asp:FileUpLoad> tag that I place a glyphicon into. When I click on the submit button without selecting a file, bootstrapvalidator flags the field as invalid and displays the error message. The issue is that the glyphicon icon gets stretched to include the <asp:FileUpLoad> field and the bootstrap error message.
This is what the form looks like prior to clicking on Submit:
and this is what it looks like after I click on Submit:
Here is the code that I am running:
<head runat="server">
<title></title>
<script src="../Scripts/modernizr-2.6.2.js"></script>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link id="Link1" rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../Content/bootstrapValidator.min.css" />
<link id="Link3" rel="stylesheet" type="text/css" href="../Content/bootstrap-datepicker.min.css" />
<link id="StyleLink1" rel="stylesheet" type="text/css" href="../Content/Site_VSTT.css"/>
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../Scripts/respond.js" type="text/javascript"></script>
<script src="../Scripts/moment.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../Scripts/bootstrapValidator.js" type="text/javascript"></script>
</head>
<body>
<form runat="server" id="contactForm" class="form-horizontal" >
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-file"></i>
</span>
<asp:FileUpload ID="uploadfile" name="uploadfile" CssClass="form-control" runat="server" ClientIDMode="Static" placeholder="Enter name of file to upload"/>
</div>
<br /><br />
<div class="col-md-1 col-md-offset-3">
<asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-default btn-sm">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span> Cancel
</asp:LinkButton>
<button id="btnSubSearch" runat="server" type="submit" class="btn btn-primary btn-sm" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-right">
</span> Validate
</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#contactForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'The file name is required'
}
}
}
}
})
})
</script>
</body>
I'm using bootstrap. I need to move the columns as in the attached image.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EE</title>
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-3 col-sm-6 col-md-push-3">
<div class="alert alert-info" style="width:10px">2</div>
</div>
<div class="col-md-3 col-sm-6 col-md-push-6">
<div class="alert alert-info " style="width:10px">4</div>
</div>
<div class="col-md-3 col-sm-6 ">
<div class="alert alert-info " style=" width:10px">3</div>
</div>
<div class="col-md-3 col-sm-6 col-md-pull-8">
<div class="alert alert-info" style="width:10px">1</div>
</div>
</div>
</body>
</html>
Did you try using .col-md-push-* and .col-md-pull-*? Example here: http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/
I am trying to set up a page with a slider control on the homepage. I designed the pages offline and they are working successfully with all the images working as expected but when I uploaded them to my MVC4 page the javascript arrow just keeps spinning and portions of the image are displaying but the ease in out functionality doesn't seem to be working.
Can someone have a look at my code and see if they can see where I am going wrong:
_Layout.cshtml
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
<title>MetaAwareness</title>
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-foundation.min.css")" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-style.css")" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/meta-color.css")" title="color6" />
<link rel="stylesheet" type="text/css" href= "#Url.Content("~/Content/opensans_stylesheet.css")"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="container region1wrap">
<div class="row top_header">
<div class="eight columns">
<div class="login">
<i class="icon-signin"></i>Login
</div>
<div class="login user-control"> You are not logged in!</div>
</div>
<div class="four columns">
<div class="row collapse topheader-search">
<div class="eight mobile-three columns">
<input type="text" placeholder="Enter search terms" />
</div>
<div class="four mobile-one columns">
<i class="icon-search"></i>Search
</div>
</div>
</div>
</div>
</div>
<div class="container region2wrap">
<div class="row">
<div class="three columns">
<div id="logo">
<img src= "#Url.Content("~/Images/logo.png")" alt="MetaAwareness" title="MetaAwareness" />
</div>
</div>
<div class="nine columns">
<nav class="top-bar">
<ul>
<li class="name"><h1> Please select your page</h1></li>
<li class="toggle-topbar"></li>
</ul>
<nav>
<ul class="right">
<li><a class="active" href="#Url.Action("Index")"><i class="icon-home"></i>Home</a></li>
<li><i class="icon-laptop"></i>Media</li>
<li><i class="icon-tasks"></i>Courses</li>
<li><i class="icon-user"></i>Profile</li>
<li><i class="icon-comments"></i>Contact</li>
</ul>
</nav>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<!--Start of the footer section -->
<footer>
<div class="container region10wrap">
<div class="row footer_bottom">
<div class="six columns">
<p class="copyright">Copyright © 2013 MetaAwareness. All rights reserved.</p>
</div>
<div class="six columns">
<ul class="link-list">
<li>Home</li>
<li>Media</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="Login" class="reveal-modal login-modal">
<h2>Login</h2>
<p>Please login using your credentials recived by email when you register.</p>
<form>
<label>Username</label>
<input type="text" placeholder="" />
<label>Password</label>
<input type="text" placeholder="" />
<p class="right">I forgot my password | Resend activation e-mail</p>
<input type="submit" class="medium button" value="Login!" />
</form>
<a class="close-reveal-modal"><i class="icon-remove"></i></a>
</div>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript"src= "#Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"src= "#Url.Content("~/Scripts/meta-app.js")"></script>
</footer>
</body>
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="container region3wrap">
<div class="mainslider-container responsive">
<div class="mainslider">
<ul>
<li data-transition="slotfade-horizontal" data-slotamount="10" data-thumb= "#Url.Content("~/Images/thumb0.jpg")"> <img src= "#Url.Content("~/Images/thumb0.jpg")"/>
<div class="caption lft"
data-x="80" data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "#Url.Content("~/Images/pic_slider_2_1.png")" />
</div>
<div class="caption lfl"
data-x="40"
data-y="13"
data-speed="900"
data-start="1300"
data-easing="easeOutBack"> <img src= "#Url.Content("~/Images/girl.png")" />
</div>
<div class="caption lft big_white"
data-x="505"
data-y="100"
data-speed="400"
data-start="1700"
data-easing="easeOutExpo">High Value, Comprehensive
</div>
<div class="caption lft big_cyan"
data-x="505"
data-y="144"
data-speed="400"
data-start="1900"
data-easing="easeOutExpo">E-learning Solutions
</div>
<div class="caption lft blue"
data-x="505"
data-y="186"
data-speed="400"
data-start="2100"
data-easing="easeOutBack">Inventore veritatis et quasi architecto <br />
beatae dicta sed ut perspiciatis unde omnis<br />
iste natus laudantium.
</div>
</li>
<li data-transition="boxfade" data-slotamount="7" data-thumb= "#Url.Content("~/Images/thumb5.jpg")"> <img src= "#Url.Content("~/Images/thumb5.jpg")" />
<div class="caption sfb"
data-x="0"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutSine"> <img src= "#Url.Content("~/Images/course-banner2.png")" />
</div>
<div class="caption lfb small_white"
data-x="40"
data-y="90"
data-speed="600"
data-start="1800"
data-easing="easeOutExpo">Kickstart Your
</div>
<div class="caption lfb medium_white"
data-x="40"
data-y="130"
data-speed="600"
data-start="2200"
data-easing="easeOutExpo">E-learning Experience
</div>
<div class="caption lfb large_white"
data-x="40"
data-y="185"
data-speed="600"
data-start="2600"
data-easing="easeOutExpo">TODAY...
</div>
</li>
<li data-transition="curtain-3" data-slotamount="7" data-thumb="#Url.Content("~/Images/thumb2.jpg")"> <img src= "#Url.Content("~/Images/thumb2.jpg")" />
<div class="caption lfl"
data-x="35"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "#Url.Content("~/Images/course-banner4.png")" />
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="70"
data-speed="300"
data-start="1400"
data-easing="easeOutExpo">THE QUICKEST
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="120"
data-speed="300"
data-start="1600"
data-easing="easeOutExpo">PATH TO
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="170"
data-speed="300"
data-start="1800"
data-easing="easeOutExpo">E-LEARNING
</div>
<div class="caption lfb big_white"
data-x="660"
data-y="230"
data-speed="300"
data-start="2000"
data-easing="easeOutExpo">SEE MORE
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
I had forgotten to call the JqueryUI bundle and it was causing problems with IE although working with the rest of the top browsers