Show variable content in bootstrap tooltip - html

I want to show the variable state in tooltip of bootstrap, but its not getting the variable content its shows the variable name "Pump 2 {{pumpStatus2.helpText}}", and it should appear "Pump 2 On/Off" according the variable content, it works with the title when I mouse over the image.
<img class="pump" id="pump2" title="Pump 2 {{Status2.helpText}}"
ng-src="img/{{Status2.status}}" data-toggle="tooltip">

Have you considered adding ui.bootstrap as a dependency in your module? This will allow you to get bootstrap features through angular. Here is an example using a dynamic tooltip (uib-tooltip). More bootstrap examples can be found at: http://angular-ui.github.io/bootstrap/
angular.module('myApp', ['ui.bootstrap'])
.controller('MainController', function ($scope) {
var pump = {};
$scope.pump = pump;
pump.state="off";
pump.setState = function (state) {
pump.state = state;
}
});
.pump-image {
background: url('https://gauchedecombat.files.wordpress.com/2012/05/on-off.png') no-repeat;
height: 270px;
width: 262px;
}
.on {
background-position: 0 0;
}
.off {
background-position: -262px 0;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp" ng-controller="MainController as ctrl">
<input type="radio" ng-model="pump.state" value="off" />Off
<input type="radio" ng-model="pump.state" value="on" />On
<div uib-tooltip="Pump: {{pump.state}}" class="pump-image" ng-class="{on: pump.state === 'on', off: pump.state==='off'}" tooltip-placement="right"></div>
</div>

Here is a working sample: http://plnkr.co/edit/KNjxPZLFcUKS2M2fHj5G?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#2.0.0-alpha.45" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<img ng-src="{{imgUrl}}" alt="Smiley face" title="Test String {{imgTitle}}" height="42" width="42">
</body>
</html>
JavaScript:
angular.module('app',[]);
angular.module('app').controller("MainCtrl",function($scope){
$scope.imgUrl = "http://b3.us.is.pp.ru/m/mink_blue/1/45377641oJC.jpg";
$scope.imgTitle = "Hello World!";
});
Is your app wired correctly? Please check the controller and the variables in scope. Or try to share a plunk.

Related

html, I need to display a specific image when a specific button is clicked

There are two images named mumbai.jpg and delhi.jpg.
Two buttons are there, I want to show particular image when the particular button is clicked. Also the image should be displayed in the same window.
eg. clicking on "mumbai" button will show the mumbai.jpg image.Then if i click on 'delhi' button it will display delhi.jpg in same frame,replacing the mumbai.jpg image.I am beginner in HTML please help.
here is my code.
<html>
<head>
<title>Image Display Test</title>
<script type="text/javascript">
<!--
function showImage(){
document.getElementById('1').style.visibility="visible";
}
-->
</script>
</head>
<body>
<input type="button" value="Mumbai" onclick="showImage();"/>
<img id="1" src="mumbai.jpg" style="visibility:hidden"/>
<input type="button" value="Delhi" onclick="showImage();"/>
<img id="1" src="delhi.jpg" style="visibility:hidden"/>
</body>
Elements in HTML must have a unique id (identifier), they cannot have the same id like you are using.
One solution to your problem would be to pass this into your showImage method. Then you can use elem.nextElementSibling to get the element next to the button clicked. This will allow you to get the image src which you can then use to set the src of the target image/frame.
See working example below:
/* Ignore css */
img {
height: 150px;
width: auto;
display: block;
}
<html>
<head>
<title>Image Display Test</title>
<script type="text/javascript">
function showImage(elem) {
document.getElementById("display-frame").src = elem.nextElementSibling.src;
}
</script>
</head>
<body>
<input type="button" value="Mumbai" onclick="showImage(this);" />
<img id="1" src="https://images.unsplash.com/photo-1536775904534-7b743734d424?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02d0a675c0da008dc7587a35509ecf69&w=1000&q=80" style="display:none" />
<input type="button" value="Delhi" onclick="showImage(this);" />
<img id="2" src="https://images.unsplash.com/photo-1523960666814-f9b47d1e9ed3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="display:none" />
<img id="display-frame"/>
</body>
use this below code.
$(document).ready(function(){
$("#button-one").click(function(){
$("#1").toggle();
});
$("#button-two").click(function(){
$("#2").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button-one">Mumbai</button>
<img id="1" src="http://www.slipperelectrical.co.nz/wp-content/uploads/2015/12/dummy-image.jpg" style="display:none;"/>
<button id="button-two">Delhi</button>
<img id="2" src="https://dummyimage.com/vga" style="display:none;"/>
<html>
<head>
<title>Image Display Test</title>
<script type="text/javascript">
function showImage(index) {
var src=["https://images.unsplash.com/photo-1523960666814-f9b47d1e9ed3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
"https://images.unsplash.com/photo-1536775904534-7b743734d424?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02d0a675c0da008dc7587a35509ecf69&w=1000&q=80"]
document.getElementById("display-frame").src = src[index];
}
</script>
<style>
img {
height: 150px;
width: auto;
display: block;
}
</style>
</head>
<body>
<input type="button" value="Delhi" onclick="showImage(0);" />
<input type="button" value="Show the first image again" onclick="showImage(1);" />
<img id="display-frame"/ src="https://images.unsplash.com/photo-1536775904534-7b743734d424?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02d0a675c0da008dc7587a35509ecf69&w=1000&q=80">
</body>
</html>
Try to remove this <— —> in your script

AngularJS function unable to be called in ng-view

Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk

different background images for different pages loaded using div tag

i am working on multipage application by loading mainpage.html into index.html by using tag i need background image different one for different html pages such as mainpage,page1,page2 etc.can any one help ??
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
body{
background: red;
}
<!-- begin snippet: js hide: false -->
//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>
If you mean you want a different background image applied to the body element but you only have control of a fragment of the page, a style element should work - you might need !important to override the default:
<div id="pageport">
<style>
body { background-image: url('images/newbg.jpg') !important; }
</style>
</div>
In connection with the comment I made I have decided to post my solution as an answer. My solution is rather simple, add a class to the body tag and then change the background using an external CSS file - based on the classes used.
e.g:
...
<body class="index">
...
//in the CSS:
body.index {
background: #F00;
}
Then simply in each of the different HTML pages, change the class of the body tag to suite the background you want.
Check this Plunk for live example
If you need any clarification, drop a comment and I'll get back to ya!

Ng-repeat not showing JSON data in Angular-UI

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.

HTML/CSS - Using Custom Fonts

I am trying to use a custom font from: https://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Underdog
I find the font is displaying correctly when I use a Nexus One Emulator in Eclipse but on my Samsung Galaxy S2 it doesn't work...
My code is as follows:
CSS:
#font-face
{
font-family: 'Underdog', cursive;
}
#categories
{
font-family: 'Underdog';
}
#subCategories
{
font-family: 'Underdog';
}
body
{
background-color:#272714;
}
HTML:
The drop down boxes are created dynamically with JQuery. The "loadingDiv" are shown and then hidden after an AJAX call is completed.
<!DOCTYPE html>
<head>
<title>Coupon Finder</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Underdog' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/storecategories.js"></script>
<script>
function categorySubmit(){
var selectedCategory = document.getElementById("category");
var selectedText = $('#category option:selected').text();
//Get Sub-Categories
getSubCategories(selectedText);
}
</script>
</head>
<body >
<div id='categories'>
<h3>Coupon Categories</h3>
<div id='loadingDiv'>
Please wait... <img src="http://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
<!--Add Category Search Button-->
<button class = "buttons" onclick="categorySubmit()">Search!</button>
<div id='subCategories'>
<div id='loadingDiv1'>
Please wait... <img src="http://i.stack.imgur.com/FhHRx.gif" />
</div>
</div>
</body>
Here is a screenshot of the output on the emulator (Sorry for the dark background... need to change that):
Any ideas why it isn't working on my Galaxy S2?
Thanks for your help!
A good start would be to do some remote debugging.
Check this out:
How to do remote debugging on android
From there, you can use the console to see what happens in your code.
You might even find that your S2 throws an error to the console.