<!Doctype html?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css\bootstrap.min.css" rel="stylesheet">
<link href="css\styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js\bootstrap.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});</script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "daily1.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Programme').each(function(){
var ChannelName = $(this).find('ChannelName').text();
var ProgrammeName = $(this).find('ProgrammeName').text();
var StartTime = $(this).find('StartTime').text();
var EndTime = $(this).find('EndTime').text();
$('<tr></tr>').html('<th>'+ChannelName+'</th><td>'+ProgrammeName+'</td><td>'+StartTime+'</td> <td>'+EndTime+'</td>').appendTo('#chart');
});
}
});
});
</script>
</head>
<body>
<br>
<img src="banner.jpg" alt="banner" style="width:650;height:175">
<h4><b>Your guide, to your TV</h4></b>
<div class="tabs">
<ul class="tab-links">
<li class="active">Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday<li>
<li>Sunday</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Daily 1</p>
<br>
<table id="chart">
<tr><td></td>
<th>07.00</th>
<th>08.00</th>
<th>09.00</th>
<th>10.00</th>
<th>11.00</th>
<th>12.00</th>
<th>13.00</th>
<th>14.00</th>
<th>15.00</th>
<th>16.00</th>
<th>17.00</th>
<th>18.00</th>
<th>19.00</th>
<th>20.00</th>
<th>21.00</th>
<th>22.00</th>
<th>23.00</th>
<th>00.00</th>
</tr>
</table>
</div>
<div id="tab2" class="tab">
<p>Content1</p>
</div>
<div id="tab3" class="tab">
<p>Content2</p>
</div>
<div id="tab4" class="tab">
<p>Content3</p>
</div>
<div id="tab5" class="tab">
<p>Content4</p>
</div>
<div id="tab6" class="tab">
<p>Content5</p>
</div>
<div id="tab7" class="tab">
<p>Content6</p>
</div>
</div>
</div>
Please see above code. The data is being read from an external XML file. The data is currently appearing in a vertical list, but I would like it to appear horizontally in the table. (i.e. Programme Name Specifically to appear in a horizontal list)
Any help would be appreciated.
It's because your not appending in the right place. Try this :
$('#chart').append('<tr><td>'+ChannelName+'</td><td>'+ProgrammeName+'</td><td>'+StartTime+'</td> <td>'+EndTime+'</td></tr>');
Related
I am using Cordova 6.2.0 and want to override the backbutton on Android. I found the following solution(s) but this doesn't work for me (I guess it's because of the cordova Version): link.
I am using the following code to override the backbutton:
document.addEventListener("deviceready",ondeviceready, false);
function ondeviceready()
{
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey()
{
//Do something
}
The Problem is that the backbutton only "does something" on the first page. this is my index.html page:
<html>
<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="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/index.css" />
<title>Stadtwerke-App</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="js/hammer.js"></script>
<script>
$(document).ready(function(e) {
var startX, curX, startY, curY; // Variables
var newXScroll, newYScroll, genXScroll; // More Variables!
// Change the height of the sidebar, as well as a few things to do with the main content area, so the user
// can actually scroll in the content area.
function sideBarHeight() {
var docHeight = $(document).height();
var winHeight = $(window).height();
$('.slide-in').height(winHeight);
$('#main-container').height(winHeight);
$('#sub-container').height($('#sub-container').height());
}
sideBarHeight();
var outIn = 'in';
Hammer(document.getElementById('main-container')).on('swiperight', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
});
Hammer(document.getElementById('main-container')).on('swipeleft', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
});
function runAnimation() {
if(outIn == 'out') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
} else if(outIn == 'in') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
}
}
$('.menu-icon').click(function() {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
});
});
</script>
</head>
<body id="index" name="index">
<!--script>start()</script-->
<div id="main-container" class="tk-chaparral-pro">
<div id="Email" class="emailbox"></div>
<h2>News</h2>
<div class="Container" onclick='browser("http://www.tagesschau.de/inland/eeg-reform-105.html")'>
<p class="Buttonbereich" align="center"><img src="img/Tagesschau.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Wie geht es weiter mit der Energiewende?</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/metropolregion_artikel,-Nach-Unwetter-Behinderungen-im-Bahnverkehr-_arid,195765.html")'>
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Nach Unwetter: Behinderungen im Bahnverkehr</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/finanzen/meine-finanzen/geld-ausgeben/so-bekommen-sie-die-praemie-fuer-ihr-e-auto-14239079.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 18.05.2016: So bekommen Sie die Prämie für Ihr E-Auto</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/region_artikel,-Hochspannungstrasse-bei-Leimen-Nach-80-Jahren-gehen-die-Stahlmasten-in-Rente-_arid,192723.html")' >
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<p class="Buttonbereich2"> 18.05.2016: Nach 80 Jahren gehen Stahlmasten in Rente</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/wirtschaft/grafik-des-tages-woher-kommt-unser-strom-14237266.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 17.05.2016</p-->
<p class="Buttonbereich2"> 17.05.2016: Woher kommt unser Strom?</p>
</div>
<div id="sub-container">
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="nav">
<div class="navbox">
<div class="menu-icon">
<div class="bar"> </div>
<div class="bar"> </div>
<div class="bar"> </div>
</div>
</div>
<div class="navbox" style=" float:right"><img src="img/Musterwerke.PNG" style="float:right;height:100%;background-color:white"> </div>
<h1 align="center" style="margin-top:10px;">Stadtwerke-App</h1>
</div>
<div class="footer">
<a rel="external" href="infos.html" ><img src="img/Infos.png" alt="hsag logo" style="float:left;height:80%;border:5px solid white"/></a>
<div class="navbox" style=" float:right" onclick='browser("https://www.hsag.info")' ><img src="img/hsag_logo.png" style="float:right;height:100%;background-color:white"> </div>
</div>
</div>
<div class="slide-in">
<ul class="tk-museo-sans">
<li onclick='window.open("index.html","_self" )' >Startseite</li>
<li onclick='window.open("Index_Nach Registrierung.html","_self" )'>Zählerstandserfassung</li>
<li onclick='window.open("Abfallkalender.html","_self" )'>Abfallkalender</li>
<li onclick='window.open("Apothekennotdienst.html","_self" )'>Apothekennotdienst</li>
<li onclick='window.open("Stoerungsmeldung.html","_self" )'>Störungsmeldung</li>
<li onclick='window.open("Services.html","_self" )'>Kundenportal</li>
<li onclick='window.open("Spartipps.html","_self" )'>Energiespartipps</li>
<li onclick='window.open("Vergleich.html","_self" )'>Verbrauchsvergleich</li>
<li onclick='window.open("Events.html","_self" )'>Event-Übersicht</li>
<li onclick='window.open("Impressum.html","_self" )'>Impressum</li>
<li onclick='window.open("Einstellungen.html","_self" )'>Einstellungen/Account</li>
</ul>
</div>
</body>
</html>
All other Pages include the same JS-Scripts.
Try the following code .It woks for me
In HTML:
<body onload="onLoad()">
in Script:
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
}
I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:
window.location="page.html"
Now the onBackKey() function is firing at every single page.
On click of a button, result appends to another div with the total increasing on each click.
When Remove Last button is clicked it removes the appended div but does not adjust the total.
I've looked all over for a function with no luck.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Remove last</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><input type="submit" value="Remove Last" class="print-btn remove-item"></li>
<li class="remove"><input type="submit" value="Remove All" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><button class="menu item1">Item 1</button></li>
<li><button class="menu item2">Item 2</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
//remove last item
$('.remove-item').click(function(){
$(".delete:last").remove();
});
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += +$(this).text();
});
$('.total').text('Total: ' + total);
};
</script>
</body>
</html>
You need to call counter(); method after the element is removed.
//remove last item
$('.remove-item').click(function() {
$(".delete:last").remove();
counter();
});
That is because you have not called counter function after removing element. you need to call it in remove item clicked handler:
$('.remove-item').click(function(){
$(".delete:last").remove();
counter();
});
You should also parse the values while getting the text before calculating total:
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: ' + total);
I'm starting work on a members section of my website, using AngularJS.
v0.1.0.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo ucfirst($_SERVER['PHP_AUTH_USER']); ?>'s dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="../jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body ng-app="usr" ng-controller="userControll as users" ng-init=<?php echo "'users.setUser(" . $_SERVER['PHP_AUTH_USER'] .")'"?>><!-- since I'm using server auth, to transfer to angular-->
<div style="background-color: #000000; color: #c0c0c0;">
<div class="container">
<img ng-src="{{users.user.icon}}" alt="avatar" />
<h1>{{users.user.name}}</h1>
<i>#<?php echo $_SERVER['PHP_AUTH_USER']; ?></i>
</div>
</div>
<div class="container">
<h1>Dashboard</h1>
<!--Nav tabs-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home"><h1>Home</h1><br>{{users.user.data}}</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>{{users.user.name}}</h2>
<hr>
<span style="color: gray">Coming soon</span>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
<h2>Settings</h2>
<span style="color: gray">Coming soon</span>
<hr>
<h3>About</h3>
<i>v0.1.0<br>© Imagifight Studios 2015</i>
</div>
</div>
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('usr', []);
var userData = $.ajax({
dataType: 'json',
url:'user-data.json'
})
.done(function(data) {
$.each(function(data){
$.parseJSON(data);
});
}).fail(console.error('Damn. Didn\'t work.'));
app.controller('userControll', function(){
this.setUser = function(u){
this.user = userData[u];
}
})
})();
user-data.json
{
"imagifight": {
"name": "Imagifight",
"email": "imagifight#gmail.com",
"status": "owner",
"icon": "icons/imagifight.png"
}
}
Throws error:
Damn.Didnt work
(anonymous function) # app.js:11
Can't see where the ajax went wrong. No syntax errors either. Maybe I'm missing something here, I don't know. Any ideas on how to fix?
You have a problem with Quote. Escape it as
console.error('Damn. Didn\'t work.')
You have ' inside the console error.
Change: console.error('Damn. Didn't work.')
To: console.error('Damn. Didn\'t work.')
On my Contact page I have a link to show an email form, which right now is just a header. I want the email form to hide whenever a different "page" is clicked on; however, right now it takes two clicks to get rid of the form. The form should only be visible on the Contact Page. I made a small testcase to illustrate the problem.
My code works, but only after you click a menu twice. I need help making it so I click a link once and it disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
</div>
<div class="contact_form">
<h1>Contact Form</h1>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
you have to change a little thing in your html
just move the contact_form div inside contact div
let code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
<div class="contact_form">
<h1>Contact Form</h1>
</div>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
then remove the if statement form your jquery
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
$(".contact_form").slideUp().hide();
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
is(':visible') checks the display property of an element, you can use css method.
//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
$(".contact_form").slideUp().hide();
}
I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.
This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource