This is the code to get temperature of London from Open weather API. It works fine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/body.css" />
<meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script language="javascript" type="text/javascript">
<!--
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = Math.round(temp-Kelvin);
if (Centigrade <= 25) {
//alert("Temperature : "+Math.round(Centigrade)+" C");
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
}
else if (Centigrade > 25) {
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo3.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+"<img src= \"img/Tlogo3.svg\"/>";
}
}
</script>
<div style="position: absolute; left: 30px; top: 75px;">
<img src="img/temlogo.svg" width="35" height="35" onclick="foo(myCallback);"/>
</div>
<p id="temp"></p>
</body>
</html>
Now I tried with bootstrap for some nice visualization :
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("[data-toggle='popover']").popover();
});
</script>
</body>
Temperature
</html>
It is dissmissable popover.
Now what I am trying is I want get temperature as popover element. ie. if I click on image button, it should trigger temperature acquiring function and then show the temperature and the image related to that in popover box. So here is two challenge I am facing.
Setting a image instead of the red button and then temperature data
List item and the image ie. Tlogo2.svg to be appeared in that pop
over box.
So can anyone suggest how to set that?
For more clarification I am adding another code. Here in data content shows function name. But I want the result of the function:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback);
});
</script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content= "myCallback(result);" >Temperature</a>
</html>
Please Help me out.
Use the Popover's Options to beautify your popover. Using these options you can have complete control over the functionality and appearance of your popover.
http://getbootstrap.com/javascript/#popovers-usage
This fiddle only demonstrates a few of these options...
Js Code
$(document).ready(function(){
$(".popover-examples a").popover({
title : 'Weather App',
trigger: 'hover',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><img src="http://lorempixel.com/100/100" /><span>Just an example of inserting image in a Popover...</span></div>'
});
});
HTML
<div class="bs-example">
<p class="popover-examples">
<a href="#" class="btn btn-lg btn-primary" data-toggle="popover" >Popover Example</a>
</p>
</div>
Checkout this demo.
function foo() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: function(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
var temperature = "Temperature : "+Math.round(Centigrade)+" C";
$('span.temp-val').text(temperature);
}
});
}
$(document).ready(function(){
$(".popover-examples a").popover({
title : 'Weather App',
trigger: 'hover',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><img src="http://lorempixel.com/100/100" /><span class="temp-val">Just an example of inserting image in a Popover...</span></div>'
});
$(".popover-examples a").hover(function() { foo(); })
});
You need to call the ajax function at hovering the trigger element. Also, set an identifier for the temperature in your template - this way you can set it to the obtained value using the ajax call.
Related
Why does the value property "some code" not showing up when I load this page?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/codemirror-5.47.0/lib/codemirror.css">
<script src="lib/codemirror-5.47.0/lib/codemirror.js"></script>
<script src="lib/codemirror-5.47.0/mode/javascript/javascript.js"></script>
<script src="lib/codemirror-5.47.0/mode/powershell//powershell.js"></script>
<title>Code Mirror</title>
</head>
<body>
<h1>Hello Code Mirror</h1>
Code Mirror Documenation
</br>
<textarea id='jsTxtArea'></textarea>
</body>
<script>
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('jsTxtArea'), {
value: "some code",
lineNumbers:true,
mode:"javascript"
});
</script>
</html>
You need to get the value from the textarea, like so:
var textarea = document.getElementById('jsTxtArea');
var myCodeMirror = CodeMirror.fromTextArea(textarea , {
value: textarea.innerHtml,
lineNumbers: true,
mode: 'javascript'
});
Or, if you want to set the value within the JavaScript:
var textarea = document.getElementById('jsTxtArea');
var myCodeMirror = CodeMirror.fromTextArea(textarea , {
lineNumbers: true,
mode: 'javascript'
});
// set the value
myCodeMirror.setValue('Some Code');
im trying to make a script that load content from a web service when user scroll to the bottom of the page this is my JS code :
var serviceURL = "http://projects.dev/work/";
var current_page = 1;
var total_pages = 1;
$(function() {
Init();
});
function Init() {
getPosts();
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+20)>=$(document).height()){
if(current_page <= total_pages){
getPosts();
}
}
});
}
function getPosts(){
$.ajax({
url:serviceURL+"api/posts?page="+current_page,
dataType: "json",
async : false,
cache : false,
}).then( function(data){
total_pages = data.last_page;
$.each(data.data, function(index, post) {
$('#newsList').append("<li>"+
"<aside><img src='"+serviceURL+"cdn/"+post.picture+"'></aside>"+
"<div>"+
"<a href='post.html?id="+post.id+"'><h3>"+post.title+"</h3></a>"+
"<h4>"+post.created_at.split(" ")[0]+"</h4>"+
"</div>"+
"</li>");
});
$("#loading").hide("slow");
current_page++;
});
}
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="loading"><div id="loading-spin"></div></div>
<header><div id="brand">News</div>
</header>
<article style="width:100%;margin:0 !important;padding-right:0 !important;padding-left:0 !important;">
<ul id="newsList"></ul>
</article>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/posts.js"></script>
</body>
</html>
can you tell me whats wrong ? i can get only posts from the first time and then nothing happen when i scroll to the bottom of the page .
PS : i have a lot of posts , and the last_page variable is the total of pages i have on my DB .
i fixed it , i had to remove overflow:hidden from the container .
thanks .
There is a nice solution here for How to make a On/Off button in Ionic
Here's a demo from Codepen
and the code pasted here:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
$scope.someFunction = function(){
alert('I am pressed')
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
My question is how to execute someFunction() on the same ng-click event of the Confirm button which could be like this ng-click="someFunction() && button.clicked=!button.clicked" ?
Instead of using the ; separator, you could move all the logic into someFunction(), and set that function as the expression to the ng-click attribute:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.buttonOn = false;
$scope.someFunction = function() {
$scope.buttonOn = (!$scope.buttonOn);
alert('I am pressed');
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-click="someFunction()" ng-class="buttonOn?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
I have this code, but all that happens when I move my slider is that the functions will restart. I want the function to update with the value of the slider position.
Edit: here is the entire page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>sliding</title>
<link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap-theme.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script src="assets/js/simple-slider.js"></script>
<link href="assets/css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="assets/css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<script src="assets/js/timbre.js"></script>
</head>
<body>
<div class="app container">
<!-- start building -->
<script>
var x=200;
function sin(){T("sin", {freq:x, mul:0.5}).play();}
$('#slider').on('change', function(){
x = $(this).val();
});
</script>
<button onclick="sin()"></button>
<input type="text" data-slider="true" data-slider-range="1,000" id="slider">
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script src="assets/components/jquery/jquery.min.js"></script>
<script src="assets/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
According to the jQuery Simple Slider docs on getting slider values, the event you need to bind to is a custom event called slider:changed, not the standard DOM change event.
If you modify
$('#slider').on('change', function(){
x = $(this).val();
});
to
$('#slider').on('slider:changed', function(evt, data){
x = data.value;
});
you should be able to copy the new value of the slider to your global variable.
I'm currently using the following code to pass parameters from my main page to a popup in jquery mobile:
<a onclick= DisplayEditIdPopUP('" . $row ['IdentificationTypeID'] ."','".$custid."','". $num."','".$row ['CustomerIdentificationId']."')>Edit</a>
however, Ive setup a zoom plugin which seems to break my on click. Is there a way to pass parameters through a regular anchor tag, without using the on click event? As calling the popup using the following code works, but obviously doesn't pass any parameters at the moment?
<a href='#addCustId' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-btn-c' >New</a>
Thanks
Several solutions exist:
Solution 1:
You can pass values with changePage:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
And read them like this:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
Solution 2:
Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.
var storeObject = {
firstname : '',
lastname : ''
}
Example: http://jsfiddle.net/Gajotres/9KKbx/
Solution 3:
You can also access data from the previous page like this:
$(document).on('pagebeforeshow', '#index',function (e, data) {
alert(data.prevPage.attr('id'));
});
prevPage object holds a complete previous page.
Solution 4:
As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
Example: http://jsfiddle.net/Gajotres/J9NTr/
Find more about them here.