I'm trying to build a function that will slide down and up the specific div I'll mention later in the script, here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<script>
$("button#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
return $(this).slideToggle(5000, animateIt);
}
$("div#mover").animateIt();
</script>
</body>
</html>
But it gives me this error "Uncaught TypeError: Object [object Object] has no method 'animateIt'"
Here's a fiddle
Thanks in advance. Shia...
animateIt is not a jQuery method. Call it as a regular function, and pass in the element:
function animateIt ( $element ) {
$element.slideToggle(5000, function (){
animateIt($element);
});
}
animateIt( $("div#mover") );
Here's your fiddle, updated: http://jsfiddle.net/ZcQM7/2/
If you want it to be a jQuery method, you'll have to turn it into a plugin:
$.fn.animateIt = function () {
var $this = this;
this.slideToggle(5000, function () {
$this.animateIt();
});
};
$("div#mover").animateIt();
Here's your fiddle again, with another update: http://jsfiddle.net/ZcQM7/1/
animateIt() is a function that you declared in your code and does not belong to jQuery.
You should call it directly:
function animateIt() {
return $("#mover").slideToggle(5000, animateIt);
}
animateIt();
Related
Very simple question, can I use functions like await inside paperjs?
I can chain together a lot of .then's and it's going fine, but as soon as I add await in front of it I get the error
SyntaxError: Unexpected token (4:22)
Please tell me they didn't make it so that I have to start wrapping everything in insanely long chains in order to integrate functions like fetch into paperjs. Below my code:
<script type="text/paperscript" canvas="myCanvas">
getCollectionList = async function() {
var collectionlist = [];
collectionlist = await fetch('/api/graph/<%= database %>');
console.log(collectionlist);
}
getCollectionList();
</script>
<canvas id="myCanvas" resize></canvas>
Your are writing your code as PaperScript which implies that Paper.js uses a JavaScript parser to parse it and apply some transformations to it.
The problem is that by default, the JavaScript parser used by Paper.js does not support ES6 features.
You have to load a more recent version of the parser (Acorn) before loading Paper.js to solve your issue.
See my answer to an analog issue here for more details.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug</title>
<!-- Load latest acron version first -->
<script type="text/javascript" src="https://unpkg.com/acorn"></script>
<!-- Then load Paper.js -->
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<style>
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
const myAsyncFunction = async function() {
const response = await fetch('https://yesno.wtf/api/');
const json = await response.json();
console.log(json);
};
myAsyncFunction();
</script>
</body>
</html>
this is my element
<dom-module id="user-verify">
<style>
paper-dialog {
--paper-dialog-background-color: white;
width: 348px;
height: 205.594px;
}
</style>
<template>
<paper-dialog id="id_verify" modal>
<h2><content></content></h2>
<div id="maincontainer">
<div class="g-recaptcha"
data-sitekey="6Lc0pAkTAAAAAGcsiru1MX6kjI6HGV8mbImc0cwk"
data-callback="recaptchaCallback"></div>
</div>
<div class="buttons">
<paper-button dialog-confirm id="varify_button" disabled>Ok</paper-button>
</div>
</paper-dialog>
</template>
<script>
Polymer({
is: "user-verify",
attached: function(){
this.$.id_verify.open();
},
recaptchaCallback: function(){
this.$.varify_button.disabled = false;
}
});
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
However, it doesn't work when i put the javascript of recaptcha in side the head of the html, so i can only put it inside the element. But now ,the data-callback function doesn't work. How to solve this? Or my code have some bugs?
Your callback recaptchaCallback is a method of the polymer object and not public function available for the recaptcha API. The way you register the function (via String) the API assumes your callback is global.
I would simply switch to attaching all the recaptcha-logic programmatically:
...
attached: function() {
grecaptcha.render(this.$.maincontainer.querySelector('.g-recaptcha'), {
'sitekey' : 'your_site_key',
'callback' : this.recaptchaCallback,
});
this.$.id_verify.open();
}
...
I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
This code below works fine in Chrome and IE 9. But breaks in IE 8.
The errant line is here. I think it's the bind.
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
Has anyone else had this problem? It's not clear if someone has this on SO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
html, body, #map
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&sensor=true" type="text/javascript"></script>
<script language="javascript">
var MyPage = function () {
this.map = null; //google map
};
MyPage.prototype.initialize = function () {
this.map = new google.maps.Map(document.getElementById("map"),
{
zoom: 8,
center: new google.maps.LatLng(30, -97),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
}
MyPage.prototype.leftClick = function (event) {
alert('hi');
}
$(window).load(function(){
var my = new MyPage();
my.initialize();
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
the bind Method is not supported in IE8 or below see http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx
I have done an easy onmousehover effect and it works in all browsers, but firefox. I have stripped down the code to a bare minimum, but can't figure out whats wrong! Why doesn't the mouseover below work in firefox?
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background:#222;
width:400px;
height:300px;
border-radius:5px;
}
#box_hover {
background:#555;
width:400px;
height:300px;
border-radius:5px;
}
</style>
<script type="text/jscript">
function mouseover() {
document.getElementById('box').id = 'box_hover';
}
function mouseout() {
document.getElementById("box_hover").id = 'box';
}
</script>
</head>
<body>
<div id="box" onmouseover="mouseover();" onmouseout="mouseout();"></div>
</body>
</html>
Firefox doesn't like "text/jscript". Try "text/javascript" instead.
see this link now this is work
<div id="box" onmouseover="mouseover();"></div>
and
#box {
background:#222;
width:400px;
height:300px;
border-radius:5px;
}
#box:hover {
background:#555;
width:400px;
height:300px;
border-radius:5px;
}
Besides the text/jscript issue, you can change your code like this: http://jsfiddle.net/RKKvt/
Please note that addEventListener does not work in older versions of Internet Explorer, and you need to resort to an hack (or drop it completely and go for the old element.onclick = function() { /* Do something here... */ }; way).
HTML
<div id='test'></div>
CSS
#test {
background-color: red;
height: 100pt;
width: 100pt;
}
JavaScript
document.getElementById('test').addEventListener('mouseover', function () {
this.setAttribute('style', 'background-color: green;');
}, false);
document.getElementById('test').addEventListener('mouseout', function () {
this.setAttribute('style', '');
}, false);