I'm a beginner in android so please excuse me if my question is foolish.
I want to implement turn.js library in android webview for showing book.As I read about WebView it can run javascript so I wonder is there anyway to use turn.js in android. I've referred this link turn.js website
JS code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
Firstly you have to load web-page with script to WebView.
I used Monocle lib to show books so I placed html, js and css files into assets folder
Here is my mono.html
You are using turn.js library so you may find sample web page at library samples.
<head>
<!-- Include the Monocle library and styles -->
<script src="scripts/monocore.js"></script>
<link rel="stylesheet" type="text/css" href="styles/monocore.css" />
<script src="scripts/monoctrl.js"></script>
<link rel="stylesheet" type="text/css" href="styles/monoctrl.css" />
<style>
#reader { width: 100%; height: 100%;}
</style>
<script>
function createBookTitle(reader, contactListeners) {
var bt = {}
bt.createControlElements = function () {
cntr = document.createElement('div');
cntr.className = "bookTitle";
runner = document.createElement('div');
runner.className = "runner";
runner.innerHTML = reader.getBook().getMetaData('title');
cntr.appendChild(runner);
if (contactListeners) {
Monocle.Events.listenForContact(cntr, contactListeners);
}
return cntr;
}
reader.addControl(bt, 'page');
return bt;
}
</script>
</head>
<body>
<div id="reader"></div>
<script type="text/javascript">
Monocle.Events.listen(
window,
'load',
function () {
var readerOptions = {
panels: Monocle.Panels.Magic
};
Monocle.Reader('reader', bookData, readerOptions, function (rdr)
{
window.reader5 = rdr;
var toc = Monocle.Controls.Contents(rdr);
rdr.addControl(toc, 'popover', { hidden: true });
createBookTitle(
rdr,
{
start: function () {
rdr.showControl(toc);
}
}
);
});
}
);
</script>
</body>
After that you may show this page at web view like that
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/html/mono.html");
and the last step is load book content into this page. I wrote a helper that transforms book file to JS book object https://github.com/joseph/Monocle/wiki/Book-data-object with "javascript:" prefix. So it looks like "javascript: var bookData = {...."
and load this script
webView.loadUrl(bookData);
Related
I used frame: false to make the title bar disappear and then I try to make the button's function from others respond but it doesn't work
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>my app</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="title-container">
<img src="res/applogo.png" style="width: 22px; height: 22px;">
<div style="width: 5px; height: 22px;"></div>
<p class="title-text">my app - some page</p>
<p class="title-button" id="min-btn">-</p>
<p class="title-button" id="max-btn">◻</p>
<p class="title-button" id="close-btn">×</p>
</div>
<div class="application-container">
...
</div>
<script>
document.querySelector('button[data-title="Developer Tool"]').addEventListener('click', () => {
window.open('devTool.html', "_blank", "width=1200,height=714,resizable=false,,autoHideMenuBar=true"); // local file
})
const remote = require('electron').remote;
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
if (!window.isMaximized()) {
window.maximize();
} else {
window.unmaximize();
}
});
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
</script>
<script src="index.js"></script>
</body>
</html>
index.js is a blank file
how can I make the buttons work? Please reply in details if you can as I'm still quite new to JavaScript, thank you. If anything unclear please tell me below and I'll try to provide it.
Using AUI carousel in liferay DXP (v 3.0).
Liferay DXP uses AUI version 3.0
on each image it has redirect to different url.
For following demo code redirection is not working
<html>
<head>
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css"
rel="stylesheet"></link>
<script>
YUI().use(
'aui-carousel',
function(Y) {
new Y.Carousel(
{
activeIndex: 'rand',
contentBox: '#myCarousel',
height: 250,
intervalTime: 2,
width: 700
}
).render();
}
);
</script>
</head>
<body>
<div id="myCarousel">
<div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div>
</div>
</body>
</html>
Any solution ??
That strategy works in AlloyUI 2.0.0, so it seems like this is a bug in AlloyUI 3.0.0.
One possible workaround for this bug would be to select all the <img> tag children of your carousel and wrap them with the appropriate <a> tag programmatically:
Y.all('#myCarousel img').each(function(img) {
var imgParent = img.parent;
var link = document.createElement('a');
link.href = 'http://www.google.com';
imgParent.replaceChild(link, img);
link.appendChild(img);
});
So i created a simple html page :
index.html file:
<html>
<head>
</head>
<body>
<div class="menu">
hello
</div>
<div class="test">
Menu
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
here is the app.js file:
var main = function() {
$('.test').click(function(){
$('body').animate({
left: '500px'
},200);
})
}
$(document).ready(main)
I'm trying to understand what i did wrong , it seems like it should work..
was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..
You need to set position css property to body in order to work left.
body{
position:relative;
}
REF : http://api.jquery.com/animate/
I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.
How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?
Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?
Here is the mentioned code:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?
Thank you in advance for your ideas.
This is Markus' code in a simple HTML document:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.
This could be inteteresting for me too so I just fixed the tutorial script:
JSFiddle
Of course you need to import jquery and the viewport plugin (if you want to use it).
<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>
Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
Then use the following jQuery code:
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
i want to use this: http://jqueryui.com/draggable/ in my Firefox SDK Addon.
This is the source code for a simple example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
My Problem is, that i dont know how to handle the function
$(function() {
$( "#draggable" ).draggable();
});
in my content script, by using port communication between my main and content script.
Unfortunately, you placed the draggable function in a page script, not a content script, making communication way too complicated.
Instead, place all of your jQuery files and create a javascript file (let's call it draggable.js) in the data folder of your add-on (this is the content script) and place the draggable function there. Then use tabs.attach like so.
main.js
var tabs = require("sdk/tabs");
var data = require('sdk/self').data;
var worker;
var widget = require("sdk/widget").Widget({
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico"
onClick: function() {
worker = tabs.activeTab.attach({
contentScriptFile: [data.url('jquery.js'),
data.url('jquery-ui.js'),
data.url('draggable.js')]
});
worker.port.on("anything", function(variable) {
console.log("Got variable: "+variable);
}
}
});
Then you can communicate with the script by using self.port.emit in draggable.js and worker.on in main.js
Update: Edited main.js and draggable.js will look like this:
draggable.js
$("#draggable").draggable();
self.port.emit("anything", variable);
You should do anything that pertains to the page in this draggable.js and only send variables out if you need access to any Firefox sdk modules (which are only accessible in main.js).