When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#userdata").keyup(function () {
var btnSubmit = $("#btnSubmit");
//var btnSubmit = $('btnSubmit').each((btn, index) => {btn.attr('id', `btnSubmit${index}`});
if ($(this).val().trim() != "") {
btnSubmit.removeAttr("disabled");
} else {
btnSubmit.attr("disabled", "disabled");
}
});
});
</script>
</body>
</html>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
actually I'm facing issue with buttons id's basically i am getting dynamic id's (like btnSubmit0, btnSubmit1)for buttons here I just to to when i enter a text in textarea button should enable otherwise it should be in disabled. but in my script i have a static id like butSubmit how to resolve this issue , Is there any possible pls help me on it.
note:actually i am using bootstrap card in that card I have button and other hand this card have a loop also , I' mean every button inside the loop due to i have append a unique id to buttons.
You have to update ID in html like,
id="btnSubmit"+ i
<button id="btnSubmit"+ i class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button>
script on load/ready
var i=0;
$('.btn').each(function(){
i++;
var newID='btnSubmit'+i;
$(this).attr('id',newID);
});
Actually i have two side like col-md-6 & col-md-6 & i have six images inside left side and right side i need only one images like given below code.
This is working fine but i need expand left six column in full width when right side image will not be available. how cann i manage this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col-6 p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
I Want like as given below code if right col-md-6 will be not available:-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2" style="background-color:yellow;">img</div>
<div class="col-2" style="background-color:orange;">img</div>
<div class="col-2" style="background-color:blue;">img</div>
<div class="col-2" style="background-color:red;">img</div>
<div class="col-2" style="background-color:lime;">img</div>
<div class="col-2" style="background-color:indianred;">img</div>
</div>
</div>
</div>
</div>
Answer will be appreciated!
Replace col-6 with col
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});
you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node
I'm working with cached pages, I wrote all pages in a single file index.html.
How to add the side panel to a particular page?
index.html
<body>
<div class="statusbar-overlay"></div>
<div class="views">
<div class="view view-main">
<!-- Navbar -->
<div class="navbar no-border">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Welcome to Page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="detailsPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Detail page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="loginPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Login</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="registerPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Register</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="welcome">
<div class="left sliding">
<!-- <a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a> -->
</div>
<div class="center sliding">Realmilk</div>
<div class="right"></div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through toolbar-through">
<!-- Page 1 -->
<div data-page="index" class="page" ng-controller="IndexPageController">
<!-- Page content-->
<div class="page-content">
Realmilk Login
Register Here
</div>
</div>
<!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
<!-- Page content-->
<div class="page-content">
This is page 2
</div>
</div>
<!-- Welcome Page-->
<div data-page="welcome" class="page cached" ng-controller="WelcomePageController">
<!-- Page content-->
<div class="page-content">
<div class="card">
<div class="card-content">
<div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div>
</div>
</div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Enrolled on January 21, 2015</p>
<p>Molabanti Dairy farm is RealMilk certified cattle farm.</p>
</div>
</div>
<div class="card-footer">
Like
Read more
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div data-page="loginPage" class="page cached" ng-controller="LoginPageController">
<!-- Page content-->
<div class="page-content">
<form id="login-form" class="list-block">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Email</div>
<div class="item-input">
<input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId">
</div>
</div>
</div>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password">
</div>
</div>
</div>
</form>
<div class="content-block">
<p>Sign In</p>
</div>
</div>
</div>
<!-- Registration Page -->
<div data-page="registerPage" class="page cached" ng-controller="RegisterPageController">
<!-- Page content-->
<div class="page-content">
<form id="registration-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Gender</div> -->
<div class="item-input">
<select id="boom" name="type" ng-model="user.type">
<option value="Retailer">Consumer</option>
<option value="Dairyfarm">Farmer</option>
</select>
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">First Name</div> -->
<div class="item-input">
<input type="text" name="first_name" placeholder="First name" ng-model="user.first_name">
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Last Name</div> -->
<div class="item-input">
<input type="text" placeholder="Last name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">phone</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Phone</div> -->
<div class="item-input">
<input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Email</div> -->
<div class="item-input">
<input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
<p>Register</p>
</div>
</div>
</div>
</div>
</div>
</div>
According to what I see from the documentation.
Add this html syntax after: <div class="statusbar-overlay"></div> or before: <div class="views">...</div>.
CODE SYNTAX:
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left Panel content here</p>
<p>Close me</p>
<p>Open Right Panel</p>
</div>
</div>
Ok, now when you have panels in your App, you need to know how to open/close them:
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element
Open Panels With Swipe
To make this feature works you need to enable it on App initialization by passing related parameter:
var myApp = new Framework7({
swipePanel: 'left'
});
I want to have a form for each tab, but the form fields are completely misaligned:
http://jsfiddle.net/r2guf086/
As far as I can tell, I'm following Bootstrap's example code quite closely. What is wrong here?
My code:
<h2 id="ingredients"><strong>Ingredients</strong></h2>
<hr />
<div class="row">
<!-- Nav tabs -->
<div class="col-xs-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">#1</li>
<li>#2</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ingredients-1">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">xxx</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane" id="ingredients-2">
<form class="form-horizontal" action='' method="POST">
<fieldset>
<div class="form-group">
<div class="col-xs-12">
<textarea name="product_ingredients" class="form-control" rows="10">yyy</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-10">
<button type="submit" class="btn btn-primary" form="update_product_ingredients_form">Save</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
First one has the following CSS link:
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
Second one has this CSS:
<link class="cssdeck" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I would not mix and match CDNs for the same library, and only use those which you trust. Change the CSS in the second example to this and it will work
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
Before: http://jsfiddle.net/awkbmn0L/
After: http://jsfiddle.net/1eznowf7/
(I've never heard of liveweave, and it was doing some weird display things to the code, so I went with jsfiddle for examples)