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!
Related
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>
i recently learning about Laravel using vue...
I'm using Laravel 5.8,
Bulma 0.7.5,
Buefy 0.8.1, and
Vue
My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...
Here's are a few screenshots so you can see what I'm talking about...
Here's what it looks like when I'm logged-out
https://imgur.com/inOTzgv
and here's what it looks like when I'm log-in
https://imgur.com/Qgq52d4
Here's my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data() {
return {
auto_password: true,
password_options: 'keep'
}
}
});
and here's
My cpanel.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'EthicallySpeaking') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
</head>
<body>
<div id="app">
#include('inc.navbar')
#include('inc.messages')
#include('inc.side_navbar_cpanel')
<div id="app" class="cpanel-dashboard-area flex-container">
#yield('content')
</div>
</div>
#yield('scripts')
</body>
</html>
and here's the edit.php form that I'm having the issue with...
#extends('layouts.cpanel')
#section('content')
<section class="section">
<div class="container">
<div class="columns m-l-10">
<div class="column is-10">
<h1 class="title">Edit User Profile</h1>
</div><!-- end column is-10 -->
</div><!-- end columns -->
<hr/>
<div class="columns">
<div class="column">
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field ('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="text" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="field">
<b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user">
</p>
</div>
</div>
<button class="button is-success m-t-20">Edit User</button>
</form>
</div><!-- end column is-10 -->
</div><!-- end columns -->
</div><!-- end container -->
</section>
#endsection
I wanted to know if anyone know why this is happing?
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 ...
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.
since sveral days i am trying to fix issues with Jquery-ui i am using Visual 2010 and the MVC 4 i correct the bundle and the layout to render scripts and the CSS here my code :
#{
ViewBag.Title = "About";
}
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<article>
<div>
<label for="date">Select a date:</label> <div id="mydate"> < #Html.JQueryUI().Datepicker("mydate") </div>
</div>
</article>
<aside>
<h3>Aside Title</h3>
<p>
Use this area to provide additional information.
</p>
<ul>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</aside>
and here is the sources code from Chrome :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.0.js"></script>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<hgroup class="title">
<h1>About.</h1>
<h2>Your app description page.</h2>
</hgroup>
<article>
<div>
<label for="date">Select a date:</label> <div id="mydate"> < <input data-jqui-dpicker- dateformat="dd/mm/yy" data-jqui-type="datepicker" id="mydate" name="mydate" type="text" value="" /> </div>
</div>
</article>
<aside>
<h3>Aside Title</h3>
<p>
Use this area to provide additional information.
</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</aside>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
</body>
</html>
Solved
i was missunderstanding the way it wroks it was solved by adding some javascript