Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?
Related
i have a problem linking an element by Id using Google Apps Script.
I'm using Materialize and in particular i want to use the tab structure.
I share with you my Code
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id');
});
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" width="device-width">
<?!= include("RegLeague-css"); ?>
</head>
<body class='grey lighten-4'>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test2</a> </li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<?!= include("RegLeague-js"); ?>
</body>
</html>
Basically when I click on 1 link it doesn't redirect me to the id in the Html, but it link me to a site which is link/userCodeAppPanel#test1. I'm sure that is a problem with Google Apps Script because I tried the same code on Visual Studio and opened it with Live Server and it does work.
Could someone help me understand the problem, it should appear like in the picture below in the end
Thanks
enter image description here
The problem is this line:
<base target="_top">
In Apps Script Web Apps, in order to jump to other elements in the current page, you should be using _self instead:
<base target="_self">
Or, since _self is the default value, get rid of the target attribute or even the <base> tag altogether.
Reference:
<base>: The Document Base URL element
I am trying to make the icon, text and button sit in the center of the div vertically.
So, tried to use bootstrap class well, but still not working. Could someone help me on that?
Here is the image to reference:
Css part:
.brl-icon-size { font-size: 2.5em; }
Here is all my code:
<html>
<head>
<title>Index file</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
Sidebar
</div>
<div class="col-md-10 col-md-offset-2 content">
<div class="well well-lg">
<span class="glyphicon glyphicon-file brl-icon-size"></span>
<span>New Message</span>
<div class="pull-right">
Save draft
<button>Publish</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.valign-top {
vertical-align:top;
}
HTML:
<div class="pull-right">
<span class="valign-top">Save draft</span>
<button>Publish</button>
</div>
Online Demo 1
EDIT 1:
In case you use different font-size properties on aligned elements, then you should specify line-height property.
Online Demo 2
EDIT 2:
It's easier and more correct to just wrap you icon into small tag:
<small></small>
Or simply using custom modifier class:
.icon-any-size {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
I am trying to pull in data from a JSON file and use it to populate a navigation menu, composed of divs that collapse using the Angular UI collapsible function.
Here is my code (also on Plunker here):
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div CollapseCtrl navdata ng-repeat="items in item">
<div class="nav-super">{{items.img}}</div>
<div collapse="isCollapsed">
<div class="nav-sub">{{items.img}}</div>
</div>
</div>
</body>
</html>
My issues are:
I cannot make the elements within the collapsible take the json information. If I set ng-repeat on one of the divs, the sub or super div will not take it. Setting ng-repeat on the outermost div results in none of the sub divs taking the repeat.
I have enclosed my controllers in directives and assigned both directives, for the collapsing function and the HTTP GET, to the same div.
I do believe you're looking for something like this:
<!DOCTYPE html>
<html ng-app="samApp">
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="navDataController">
<ul>
<li ng-repeat="item in items">
<span ng-click="action(item)">{{item.img}}</span>
<ul ng-show="item.isCollapsed">
<li ng-repeat="sub in item.subcontent">
<span>{{sub.title}} {{sub.}}</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
http://plnkr.co/edit/DlVqJOzQwjxdCVjStvZg?p=preview
The example works, but it's a bit crude; learn basics to make it sweet.
Also modified your plunkr to work:
http://plnkr.co/edit/jxVGxl7h8gBlFLQ9zyTW?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="samApp" ng-controller="CollapseCtrl">
<div ng-repeat="item in items">
<div class="nav-super" ng-click="item.isCollapsed=!item.isCollapsed">{{item.img}}</div>
<div collapse="item.isCollapsed">
<div class="nav-sub" ng-repeat="subElement in item.subcontent">{{subElement.title}}</div>
</div>
</div>
</body>
</html>
JS
var app = angular.module('samApp', ['ui.bootstrap']);
app.service('navdata', function($http) {
var myServiceObj = {
myData: {},
getData: function() {
$http.get('data.json').success(function(data, status, headers, config) {
angular.copy(data, myServiceObj.myData);
});
}
}
myServiceObj.getData();
return myServiceObj;
});
app.controller('CollapseCtrl', function($scope, navdata) {
$scope.items = navdata.myData;
});
Basically directives are meant for adding encapsulated behavior or DOM element manipulation. I think a service makes more sense for taking care of the requests to the server and storing the data to be used by various controllers.
I also used the data to store the isCollapsed boolean so you may want to loop over the data and set that to false if you want them closed initially or otherwise just reverse your boolean logic in the collapse expression.
You had all the right logic just in the wrong places, also read up on the ng-repeat documentation it's a piece I visit often.
I have a Jquery Mobile multipage with different pages
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>
<script>
$(document).ready(function(){
$(document).on("pagebeforeshow", "#mainPage", function(e, data) {
showPageDossiers(filename, selector);
});
//do some initialization stufff
)};
function showPageDossiers(filename, selector) {
// incldue template
$.get(filename, function(template) {
$(selector).html(template);
$(selector).trigger("create");
});
}
</script>
</head>
<body>
<div id="mainPage" data-role="page" data-title="Main">
<!-- in comment, this code in external HTML file
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO Page2 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
-->
</div>
<div id="page2" data-role="page" data-title="page2">
<div data-role="header"><h2>Page 2</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO page3 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<div id="page3" data-role="page" data-title="page23">
<div data-role="header"><h2>Page 3</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divList">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO mainPage </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
</body>
</html>
I would like to put the code between the
<div id="pageXX"> .... </div>
in separate JSP files since I may have more pages. Having all in one main
JSP file make it hard to manage and read.
For example, my separate content for the mainPage div, will look like
<div data-role="header"><h2>Main Page</h2></div>
<div class="ui-content" data-role="content" role="main">
<div id="divListeDossiers">
<ul id="listeDossiers" data-role="listview" data-inset="true">
<li>GOTO Page 2 </li>
</ul>
</div>
</div>
<div data-role="footer"><h4>Footer</h4></div>
I basically had a Main Page that had a link to page 2 and Page2 had a page to Page 3 and Page3 had a link to MainPage.
I googled but the only things I found is linking to external HTML file.
Anyone known how to break the main file into separate files ?
Thanks
UPDATE : with a complete code that I had now
Use the jquery template system :) On the page before event in javascript you can include the html file.
$(document).on("pagebeforeshow", "site_id", function(e, data) {
showPasswordReset();
});
function showPasswordReset() {
// incldue template
$.get("templates/reset_password.html", function(template) {
$("site_id div[data-role='content']").html(template);
$("site_id div[data-role='content']").trigger("create");
});
}
you have to download the jquery.tmpl.min.js that this will work.
There's nothing much to know, create normal jquery-mobile pages each one with only 1 div with data-role='page' and then use them normally.
A normal link to those pages would use the jquery-mobile ajax navigation model to load the page, and display the data-role='page' div as main content.
I am trying to load some external data into a JQTouch app using JSON. My problem is I don't know what js to use and where to put it.
My html is very simple - a few divs for the pages in the app.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script>
<script type="text/javascript"> $.jQTouch(); </script>
<script src="javascripts/cricket.js" type="text/javascript"></script>
<style type="text/css" media="screen">#import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">#import "themes/apple/theme.css";</style>
<title>Cricket</title>
</head>
<body>
<!-- "Main Menu" -->
<div id="home" class="current">
<div class="toolbar">
<h1>Cricket</h1>
</div>
<ul class="rounded">
<li class="arrow">Clubs</li>
<li class="arrow">Fixtures</li>
<li class="arrow">Twitter</li>
</ul>
<ul class="rounded">
<li class="arrow">About</li>
</ul>
</div>
<!-- "Clubs" - Will contain the list of clubs -->
<div id="clubs">
<div class="toolbar">
<h1>Clubs</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="clubslist">
Loading....
</div>
</div>
<!-- "Fixtures" - Will contain the list of fixtures -->
<div id="fixtures">
<div class="toolbar">
<h1>Fixtures</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading....</li>
</ul>
</div>
<!-- "Twitter" - Will contain the tweets -->
<div id="twitter">
<div class="toolbar">
<h1>Twitter</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading tweets....</li>
</ul>
</div>
<!-- "About" - Will contain info about the app/contact -->
<div id="about">
<div class="toolbar">
<h1>About</h1>
Back
</div>
just some text
</div>
Then this is the script that I think I need to use to load the external data (from clubs.php).
<script type="text/javascript">
$.getJSON('http://www.mydomain.com/clubs.php', function(data) {
$.each(data, function(i,item){
$('clubslist').append('<li>' + item.club_name + '</li>');
});
});
</script>
My question is where do I need to putthis and how does it get triggered?
I think I need to put this in a separate JS file (I have already got one called cricket.js which i linked to in the head of the html file). Then I assume I need something to trigger the JS to run... like PageAnimationEnd or similar?
For what it's worth, this is what the clubs.php returns
{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}
My ideal situation is that when the user clicks on the 'Clubs' link on the menu page, this fires the page animation where the user then sees 'Loading'. In the background, the Javascript is fired, retrieves the data from clubs.php and then appends it in to the #clublist div.
I think I am close, but missing the final finishing touch. All suggestions appreciated!
Tom
In my pages I do the following, in this example I am pulling a table from a backend script.
function prevOrders()
{
$("#chkPrevOrd").html('Please wait')
$.ajax({
type: "POST",
url: "http://"+document.domain+"/store.php",
data: { method: "prevOrders"},
dataType: "json",
timeout: ajaxTimeout,
success: function(data){
if (data.prevOrders)
{
$("#prevOrderStatus").html(data.prevOrders);
$("#chkPrevOrd").html('Update')
}
},
error: function() {
alert('This is taking too long. You could try again now, or wait and try again later.');
}
});
}
#prevOrderStatus is a DIV on this page, #chckPrevOrd is just a button to let the user know what is happening. you would JQT.Goto('cointainer div for #chkPrevOrd') to go to this page if #chkPrevOrd was actually on a different page.