I have the below index.html code
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="Myapp" ng-controller="GameController">
<div>
<div class="guessLeft">{{guesses}}</div>
<div class="incorrectGuess">InCorrect guesses : <span ng-repeat="letter in incorrectlyChoosen">{{letter}}</span></div>
<div class="correctGuess">Correct guesses : <span ng-repeat="letter in correctlyChoosen">{{letter}}</span>
</div>
<div class="youhavetoGuess">Your have to guess : {{displayWord}}</div>
<div class="takeInput">
<input type="text" name="guess" ng-model="input.letter">
<button ng-click="letterChoosen()">Submit</button>
</div>
</div>
</body>
in the below div class
<div class="guessLeft">{{guesses}}</div>
I want to use jquery knob where I would show my guess count, that would start from 6 till 0.
what should I do to achieve this? any reference would help.
I want to display rgraph bar chart on second page of my multipage Jquery Mobile App. Here is the structure of my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
<script type="text/javascript" src="rgraph/libraries/RGraph.common.core.js"></script>
<script type="text/javascript" src="rgraph/libraries/RGraph.bar.js"></script>
<script src="rgraph/libraries/RGraph.gauge.js"></script>
<script src="rgraph/libraries/RGraph.cornergauge.js"></script>
<script src="rgraph/libraries/RGraph.common.dynamic.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
Go to Page Two
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
// My chart should come here
<canvas id="cvs" width="500" height="250">[No canvas support]</canvas>
<script>
$(document).ready(function ()
{
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
})
</script>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
But chart is showing on the first page (main page).Is Jquery mobile Document.ready function is working for child pages?if not what should i change to make this working..please help
For jQuery Mobile, don't use $(document).ready(function ().... Instead use the provided page and/or pagecontainer events. For your example you could put the script at the bottom of the html (outside all page markup) and inside a pagecreate event for pagetwo:
$(document).on("pagecreate", "#pagetwo", function(){
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
});
Here is a working DEMO
Wondering if anyone has been able to use the Dygraph in conjunction with a jquery mobile. Say I define the following page:
<html>
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="/js/dygraph-combined.js"></script>
</head>
<body>
<div class="page" data-role="page">
<div class="header" data-role="header">
<h1>Header</h1>
</div>
<div class="ui-content" data-role="main">
<div id="graph" style="border:1px solid"></div>
</div>
<div class="footer" data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
//<![CDATA[
new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
//]]>
</script>
The graph does not get displayed. All I see is a blank div. But if I replace the body with just
<body>
<div id="graph"></div>
</body>
This works fine.
Could it be to do with the timing of when I create my Dygraph object?
For jQuery Mobile you should use their documented page structure and the events they provide for when the page is ready:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div role="main" class="ui-content" >
<div id="graph"></div>
</div>
</div>
Use CSS to set the graph size:
#graph { height: 300px; }
In JavaScript, it seems that pagecreate, pagebeforeshow do not work for the dygraphs, so you can use pageshow or another event that comes after the page is rendered:
var g1;
$(document).on("pageshow", "#page1", function(){
if (!g1){
g1 = new Dygraph(document.getElementById("graph"),
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
}
});
Here is a DEMO
Is it possible to make the UI Tabs closed by default, until clicked?
The 2 week search is still on! Such a complex/bloated script, and yet no simple way to control
Try this jsfiddle,
$("#tabs").tabs({
collapsible: true,
active: false
});
This could use some polish, but it should get you on the right track.
http://jsfiddle.net/vbmMJ/2/
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$(".tab-content").hide();
$(".ui-tabs-active").removeClass("ui-tabs-active");
$(".ui-state-active").removeClass("ui-state-active");
$(".ui-tabs-anchor").click(function() {
$($(this).attr("href") + " .tab-content").first().show();
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
<div class="tab-content">
tab 1 content
</div>
</div>
<div id="tab-2">
<div class="tab-content">
tab 2 content
</div>
</div>
</div>
</body>
</html>
jQuery 1.7.1 and jQuery Mobile 1.1.0RC1
Hello, I have a JQM radio button on my site and am programmatically changing its value based on a condition I'm checking on pageshow. Everything works fine, but it isn't happening very "smoothly," by which I mean that it is very visible to the user when it changes i.e. it's in its original state for half a second or so and then switches. Maybe I'm being a little picky, but I'd like the switch to be transparent to the user. I'm still trying to understand the various JQM "page*" events and thought if I did it on pagebeforeshow or pagebeforecreate it would make that happen, but that is not the case.
I've tried to do a jsFiddle for it (my first time), it's happening pretty instantaneously there (maybe something to do with my selection of onDomReady in the options?) but should give you an idea of what I'm talking about ... on my site the selection is very obviously in the Off state for a moment when the page loads and then switches over to On. It's not really a big deal, I'm asking more to help my understanding of the various page* events.
http://jsfiddle.net/pdjeU/
More info:
The web app is basically a document browser, constructed like so: the index.html files contains a list of the documents, or rather a list of links to the TOCs of the available documents. Each of these TOCs contains links to the sections of the actual document.
The code is as follows ... It's probably riddled with bad style since I'm a beginner. The code for my radio button issue is in lines 30-39 of custom2.js and 23-28 of ch2-sec1.html. Also, note that the console.log($("link[href$='styleDay.css']").length); line of code in custom2.js prints out "2" when the stylesheet ends with styleDay.css, and I have no idea why (I expect it to be "1"). My main problem, though, is that there is a noticeable lag when browsing through the content files (e.g. ch2-sec1.html as shown below) and the code flips the radio button to "Day Mode" when the condition is true ... can't this be coded so that it's already flipped by the time the page becomes visible?
root/index.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
<link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b" id="main">
<div data-role="header">
<div style="float:left; width:20%">
<a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
</div>
<div style="float:left; width:60%; text-align:center; padding-top:5px">
<h2>DOCUMENT LIST</h2>
</div>
<div style="float:left; width:20%">
<a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
</div>
</div>
<!-- /header -->
<div data-role="content" style="clear:both">
<div data-role="controlgroup">
Document 1
Document 2
Document 3
Document 4
Document 5
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</head>
root/doc1-toc.html ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
<script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="JS/custom2.js"> </script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" style="position:relative">
<div style="float:left">Home</div>
<h1>Document 1 TOC</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 1</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 1 Section 1</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
<font color="white">Chapter 2</font>
</h3>
<ul data-role="listview" data-theme="c">
<li>Chapter 2 Section 1</li>
<li>Chapter 2 Section 2</li>
<li>Chapter 2 Section 3</li>
<li>Chapter 2 Section 4</li>
</div>
</div>
</div>
</div>
</body>
</html>
root/HTML/ch2-sec1.html ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script type="text/javascript" src="../js/custom1.js"> </script>
<script type="text/javascript" src="../js/custom2.js"> </script>
</head>
<body>
<div data-role="page" id="doc1-ch2-sec1">
<div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<div id="optionsDiv">
<div style="float:left; width:25%; text-align:left">
Home
Previous
</div>
<div style="float:left; width:50%">
<div class="containing-element">
<fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
<input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
<label for="day">Day Mode</label>
<input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
<label for="night">Night Mode</label>
</fieldset>
</div>
</div>
<div style="float:left; width:25%; text-align:right">
TOC
Next
</div>
</div>
</div>
<!-- Main content from legacy data source ->
</div>
</body>
</html>
root/JS/custom2.js ...
$("#main").live("pageinit",function(){
$('<div>').simpledialog2({
mode: 'blank',
animate:false,
top:10,
left:10,
themeDialog:'a',
headerText: false,
headerClose: false,
blankContent :
"<span>Active Checklists: </span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
"<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
});
});
$(document).on('click', '#openSearch', function() {
$('<div>').simpledialog2({
mode: 'blank',
themeDialog:'a',
animate:false,
top:10,
left:'60%',
headerText: false,
headerClose: false,
blankContent :
"<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
"<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
});
});
});
$("div[data-role='page']").live("pageshow",function(){
console.log($("link[href$='styleDay.css']").length);
if ($("link[href$='styleDay.css']").length > 0){
$("#day").attr("checked",true).checkboxradio("refresh");
$("#night").removeAttr("checked").checkboxradio("refresh");
}
$("input[name='radio-choice-1']").on('change mousedown',function(event) {
$("link").attr("href",$("input[checked][name='radio-choice-1']").val());
});
});