|
JavaScript - Mootools Fire Event During Tween - Mousenter, Mouseleave Problem
**just realised I have put this in the wrong section
Similar TutorialsI have an aspx with javascript, and I used to call a script func whenever the page was loaded. Suddenly it doesn't work. I then tried to simplify things to <body onload="alert('hello');" and no alert is shown, nor do I get any error. How come the onload event doesn't fire? How do I fix it? thanks in advance I'm currently trying to make a contact form using mootools FormCheck and mootools Form.Send in conjunction with each other. Each one will function correctly individually, but once I have all three: mootools.js (required by form.send) mootools-more.js (required by FormCheck) mootools-core.js (required by FormCheck) linked in my header, the form.send becomes dominant and my formcheck doesn't function at all. I'm specifically using form.send so that I can post a success (or failure) message without reloading the contact page. I'm using FormCheck - obviously to check that required fields are filled out. I have stripped the form from the website itself here. and here are the two pieces of code I'm using: FormCheck Code: <script type="text/javascript">
window.addEvent('domready', function(){
new FormCheck('myform');
});
</script>
Form.Send Code: <script type="text/javascript">
var fx = {
'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
};
var showHide = function( el ){
fx.loading.set(0);
(fx[ el ]).start(0,1);
(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
}
$('submit').addEvent( 'click', function(evt){
new Event(evt).stop();
$('myform').send({
onRequest: function(){
fx.loading.start( 1,0 );
},
onSuccess: function(){
showHide( 'success' );
},
onFailu function(){
showHide( 'fail' );
}
});
} );
</script>
I have no idea what I'm doing with javascript, but I imagine I need a line that tells the script if FormCheck is successful, run Form.Send ? Anything would help at this point. --Eric Hi all, I have found a nice mootools script and it's using the 1.2.4 version of mootools. The problem is that my website is already using the 1.12 version. Is it possible to change the code and make it compatible with 1.12? My knowledge in javascript is poor and I can't spot the changes that need to be done here. Can you help me please? Code: window.addEvent('domready',function() {
(function($) {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
/* hides the current menu */
var hideMenu = function() {
if(showingDropdown) {
showingDropdown.removeClass(activeClass);
showingMenu.setStyle('display','none');
}
};
/* recurse through dropdown menus */
$$('.dropdown').each(function(dropdown) {
/* track elements: menu, parent */
var menu = dropdown.getNext('div.dropdown-menu'), parent = dropdown.getParent('div');
/* function that shows THIS menu */
var showMenu = function() {
hideMenu();
showingDropdown = dropdown.addClass('dropdown-active');
showingMenu = menu.setStyle('display','block');
showingParent = parent;
};
/* function to show menu when clicked */
dropdown.addEvent('click',function(e) {
if(e) e.stop();
showMenu();
});
/* function to show menu when someone tabs to the box */
dropdown.addEvent('focus',function() {
showMenu();
});
});
$$('#close').addEvent('click',function(e) {
hideMenu();
});
})(document.id);
});
tween.js is a nice script that moves layers from one location to another. I have a hard time wrapping my head around it because as you all know, my skills are basic at best (I know enough to really screw things up). My problem is I have 3 layers and only one is visible at a time. When you click link one, any layer that is on the page moves down while the layer corresponding to the link moves up into place. My first thought was a sloppy function and repeat for each link: Code: function annomateT1() {
Down1= new Tween(document.getElementById('text02').style,'top',Tween.regularEaseOut,85,580,2,'px');
Down1.start();
Down2 = new Tween(document.getElementById('text03').style,'top',Tween.regularEaseOut,85,580,2,'px');
Down2.start();
Up1 = new Tween(document.getElementById('text01').style,'top',Tween.bounceEaseOut,580,85,4,'px');
Up1.start();
}
Then the link one would be just "javascript:"annomateT1()" The animation works, its just sloppy and doesn't work consistently (the second layer seems to get "stuck"). The tween class has some event handlers and listeners and I tried using them but those scripts didn't even work - I simply don't know enough. Here is a link to the tween.js page for those who are interested: http://jstween.blogspot.com/ Thanks in advance for your help... Hello everyone, I have written a color tween script based off of istallkizza's script that he provided for someone else in a different thread (http://codingforums.com/showpost.php...20&postcount=5.) It works, but the more it is used, the faster it runs, can anyone help me diagnose the problem? Code: var colorArr = new Array();
var colorSym = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var colorInt;
for (i=0;i<colorSym.length;i++)
{
for (n=0;n<colorSym.length;n++)
{
colorArr.push(colorSym[i]+colorSym[n]);
}
}
function colorTween(celem,r,g,b,time){
initColor = colorToHex(document.getElementById(celem).style.backgroundColor);
origColor = splitColor(initColor);
currColor = splitColor(initColor);
targetColor = [colorArr[r], colorArr[g], colorArr[b]]
colorIncs = [Math.round(diffBetween(origColor[0],targetColor[0])/time),Math.round(diffBetween(origColor[1],targetColor[1])/time),Math.round(diffBetween(origColor[2],targetColor[2])/time)];
startColorFade();
function stopInt() {
if (colorInt) { clearInterval(colorInt); }
}
function startColorFade() {
stopInt();
var colorInt = setInterval("this.colorFader()",time);
}
this.colorFader = function() {
currColor[0] = colorArr[arrayIndex(colorArr,currColor[0]) + colorIncs[0]];
currColor[1] = colorArr[arrayIndex(colorArr,currColor[1]) + colorIncs[1]];
currColor[2] = colorArr[arrayIndex(colorArr,currColor[2]) + colorIncs[2]];
document.getElementById(celem).style.backgroundColor = "#"+currColor.join("");
if (Math.abs(diffBetween(currColor[0],targetColor[0])) <= Math.abs(colorIncs[0])) {
currColor = splitColor("#"+targetColor.join(""));
document.getElementById(celem).style.backgroundColor = "#"+targetColor.join("");
stopInt()
}
}
function arrayIndex(arr,check){
for (var i=0;i<=arr.length;i++)
{
if (arr[i] === check) { return i; }
}
return false;
}
function diffBetween(c1,c2){
var num1 = arrayIndex(colorArr,c1);
var num2 = arrayIndex(colorArr,c2);
return num2-num1;
}
function splitColor(color){
return [color.substring(1,3),color.substring(3,5),color.substring(5,7)];
}
function colorToHex(nhcolor) {
if (nhcolor.substr(0, 1) === '#') {
return nhcolor;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(nhcolor);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
}
The script can be viewed in action he http://www.webskethio.com/websites/index.php I have a javascript slideshow and I can't seem to get the thumbnail motion tween to be smooth and consistent on all browsers. the entire script is on one single HTML file. here is a link to it: http://www.mediastream247.com/temp/ss9.html somebody please help. I have been trying for weeks to figure this out and have searched all over the internet, but still no solution. it's slow on IE and choppy on Firefox. On Safari it's OK, but could be better. Hi All, Need a bit of help here, need this SELECT to submit the page and end up at the below URL, correctly passing the GET values through the string. <code> <select name="dir-fact-misma" id="dir-fact-misma" class="text100" tabindex="" onChange="alta_nueva.action='alta.php?page=p2#alta'; return true;"> <option value="Si" <?php if(!isset($_POST['dir-fact-misma']) || $_POST['dir-fact-misma'] == 'Si') print "Selected='Selected '"; ?>>Si</option> <option value="No" <?php if(isset($_POST['dir-fact-misma']) && $_POST['dir-fact-misma'] == 'No') print "Selected='Selected '"; ?>>No</option> </select> </code> the form in which this SELECT is placed needs to be submitted so that other fields in the form are not lost, they are saved in Session Variables. the same javascript but activated through an onclick event works perfect elsewhere in the same form with the following code, i think its the onChange that doesn't work for some reason. <code> <input name="p1" type='submit' id="p1" onclick="alta_nueva.action='alta.php?page=p1#alta'; return true;" value='1' /> </code> the page is programmed in PHP. Any help is appreciated. Hello everyone, If I type the name, and I check and Gender Scholar, my button will appear What I am looking to: Check my buttons, and when I start typing the name, the button Submit appear, st if I delete the text, the Submit button disappear Here's the script: Code: <head>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
function check_required(){
//alert(document.getElementById('rdo_boursier_oui').checked);
//alert(document.getElementById('txt_lastname').value != "");
if((document.getElementById('rdo_boursier_oui').checked == true
|| document.getElementById('rdo_boursier_non').checked == true) &&
(document.getElementById('rdo_sexe_eleve_m').checked == true ||
document.getElementById('rdo_sexe_eleve_f').checked == true)
&& (document.getElementById('txt_lastname').value != "" )
)
{
document.getElementById
('submit_etape2').style.display='block';
}else{
document.getElementById
('submit_etape2').style.display='none';
}
}
</script>
</head>
<form action="#" method="post" id="commentForm">
<input class="submit" type="submit" name="submit_etape2"
id="submit_etape2" value="" style="display:none;"/>
<p class="p_float">
<label for="lastname">Votre nom<span
class="required_red">*</span></label>
<input type="text" name="txt_lastname"
id="txt_lastname" value="" class="required" minlength="3"
onchange="check_required();"
/>
</p>
<p class="p_float rdo">
<label for="boursier">Boursier<span
class="required_red">*</span></label>
<input type="radio" name="rdo_boursier"
id="rdo_boursier_oui" value="" class="rdo_sexe_eleve snd_inscription
required" onclick="check_required();"/>Oui
<input type="radio" name="rdo_boursier"
id="rdo_boursier_non" value="" class="rdo_sexe_eleve snd_inscription
required" onclick="check_required();"/>Non
</p>
<p class="p_float rdo">
<label for="sexe">Sexe<span
class="required_red">*</span></label>
<input type="radio"
name="rdo_sexe_eleve" id="rdo_sexe_eleve_m" class="rdo_sexe_eleve
snd_inscription required" onclick="check_required();" value="">M
<input type="radio"
name="rdo_sexe_eleve" id="rdo_sexe_eleve_f" class="rdo_sexe_eleve
snd_inscription required" onclick="check_required();" value="">F
</p>
</form>
Hi, I'm trying to build this site that has an accordion styled navigation but there's one little issue. As each div is resizing, they're jittering (take a look at the site: http://balancehair.matcamp.com/) The code I'm using to achieve it is as follows: Code: var all_fields = new Array('home','about','services','gallery','promos','contact');
function hoverRun(fieldName) {
for(var t=0;t<all_fields.length;t++) {
if(all_fields[t]!=fieldName) {
$('box_'+all_fields[t]).style.backgroundImage = 'url(/images/img_'+all_fields[t]+'_inactive.jpg)';
$('tab_'+all_fields[t]).src = '/images/tab_inactive.png';
$('text_'+all_fields[t]).src = '/images/tab_'+all_fields[t]+'_inactive.png';
$('box_'+all_fields[t]).set('morph', {duration: 500, transition: 'linear'});
$('box_'+all_fields[t]).morph({width: 144});
}
}
$('box_'+fieldName).style.backgroundImage = 'url(/images/img_'+fieldName+'_active.jpg)';
$('tab_'+fieldName).src = '/images/tab_active.png';
$('text_'+fieldName).src = '/images/tab_'+fieldName+'_active.png';
$('box_'+fieldName).set('morph', {duration: 500, transition: 'linear'});
$('box_'+fieldName).morph({width: 240});
}
Possibly I'm going about it the wrong way? Any suggestions would be greatly appreciated! I only dabble in a little bit of MooTools so I'm not the greatest at it Thanks! mb89 First of all, thanks for looking! I'm doing this nonprofit site for a students club in my college, and it needs an event calendar. I just have a bit of touch on javascript, and the only way this is going to be done in is javascript so I'm stuck with it. I took one of my assignments and modded it to the requirements of them. 1. A 6 month calendar. problem - I have to get thismonth, check whether its <July,then display Jan to June. Else July to December.(A semester calendar) figured it out. 2.Want to highlight a specific date, and place a link in it, so when somebody click the date, say a textarea in a form, displays the event details. problem - Have no idea on how to do it. Any help on this is warmly welcome ! My calendar.htm file Code: <html>
<head>
<title>Calendar</title>
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<script type="text/javascript">
yearly();
</script>
</div>
</body>
</html>
My css file Code: #yearly_table {border: 1px solid black; font-size: 8pt; width: 500px;
font-family: Arial, Helvetica, sans-serif; background-color: white}
#yearly_title {color: white; background-color: rgb(223,29,29); letter-spacing: 6; font-size: 12pt}
.yearly_months {vertical-align: top; border: solid 1px black}
.monthly_table {font-size: 8pt; width: 100%; background-color: white}
.monthly_title {background-color: rgb(223,29,29); color: white; letter-spacing: 4}
.monthly_weekdays {border-bottom: 1px solid black}
.monthly_dates {text-align: right}
#today {font-weight: bold; color: rgb(223,29,29); background-color:#999;
border: 1px solid black; text-align: center}
My .js file Code: tes the month name in the monthly table
writeDayNames()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeMonthDays(calendarDay, currentTime)
Writes the daily rows in the monthly table, highlighting
the date specified in the currentTime parameter.
writeDay(weekDay, dayCount, calendarDay, currentTime)
Write the opening and close table row tags and the table
cell tag for an individual day in the calendar.
*/
function yearly(calDate) {
if (calDate == null) calendarDay=new Date();
else calendarDay = new Date(calDate);
var currentTime = calendarDay.getTime();
var thisYear = calendarDay.getFullYear();
document.write("<table id='yearly_table'>");
document.write("<tr><th id='yearly_title' colspan='4'>"+thisYear+"</th></tr>");
var semMonth=calendarDay.getMonth();
var monthNum;
if (semMonth <6) {
monthNum = -1 }
else {
monthNum = 5; }
for (var i=1; i<=2; i++) {
document.write("<tr>");
for (var j=1; j<=3; j++) {
monthNum++;
calendarDay.setDate(1);
calendarDay.setMonth(monthNum);
writeMonthCell(calendarDay, currentTime);
}
document.write("</tr>");
}
document.write("</table>");
}
function writeMonthCell(calendarDay, currentTime) {
document.write("<td class='yearly_months'>");
writeMonth(calendarDay, currentTime);
document.write("</td>");
}
function writeMonth(calendarDay, currentTime) {
document.write("<table class='monthly_table'>");
writeMonthTitle(calendarDay);
writeDayNames()
writeMonthDays(calendarDay, currentTime);
document.write("</table>");
}
function writeMonthTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
var thisMonth=calendarDay.getMonth();
document.write("<tr>");
document.write("<th class='monthly_title' colspan='7'>");
document.write(monthName[thisMonth]);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array("S", "M", "T", "W", "R", "F", "S");
document.write("<tr>");
for (var i=0;i<dayName.length;i++) {
document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
dayCount[1] = 29;
}
return dayCount[thisMonth];
}
function writeMonthDays(calendarDay, currentTime) {
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
var totalDays = daysInMonth(calendarDay);
for (var dayCount=1; dayCount<=totalDays; dayCount++) {
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
writeDay(weekDay, dayCount, calendarDay, currentTime);
}
document.write("</tr>");
}
function writeDay(weekDay, dayCount, calendarDay, currentTime) {
if (weekDay == 0) document.write("<tr>");
if (calendarDay.getTime() == currentTime) {
document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
} else {
document.write("<td class='monthly_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
}
Realizing that form input placeholders aren't universally recognized among browsers, I began changing all of mine using onblur and onfocus handlers instead. As an example, I used the following code, which works in most cases: Code: <input type="text" name="example" maxlength="5" value="Example" onblur="if(this.value=='') this.value='Example';" onfocus="if(this.value=='Example') this.value='';"/> At first, I coded all of the inputs without a value attribute. But, when the page initially loaded, the fields would load empty, and the value/placeholder wouldn't appear until the field had been "focused" and then "blurred" again. Adding the value attribute seemed to correct that problem, again, for the most part. I have some text fields that appear only after I select a particular radio button or select option. Problem is, when the radio is clicked, the field appears, but even with the value attribute in place, the field appears void. I'm not sure what is different, or what I'm doing wrong. Here's the javascript code with the radio button (note:everything works except that the "placeholder" doesn't show when the field first appears): Code: function showfield() {
document.forms[0].otherRelation.value = "";
document.getElementById("newBox").style.display = "none";
var r = document.forms[0].relation;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[i].checked && r[i].value == "Otherrelation" ) {
document.getElementById("newBox").style.display = "inline";
}
}
}
<input type="radio" name="relation" value="Otherrelation" onclick="showfield()"/>Other
<span id = "newBox" style="display:none">:
<input type = "text" name="otherRelation" size="35" value="Your Relationship" onblur="if(this.value=='') this.value='Your Relationship';" onfocus="if(this.value=='Your Relationship') this.value='';"/>
</span>
Thanks for any help. Sorry so long. Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative.. Code: <script language="javascript">
function toggle() {
var ele = document.getElementById("commpopup");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
<div class="togglecomment">
<div class="popup" id="commpopup">
<div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
</div>
<div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>
Hello all, I'm wondering if anyone can offer advice on a simple (or so I thought!) Javascript menu I'm trying to create. I'm creating 5 buttons, using event handlers (onmouseover etc) which exchange 1 image for another. I did the first one fine - it worked perfectly, but as soon as I added the rest they all stopped working properly. The best I have got, is that the last link will do what it's supposed to regardless of which link I hover over! Which is strange. So the browser seems to be actioning the last thing on the list if that makes sense. It seems to me that I need to add an "if" type attribute, so "if" I hover over the home button, the home images change, as opposed to the last one on the list. This is the code I have so far for a single link - the rest are copies of this with adjustments made to the imgname and image sources obviously..... <div style="width:80px; height:20px;margin-top:20px;margin-left:85px;"><a href="about.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="aboutbutton" src="img/aboutn.png" width="80" height="20" border="0" alt="javascript button 1"></a> <script language="JavaScript"> upImage = new Image(); upImage.src = "img/abouth.png"; downImage = new Image(); downImage.src = "img/aboutc.png" normalImage = new Image(); normalImage.src = "img/aboutn.png"; function changeImage() { document.images["aboutbutton"].src= upImage.src; return true; } function changeImageBack() { document.images["aboutbutton"].src = normalImage.src; return true; } function handleMDown() { document.images["aboutbutton"].src = downImage.src; return true; } function handleMUp() { changeImage(); return true; } </script></div> Any suggestions on where I am going wrong would be wonderful. Thanks so much in advance! All the best Hey, im having another problem with my JavaScript. I wanted to call 2 functions inline, but I can't seem to do it. So I have added the function (add_event_listeners) to the function (load_doc) that is usually called. JavaScript debugger is saying: Code: Uncaught TypeError: Cannot read property 'addEventListener' of null JavaScript: PHP Code: //Get httpobject function getHTTPObject() { var http = false; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } return http; } //This function attaches events to elements. var addEvent = function( elm, evt, fun ) { if ( elm.addEventListener ) { elm.addEventListener( evt, fun, false ); } else if ( elm.attachEvent ) { elm.attachEvent( 'on' + evt, fun ); } else { elm [ 'on' + evt ] = fun; } }; function load_doc(doc, parent) { add_event_listeners(); document.getElementById(parent).innerHTML = "Fetching data..."; var http = getHTTPObject(); if (http != undefined) { http.onreadystatechange = function() { req_doc(doc, parent, http); }; http.open("GET", doc, true); http.send(""); } } function req_doc(doc, parent, req) { if (req.readyState == 4) {//only if req is loaded if (req.status == 200) {//And if its okay document.getElementById(parent).innerHTML = req.responseText; } else { document.getElementById(parent).innerHTML = "Error fetching data: " + req.status + "\n" + req.statusText; } } } //Script used to hide elements. Usage: expand(element id) function expand(elm) { var ex = document.getElementById(elm).style.display; if (ex == "none") { var obj = document.getElementById(elm); obj.style.display = "inline"; } else if (ex == "inline") { var obj = document.getElementById(elm); obj.style.display = "none"; } } function add_event_listeners() { addEvent(document.getElementById('username'), "click", check_database); addEvent(document.getElementById('email'), "click", check_database); addEvent(document.getElementById('password_2'), "blur", check_password); } var check_database = function() { check_database_existing(this); }; var check_password = function() { compare_fields(this); }; function check_database_existing(obj) { } function compare_fields(obj) { var field2 = obj.id.split("_"); field2 = document.getElementById(field2[0]).value; if (obj.value == field2) { if (obj.value.length >= 4) { document.getElementById("pass_status").style.color = "#00CC00"; document.getElementById("pass_status").innerHTML = "OK!"; } else { document.getElementById("pass_status").innerHTML = "Please must be between 5 - 14 characters long! "; document.getElementById("pass_status").style.color = "#FF0000"; } } else { document.getElementById("pass_status").innerHTML = "Passwords do not match!"; document.getElementById("pass_status").style.color = "#FF0000"; } } HTML: Code: <div style="border-color:#090; border-width:1px; border-style:solid;">
<div class="login_button register_button" onClick="load_doc('pages/forms/login_form.php', 'login_form')">Back to login</div>
<h1>Register</h1>
<h3>DrawSomething - WordGuesser</h3>
<br />
<form id="register" action="php/register.php" method="post">
Username<br /><h4 id="username_status">(waiting)</h4><br /><input type="text" name="username" id="username" class="text login_field"><br />
Email<br /><h4 id="email_status">(waiting)</h4><br /><input type="email" name="email" id="email" class="text login_field"><br />
--<br />
Password<br /><input type="password" name="password" id="password" class="text login_field"><br />
Retype<br /><h4 id="pass_status">(waiting)</h4><br /><input type="r_password" id="password2" name="password" class="text login_field">
<br />
<input type="submit" value="Register" class="button green" />
</form>
</div>
I'm trying to simulate a textfield on a canvas; that is when clicking on the text box a cursor appears and blink. My problem here is when I create more than one object, the event listener will work only on the last object created. Here is my code: Javascript Code: var canvas;
var ctx;
var MousePosX;
var MousePosY;
var Cursor_Width = 1;
var Cursor_Height = 21;
var Height = 27;
var LapseTime = 800;
function init(CanvasName) {
canvas = document.getElementById(CanvasName);
ctx = canvas.getContext("2d");
}
/*
Create Textfiled
*/
function Textfield(x, y, w) {
Textfield.prototype.x = x;
Textfield.prototype.y = y;
Textfield.prototype.w = w;
Textfield.prototype.Cursor_PosX = x + 3;
Textfield.prototype.Cursor_PosY = y + 3;
// draw rectangle
ctx.beginPath();
ctx.rect(this.x, this.y, this.w, Height);
ctx.closePath();
ctx.stroke();
// listen for mouse click event
canvas.addEventListener("mousedown", function(evt) {
// calculate mouse coordination on canvas
MousePosX = evt.clientX - canvas.offsetLeft;
MousePosY = evt.clientY - canvas.offsetTop;
// if mouse coordination is within texfield display cursor
if((MousePosX > Textfield.prototype.x && MousePosX < (Textfield.prototype.x + Textfield.prototype.w)) && (MousePosY > Textfield.prototype.y && MousePosY < (Textfield.prototype.y + Height))) {
Textfield.prototype.cursor();
}
});
}
/*
Cursor for textfield
*/
Textfield.prototype.cursor = function() {
// alert("good");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.rect(this.Cursor_PosX, this.Cursor_PosY, Cursor_Width, Cursor_Height);
ctx.closePath();
ctx.stroke();
setTimeout("Textfield.prototype.animate_cursor()", LapseTime);
};
/*
Change color of cursor to white to make blinking effect
*/
Textfield.prototype.animate_cursor = function() {
ctx.strokeStyle = "white";
ctx.stroke();
setTimeout("Textfield.prototype.cursor()", LapseTime);
};
HTML Code: <!DOCTYPE HTML>
<html>
<head>
<style>
#MyCanvas {
border: 1px solid #000000;
}
</style>
<script src="widgets1.js"></script>
<script>
window.onload = function () {
init('MyCanvas');
var tf1 = new Textfield(10.5, 10.5, 150);
var tf2 = new Textfield(10.5, 50.5, 150);
};
</script>
</head>
<body>
<br /><br /><br />
<center>
<canvas id="MyCanvas" width="700" height="500">
</canvas>
</center>
</body>
</html>
What i want to achieve here is have my event listener on any textfield created on the canvas. Quick question, I found this code snip on stackoverflow and it has one little bug. When you touch / move in the element, the console.log is being fired. If you continue to drag / move outside the element, the console.logs still continue to fire. So it seems that once the event is started it's no longer confined to the element its being assigned to. Any ideas on how to keep it bound to the element? Here is the code: Code: $('#someElm').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
console.log(touch.pageY+' '+touch.pageX);
});
Thanks in advanced. i m very new to this thread so i will try to be as clear as possible i m try to create a website where i n have inserted a menu (this menu template i found online which is free.) Code: <div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<li><a href="#"><span>Cities</span></a>
<div><ul>
<li><a href="#"><span>Pune</span></a></li>
<li><a href="#"><span>Mumbai</span></a></li>
<li><a href="#"><span>Delhi</span></a></li>
<li><a href="#"><span>Madras</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li class="last"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
what i am trying to do here is when i click on city (one of the menu) it should read the values from database table (the table name is cityCode. this table contains two rows first cityName and second cityCode) n depending on which city is selected it should retrieve the code of that city. also where to save that retried value because i want to use that retried code to extract value from another table. im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help! Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
I am trying to get these Mootool Tooltips to work: http://demos111.mootools.net/Tips Nothing on the internet seems up to date or valid. I can NOT get these to work. I have been consistently trying for two days. I'm not an expert at coding, but I'm good enough to produce something like this: http://www.starforge.us/apply/ Okay, so what I need this for is a module. When you hover over the image, a description will come up. It needs to follow the mouse, as long as it is inside the image. I need the style to look just like what is provided. It gives you the JS code, the HTML code, and a CSS code. They have a webpage that tells you what things do, but I've tried. I've called their core framework, and nothing happens, added the JS code to the framework, nothing, added css framework, nothing. I can NOT get this to work. If anyone knows ANYTHING or has a functioning download of that, ALL FILES INCLUDED. So I can just switch the cow to my stupid image and change the text, it would be most appreciated. I need this for a website my boyfriend is doing. I've looked at buying other tooltips but NONE of them have the functionality that Mootools has. Complete list of the codes would be great. All I need is one image with descriptive text, please. We have standards, so I will accept nothing of less quality than what is above. It doesn't have to be mootools, it just has to look like it and function like it. I can't get ANYTHING to work, protools, etc. etc. People only link code EXAMPLES. I need a file I can sift through that actually WORKS. Something I can play around with, and if it works, I can THEN FIGURE OUT WHY. For some reason, when it comes to tooltips, I'm handed a bunch of crap files that DON'T WORK and at that point, I don't know how to fix them... Thank you VERY much for ANY help. If you have a link to the code that I can BUY it with I will. Willing to pay $5.00 for them if you can produce one that looks EXACTLY like the mootools or whatever. (that's what they're going for on codecanyon.net). Please help. I'm really sick of these stupid tooltips. :P Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script></script>
<title>Javascript</title>
<style type="text/css">
div
{
font-family: Georgia
}
</style>
</head>
<body>
<script type="text/javascript">
function changetext()
{
var textchange2 = "~Home~" ;
var id = document.getElementById("A");
id.innerHTML=textchange2;
}
</script>
<div id="A" onmouseover="changetext();">Home</div>
</body>
</html>
|
|||||||