My website is in bootstrap and jquery 2.3.3 whenever i reload my html code. some extra closing brackets are coming at the end of the code.Please check attached screenshot of webpage and also is here is my code
<!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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>iRobot India | Roomba Braava</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/navtab_scroll.min.js" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/my_js.js"></script>
<script>
$(function() {
$('.carousel').each(function() {
$(this).carousel({
interval: false
});
});
});
</script>
<body data-target=".navbar">
<div class="main-container col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header-nav">
<div class="navbar-header ">
<nav class="navbar navbar-default container" id="fixednav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="text-left">
<a href="index.html">
<img src="images/logo_small.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left text-center">
<li class="nav-item menuactive on" style="border:none;">
<a href="shop.html" class="menu">
<span>Shop</span>
</a>
</li>
<li class="nav-item">
<a href="Vaccummcleaning.html" class="menu">
<span>Home Robots</span>
</a>
</li>
<li class="nav-item">
<a href="Companyprofile.html" class="menu">
<span>About iRobot</span>
</a>
</li>
<li class="nav-item">
<a href="FAQ.html" class="menu">
<span>Support</span>
</a>
</li>
<li class="nav-item">
<a href="contact-us.html" class="menu">
<span style="border:none !important;">Contact Us</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="float-nav col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:22px;"></div>
<ul class=" ">
<li>Vacuuming
</li>
<li>Mopping
</li>
<li style="border:none !important;">Accessories
</li>
<li style="border:none !important;" class="gray-panel">
<div>
<p>Shopping Cart
<a href="#vaccum.html">
<img src="images/cart_icon.png">
</a>(0)</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 banner-top-whitespace"></div>
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-lg-offset-2 col-sm-12 col-xs-12 bannerimage text-center top-border bottom-border" style="padding: 0;">
<p class="text-center"><span>Free Shipping</span> on all irobot ordres
</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:50px;"></div>
<div class="row col-lg-10 col-lg-offset-1 col-md-10 col-lg-offset-1 col-sm-12 col-xs-12 text-center product-detail-wrapper">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe">
<div class="video-iframe" id="popupdivframe">
<div class="frameheader text-left">
<div class="heading-dark-green"><strong>iRobot <sup>®</sup> Roomba 980 <sup>®</sup></strong>
</div>
<div class="heading-green-sm"> <strong>Vaccum cleaning Robot</strong>
</div>
<i onclick="div_hide()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="frameimage carousel slide" align="center" id="carousel-ex">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
<li data-target="#carousel-ex" data-slide-to="3"></li>
<li data-target="#carousel-ex" data-slide-to="4"></li>
<li data-target="#carousel-ex" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/more images/980/R980_CarpetTransition_lowres.png" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/more images/980/R980_NavigatingFurniture_crop_lowres.png" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/more images/980/R980_UnderBed_lowres.png" alt="image" class="img-responsive">
</div>
</div>
</div>
<a class="popupframe-footer" href="#carousel-ex" data-slide="prev"><Previous</a> <a class="popupframe-footer" href="#carousel-ex" data-slide="next">Next></a>
<br />
<br />
<br />
<br />
</div>
</div>
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe2">
<div class="video-iframe" id="popupzoomframe">
<div class="frameheader text-left">
<i onclick="div_hide2()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="framezoomimage carousel slide" align="center" id="carousel-ex1">
<ol class="carousel-indicators">
<li data-target="#carousel-ex" data-slide-to="0" class="active"></li>
<li data-target="#carousel-ex" data-slide-to="1"></li>
<li data-target="#carousel-ex" data-slide-to="2"></li>
<li data-target="#carousel-ex" data-slide-to="3"></li>
<li data-target="#carousel-ex" data-slide-to="4"></li>
<li data-target="#carousel-ex" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/irobot-roomba-880-vacuum-cleaning-robot-for-pets-and-allergies.jpg" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/pG01-21837072dt2.jpg" alt="image" class="img-responsive">
</div>
<div class="item">
<img src="images/pG01-21837072d1.jpg" alt="image" class="img-responsive">
</div>
</div>
</div>
<div class="popupframe-footer">
spin <i class="fa fa-caret-square-o-left" aria-hidden="true"></i>
<i class="fa fa-caret-square-o-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-SM-12 col-XS-12" id="popupframe3">
<div class="video-iframe" id="popupdivframe">
<div class="frameheader text-left">
<div class="heading-dark-green"><strong>iRobot <sup>®</sup> Roomba 980 <sup>®</sup></strong>
</div>
<div class="heading-green-sm"><strong> Vaccum cleaning Robot</strong>
</div>
<i onclick="div_hide3()" class="fa fa-times" aria-hidden="true"></i>
</div>
<div class="frametext text-left">
<strong>What's In The Box:</strong>
<br />
<br />
<ul>
<li>1 iRobot Roomba 980</li>
<li>1 Rechargeable Battery</li>
<li>1 Home Base Charging Station</li>
<li>1 Line Cord</li>
<li>2 Dual Mode Virtual Wall Barriers (batteries included)</li>
<li>1 Extra AeroForce® High-Efficiency Filter</li>
<li>1 Extra Side Brush</li>
<li>1-Year Manufacturer's Limited Warranty On Robot, 6-Month Manufacturer's Limited Warranty On Battery</li>
</ul>
<br />
<br />
<strong>Specifications: </strong>
<br />
<br />
<span class="para-text-xs">Package Dimensions: 43.3 x 14.7 x 54.7 cm<br />
Package Weight: 6.9 Kgs<br />
Robot Dimensions: 35 cm in diameter, 9.2 cm in height <br />
Robot Weight: 3.94 Kgs
<br /><br />
* Tested in iRobot's Home Test Lab on hard floors. Run times may vary<br />
** Compared to Roomba 600 and 700 series AeroVac™ systems</span>
<br />
<br />
<strong> The iRobot limited warranty shall not apply to failures or problems which are caused by products or equipment not <br /><br />
authorized by iRobot Corporation.</strong>
<br />
<br />
</div>
</div>
</div>
<img src="images/pIRBT1-21837072v38011.png" class="img-responsive" />
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/camera-icon-43654.png" class="img-responsive" id="popup" onclick="div_show()">
<div class="image-caption image-caption-xs">MORE IMAGES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="images/box.png" class="img-responsive" id="popup" onclick="div_show3()">
<div class="image-caption image-caption-xs">WHAT'S IN THE BOX</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<a class="text-center">
<button class="btn btn-block btn-watch">Add To Watchlist</button>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<a class="text-center">
<img src="images/mail.png" class="img-responsive" /><span class="image-caption image-caption-xs">EMAIL TO A FREIND</span>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<a class="text-center">
<img src="images/print.png" class="img-responsive" /><span class="image-caption image-caption-xs">PRINTABLE VIEW</span>
</a>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12 text-left content-small">
<p class="heading-black">iRobot<sup>®</sup> Roomba<sup>®</sup> 980</p>
<p class="heading-black-small">Vacuum Cleaning Robot</p>
<p class="para-text-xs text-left">The new Roomba 980 gives you cleaner floors, throughout your entire home, all at the push of a button. Roomba 980 seamlessly navigates an entire level of your home, keeping track of its location and recharging as needed until the job is done.
The AeroForce® Cleaning System with Carpet Boost automatically increases power on carpets where it's needed most. And with the iRobot HOME App, you can clean and schedule on the go.</p>
<p class="text-left heading-green-xs">Read Full Product Specifications
</p>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<p class="text-left heading-black-xs"><span class="para-text-xs">Price:</span> ₹ 64900.00</p>
</div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8 text-left">
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-6 social-button">
<a class="text-left buttonhover">
<img src="images/like.png" class="img-responsive" />
</a>
<a class="text-right share buttonhover">
<img src="images/share.png" class="img-responsive" />
</a>
<p class="heading-black-xs views">1,443,00 People like this</p>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-left pinit">
<a class="text-left">
<img src="images/pintit.png" class="img-responsive" />
</a>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2 text-left">
<p class="heading-black-xs">QTY:
<input type="text" style="width: 23px;color: #000;text-align: center;" id="eaBar-quantity" name="eaBar-quantity" maxlength="2" size="1" value="1">
</p>
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-left float-button" style="">
<p align="center">
<a href="#">
<img src="images/addToCart_sm.png" class="img-responsive" />
</a>
<!--<span>-OR-</span><br/>
<img src="images/checkout-logo-small.png" /></p>-->
<p class="heading-black-xs"><span class="blue-text-xs">In-Stock, usually ships in 7 - 10 full bus. days <span><a class="heading-green-xs-bold" href="#">(Details)</a></span></span>
<br>
<span class="heading-black-xs-bold">AVAIBILITY:</span>
<br />
<span class="heading-black-xs-bold">Sales Tax:</span>Sales tax will be added at checkout.</p>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 product-detail-right-panel">
<a href="http://irobot.netmahiti.in/owneroverview.aspx?id=cHJvc3JzMDAwMDAwMDA1" target="_blank">
<div class="product-vedio"></div>
</a>
<a href="FAQ.html" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>FAQ</p>
</div>
</a>
<a href="wi-fi-information.html" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>Wi-Fi Information
</p>
</div>
</a>
<a href="http://irobot.netmahiti.in/owneroverview.aspx?id=cHJvc3JzMDAwMDAwMDA1" target="_blank">
<div class="green-border text-center green-text-xs col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>900 Series Owner's Center</p>
</div>
</a>
</div>
</div>
<hr />
<div class=" col-lg-10 col-lg-offset-1 col-md-10 col-lg-offset-1 col-sm-12 col-xs-12 pro-detail" style=" font-family:Arial, Helvetica, sans-serif !important;">
<br />
<br />
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<p class="heading-black-small"><b>TOP SELLING ACCESSORIES</b>
</p>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<p>
<img src="images/pIRBT1-17181539v380.png" class="img-responsive">
</p>
</div>
<div class="col-lg-8 col-lg-offset-1 col-md-8 col-md-offset-1 col-sm-7 col-sm-offset-1 col-xs-12">
<br />
<p class="heading-black-small-bold">3 Replacement AeroForce<sup>®</sup> High-Efficiency Filters For Roomba<sup>®</sup> 800 and 900 Series</p>
<p class="heading-black-xs">Price:<span class="heading-green-xs"><b>₹ 1490.00</b></span>
</p>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<p class="heading-black-xs">QTY:
<input type="text" style="width: 23px;color: #000;text-align: center;" id="eaBar-quantity" name="eaBar-quantity" maxlength="2" size="1" value="1">
</p>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-sm-12">
<p>
<a href="#">
<img src="images/addToCart_smm.png" class="img-responsive" />
</a>
</p>
</div>
</div>
</div>
<-- compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>>>>>>>
enter image description here
Delete extra >>>>> from html closing tag at the end.
It is not a javascript error it is a typo error Remove last line </html>>>>>>> by </html>
There's </html>>>>>>> at the end instead of </html> that's why you see the extra >>>>>>
Related
I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute
Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
<title>TheSaaS - Responsive Bootstrap SaaS, Software & WebApp Template</title>
<script>if (top !== self) top.location.replace(self.location.href +'?utm_source=themeforest&utm_medium=preview&utm_campaign=thesaas');</script>
<!-- Styles -->
<link type="text/css" href="{{url_for('static',filename='assets/css/core.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/thesaas.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/style.css')}}" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="{{url_for('static',filename='assets/img/apple-touch-icon.png')}}">
<link rel="icon" href="{{url_for('static',filename='assets/img/favicon.png')}}">
<!-- Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">
<!-- Topbar -->
<nav class="topbar topbar-inverse topbar-expand-md topbar-sticky">
<div class="container">
<div class="topbar-left">
<button class="topbar-toggler">☰</button>
<a class="topbar-brand" href="index.html">
<img class="logo-default" src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
<img class="logo-inverse" src="{{url_for('static',filename='assets/img/logo-light.png')}}" alt="logo">
</a>
</div>
</div>
</nav>
<!-- END Topbar -->
<!-- Header -->
<header class="header fadeout header-inverse pb-0 h-fullscreen" style="background-image: linear-gradient(to bottom, #243949 0%, #517fa4 100%);">
<canvas class="constellation"></canvas>
<div class="container">
<div class="row h-full">
<div class="col-12 text-center align-self-center">
<h1 class="fs-50 fw-600 lh-15 hidden-sm-down">Built for <span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<h1 class="fs-35 fw-600 lh-15 hidden-md-up">Built for<br><span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<br>
<p class="fs-20 hidden-sm-down"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<p class="fs-16 hidden-md-up"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<br>
<hr class="w-60 hidden-sm-down">
<br>
<a class="btn btn-xl btn-round btn-primary fs-20 fw-500 w-350 shadow-3 hidden-sm-down" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<a class="btn btn-lg btn-round btn-primary w-250 shadow-3 hidden-md-up" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<br>
<p class="mt-2 mt-md-4"><small>or purchase an Extended License</small></p>
</div>
<div class="col-12 align-self-end text-center pb-70">
<a class="scroll-down-2 scroll-down-inverse" href="#" data-scrollto="section-demo"><span></span></a>
</div>
</div>
</div>
</header>
<!-- END Header -->
<!-- Main container -->
<main class="main-content">
<!--
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
| Sample Landing Pages
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
!-->
<section class="section overflow-hidden" id="section-demo">
<div class="container">
<header class="section-header">
<small>Demo</small>
<h2>Sample Landing Pages</h2>
<hr>
<p class="lead">Apart from internal pages, we have designed several single sample pages to get start with.</p>
</header>
<div class="row gap-y text-center">
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-helpato-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Helpato</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-trello-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Trello</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-gmail-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Gmail</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-skype-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Skype</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-github-sm.jpg')}}" alt="demo github landing"></p>
<p><strong>GitHub</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-app-sm.jpg')}}" alt="demo app landing"></p>
<p><strong>Mobile App</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-bootstrap-sm.jpg')}}" alt="demo bootstrap landing"></p>
<p><strong>Bootstrap</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-slack-sm.jpg')}}" alt="demo slack landing"></p>
<p><strong>Slack</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-zendesk-sm.jpg')}}" alt="demo zendesk landing"></p>
<p><strong>Zendesk</strong></p>
</div>
</div>
</div>
</section>
</main>
<!-- END Main container -->
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="row gap-y align-items-center">
<div class="col-12 col-lg-3">
<p class="text-center text-lg-left">
<img src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
</p>
</div>
<div class="col-12 col-lg-6">
<ul class="nav nav-inline nav-primary nav-hero">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page-feature.html">Features</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-pricing.html">Pricing</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<div class="social text-center text-lg-right">
<a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
<a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
<a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
<a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- Scripts -->
<script src="{{url_for('static',filename='assets/js/core.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/thesaas.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/script.js')}}"></script>
Hello,
This is a template which I have modified .. outside flask when I am running this, this works fine ( without url_for ). But when I am trying to use within flask, the javascript files are not working .. please help me
Make sure your directory structure is modified for the root of you flask application, otherwise you're requesting js files that aren't there
You don't have to use url_for. Instead try:
<link type="text/css" src="{static/assets/css/core.min.css}" rel="stylesheet">
I'm having trouble with jQuery's on event delegation:
Here's my code:
HTML
<body>
<!-- Page Content Wrapper-->
<div id="sb-site">
<div id="overlay"> </div>
<!-- Ajax loaded here -->
<div id="ajax-loadHeader" class="homeNavbar">
</div>
</div>
<!-- End Page Content Wrapper -->
</body>
JS
$.get("header.html").done(function (data) {
var html = $(data);
var transition = $("#ajax-loadHeader").hasClass("homeNavbar");
if(transition){
html = html.attr("data-transitions","true").addClass("home");
}
$("#ajax-loadHeader").append(html);
$.slidebars({
siteClose: true, // true or false
disableOver: 767, // integer or false
scrollLock: true // true or false
});
});
The problem is on the following functions. None of them are fired when i click the buttons. But, after jQuery 1.7, $(document).on("click","selector",function(){}); should work even for dynamically loaded elements.
I've also tried: $("selector").on("click",function(){});
The
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-open",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").removeClass("hide");
$("#mobile-hamburger-menu-open").addClass("hide");
$("#sb-site").addClass("locked");
});
//The element is present on header.html.
$(document).on("click","#mobile-hamburger-menu-close",function(){
$("#overlay").toggleClass("overlay");
$("body").toggleClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
});
//The #navbar-top element is present on header.html.
$(document).on("click","#overlay, #navbar-top nav[class*='navbar-default']",function(){
if($("#overlay").hasClass("overlay")){
$("#overlay").removeClass("overlay");
$("body").removeClass("overlayed");
$("#mobile-hamburger-menu-close").addClass("hide");
$("#mobile-hamburger-menu-open").removeClass("hide");
$("#sb-site").removeClass("locked");
}
});
HTML present in header.html
<div id="login-section" class="login-section closed container-fluid">
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs banner-login">
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-6 col-sm-offset-0">
<div class="banner-login-text">
<div class="banner-login-title">
text
</div>
<p>
text
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 no-gutters">
<!-- Login Content -->
<div class="row no-gutters">
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="sou-cliente-btn" class="tab-btn tab-active">
text
</div>
<div class="arrow-tab"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div id="nao-sou-cliente-btn" class="tab-btn">
text
</div>
<div class="arrow-tab"></div>
</div>
</div>
<div class="login-content">
<div class="login-form">
<form id="form-validate-login">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">E-mail</label>
<div class="col-md-9 col-sm-8">
<input id="usernameField" type="text" data-rule-required="true" class="login-input" placeholder="nome#example.com">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-md-3 col-sm-4">Senha</label>
<div class="col-md-9 col-sm-8">
<input id="passwordField" data-inputmask-regex="[a-zA-Z0-9]{8,15}" data-rule-minlength="8" data-rule-maxlength="15" type="password" data-rule-required="true" class="login-input required" placeholder="Digite sua senha">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary"> entrar </button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 col-xs-12"> <a class="link-arrow">Esqueci meus dados</a> </div>
</div>
<div class="row no-login">
<div class="col-md-12 col-xs-12"> <span>Se você não possui login:</span> </div>
<div class="col-md-12">
<a class="btn btn-style2"> crie seu primeiro cadastro </a>
</div>
</div>
</div>
<div class="novo-cadastro-section hide">
<span class="nao-cliente-title">text</span>
<br/>
<p class="nao-cliente-subtitle">text</p>
<a class="btn btn-primary">text</a>
</div>
</div>
<!-- End Login Content -->
<div class="row area-login login-especial-input hide">
<div class="col-md-12 col-xs-12">
<select class="col-md-12 col-xs-12 padding15">
<option selected disabled="disabled">Estabelecimento</option>
</select>
</div>
</div>
<div class="col-md-8 nao-cadastrado-section-container hide">
<div class="hidden-xs nao-cadastrado-section">
<div class="row">
<div class="col-md-12"> <span class="nao-cadastrado-title">Não é cadastrado?</span> </div>
</div>
<div class="row nao-cadastrado-description">
<div class="col-md-12"> <span class="">text</span> </div>
</div>
<div class="row nao-cadastrado-btns">
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Já sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Criar meu primeiro acesso </button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row area-login">
<div class="col-md-12 col-xs-12"> <strong><span class="control-label">Não sou cliente</span></strong> </div>
</div>
<div class="row area-login">
<div class="col-md-12">
<button type="submit" class="btn col-md-12 col-xs-12 primeiro-cadastro-btn"> Quero testar o gerenciador</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row area-login login-especial-input hide">
<div class="col-md-12">
<div class="input-group"> <span class="input-group-addon login-description"> Código </span>
<input type="text" class="login-input" placeholder="XXXXXXXXXXXX">
</div>
</div>
</div>
</div>
<div class="primeiro-cadastro-section"> </div>
</div>
</div>
<!-- End Login -->
<!-- Header -->
<header id="navbar-top" data-transitions="false">
<div class="container-fluid over-video-container">
<nav class="navbar navbar-default over-video-navbar">
<div class="container">
<!-- Nav Left -->
<div class="col-md-1 col-sm-2 col-xs-7 col-brand">
<div class="navbar-header">
<!-- Menu hamburger -->
<button id="mobile-hamburger-menu-open" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-open-left" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<button id="mobile-hamburger-menu-close" type="button" class="mobile-sidebar-menu navbar-toggle collapsed is-closed sb-close hide" aria-expanded="false" aria-controls="navbar">
<div class="label-hamburger"></div>
<div class="icon"></div>
</button>
<!-- End Menu hamburger -->
<!-- Logo -->
<a class="navbar-brand" href="index.html" itemprop="url">
<img class="logo-svg" src="images/logo_rede.svg" itemprop="logo">
<!-- Logo PNG for IE8 -->
<img class="logo-png" src="images/logo_rede.png" >
</a>
<!-- End Logo -->
</div>
</div>
<!-- End Nav Left -->
<div class="col-md-4 col-sm-4 col-xs-5 pull-right nav-right-container">
<!-- Nav Right -->
<ul class="nav navbar-nav navbar-right">
<li class="col-md-4 col-md-offset-1 col-sm-5 help col-xs-6">
<!-- AJUDA Ajuda -->
</li>
<li id="my-account-section" class="my-account col-md-7 col-sm-7 col-xs-6"> <a role="button">Minha Conta<span class="arrow hidden-xs hidden-sm"></span></a> </li>
</ul>
<!-- End Nav Right -->
</div>
<div class="col-md-7 col-sm-7 col-xs-12 col-collapse">
<!-- Collapse -->
<div id="navbar-rede" class="navbar-collapse collapse" aria-expanded="false">
<!-- Menu Dropdown -->
<ul class="nav navbar-nav">
<li class="visible-xs">
<div class="col-xs-12 input-group mobile-search-bar-container">
<div class="mobile-search-bar">
<input type="text" class="col-xs-10" placeholder="Digite aqui o que procura..." />
</div>
</div>
</li>
<!-- Produtos -->
<li id="dropdown-produtos" class="dropdown dynamic-image-dropdown">
Nossos Produtos
<!-- Dropdown container -->
<ul class="dropdown-menu dropdown-menu-produtos">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Para celular</li>
<li data-dropdown-link="1" class="dropdown-item"> <a href="#" >Sem fio</a> </li>
<li data-dropdown-link="2" class="dropdown-item"> <a href="#" >Com fio</a> </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendas online </li>
<li data-dropdown-link="4" class="dropdown-item"> <a href="#" >Grandes empresas</a> </li>
<li data-dropdown-link="5" class="dropdown-item"> <a href="#" >Adicionais</a> </li>
<li data-dropdown-link="6" class="dropdown-item"> Todos os produtos </li>
</div>
<div class="col-links">
<li class="dropdown-subitem"> Nome Produto</li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> <a href="#" >Nome Produto</a> </li>
<li class="dropdown-subitem"> Nome Produto </li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_maquininha_celular.png" >
<img data-related-link="1" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="2" class="" src="images/menu_maquininha_celular_3.png" >
<img data-related-link="3" class="" src="images/menu_maquininha_celular_4.png" >
<img data-related-link="4" class="" src="images/menu_maquininha_celular.png" >
<img data-related-link="5" class="" src="images/menu_maquininha_celular_2.png" >
<img data-related-link="6" class="" src="images/menu_maquininha_celular_3.png" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Produtos -->
<!-- Tipos Negócio -->
<li id="dropdown-tipos-negocio" class="dropdown dynamic-image-dropdown">
Tipos de Negócio
<!-- Dropdown container -->
<ul class="dropdown-menu">
<!-- Links -->
<div class="col-links">
<li data-dropdown-link="0" class="dropdown-item active"> Restaurantes, Bares </li>
<li data-dropdown-link="1" class="dropdown-item"> Táxis </li>
<li data-dropdown-link="2" class="dropdown-item"> Lojistas </li>
<li data-dropdown-link="3" class="dropdown-item"> Vendedores ambulantes, feirantes </li>
<li data-dropdown-link="4" class="dropdown-item"> Serviços de bem-estar e beleza </li>
<li data-dropdown-link="5" class="dropdown-item"> Lojas online </li>
<li data-dropdown-link="6" class="dropdown-item products-2"> <a href="#">Não encontrou seu tipo de negócio? <br/>
Veja <span class="bold">Nossos produtos</span></a>
</li>
</div>
<!-- End Links -->
<!-- Imagem -->
<div class="col-img hidden-sm hidden-xs">
<img data-related-link="0" class="img-active" src="images/menu_tipos_negocio.jpg" >
<img data-related-link="1" src="images/menu_tipos_negocio_2.jpg" >
<img data-related-link="2" src="images/menu_tipos_negocio_3.jpg" >
<img data-related-link="3" src="images/menu_tipos_negocio_4.jpg" >
<img data-related-link="4" src="images/menu_tipos_negocio_5.jpg" >
<img data-related-link="5" src="images/menu_tipos_negocio_6.jpg" >
<img data-related-link="6" src="images/menu_tipos_negocio_7.jpg" >
</div>
<!-- End Imagem -->
</ul>
<!-- End Dropdown container -->
</li>
<!-- End Tipos Negócio -->
</ul>
<!-- End Nav Right -->
</div>
<!-- End Collapse -->
</div>
</div>
</nav>
</div>
</header>
Solved it.
So freaking simple. Just put the functions inside the done function of the AJAX call.
Thanks for all those who helped me!
I can't get this Bootstrap carousel snippet to work. I have added the code below to my Bootstrap HTML layout, but I'm not sure that the script is in the right place.
What am I doing wrong?
<!-- !FOTO AUTO -->
<div id="container-slider-dettaglio-auto">
<!-- Slider -->
<div id="slider-foto-auto" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!-- Top part of the slider -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img class="img-responsive" src="img/foto-auto/audi-s4/audi-s4-avant-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="1">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-2.jpeg" alt="Frontale Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="2">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-3.jpeg" alt="Angolare Fronte Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="3">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-4.jpeg" alt="Angolare Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="4">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-5.jpeg" alt="Retro Audi S4" title="Audi S4">
</div>
<div class="item" data-slide-number="5">
<img src="img/foto-auto/audi-s4/audi-s4-avant-3-6.jpeg" alt="Cerchione Audi S4" title="Audi S4">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="hidden-xs col-lg-12" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-2-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-1">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-3-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-2">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-4-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-3">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-5-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
<li class="col-sm-4 col-md-4 col-lg-4">
<a class="thumbnail" id="carousel-selector-4">
<img src="img/foto-auto/audi-s4/thumb/audi-s4-avant-3-6-thumb.jpg" alt="Thumb Frontale Audi S4">
</a>
</li>
</ul>
</div>
</div>
<!--/slider-dettaglio-auto-->
</div>
<!--/container-slider-dettaglio-auto-->
<!-- /FOTO AUTO -->
</div>
<!-- /content -->
</div>
<!-- END CONTENT ROW -->
I added this script before the end of the <body>:
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function(e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-' + id).html());
});
});
The solution that Work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> into the <head> and not at the bottom of <body>.
Is it correct?
I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/
You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.