Sorry for my bad english ;-)
I work around with "Slider Captcha" on my perl Forum Software.
In the .js file there the code is ...
(function($) {
$.fn.slideToCAPTCHA = function(options) {
options = $.extend({
handle: '.handle',
cursor: 'move',
direction: 'x', //x or y
customValidation: false,
completedText: 'You\'re human!'
}, options);
var $handle = this.find(options.handle),
$slide = this,
handleOWidth,
xPos,
yPos,
slideXPos,
slideWidth,
slideOWidth,
$activeHandle,
$formEl = $slide.parents('form');
startSlider();
$handle.css('cursor', options.cursor)
.on('mousedown', function(e){ slideOn(e); });
function startSlider() {
And i cal the function between < /body > and < /html >
<script>$('.captcha').slideToCAPTCHA();</script>
Now my question...
... how can I call the. js function within < body> and < /body > or within < head > and < /head >?
The div class in the html document is ...
<div class="captcha"> ... bla .... bla....</div>
lg Christian
To call the function, you will need to have an event handler - you could use onclick=dummyCall() for instance and make a dummy function such as
function dummyCall(){
$('.captcha').slideToCAPTCHA();
}
to run it -even though I'm pretty sure there's a better way to do this..
BTW you're english is not that bad ;D
If I understand you correctly you should just move the script tags like so:
<html>
<head>
..
</head>
<body>
..
<script>
..
</script>
<script>$('.captcha').slideToCAPTCHA();</script>
</body>
</html>
Thx for help
In Perl i must use "\" bevor "$" ... so it work and call the funktion!`
<script type="text/javascript" language="JavaScript">
<!--
\$('.captcha').slideToCAPTCHA();
//-->
</script>
</body>
</html>
lg XTC
Related
really hope someone can help me out here. Cutting a very long story short, on a few replies on this site I've seen people write that we should move away from:
<body onLoad="init();">
In the HTML to:
document.addEventListener("DOMCONTENTLOADED", init, false);
In the JavaScript file so we aren't mixing interactive code with content code etc.
But by switching to this method my code breaks, I can no longer access the DOM tree, here is an example:
function Tester(){
this.value1 = 10;
this.container = document.getElementById("fred");
this.list = this.container.childElementCount;
this.in_func = function(){
alert(this.value1+" "+ this.list);
};//end of this.in_func
}//end of function Tester
function init(){
var alpha = new Tester();
alpha.in_func();
}//end of function init
document.addEventListener("DOMCONTENTLOADED", init(), false);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body><!--onLoad="init();"-->
<section id="fred">
<section id="elem1"></section>
<section id="elem2"></section>
<section id="elem3"></section>
<section id="elem4"></section>
<section id="elem5"></section>
</section>
</body>
</html>
The this.container is always null so the childElementCount generates an error of:
"Uncaught TypeError: Cannot read property 'childElementCount' of null"
Yet when I comment out the event listener and use the onLoad technique it works, am I just doing something stupid? I've tried using a variable instead of using this.list, tried using querySelector instead of getElementById, I've tried "load" instead of "DOMCONTENTLOADED" but nothing seems to work.
I know it will be something really simple but I cannot find the solution anywhere online, maybe I am just searching for the wrong thing.
Please put me out of my misery.
thanks
Zen
This is the correct way of doing it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function Tester(){
this.value1 = 10;
this.container = document.getElementById("fred");
this.list = this.container.childElementCount;
this.in_func = function(){
alert(this.value1+" "+ this.list);
};//end of this.in_func
}//end of function Tester
function init(){
var alpha = new Tester();
alpha.in_func();
}//end of function init
document.addEventListener("DOMContentLoaded", function(event) {
init();
console.log("DOM fully loaded and parsed");
});
// document.addEventListener("DOMContentLoaded", init(), false);
</script>
</head>
<body>
<section id="fred">
<section id="elem1"></section>
<section id="elem2"></section>
<section id="elem3"></section>
<section id="elem4"></section>
<section id="elem5"></section>
</section>
</body>
</html>
In you code you called init() and then passed it, but you should passed it as a function! document.addEventListener("DOMContentLoaded", init, false);
That's why
document.addEventListener("DOMCONTENTLOADED", init(), false);
Problem 1
You are calling init immediately and trying to use its return value as the event handler.
Remove the ().
Problem 2
Event names are case sensitive. It is DOMContentLoaded not DOMCONTENTLOADED
Thanks for reading and helping. I'm trying to use a function that draws a Dial in a specific div but isn't working. I know this works for text:
<div id="content">
</div>
<script>
document.getElementById('content').innerHTML = "hi";
</script>
But what if i want to write some function there? How can i do that? Imagine i have this:
<div id="content">
</div>
<script>
document.getElementById('content').innerHTML = somefunction();
function somefunction(){
document.write("hi");
}
</script>
I know that if i use return it work's but i want to know if there's a way to do it without return.
Thank you so much!
EDIT:
I'm going to be more specific. Imagine i have this:
<div id="content">
</div>
<script>
function createDial(){
document.write("<input class='knob' data-min='-15000' data-max='15000' value='-11000'>)
}
</script>
That input creates a Dial (see http://anthonyterrien.com/knob/ if you don't know that i'm refering to). Now, having this, can i a draw the Dial in "content"?
Thanks all and i'm sorry for my english!
Return string for somefunction instead of document.write
function somefunction(){
return "hi";
}
You can pass element name to function and assign html in to element there.
function somefunction(elementId){
document.getElementById(elementId).innerHTML = "hi";
}
If you really need to get this work without returning a value, you can do something like this:
function somefunction (elm) {
elm.innerHTML = '<input class="knob" data-min="-15000" data-max="15000" value="-11000">';
$(".knob").knob();
}
somefunction(document.getElementById('content'));
All i needed is this (I think Yoshi referred to this too):
$( "#content" ).append("whatever you want, even an input or something else");
That's why I tagged with jQuery before.
I would like to create a webpage which contains several divs each containing the same draw function with different implementation (like a generic interface). After loading the page I want to iterate through all the divs and call each draw function one after the other.
My page so far looks like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
</head>
<body>
<script type='text/javascript'>
$( document ).ready( function() {
// Draw all slots
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
// d.draw() does not work
draw();
});
});
</script>
<div class="slot" id="slot1">
<script type='text/javascript'>
function draw() {
console.log('Here we draw a circle');
};
</script>
</div>
<div class="slot" id="slot2">
<script type='text/javascript'>
function draw() {
console.log('Here we do something totally different and draw a rectangle');
};
</script>
</div>
</body>
</html>
Unfortunately I don't know how to call the draw function of the selected div "d".
Right now it only calls the last defined draw function.
Update:
Mind you that I can not combine the different draw methods into one which would get a parameter like shape handed in. The draw methods will be totally independent from each other.
Why are you defining scripts in the divs?
Do your logic all in one script block:
<head>
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
</head>
<body>
<script type='text/javascript'>
$( document ).ready( function() {
// Draw all slots
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
// d.draw() does not work
draw();
});
});
function draw(behavior) {
console.log(behavior);
}
</script>
<div class="slot" id="slot1" data-behavior="drew 1">
</div>
<div class="slot" id="slot2" data-behavior="drew 2">
</div>
</body>
</html>
If you're looking to do something more complicated, you should consider building an object oriented javascript application, with each block's functionality derived from a class "slot".
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript
You can call it like
HTML:
<div class="slot" id="slot1">Draw1</div>
<div class="slot" id="slot2">Draw2</div>
JS:
function draw()
{
console.log('Drawed! '+$(this).attr('id'));
}
$(document).ready( function() {
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
draw.call($(this));
});
});
An Example.
The reason that is happening is because you keep overwriting the draw function. Why don't you have a script page where you hold an array of function pointers to the right function like so:
var array = (draw1, draw2, draw3, ...);
function draw1()
{
//do your thing on div1
}
...
function drawn()
{
//do your n thing on divn
}
Now for your first div you need to call draw1 which is located at index 1 of the array.
HTML:
<div id="draw1">
</div>
....
<div id="drawn">
What do ya think. Note sytax has not been tested.
<html>
<head>
<script>
$(document).ready(
function() {
$('#show').call(callfun());
});
</script>
</head>
<body>
<h:form>
<div id="show" align="center">
<script>
function callfun(){
var data = "hi";
alert(data);
}
</script></div>
</h:form>
</body>
</html>
I think it may work.
Problem
You keep overwriting window.draw() every time you redefine it. You either need to namespace each one (that is, attach it to an (otherwise empty) object), or to give each and every function a distinct name. There is no "div-scope" in Javascript ;)
Solution
You can name each function according to the div's id and call it dynamically using the object["methodName"]() syntax to call it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
</head>
<body>
<script type='text/javascript'>
$( document ).ready( function() {
// Draw all slots
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
// d.draw() does not work
window[d.id];
});
});
</script>
<div class="slot" id="slot1">
<script type='text/javascript'>
function slot1() {
console.log('Here we draw a circle');
};
</script>
</div>
<div class="slot" id="slot2">
<script type='text/javascript'>
function slot2() {
console.log('Here we do something totally different and draw a rectangle');
};
</script>
</div>
</body>
</html>
http://jsbin.com/mogeluzicu/1/edit?html,console
The easiest way I've found to go 'real OOP' in this case is to dispatch all on events on document level :
create a simple object and load this object in the main and the views like :
var events = {someCustomEventFromMain:'someCustomEventFromMain', someCustomEventFromView:'someCustomEventFromView'}
Now you can trigger events on document with jQuery like
$(document).trigger(events.someCustomEventFromMain, somedata);
And you can listen from any view or div or else
$(document).on(events.someCustomEventFromMain, function(__e, __data){
//___e is the event emitted from __e.target
//__data is the data object you wish to pass with the event
//do something when event occurs
});
So if every subscript listens to some event at document level, in your case 'drawEvent',that should do the trick. You can even pass a parameters in the data of the event, like 'circle'.
Hope this helps.
In my background (background.html) page I have the following js:
function capturePage(){
chrome.tabs.captureVisibleTab(null, function(img){
var screenshotUrl = img;
chrome.tabs.create({"url":"history.html"}, function(tab){
var t = tab;
var addImage = function(){
var view = chrome.extension.getViews()[0];
view.setImageUrl(screenshotUrl);
}
chrome.tabs.onUpdated.addListener(addImage);
});
});
}
chrome.browserAction.onClicked.addListener(capturePage);
and in history.html I have:
<html>
<head>
<title></title>
<script>
function setImageUrl(url){
document.getElementById("target").src = url;
}
</script>
</head>
<body>
<img id="target" src="" >
</body>
</html>
However, "view.setImageUrl(screenshotUrl)", in background.html, fails as it says the view has no such function. Just to be clear, I'm trying to access a function within history.html AND pass a parameter to it (screenshotUrl).
EDIT: re Serg's suggestion I replaced the var addImage function in background with the following:
var port = chrome.tabs.connect(tab.id,{name: "history_connect"});
port.postMessage({mType:"url",url:screenshotUrl});
Then added a listener on the history page... worked!
I haven't used getViews() before so I can't comment on that (what does console say when you dump chrome.extension.getViews() into it?), but here is couple workarounds:
Pass your url as get parameter during tab creation (history.html?url=<urlencoded_url>)
Use requests. chrome.extension.sendRequest({url:url}); in bkgd page and chrome.extension.onRequest.addListener() in history.html
Use "pull" instead of "push". In history.html you can use chrome.extension.getBackgroundPage().getMyUrl()
I would use the first solution as it is the easiest and fastest.
I have a script that slides a div down from behind the menu, when people click on the tab. However its in jquery and I want to use mootools (lots of reasons I wont go into here). However im stuck with mootools 1.1 at present. But for some reason my attempt is not working :(
The html
print("code sample");
<div id="panel">
<form action="">
< form here >
</form>
</div>
<div class="slide">
<p class="sl"><span></span></p>
Div id panel holds the form which slides down, div class slide and the P tag is replaced by a tab/button which hangs down via css, clicking on this slides the tab down.
The jquery (which works fine)
print("code sample");
<script type="text/javascript">
$j(document).ready(function(){
$j(".btn-slide").click(function(){
$j("#panel").slideToggle("slow");
$j(this).toggleClass("active"); return false;
});
});
</script>
My moo attempt
print("code sample");
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
Like I said above I am restricted to moo 1.1 at present, but if there is a answer that will work with both 1.1 and 1.2 or if its a similar change I would be grateful to hear, as it will be updated at some point.
Will this work?
function toggleSlide(){
var theSlider = new Fx.Slide('slide');
$('theSlide').addEvent('click', function(e){
e = new Event(e);
theSlider.toggle();
e.stop();
});
}
This should work both in 1.11 and 1.2:
window.addEvent('domready', function() {
var mySlide = new Fx.Slide('panel');
$('toggle').addEvent('click', function(e) {
e = new Event(e); // this isn't needed in 1.2
e.stop();
mySlide.toggle();
this.toggleClass('active');
});
});
However, in MooTools 1.2 and later, Fx.Slide isn't included in the core – you'll have to download it as a part of MooTools More.
A working demo: http://jsbin.com/ewasa