Why is this mdbootstrap carousel code resizing my images? - image

I'm using the carousel component provided here: https://mdbootstrap.com/docs/jquery/javascript/carousel/
I want my pictures to be centered and in original size but instead, they're being stretched to fit the whole screen:
This is the code (I used the same random image for demonstration):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<style>
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
</style>
</head>
<body>
<!-- Start your project here-->
<!--Card-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Card-->
<!-- Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>


The actual images which are used in the code are too big... and they've used the w-100 class on <img> which is why
you see the images shrunk (in case of mdBootstrap's default images)
you see the images stretched (in case of your images)
I removed the file to show how a smaller image without being stretched will look... check the snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://www.akberiqbal.com/JumboMob.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Related

Bootstrap photos not displaying in Laravel

I am trying to add a carousel of photos into my Laravel app's home page, but for some reason, the photo's do not show. If I slip the image in alone without the carousel divs, then the image appears, but when I use the carousel code, the images stop appearing. As you can see I am using a blade to include the other files to keep my code broken up modularly.
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="/css/app.css" type="text/css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
#include('inc.navbar')
#include('inc.imageslider')
<div class="container mt-3">
#if(request()->is('/'))
#include('inc.showcase')
#endif
<div class="row">
<div class="col-md-8 col-lg-8">
#include('inc.messages')
#yield('content')
</div>
<div class="col-md-4 col-lg-4">
#include('inc.sidebar')
</div>
</div>
</div>
</body>
</html>
imageslider.blade.php
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item">
<img src="img/background.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background3.png" alt="background image">
</div>
</div>
</div>

Replace your imageslider.blade.php with below code. you missed the active class. It will work now.
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/background.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background2.png" alt="background image">
</div>
<div class="carousel-item">
<img src="img/background3.png" alt="background image">
</div>
</div>
</div>

Problem with dropdown action on Bootstrap v4

I have this sample page that I can't get the down down to work.
I have loaded jQuery, then Bootstrap, then popper (put popper before breaks things)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap try out</title>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="input-group text dropright " >
<input class="form-control" readonly type="text" placeholder="<category map>"> <!-- form-control links field with the span -->
<div class="input-group-append" dropdown>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</body>
</html>
This renders the button - but the drop down doesn't open.
What I have missed here ?
PS: corrected page - putting the dropdown inside class "" like this it still doesn't render the list - something else is not right.
<div class="container">
<div class="input-group text dropright " >
<input class="form-control" readonly type="text" placeholder="<category map>"> <!-- form-control links field with the span -->
<div class="input-group-append dropdown" >
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dd
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>

really weird - so went to a demo site w3 schools - and there demo worked
so I cust and paste the header from that to my page and commented out my 4 lines doing same stuff
see replacement here - when i commented out my original sources and replaced those with the the same as the w3c schools and reloaded the page - it works
<!-- these 4 lines do work -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<%-- these 4 lines dont work
<link href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
--%>
i'm not sure what nature of screwedness is going on and its too late to go figure. However with the new sources the pages start to work - very weird

bootstrap img causing html and body not full length

New to Bootstrap and trying to layout a very simple page.
When adding the img element ('Great price') below, this causes some sort of gap down the right-hand side on portable devices, and the html and body elements no longer cover the full page. I have tried adjusting this using CSS and adjusting the row class to row-fluid etc., however after many hours, I still can't find the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\brian\Desktop\Web Design\Traders web\TemplateOne.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<title>Template One</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-#674c8a .bg-#e23c3a">
<a class="navbar-brand" href="#">Joe Bloggs Electrics</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Tel: 077777777777</li>
</ul>
</nav>
<div class="row">
<div class="col-lg-12">
<img src="C:\Users\brian\Desktop\Great Price.png" class="img-responsive" style="width: 100%">
</div>
</div>
<div class="row-fluid">
<div class="col-lg-12">
<h2>Plymouth and surrounding areas</h2>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
<i class="fas fa-pound-sign fa-8x"></i>
<p>Pricing</p>
</div>
<div class="col-lg-4">
<i class="fas fa-comment-alt fa-8x"></i>
<p>Testimonials</p>
</div>
<div class="col-lg-4">
<i class="fas fa-mobile-alt fa-8x"></i>
<p>Contact</p>
</div>
</div>
</div>
<!-- <div class="row-fluid">
<footer>
<p id="copyright">Copyright: Joe Bloggs Electrics</p>
</footer>
</div> -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Just try replacing the img-responsive class with img-fluid. Because some classes updated in bootstrap 4 version ...

Need to pass filter with URL

Hey can someone please help this is driving me nuts. I need to make a url from the 3 filters 'ecvnd', 'ecdiv', and 'ecclas' and I have values for all 3 plus the base url. I'm stuck and I think this wouldn't be that difficult if my colleague didn't leave me guessing. This is for ecom site so I need the filters to display the proper products in the link.
the values are as such: ECVND=59375, ECDIV=53 and ECCLAS=59
the closest I got was, but not returning the right products.
https://shop.michells.com/orders/catalog/filter_ECVND=59375&filter_ECDIV=53&ECCLAS=59
As you can see from the snippet below, the filters are hidden in the url on click but when you arrive I need the proper filters to display as there are thousands of other products in the system.
ss snippet hint
<!DOCTYPE html>
<!-- saved from url=(0050)http://getbootstrap.com/examples/starter-template/ -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Henry F. Michell's</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/css/michells.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="/js/respond.js"></script>
<script src="/js/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<link href="/css/michells.ie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if !IE]>
<link href="/css/michells.notie.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!-- Bootstrap core CSS -->
<link href="//fonts.googleapis.com/css?family=Bree+Serif" media="screen" rel="stylesheet" type="text/css">
<link href="/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/select2.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/css/select2-bootstrap.css" media="(min-width: 768px)" rel="stylesheet" type="text/css">
<link href="/img/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>
<body>
<div class="subpage hidden-print">
<img src="/img/bg-subpage-banner.jpg">
</div>
<div class="container-fluid">
<!-- HEADER -->
<div class="header">
<!-- green bar across the top -->
<div class="row hidden-print">
<div class="col-xs-12 col-lg-11 lg-right navigationBar">
<!-- contents of the green nav bar -->
<!-- expanded links -->
<ul class="hidden-xs hidden-sm">
<li>Michells.com|</li>
<li>Contact Us|</li>
<li class="hoverMenu">My Account
<ul class="dropdown-menu myaccountMenu left" role="menu">
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Plant Report</li>
</ul>
|</li>
<li>Saved Carts|</li>
<li>Account 1 <a class="small" href="/orders/login/logout">Logout</a></li>
</ul>
<!-- mobile menu -->
<div class="hidden-md hidden-lg right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bars"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Michells.com</li>
<li>Contact Us</li>
<li>Change Password</li>
<li>Order History</li>
<li>Customer Statements</li>
<li>Saved Carts</li>
<li>Plant Report</li>
</ul>
</div>
</div>
<!--/mobile menu -->
<!-- /nav bar contents -->
</div>
</div><!-- /green nav bar -->
<img class="logo" src="/img/michells-logo.png">
<div class="mobilelogoutIcon visible-xs hidden-print"><a class="small" href="/orders/login/logout"><i class='fa fa-sign-out'></i></div>
<div class="tabletWelcome hidden-xs hidden-print">
<div>1 <a class="small" href="/orders/login/logout">Logout</a></div>
</div>
<div class="minicart hidden-print">
<a href="/orders/cart/reviewcart">
<i class="fa fa-shopping-cart"></i>
<span class="shoppingCartQty">0</span>
<span class="items"> Items</span>
</a>
</div>
</div>
<!-- / HEADER -->
<!-- Vendors -->
<div class="contents vendorselect">
<h1><span class="hidden-xs"> Online Ordering: </span>Vendors</h1>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 loginform">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<form id="run" action="/orders/catalog/filter" method="post">
<p>Please select a vendor to view their products</p>
<select name="filter_ECVND" id="filter_ECVND" class="form-control">
<option>Select Vendor</option>
<option value='940' >Agri Starts (940)</option><option value='1004' >Aldershot (1004)</option><option value='72761' >Aris (72761)</option><option value='26600' >Aris Horticulture Inc (26600)</option><option value='3650' >Athena Brazil (3650)</option><option value='6795' >Blue Heron (6795)</option><option value='9735' >Botany (9735)</option><option value='07600' >Bountiful Farm (07600)</option><option value='9225' >Burchell Nursery (9225)</option><option value='10500' >Cal Seedling (10500)</option><option value='11740' >Casa Flora (11740)</option><option value='921' >Cohen Nurseries (921)</option><option value='14085' >Colony (14085)</option><option value='13688' >CLI (13688)</option><option value='18997' >Dummen (18997)</option><option value='18997' >Dummen Group (18997)</option><option value='18997' >Dummen USA (18997)</option><option value='22470' >Dummen/Fides (22470)</option><option value='19300' >Duwaynes (19300)</option><option value='47200' >Ecke (47200)</option><option value='47200' >Ecke Geraniums, LLC (47200)</option><option value='20100' >Eckert's Greenhouse (20100)</option><option value='20415' >Ekstrom (20415)</option><option value='20710' >Emerald Coast Growers (20710)</option><option value='21320' >Euro American (21320)</option><option value='14085' >F Henny (14085)</option><option value='21901' >Fairy Gardening (21901)</option><option value='22844' >Floral Plant Growers (22844)</option><option value='23720' >Four Star (23720)</option><option value='22702' >Geraniums (22702)</option><option value='26572' >Green Fuse (26572)</option><option value='26473' >Greenheart (26473)</option><option value='26760' >Gro 'N Sell (26760)</option><option value='26750' >Gro Link (26750)</option><option value='26920' >Gulley (26920)</option><option value='26920' >Gulley Greenhouse (26920)</option><option value='35290' >Knox Nursery (35290)</option><option value='35499' >Koba (35499)</option><option value='35500' >Kogut (35500)</option><option value='35700' >Kube Pak (35700)</option><option value='36091' >Lancaster Farms (36091)</option><option value='38030' >Lucas Greenhouses (38030)</option><option value='28480' >Marjama (28480)</option><option value='39345' >Mast Young Plants (39345)</option><option value='40185' >Meadowview (40185)</option><option value='43322' >Morris (43322)</option><option value='43370' >Mountain Creek (43370)</option><option value='46928' >Obersinner (46928)</option><option value='49150' >Pell Greenhouse (49150)</option><option value='51480' >Plainview Growers (51480)</option><option value='51480' >Plainview Growers Inc (51480)</option><option value='51500' >Pleasant View (51500)</option><option value='51555' >Plug Connection (51555)</option><option value='53625' >Reardon (53625)</option><option value='56105' >Russell (56105)</option><option value='57600' >Scott Farms (57600)</option><option value='59375' selected>Silverleaf Greenhouses (59375)</option><option value='59680' >Skagit Gardens (59680)</option><option value='61100' >Spada Nursery (61100)</option><option value='61166' >Speedling Blairsville (61166)</option><option value='61160' >Speedling Inc (61160)</option><option value='61160' >Speedling Inc. (61160)</option><option value='62850' >Sun Gro (62850)</option><option value='32690' >Sunfire (32690)</option><option value='63290' >Swift Greenhouse (63290)</option><option value='22701' >Syngenta (22701)</option><option value='22701' >Syngenta Flowers (22701)</option><option value='22700' >Syngenta Flowers, Inc (22700)</option><option value='51555' >The Plug Connection (51555)</option><option value='66546' >Twin Srpings (66546)</option><option value='68065' >Van Essen (68065)</option><option value='69605' >Wagner Greenhouses Inc (69605)</option><option value='69899' >Walters Gardens (69899)</option><option value='70250' >Welby (70250)</option><option value='72050' >Woodburn Nursery (72050)</option><option value='72055' >Woodburn Nursery (72055)</option> </select>
<div class="btncontainer right">
<button type="submit" class="btn btn-default right">Select</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- / Vendors -->
</div><!-- /.container -->
<div class="footerouter hidden-print">
<div class="footerinner">
<footer class="row">
<div class="col-xs-12 col-lg-4 row center">
<div class="col-xs-12 col-lg-10 col-lg-offset-1 row">
<img src="/img/michells-logo.png" class="footerlogo">
<p class="stayconnected"><em>Stay Connected</em></p>
<div class="col-xs-3"><img src="/img/icon-fb.png"></div>
<div class="col-xs-3"><img src="/img/icon-tw.png"></div>
<div class="col-xs-3"><img src="/img/icon-in.png"></div>
<div class="col-xs-3"><img src="/img/icon-gp.png"></div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Main</strong></li>
<li>Home</li>
<li>About Us</li>
<li>Sales & Service</li>
<li>Michell's Product Catalog</li>
<li>Availability</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Products</strong></li>
<li>Seeds</li>
<li>Nursery</li>
<li>Plugs </li>
</ul>
</div>
<div class="col-xs-7 col-md-3">
<ul>
<li><strong>Exclusive Partners</strong></li>
<li>Green Fuse</li>
<li>CLI</li>
<li>Fairy Flowers</li>
</ul>
</div>
<div class="col-xs-5 col-md-3">
<ul>
<li><strong>Online Ordering</strong></li>
<li>Shop Now</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
<div class="col-xs-12 footerDisc">Pricing subject to change depending upon volume</div>
</footer>
<div class="pagebottom">
<span class="getupdates"><em>Get Updates!</em></span>
<a target="_blank" class="signup" href="http://visitor.r20.constantcontact.com/d.jsp?llr=gpmby6oab&p=oi&m=1115542303206&sit=6diisxiib&f=2dbee31f-253a-4d91-a0f8-4a2206e36974">Sign Up for Email Updates</a><span class="small">Michell's <span class="Labels">2017</span>. All rights Reserved. <span class="bar">|</span> Sitemap<span class="bar">|</span>Terms & Conditions<span class="bar">|</span>Privacy Policy</span>
</div>
</div>
</div>
<div class="device-xs visible-xs hidden-print"></div>
<div class="device-sm visible-sm hidden-print"></div>
<div class="device-md visible-md hidden-print"></div>
<div class="device-lg visible-lg hidden-print"></div>
<div class="device-landscape visible-landscape hidden-print"></div>
<div class="device-portrait visible-portrait hidden-print"></div>
<!-- Bootstrap core JavaScript
================================================== -->
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/select2.js"></script>
<script type="text/javascript" src="/js/hfm.js"></script>
<script type="text/javascript" src="/js/hfm.vendors.js"></script>
<script type="text/javascript">
//<!--
hfm.vendors.init();
//-->
</script>
<script type="text/javascript">
jQuery('.hoverMenu').hover(
function() {
jQuery(this).addClass('open');
}, function() {
jQuery(this).removeClass('open');
}
);
</script>
</body>
</html>
Thank you so much in advance.

display individual item in ng-repeat rendered list

I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);

I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!

Resources