I have one website link which currently is working when clicking the link a window pop-up, but I want the onclick to happen automatically without clicking. The onclick should work like onload.
I tried a lot of Google and StackOverflow searches.. but I couldn't find the exact solution to my problem.
Here's my code below:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
document.getElementById('robrowser').addEventListener("click", function(){
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}, false );
}
window.addEventListener("load", initialize, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
You can simulate a buttonclick like this:
$("#robrowser").click();
In this case you want to run the method when a page is loaded.
You can just remove the entire onclick listener and call the function initialize() directly:
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
initialize();
The following changes have been made:
button on click event listener moved into the window load function
The source code from the button click event moved into initialize()
button on click event to target the function initialize
window load function calls/executes initialize()
Source code:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
window.addEventListener("load", function(){
document.getElementById('robrowser').addEventListener("click", initialize, false );
initialize();
}, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
</html>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps, happy coding!
Related
Im new in this electron space, and have a problem. i didn´t manage to get my custom buttons to work. This drives me crazy. Anyone an idea what i´m doing wrong? the Buttons do simply nothing when i click. My code is an example from an older youtube Tutorial, and i think things have changed since then.
Here is my code:
menuHandler.js
const $ = require('jquery');
const { remote } = require('electron');
var win = remote.getCurrentWindow();
$('#minimize').click(function () {
win.minimize();
});
$('#close').click(function () {
win.close();
});
$('#maximize').click(function () {
if (win.isMaximized()) {
win.unmaximize();
} else {
win.maximize();
}
console.log(win.isMaximized());
});
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/reset.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
</head>
<body>
<div id="container">
<nav>
<div id="buttons">
<div id="minimize">
<span id="minimize-font">—</span>
</div>
<div id="maximize">
<span id="size-font">◻</span>
</div>
<div id="close">
<span id="close-font" >✕</span>
</div>
</div>
</nav>
</div>
</html>
</body>
</html>
and my app.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let win;
var IMG_DIR = '/img/';
var APP_DIR = '/src/';
function createWindow() {
win = new BrowserWindow({
width: 1100,
height: 750,
minWidth: 930,
minHeight: 650,
frame: false,
/*title: "Nader | Initio",
resizable: true, */
backgroundColor: '#1A373E',
icon: path.join(__dirname, IMG_DIR, 'icon.png'),
webPreferences: {
nodeIntegration: true
}
});
win.openDevTools()
win.loadURL(url.format({
pathname: path.join(__dirname, APP_DIR, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit();
}
});
thank you for your help!
Several small things are needed to make your code work:
<script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
needs to be
<script type="text/javascript" src="/src/js/menuHandler.js"></script>
Since Electron 10, released in August 2020, you need to set enableRemoteModule: true in the webPreferences if you want to use remote in the renderer process.
Lastly, you should register the button click event handlers after the page is loaded. Otherwise, chances are the elements don't exist yet.
$(window).on("load", function() {
console.log("loaded");
$("#minimize").click(function () {
console.log("minimize");
win.minimize();
});
// etc.
});
As a general tip I'd advise to make use of the DevTools, which you already activate in your code. There, in the Console tab, you can see JavaScript errors happening in the renderer process.
i am trying to load assets on javascript using phaser3 engine but on chrome consol it says 'failed to load image' here is my HTML & Javascript code look where i made mistake:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PhaserGame</title>
<script = "text/javascript" src = "phaser.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: {y: 500},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('sky','assets/sky.png');
}
function create() {
this.add.image(400, 300, 'sky');
}
function update() {
}
I think there is some problem with your image location
the same code worked for me, with only changing the image URL
https://codepen.io/devsumanmdn/pen/zaeZwJ?editors=0010
create folder "public" in project and put images here
I wrote a code that will translate text from en-US to id-ID (Indonesian). Here button has got a text which reads as Click me if you are serious. After applying translation, it is getting translated as Klik saya jika anda serius successfully. If I click on that button, an alert message will be displayed like this: You have been alerted, code it down. I want that alert message to be translated to id-ID. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="alertbox();" id="btn" >Click me if you are serious</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
function alertbox () {
alert("You have been alerted, code it down");
}
$.i18n.init({
lng: 'id-ID',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
$('#btn').text($.t('app.btn', {
btn: ''
}))
});
</script>
</body>
</html>
id-ID (ns.special.json)
{
"app": {
"btn": "Klik saya jika anda serius"
}
}
en-US (ns.special.json)
{
"app": {
"btn": "Click me if you are serious"
}
}
How can I translate alert message into id-ID?
Where is your problem? You dont even try :) There is everything documented:
http://i18next.com/pages/doc_jquery.html
And you can find many examples with jquery. You can find even live examples on jsfiddle, like that:
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
http://jsfiddle.net/SalvadorDali/dLc7x/
Finish your code and edit your question, so we can help you. First declare i18n variables, then use $.t
My code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<button id="btn">Click me if you are serious</button>
<div id="qwe"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
/*$("#btn").click(function() {
alert("You have been alerted, code it down!!!");
});*/
$.i18n.init({
lng: 'en-US',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
var key = $('#qwe').text();
$('#btn').text($.t('app.btn', {
btn: ''
}))
$('#qwe').text($.t('app.alert', {
alert: ''
}))
});
$("#btn").click(function() {
alert($('#qwe').text());
});
</script>
</body>
</html>
CSS:
div {
display: none;
}
ns.special.json (en-US):
{
"app": {
"btn": "Click me if you are serious",
"alert": "You have been alerted, code it down!!!"
}
}
ns.special.json (id-ID):
{
"app": {
"btn": "Klik saya jika anda serius",
"alert": "Anda telah diperingatkan, kode itu turun!!!"
}
}
I want to design some slides by Javascript, and use the Reveal library and follow the template
https://github.com/hakimel/reveal.js/blob/master/index.html
and plan to embed a charts into the slides by echarts library and follow this demo
http://ecomfe.github.io/echarts/doc/start-en.html
I put these two library as follow directory without any change of echarts/reveal library.
|--echarts-2.2.0
|--reveal.js
\--mySlides.html
When I merged these two demo together, I got the "anonymous function" of "require.config". No idea how to debug it. Anyone can help it? Thanks.
Uncaught ReferenceError: Reveal is not defined
(anonymous function) mySlides.html:36
mySlides.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section id="page1" data-background="#ff0000">
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="echarts-2.2.0/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'echarts-2.2.0/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myChart.setOption(option);
}
);
</script>
</section>
<section id="page2"><p>Page2</p></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: 'reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
It looks like you're missing the requirejs file loader. Put this in the header of your file and let me know if that fixes it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.js"></script>
I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.
This is html code. Index.html
<html><head>
<title>Hello World</title>
<style>
.hello {
background:#000000;
background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
background:#ffffff;
background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
This is the code for app.js
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
ui: 'light',
layout: {
pack:'center'
}
},
items: [
{docked:'top', xtype:'toolbar', title:'Hello World'},
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
can any one help me solve this problem. Thank you.
At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.
launch: function () {
...
Ext.Viewport.add(this.tabs);
}