Javascript - How to transform index chat into a chat window - javascript

Actually I have some chat and I want to put it inside a window, I found an example but Not loading the chat inside window.
My chat works perfectly with just the index. Check the images.
Old index.ejs code (just chat):
<html>
<head>
<script src="jquery-3.1.1.js"></script>
<script src="app.js"></script>
<base href="/">
<title>XXXXXXXXXXXXXXXX</title>
<meta ------ />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="view-change-button" class="button" onclick="Payloadxxxxxxx.togglePanel(event, this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="contentParent" class="responsive-columns-wrapper">
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class="input responsive-column"
placeholder="Type something" type="text"
onkeydown="xxxxxxxxxxxxxxxxPanel.inputKeyDown(event, this)">
</label>
</div>
</div>
<div id="payload-column" class="fixed-column content-column">
<div id="payload-initial-message">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxOtherDescription.
</div>
<div id="payload-request" class="payload"></div>
<div id="payload-response" class="payload"></div>
</div>
</div>
<script src="js/xxxxx.js"></script>
<script src="js/xxxxxxxx.js"></script>
<script src="js/xxxxxxxxxx.js"></script>
<script src="js/xxxxxxxxxx.js"></script>
<script src="js/xxxxxxxxx.js"></script>
</body>
</html>
Image old (I'm use bootstrap for responsive page):
Web maximize
If I decrease or increase the browser window
And new Index with the button click for open the chat, the all code of chat i put inside chat.ejs:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Web Chat - ITSM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:image" content="conversation.svg" />
<meta property="og:title" content="Conversation Chat Simple" />
<meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
<meta charset="UTF-8">
<title>Title of the document</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
function open_chatbox() {
$('#chat').fadeOut(500);
$('#chatBox').fadeIn(1000);
}
function closeChat() {
$('#chatBox').fadeOut(500);
$('#chat').fadeIn(1000);
}
</script>
<style>
#chat
{
position:absolute;
width:200px;
height:auto;
padding:10px;
background:#088A68;
color:#EDEDED;
text-align:center;
font-family:Cambria;
font-size:20px;
bottom:0px;
right:15px;
cursor:pointer;
}
#chatBox
{
display:none;
position:absolute;
width:200px;
height:300px;
padding:10px;
background:#EDEDED;
color:#FF7700;
text-align:center;
font-family:Cambria;
font-size:20px;
bottom:0px;
right:15px;
cursor:pointer;
}
#close
{
position:absolute;
width:15px;
height:15px;
padding:6px 5px 10px 5px;
text-align:center;
background:rgba(0,0,0,0.8);
color:#FF7700;
font-family:Cambria;
right:0px;top:0px;
} </style>
</head>
<body>
<div id="chat" onClick="open_chatbox();"> Chat Now </div>
<div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="contentParent" class="responsive-columns-wrapper">
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class="input responsive-column"
placeholder="Type something" type="text"
onkeydown="ConversationPanel.inputKeyDown(event, this)">
</label>
</div>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/api.js"></script>
<script src="js/conversation.js"></script>
<script src="js/global.js"></script>
</body>
</html>
I see that example for it.
And the error is:
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience. For more help,
check https://xhr.spec.whatwg.org/.
Uncaught TypeError: Cannot read property 'classList' of null
at displayPayload (eval at (jquery.min.js:2), :80:23)
at Object.Api.setRequestPayload (eval at (jquery.min.js:2), :52:7)
at Object.sendRequest (eval at (jquery.min.js:2), :55:11)
at geoSuccess (eval at (jquery.min.js:2), :47:9) displayPayload # VM901:80 Api.setRequestPayload #
VM901:52 sendRequest # VM899:55 geoSuccess # VM900:47 VM901:80
Uncaught TypeError: Cannot read property 'classList' of null
at displayPayload (eval at (jquery.min.js:2), :80:23)
Obs.: The old file index.ejs is the new chat.ejs to load the chat inside window if click the button.
I try see other post with same example but None of them are trying the same as me

In the case I put all .css style inside my css repository, and I added the scripts src inside the index. After it, works fine. I did not need chat.ejs and I inserted all the code in the index just with the .css inside my repository public/css/app.css
Check code:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Web Chat - ITSM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:image" content="conversation.svg" />
<meta property="og:title" content="Conversation Chat Simple" />
<meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
<meta charset="UTF-8">
<title>Title of the document</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
function open_chatbox() {
$('#chat').fadeOut(500);
$('#chatBox').fadeIn(1000);
}
function closeChat() {
$('#chatBox').fadeOut(500);
$('#chat').fadeIn(1000);
}
</script>
</head>
<body>
<div id="chat" onClick="open_chatbox();"> Chat Now </div>
<div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="contentParent" class="responsive-columns-wrapper">
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class="input responsive-column"
placeholder="Digite algo" type="text"
onkeydown="ConversationPanel.inputKeyDown(event, this)">
</label>
</div>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/api.js"></script>
<script src="js/conversation.js"></script>
<script src="js/global.js"></script>
</body>
</html>

Related

How do I get metadata for a link?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><$BlogPageTitle$></title>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
</head>
<body>
<div trbidi="on">
<div style="padding: 0;">
<div id="makingdifferenttimer" style="display: none;">
<div id="notes_url" style="font-family: Electrolize,lolblogger,Tahoma; font-size: 16px; margin-top: 16px;">
<div id="url_qu">
.</div>
</div>
</div>
<div id="mdtimer">
<div style="font-family: Electrolize,lolblogger,Tahoma; text-align: center;">
<b>Please wait...</b>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
!function(a,b,c,d){function g(b,c){this.element=b,this.settings=a.extend({},f,c),this.settings.fontSize||(this.settings.fontSize=this.settings.radius/1.2),this.settings.strokeWidth||(this.settings.strokeWidth=this.settings.radius/4),this._defaults=f,this._name=e,this._init()}var e="countdown360",f={radius:15.5,strokeStyle:"#2E64FE",strokeWidth:d,fillStyle:"#8ac575",fontColor:"#2E64FE",fontFamily:"Electrolize,lolblogger,Tahoma",fontSize:d,fontWeight:700,autostart:!0,seconds:20,label:["second","Seconds"],startOverAfterAdding:!0,onComplete:function(){}};g.prototype={getTimeRemaining:function(){var a=this._secondsLeft(this.getElapsedTime());return a},getElapsedTime:function(){return Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3)},extendTimer:function(a){var b=parseInt(a),c=Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3);this._secondsLeft(c)+b<=this.settings.seconds&&this.startedAt.setSeconds(this.startedAt.getSeconds()+parseInt(a))},addSeconds:function(a){var b=Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3);this.settings.startOverAfterAdding?(this.settings.seconds=this._secondsLeft(b)+parseInt(a),this.start()):this.settings.seconds+=parseInt(a)},start:function(){this.startedAt=new Date,this._drawCountdownShape(3.5*Math.PI,!0),this._drawCountdownLabel(0),this.interval=setInterval(jQuery.proxy(this._draw,this),1e3)},stop:function(a){clearInterval(this.interval),a&&a()},_init:function(){this.settings.width=2*this.settings.radius+2*this.settings.strokeWidth,this.settings.height=this.settings.width,this.settings.arcX=this.settings.radius+this.settings.strokeWidth,this.settings.arcY=this.settings.arcX,this._initPen(this._getCanvas()),this.settings.autostart&&this.start()},_getCanvas:function(){var b=a('<canvas id="countdown360_'+a(this.element).attr("id")+'" width="'+this.settings.width+'" height="'+this.settings.height+'"><span id="countdown-text" role="status" aria-live="assertive"></span></canvas>');return a(this.element).prepend(b[0]),b[0]},_initPen:function(b){this.pen=b.getContext("2d"),this.pen.lineWidth=this.settings.strokeWidth,this.pen.strokeStyle=this.settings.strokeStyle,this.pen.fillStyle=this.settings.fillStyle,this.pen.textAlign="center",this.pen.textBaseline="middle",this.ariaText=a(b).children("#countdown-text"),this._clearRect()},_clearRect:function(){this.pen.clearRect(0,0,this.settings.width,this.settings.height)},_secondsLeft:function(a){return this.settings.seconds-a},_drawCountdownLabel:function(a){this.ariaText.text(b),this.pen.font=this.settings.fontWeight+" "+this.settings.fontSize+"px "+this.settings.fontFamily;var b=this._secondsLeft(a),c=1===b?this.settings.label[0]:this.settings.label[1],d=this.settings.label&&2===this.settings.label.length,e=this.settings.width/2;d?y=this.settings.height/2-this.settings.fontSize/6.2:y=this.settings.height/2,this.pen.fillStyle=this.settings.fillStyle,this.pen.fillText(b+1,e,y),this.pen.fillStyle=this.settings.fontColor,this.pen.fillText(b,e,y),d&&(this.pen.font="normal small-caps "+this.settings.fontSize/3+"px "+this.settings.fontFamily,this.pen.fillText(c,this.settings.width/2,this.settings.height/2+this.settings.fontSize/2.2))},_drawCountdownShape:function(a,b){this.pen.fillStyle=this.settings.fillStyle,this.pen.beginPath(),this.pen.arc(this.settings.arcX,this.settings.arcY,this.settings.radius,1.5*Math.PI,a,!1),this.pen.fill(),b&&this.pen.stroke()},_draw:function(){var a=Math.round(((new Date).getTime()-this.startedAt.getTime())/1e3),b=3.5*Math.PI-2*Math.PI/this.settings.seconds*a;this._clearRect(),this._drawCountdownShape(3.5*Math.PI,!1),a<this.settings.seconds?(this._drawCountdownShape(b,!0),this._drawCountdownLabel(a)):(this._drawCountdownLabel(this.settings.seconds),this.stop(),this.settings.onComplete())}},a.fn[e]=function(b){var c;return this.each(function(){c=a.data(this,"plugin_"+e),c||(c=new g(this,b),a.data(this,"plugin_"+e,c))}),c}}(jQuery,window,document);
//]]>
</script>
<br />
<div class="time_dir" style="text-align: center;">
<div id="container">
<div id="countdown">
</div>
<script charset="utf-8" type="text/javascript">var countdown=$("#countdown").countdown360({radius:90,seconds:3,fontColor:"#ffffff",strokeStyle:"#ff8000",fillStyle:"#ff4000",autostart:!1,onComplete:function(){console.log("done"),$(".download_faster").show(),$(".dowen_bum").show(),$("#container").remove()}});countdown.start();</script>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){var a=2;setInterval(function(){$("#mdtimer span").text(a--),0==a&&($("#makingdifferenttimer").delay(1e3).fadeIn(1e3),$("#mdtimer").hide(1e3).fadeOut(fast))},1e3)});
$(document).ready(function(){$(window).load(function(){var a=window.location.hash.substr(1);$("#url_qu").html("<center><b>👇 Product link ready 👇🏻</b><br><br></center><i class="fa fa-arrow-down" aria-hidden="true"/>Click Here')}),setTimeout(function(){window.location.hash.substr(1)},11010)});
</script>
<div>
<br /></div>
</div>
</div>
<div style="text-align: center;">
<center>
</div>
</div>
</div>
</body>
</html>
How do I get link metadata when shared on social media?
This is a waiting page to redirect visitors to another site link when I type the page link
Then # the link that I want the visitor to go to, waiting for the counter, then clicking on the button, it will go to the other site after the # sign
When I share the link on any social networking site, it shows metadata for the waiting page
How do I get the metadata of the link that the visitor will go to?
They make a request to the link that you provide. You can see that when you use grabify (here you will see the request). Then you can parse the html to get the metadata. You should make the request from the bakend and store the result, so that you dont have to reuqest the information multiple times. Also it is unlikely that the request will be allowed cross domain. You can test it by using fetch for example to get the google homepage like this fetch("https://google.com/") however this will return a CORS policy: No 'Access-Control-Allow-Origin' error.

Thymeleaf + HTML5 - why can't I access my javascripts?

I have an Spring MCV 4 + HTML5 + Thymeleaf based application I can't seem to use javascript on pages.
The webapp structure is:
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
In my login page, since it is a single page, with only a picture in the background, I have a piece of JS that works flawlessly:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="#{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
Forgot Password?
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#ssoId').focus();
});
</script>
</body>
</html>
Login page has its own fragment, because it's a single, no menus, no sidebar page. All other are.
For may default templating, I have a file called fragments/default.html reponsible for pages organization.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
So that, for every page, I get included the following links and scripts from fragments/common.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="#{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="#{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="#{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="#{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="#{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="#{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="#{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
My fragments/header.html is defined as:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.html is very similar to `fragments/header.html, just different classes and content.
So, on every page I have on my application, I do something like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
I'm sure it's something quite stupid, but I'm failing to see why can't I get javascript working on my pages, even for something quite as simple as:
<script type="javascript" >
$(function () {
alert('hello');
});
</script>
And, what's bothering (a lot!) is that if I on the browser something like:
localhost:8080/appName/assets/js/bootstrap.min.js
It will show the contents of the file.
What am I missing here?
Thanks for the input, guys! I got it working. What I did is placing the JavaScript section inside the <div layout:fragment="content">*HERE*</script> area, like on the example bellow.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<script type="text/javascript" >
*JavaScript area*
</script>
// content
</div>
</body
</html>
Hope this will save someone's precious time!
I think you have problems because there are 2 jquery files included to your fragments/common.html (check it via Firebug or something like that):
<head th:id="commonFragment" th:fragment="commonFragment">
...
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Try to remove one of the definitions.

CSS and JS are not working on live server while I transfer to there

I created a coming soon page for my new portfolio domain, on a local server. When I'm trying to transfer it to my hosting panel on public html, just HTML file are showing but CSS and JS files are not getting included, and they are not working properly.
What do I need to change there for using on live server ?
I uploaded all folders, img, js, css and files.
Here is a link for live preview (Dropbox): Coming_soon_template
Here is my code for local server:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This site is in under construction</title>
<meta name="description" content="This site for now is in under construction will be live after some days.For more you can knock me on there lover.mahabub#gmail.com">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com /css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="include/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/TimeCircles.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="coming-soon-total">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-text">
<span>A creation of Mahbub Rahman**</span>
<h1>Wait for difference!</h1>
<p>Long way to go just keep patience.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="example" data-date="2015-12-23 00:00:00"> </div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="social-area">
<p> Get in touch</p>
<ul class="social-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Skype</li>
<li>whatsapp</li>
<li>gplus</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/TimeCircles.js"></script>
<script type="text/javascript">
$('document').ready(function() {
'use strict';
$(".example").TimeCircles({
start: true,
time: {
Days: {color: "#4A616E"},
Hours: {color: "#5E524A"},
Minutes: {color: "#2E2F2A"},
Seconds: {color: "#9BA7B5"}
},
circle_bg_color: "#7F8382",
bg_width: .8,
});
});
</script>
</body>
</html>

Angular JS "pageslide-directive"

i am fresher to angular Js. i want to use pageslide-Directive. Below i have shared the sample template. How to load that content dynamically in that panel.. Please suggest.
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Ng-pageslide : AngularJS sliding panel for serving additional content" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="angular-pageslide-directive.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css">
<title>AngularJS Pageslide directive demo</title>
<style>
.ng-pageslide {
background: #eee;
}
</style>
<script>
var app = angular.module("app", ["pageslide-directive"]);
</script>
</head>
<body >
<!-- MAIN CONTENT -->
<div ng-app="app" ng-controller="test" id="" class="outer" style="padding:20px">
<a class="large button" pageslide ps-side="right" ps-speed="0.5" ng-click="profile_action('')" href="#demo-right">Open Demo</a> <div style="padding:20px" id="demo-right">
{{ NAME}}
<a id="demo-right-close"i class="button" >Close</a>
</div>
</div>
</body>
You have to add an controller to the panel and use it to load your content to the panel's items

Phonegap - Changing css for offline mode not working

In onDeviceReady I'm trying to detect if a network connection is present with navigator.connection.type and if it's not then a div with the offline content is shown, but it's not working. running it on a device (Z10).
My 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, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>Our Application</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/mustache.js"></script>
<script src="phonegap.js"></script>
</head>
<body onload="init()">
<div data-role="page" id="main">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div data-role="content">
<ul id="canlist" data-role="listview">
</ul>
New can
</div>
<div data-role="footer" data-theme="c">
<h2 class="offline">Offline Mode</h2>
</div>
</div>
<div data-role="page" id="newcan">
<div data-role="header" class="logo">
<img src="img/logo.png" />
</div>
<div id="candetailcontent" data-role="content">
</div>
<div data-role="footer" data-theme="c">
<p>Snapcan!</p>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert('ready');
var networkstate = navigator.connection.type;
if(networkstate == "none")
{
$(".offline").css("visibility","visible");
}
}
</script>
</body>
</html>
my index.css:
.offline{
visibility: hidden;
color: #f00;
font-style:italic;
}
If there is no connection then the red"Offline Mode' should be visible but it's not. Any ideas?
I think you should try with cordova's offline eventlistener.
have you tried using the css property "display" on your offline class and either have it set to "none" if online or "" is offline?

Categories