|
JavaScript - Suggestions For When Mouseouts Fail?
You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
Similar TutorialsGreetings, I had to add the following DOCTYPE to a webpage in order for IE to parse my page design properly, and this caused the form on the page to fail in FireFox (which works fine without the doctype). The form works fine in IE. Here is the DOCTYPE I added to the top of the page; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The error log in FireFox says; frmTest is not defined - Line 30 Here is the block of code it is referring to; function MoveForward(ipage) { if(TestAnswers()) { frmTest.action.value = 'next'; frmTest.p.value = ipage; frmTest.submit(); frmTest.cmdNext.disabled = true; try { frmTest.cmdBack.disabled = true; } catch(err) { } } } Line 30 is: if(TestAnswers()) The opening form code further down the page is; <form action="stress_test.asp" method="post" name="frmTest" id="frmTest"> I have been up against this for a couple days, any help would be very (very) appreciated. Regards, Ross I try to auto scroll to bottom of a div when the page is loaded. It works on firefox but it is not working on IE. How to scroll to bottom on a div when page is loaded on IE? You can test it by copy paste my codes into two html files. test5.html : Code: <div id='div' style='overflow:scroll; height:300px; width:200px; border:1px solid blue; background:yellow;'>
</div>
<script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
function showrsp(){
jQuery.get("test5a.html", function(data) {
$('#div').append(data);
$(document).ready(function(){asd();});
});
};
function asd(){
$('#div').scrollTop($('#div')[0].scrollHeight);
}
showrsp();
</script>
test5a.html : Code: <p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
How to wait until innerHTML finish render the contents before execute function asd()? Honestly, its probably my fail. Regardless, here is the deal, any help would be appreciated. I am currently skinning up a custom cpanel theme for a company I work with from time to time, kudolabs.net. They would like their Jixed Bar that is on their main web page to be on the skin, and I am attempting to put it there now. I have put the code into the html of the skin, both the call to the proper javascript files and css files, and the proper code for the bar itself. It is not working, the bar shows up as it is supposed to, but it is not aligned correctly and the bar does not float with the page. It acts exactly like the javascript is not working at all.... Unfortunately I can't just provide access to the cpanel for people to check, but you can see the source code of the main page, kudolabs.net, and if you're willing to help, I can of course give you access to a demo account (and quite possibily provide some hosting for a month or two, we're based in the netherlands and have plenty of space to share to anyone willing to help us with little problems such as this. @_@ ) Thank you for your time reading this, any help or points in the right directions would be appreciated. Unfortunately, google has failed me this time. Or, rather, I have failed google. o.o If you try some codes and then catch exception, it should catch the exception when there is. However, if there is a setInterval method in the try clause, then the exception cannot be caught... why??? the following works ( a usual method is invoked in the try clause): Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
alert(invoke());
}
catch(ex){ alert(ex); } //Any Exception will be caught.
</script>
if the highlighted line is changed as below (using setInterval method), then it fails... Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
setInterval(alert('invoke())',1000);
}
catch(ex){ alert(ex); } //The Exception will NOT be caught.
</script>
any idea? thx in advance for an anchor object, it is ok to reference by index. But when referenced by name, it seems unavailable in IE8 (not sure abt other IE version). I tried FF, it works well. So is it an IE bug or something? Code: <a name="thisAnchor">HERE</a> <script language="javascript" type="text/javascript"> alert(document.anchors[0].nodeType) // no problem in IE and FF alert(document.anchors["thisAnchor"].nodeType) // does't work in IE? </script> thx in advance I have a JSP page,such as test.jsp Code: <input name="id1" type="text" value="abc" size="40"> Then I want to open it by using Javascript,and alert id1 value,so I use following statements: Code: var s=window.open('test.jsp','mywin');
alert(s.document.id1.value);
When I run alert(s.document.id1.value),,it raise javascript error Code: s.document.id1.value undefined I want to know how Javascript can get jsp value by window.open? Thanks EDIT: Ive actually managed to sort this out. The problem was as simple as the onload in the body tag was overriding the onload script in the header. Combining the two solved the problem. Ive recently been appointed to do some work on my employers website. For now, to hold us over until we can manage a complete re-write, I have been asked to just do a little update to the look and feel. One of the things I have done is use the niftycorners code for rounded divs. I have had no trouble implementing this code over all the site pages, until I got to one page. Our product pages. Ive never seen a code placed directly within the body tag, but this is what has been done here. <BODY onload="pricing_init(); attribute_changed();"> This code loads the dynamic pricing feature. Unfortunately, it also causes the nifty corners code I have placed between the head tags to fail. I dont know if its just the odd placement of the code or the code itself as I am just learning js (using the Javascript and Ajax for dummies book). Is there some way I can alter this so that both the dynamic pricing and nifty corners works? thanks in advance for any suggestions. I've cannibalised some code from the jQuery supersized plugin that scales images to full screen size while retaining aspect ratio. However, I seem to be getting it wrong, and my maths is... well, appalling. The problem is that while it's resizing correctly to fit the width OR the height, it's not fitting the width AND the height. That is: If I adjust the window height, the image scales to fit the height, but goes outside the window width. If I adjust the window width, the image scales to fit the width, but goes outside the window height. If I adjust both (dragging the window corner) it seems to favour fitting the width. I am currently using only landscape images. I don't know if that has a bearing. This may well just be a logic issue, but my brain is just turning to jelly when I look at my code below: Code: var image_ratio = options.image_dimensions.height / options.image_dimensions.width;
var browser_ratio = browser_height / browser_width;
if (browser_ratio > image_ratio){
var target_height = browser_height;
var target_width = Math.floor(browser_height / image_ratio);
} else {
var target_width = browser_width;
var target_height = Math.floor(browser_width * image_ratio);
}
The code above works out some new image dimensions and is called when the browser is resized. The options.image_dimensions.height and options.image_dimensions.width variables represent the original dimensions of the image, and browser_height and browser_width are calculated from the window size. How can I make it fit either landscape or portrait images to the smallest available dimension of the browser? Ello~ I was just wondering if ^^ anyone could look at this code and tell me where there are errors... or any suggestions so i could clean up the code a bit, so it would work :] that way i could figure it out Thank you for your time~ ^_^ Code: <html>
<head> <title> RETAKES </title>
<script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script>
<script type="text/javascript">
function TakeTest( )
// simulates a student's test taking by generating random values for the grades
// and allowing up to a certain number of retakes displaying the apropriate messages
// algorithm:
// set up: max num of retakes at 3 and passing grade at 70
// generate a random grade between 1-100 and
// IF equal or greater than the passing grade display "Your initial passing grade: ..."
// ELSE: setup the count of retakes at 0
// DO: increment the count for retakes
// generate a random grade between 1-100 and display "Your retake grade: " ..."
// WHILE: the retake count is less or equal to the max number of retakes AND the grade IS NOT a passing grade
// afterwards: either the iteration ended with a passing grade OR not, so check for which condition occurred
// IF after the retakes the grade is a passing grade then display "You Passed with a grade of: ... after ... retake(s)"
// ELSE display "You still failed after " ... " retakes."
{
var retake, passGrade, grade;
retake = 0;
grade = randomInt(1, 100);
passGrade = 70;
if (grade >= passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "Your initial passing grade: " + grade;
}
else {
retake = 0;
do {
retake++;
grade = randomInt(1, 100);
document.getElementById("text").value = document.getElementById("text").value + "Your retake grade: " + grade;
while (retake <= 3 && grade != passGrade)
}
}
if (retake <= 3 && grade == passGrade) {
document.getElementById("text").value = document.getElementById("text").value + "You passed with a grade of " + grade + " after " + + " retake(s)";
}
else {
document.getElementById("text").value = document.getElementById("text").value + "You still failed after " + retake + " retake(s)";
}
}
</script>
</head>
<body>
<div style="text-align:center">
<h2>Student Test taking simulation</h2>
<p> <input type="button" value="Take the Test" onclick="TakeTest()"> </p>
<p> <textarea id="text" rows="60" cols="25">READY TO GO!</textarea> </p>
</div>
</body>
</html>
Hi all! I'm new to the forum and hope to get some help on how to make my javascript shorter then how its now. Now i have 8 functions doing the same thing, but i dont know how to make it to one function, if possible. I have worked much with PHP with the other code on the website, so if u have sugestions with that feel free to make them. It are working with some checkboxes, if u press the first checkbox u will get a textfield after every checkbox exept the first one. If u just press one checkbox u get a textfiled after that one. P.S. All the code bellow are working together. Javascript code Code: <script type="text/javascript">
function showHide1()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
document.getElementById('64bitxref3').style.display = '';
document.getElementById('64bitxref4').style.display = '';
document.getElementById('64bitxref5').style.display = '';
document.getElementById('64bitxref6').style.display = '';
document.getElementById('64bitxref71').style.display = '';
document.getElementById('64bitxref72').style.display = '';
document.getElementById('64bitxref73').style.display = '';
document.getElementById('64bitxref8').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
document.getElementById('64bitxref3').style.display = 'none';
document.getElementById('64bitxref4').style.display = 'none';
document.getElementById('64bitxref5').style.display = 'none';
document.getElementById('64bitxref6').style.display = 'none';
document.getElementById('64bitxref71').style.display = 'none';
document.getElementById('64bitxref72').style.display = 'none';
document.getElementById('64bitxref73').style.display = 'none';
document.getElementById('64bitxref8').style.display = 'none';
}
}
function showHide2()
{
if(document.getElementById('64bitxref2').style.display == 'none')
{
document.getElementById('64bitxref2').style.display = '';
}
else
{
document.getElementById('64bitxref2').style.display = 'none';
}
}
function showHide3()
{
if(document.getElementById('64bitxref3').style.display == 'none')
{
document.getElementById('64bitxref3').style.display = '';
}
else
{
document.getElementById('64bitxref3').style.display = 'none';
}
}
function showHide4()
{
if(document.getElementById('64bitxref4').style.display == 'none')
{
document.getElementById('64bitxref4').style.display = '';
}
else
{
document.getElementById('64bitxref4').style.display = 'none';
}
</script>
html code (with possible php help) Code: <form method="post" action="index.php?id=2">
<table border="0">
<tr>
<td colspan="2">
<input type="text" name="search" value="<? echo $keyword; ?>" size="80" maxlength="250" />
<input type="submit" name="send" value="Sök">
<br />
</td>
</tr>
<tr width="100%">
<td>
<input id="checkbox1" type="checkbox" onClick="showHide1()" value="allt"/>
<label for="allt">Allt</label>
</td>
<td width="90%">
<input name="64bitxref1" type="text" value="" id="64bitxref1" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox2" type="checkbox" onClick="showHide2()" value="fotograf"/>
<label for="foto">Fotograf</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref2" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox3" type="checkbox" onClick="showHide3()" value="plats"/>
<label for="plats">Plats</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref3" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
<tr>
<td>
<input id="checkbox4" type="checkbox" onClick="showHide4()" value="fritext"/>
<label for="fritext">Fritext</label><br />
</td>
<td width="90%">
<input name="64bitxref" type="text" value="" id="64bitxref4" style="display:none" size="32" maxlength="32"><br />
</td>
</tr>
</table>
</form>
I hope the code could be to help i put in there, and thanks in advance. /Spikey In order to learn "cool" javascript such as rollovers that you find on websites today; what would any of you guys reccomend me doing. I want to learn how to make my webpage interactive and i know what i want to do; i just dont know how to do it any suggestions are welcome; thank you I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? I have a search box on my website, that gets users from my database using php. And uses Javascript to display suggestions as the users type. What I'd like to be able to is to use the arrows to toggle down through the different suggestions. Any ideas how I would go about doing this? Here's the javascript part of the code: Code: function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
if(response!=""){
e.innerHTML=response;
e.style.display="block";
} else {
e.style.display="none";
}
}
}
An intranet site I've been working on is getting demo'd next week and I'm pretty proud of its functionality. It looks pretty good too but the biggest eyesore are the listboxes. The navigation column on the left of the page has 3 large listboxes, each one housing between a dozen and several hundred options related to employees, meeting rooms, etc. For that sort of directory functionality a listbox is pretty much the only way to go. The annoying part is that listboxes haven't really changed in 20 years. I sure wish IE supported listbox background images but since it doesn't I'm left with changing the border or changing the background color. I don't know if you've played with that but a listbox looks just as cheap with a mono blue, red, or purple background as it does with white Does anyone know some code for livening it up? Thanks. As it is, I'm using Walter Zorn's JS Graphics Library in an attempt to write a small screensaver-type-thing for jailbroken iPhones/iPod touches. However, on my mom's AMD Athlon 64 3000+, the drawing gets pretty laggy, so you can imagine how utterly choppy it is on my iPod. The look I'm going for is the Windows XP Mystify screen saver, with corners bouncing around the screen. So, my first question is this: are there any alternatives for this sort of thing, short of manually generating a video, gif, or multiple images to switch through, or is there any way to make my code more efficient for the CPU? (Code below) NOTE: I know I could make it look a lot nicer by making a 'corner' class, and having each corner be an object (and even nicer by using an array of 'corners'). But I'm not sure that would help the CPU's calculations much, and make the code more efficient as a whole. Code: <div id="Mystify">
<script type="text/javascript">
var mystifyCanvas = new jsGraphics("Mystify");
var tetraCorner1x = Math.floor(Math.random()*300) + 5;
var tetraCorner1y = Math.floor(Math.random()*460) + 5;
var tetraCorner2x = Math.floor(Math.random()*300) + 5;
var tetraCorner2y = Math.floor(Math.random()*460) + 5;
var tetraCorner3x = Math.floor(Math.random()*300) + 5;
var tetraCorner3y = Math.floor(Math.random()*460) + 5;
var tetraCorner4x = Math.floor(Math.random()*300) + 5;
var tetraCorner4y = Math.floor(Math.random()*460) + 5;
go1x = true;
go1y = false;
go2x = true;
go2y = true;
go3x = false;
go3y = true;
go4x = false;
go4y = false;
function MystifyJavaScript()
{
mystifyCanvas.clear();
mystifyCanvas.setColor("#ff0000");
mystifyCanvas.setStroke(2);
if (go1x)
{
tetraCorner1x++;
if (tetraCorner1x > 315)
{
go1x = false
}
}
else
{
tetraCorner1x--;
if (tetraCorner1x < 5)
{
go1x = true
}
}
if (go1y)
{
tetraCorner1y++;
if (tetraCorner1y > 475)
{
go1y = false
}
}
else
{
tetraCorner1y--;
if (tetraCorner1y < 5)
{
go1y = true
}
}
if (go2x)
{
tetraCorner2x++;
if (tetraCorner2x > 315)
{
go2x = false
}
}
else
{
tetraCorner2x--;
if (tetraCorner2x < 5)
{
go2x = true
}
}
if (go2y)
{
tetraCorner2y++;
if (tetraCorner2y > 475)
{
go2y = false
}
}
else
{
tetraCorner2y--;
if (tetraCorner2y < 5)
{
go2y = true
}
}
if (go3x)
{
tetraCorner3x++;
if (tetraCorner3x > 315)
{
go3x = false
}
}
else
{
tetraCorner3x--;
if (tetraCorner3x < 5)
{
go3x = true
}
}
if (go3y)
{
tetraCorner3y++;
if (tetraCorner3y > 475)
{
go3y = false
}
}
else
{
tetraCorner3y--;
if (tetraCorner3y < 5)
{
go3y = true
}
}
if (go4x)
{
tetraCorner4x++;
if (tetraCorner4x > 315)
{
go4x = false
}
}
else
{
tetraCorner4x--;
if (tetraCorner4x < 5)
{
go4x = true
}
}
if (go4y)
{
tetraCorner4y++;
if (tetraCorner4y > 475)
{
go4y = false
}
}
else
{
tetraCorner4y--;
if (tetraCorner4y < 5)
{
go4y = true
}
}
mystifyCanvas.drawLine(tetraCorner1x, tetraCorner1y, tetraCorner2x, tetraCorner2y);
mystifyCanvas.drawLine(tetraCorner2x, tetraCorner2y, tetraCorner3x, tetraCorner3y);
mystifyCanvas.drawLine(tetraCorner3x, tetraCorner3y, tetraCorner4x, tetraCorner4y);
mystifyCanvas.drawLine(tetraCorner4x, tetraCorner4y, tetraCorner1x, tetraCorner1y);
mystifyCanvas.paint();
window.setTimeout("MystifyJavaScript()", 10);
}
MystifyJavaScript();
</script>
</div>
Please keep in mind, there's a LOT of repeat code, so you only have to read any one part once. To test/see/use the code, you'll need to download wz_graphics.zip. Then download the attached txt file to the same directory as the unzipped wz_graphics, change it to .html instead of .txt, and open it. Hello, I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha. I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information. I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation? If so, which should I be looking into and are there any basic examples of form validation? I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers. Any tips and pointers will be very much appreciated! Thankyou, Tom Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span> <span onclick="document.bgColor = 'grey';">Grey</span> does not change the page grey on this page: u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m any ideas why? I think something is blocking it. |
|||||||