I know this question has been asked, but this is different from that question. I am trying to solve it with mere Javascript.
The problem relates to my backbone.js application, which I've brought down to the simplest form, yet can't get events to work. Any suggestion would be most appreciated.
My code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Learning About Backbone.js Views</title>
<style type="text/css">
#container { padding:20px; border:1px solid #333; width:400px; }
#list-template { display:none; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type='text/javascript'>
var ListView=Backbone.View.extend({
initialize:function(){
console.log('initialized');
},
el:'body',
events:{
'click #add':'time',
'click':'whatApp'
},
time: function()
{
console.log('hooooooop');
},
whatApp:function()
{
console.log('Coool');
}
});
var listView = new ListView();
</script>
</head>
<body>
<button id='add'>Add list item</button>
</body>
</html>
Nothing wrong with what you are doing.
You are trying to initialize the view before the body (or the dom) is there.
You should initialize the view after the dom is loaded:
$(function(){
var listView = new ListView();
});
With jQuery, you should be able to use the Data API to view events and assigned functions:
$('#add').data('events')
Related
After spending some 12 hours, I think I have successfully built playkit-js player (https://github.com/kaltura/playkit-js), and obtained a new folder "dist" and new "playkit.js".
There's a folder called "src" which also contains "playkit.js".
Can you kindly help me to call/configure the player and what would be the proper javascript code? As per their docs, I need add the following snippet:
<script type="text/javascript" src="/PATH/TO/FILE/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
I can't make the player visible in the browser. Where should I add it, and also which "playkit.js" file should I use? I have tried both files but it's not working. Please help.
Here is the html I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#player-placeholder {
width: 640px;
height: 360px;
background-color: black;
}
</style>
<script src="playkit.js" type="text/javascript"></script>
</head>
<body>
<div id="player-placeholder" style="height:360px;width:640px">
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {...};
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
player.play();
</script>
</body>
</html>
The play from API sometimes not working due to browser limitations (cant auto play with sound) if you'll add a button it will work.
check out this example:
<script src="https://github.com/kaltura/playkit-js/releases/download/v0.59.9/playkit.js"></script>
<div id="player-placeholder" style="height:360px;width:640px">
<input type="button" onclick="play()" value="Play"/>
<script type="text/javascript">
var playerContainer = document.querySelector("#player-placeholder");
var config = {
sources:{
progressive:[{
mimetype:"video/mp4",
url:"https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
}]
}
}
var player = playkit.core.loadPlayer(config);
playerContainer.appendChild(player.getView());
function play(){
player.play();
}
</script>
https://codepen.io/itaykinnrot/pen/LYVPGEx
I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});
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).
i have this code:
<!DOCTYPE HTML>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var myButton = dojo.byId("btn");
dojo.connect(myButton, "onclick", function (evt) {
require(["dojo/_base/xhr", "dojo/parser", "dojo/dom"], function (xhr, parser, dom) {
xhr.get({
url: "teste_apagar.php",
load: function (data) {
alert("as");
var um = [];
dijit.registry.filter(function(w){
if(dojo.indexOf(um)){
w.destroyRecursive();
}
});
dom.byId("result").innerHTML = data;
parser.parse("result");
}
});
});
});
</script>
</head>
<body class="claro">
<script type="text/javascript">
dojo.require("dijit.Editor");
</script>
<div id="btn" style="width: 100px; height: 30px; margin-bottom: 150px; background-color: red;">load</div>
<div id="result">
</div>
</body>
</html>
However, when i click in bold button, or italic, even with right click in top bar with the formatting options, the ajax request is reloaded. So the dojo editor is loaded when i press the formatting toolbar
Any idea ? demo here
You need to execute Dojo code once Dojo is loaded. See http://jsbin.com/ukesup/7.
In the way you are doing the 'myButton' is null beacuse dojo isn't loaded yet and dojo.byId returns invalid value or simply doesn't exist.
Also remember to load required widgets once dojo is loaded. In the sample i used the Dojo <1.7 way:
dojo.addOnLoad(function() {
dojo.require("dijit.Editor");
...
more code here
...
});
I cannot seem to get this script to work. Can anyone please help? The DIV's width is not defined. It just stretches across the whole page.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script>
document.getElementById('box').style.width="10px";
</script>
</head>
<body>
<div id="box"></div>
Your script is running before the <div> is rendered on the page. Try it like this:
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
document.getElementById('box').style.width="10px";
</script>
</body>
</html>
And don't forget to close your <body> and <html> tags.
To prove that it is, look at this example. I moved the script back to the <head> section and changed the width setting to run when the window is finished loading.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script type="text/javascript">
alert('test');
window.onload = function() {
document.getElementById('box').style.width="10px";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
You'll see the 'test' alert message before the box is rendered.
The element does not exist on the page yet. JavaScript can not access/manipulate an element until it has been loaded in the DOM. You can overcome this by moving you <script> block to above the closing </body>. Or use an window.load event.
An example of the former using your code is here - http://jsfiddle.net/ycWxH/
if you will use jquery it is more easy to do that.
that is if you will only use jquery framework
here is the code
$('#box').height(10);
just a reminder, window.onload is fired when page fully loaded.
refer to http://www.javascriptkit.com/dhtmltutors/domready.shtml
<script>
function doMyStuff() = {};
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", doMyStuff, false );
} else if ( document ) {
document.attachEvent("onreadystatechange",function(){
if ( document.readyState === "complete" ) {doMyStuff();}
});}
</script>