|
JavaScript - Hint Pointer Not Working
I've wanted to add a hint pointer on my form but it is clearly not working as proposed...
Javascript: Code: <style type="text/css">
/* All form elements are within the definition list for this example */
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 130px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}
/* The hint to Hide and Show */
.hint {
display: none;
position: absolute;
right: -250px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
/* to fix IE6, I can't just declare a background-color,
I must do a bg image, too! So I'm duplicating the pointer.gif
image, and positioning it so that it doesn't show up
within the box */
background: #ffc url(pointer.gif) no-repeat -10px 5px;
}
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(pointer.gif) left top no-repeat;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
if (selects[k].parentNode.getElementsByTagName("span")[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
addLoadEvent(prepareInputsForHints);
</script>
HTML Code: <br><dl><dt><label><strong>Special requirements:</strong></label></dt> <br><dd><textarea name="special_requirements" cols="60" maxlength="300"></textarea> <span class="hint">e.g. Allergies, Disabilities, Parking, etc.<span class="hint-pointer"> </span></span> </dd></dl> Any help is appreciated, thanks! Similar TutorialsHey guys, what's the best way to have my text box display a hint (wantermark) using JS? I want my lone text box to display a watermark. Here's my form code: Code: <form action="http://www.jotform.com/submit.php" method="post" name="form_10451704256" id="10451704256" accept-charset="utf-8">
<input type="hidden" name="formID" value="10451704256" />
<div>
<label id="label_1" for="input_1"> Mailing List </label>
<div id="cid_1">
<input type="text" id="input_1" name="q1_mailingList" size="20" />
</div>
<div id="cid_2">
<div style="margin-left:156px">
<button id="input_2" type="submit">
Sign Up
</button>
</div>
</div>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="10451704256" />
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "10451704256-10451704256";
</script>
</form>
Hi, I got this code from w3schools and I want to alter it for my needs. However I can not get the basic example to work. I have repeatedly cross checked it and can't see any error. I wonder if anyone can spot what I am doing wrong. Code: </script>
<script type="text/javascript">
function showHint(str){
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if {xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getName.php?q="+str,true);
xmlhttp.send()
}
</script>
</head>
<body>
<label>Search by name: </label>
<input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" />
<br />
<p>Suggestions: <span id="txtHint"></span></p>
<br />
</body>
And my getName.php is: PHP Code: <?php $a[]="Anna"; $a[]="Amalie"; $a[]="Amelie"; $a[]="Amanda"; $a[]="Amel"; $a[]="Amely"; $q=$_GET["q"]; if (strlen($q) > 0){ $hint=""; for ($i=0; $i<count($a); $i++){ if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))){ if ($hint==""){ $hint=$a[$i]; }else { $hint=$hint." , ".$a[$i]; } } } } if ($hint == ""){ $response="no suggestion"; }else{ $response=$hint; } echo $response; ?> Nothing happens when I start typing in the name box. Hi frds , I have requirement that when ever I hover the mouse on image then the mouse pointer should be hand symbol , So for that I have written the code as <a style="cursor: hand;"> <img ....?</a> in IE it works fine but in Firefox it doesnot works Note : I have already used as <a href="#"> <img ....></a> but due to this , the screen is jumping when we click on image Thanks Raj So i've written up the code to do a lightbox esque overlay image gallery. everything is working smooth and fine. The only concern is that I have the following: lets say that I have a page that has multiple galleries. Obviously I would have to make each literal array with the gallery data different names, ex: Code: var _gallery1 = {
'images': [
{ 'id' : 1, 'src' : "" }
]
}
var _gallery2 = {
'images': [
{ 'id' : 1, 'src' : "" }
]
}
or would it be easier to do it multi dimensional? Code: var gallery_data = {
'gallery1': [
'images': [
{ 'id' : 1, 'src' : "" }
]
]
'gallery2': [
'images': [
{ 'id' : 1, 'src' : "" }
]
]
}
regardless of which direction I use... my main question is this: I have two variables which are the following: Code: galVariable = (i = location.hash.match(/#set=(.+)&photo=(\d+)/)) ? i[1] : null; galArray = _gallery2.images; I'm unfamiliar with a way of doing something along the lines of this, and having it actually work: Code: galVariable = (i = location.hash.match(/#set=(.+)&photo=(\d+)/)) ? i[1] : null; galArray = galVariable.images; obviously "galVariable" would be undefined... as i'm trying to get "_gallery2.images" but trying to use "galVariable" to point to "_gallery2" I'm familiar with solving a problem like this in PHP, not so much javascript. is there a JS function that can be used to ensure that it's using whatever "galVariable" equals to, and then that array's content is? Or is there a different way to go on about this. thanks in advance. if anyone needs some more clarification. please feel free to ask, and I'll respond asap. Hi, I'm pretty new to javascript and ajax and need some help. I want to create a form that has an advanced search page which changes the search fields that appear, depending on what the user clicks. For example, at the top there are three buttons: 1. Search images 2. Search videos 3. Search audio As a user clicks these I want different search fields to be shown on the page. I have tried searching for a way to do this via Google, with no luck. Can someone point me in the correct direction (via a demo or tutorial) on how to do this? I don't just want the answer as I really want to learn how to get this to work! Thanks I am trying to redevelop firefox addon, to give it more funcionality. I found JS file where all the functions are and started to edit it. What I want to achieve is to get target of an anchor under mouse pointer (when mouse pointer is over anchor, I right click and call addon from context menu). For example when I have anchor which HTML code is: Code: <a href="somewehere.com/place">place</a> when I right click on this code and call my addon I would like to alert its href (somewehere.com/place) I wrote a function: Code: function ff()
{
var current_target=this.href;
alert(current_target);
}
but it gives me udefined on alert Any hints to achieve this are highly appreciated. Thanks Hi, Am trying to change both, the background color and the mouse pointer to hand on the mouseover event. Am using this to change the background color: Code: onMouseover="this.bgColor='#55FF55'"onMouseout="this.bgColor='#AEFFAE'" How and i add the "change pointer to hand" on this as well? Thanks Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help In my website, I have a script that I need help to get working. This is my script. Code: <script language="Javascript">
<!--
if (screen.width>=1024)
{
document.write('<td width="20%"><table border="0" cellpadding="0" cellspacing="0" width="162">
<tr><td height="29" style="background:url("/Custom/Top2.png");color:#116111;" align="center"><b>Newest Tutorial</b></td></tr>
<tr><td height="160" style="background:url("/Custom/Middle2.png") #000000;padding:5px 5px 0 5px;">$MYINF_8$</td></tr>
<tr><td><img src="/Custom/Bottom2.png" border="0"></td></tr>
</table>
</td>');
}
//-->
</script>
It is supposed to detect if someone has a widescreen monitor, and then add the extra box if it is widescreen. For some unknown reason, its not working. No extra box appears. Does anyone know where I went wrong? Edit: $MYINF_8$ is what goes inside the box. hi jus want to ask why is the else not working in the showmore and showless function i have two div which shld conduct the same way of working which is to show the rest of the text with the show more and min the text with the show less function anyone know what my mistake is? Code: function showmore() {
if (document.getElementById("mydiv1") ){
document.getElementById("mydiv1").innerHTML = "";
document.getElementById("mydiv1").innerHTML = txt1 + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt1;
}
else {
document.getElementById("mydiv").innerHTML = "";
document.getElementById("mydiv").innerHTML = txt + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt;
}
}
function showless() {
if (document.getElementById("mydiv1")){
document.getElementById("mydiv1").innerHTML = shorttxt1 + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
else {
document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
}
thanks Reply asap!!! HI, i know this must be old js because 'language' is deprecated but, I would like to know where this script gets the word 'Name:' from for the output after I entered dat to the textbox. Code: <HTML>
<HEAD>
<script language="javascript">
<!--
function send_onclick(frmName) {
var bolSubmit;
bolSubmit = true;
if (frmName.email.value == "") {
alert("You must enter an email address");
bolSubmit = false;
}
if (bolSubmit == true) {
frmName.submit(frmName);
}
}
//-->
</script>
</HEAD>
<BODY>
<form name="frmName" method="post" action="validate.asp">
Enter your name in the text box. If nothing is entered, a warning
message will be displayed. <br>Only when you enter something into the
text box will the page be submitted. <br><br>
Please enter your name : <INPUT TYPE="TEXT" name="email" size="20"><br>
<INPUT TYPE="button" name="butSent" value="Do it" language="javascript" onclick="return send_onclick(frmName)">
</form>
Name : d
</BODY>
</HTML>
I guess its from the 'name' of name='email' but how does it do it. Is this next part grabbing everything that was submitted as if a key/value pair? Code: if (bolSubmit == true) {
frmName.submit(frmName);
}
bazz I think that if there is more space between the columns that it would be easier to read, but whatever I try is not working. Just putting tabs between them is my latest idea, however, the space is not all that big. Is it possible that I have entered it wrong? Thank you, the code is below: <html> <head> <title>Exercise</title> <script type = "text/javascript"> <!-- var row = 0; var cols = 0; var sum = (row + 1); if (row ==0) { document.write("sum   square   cube"); document.write("<br>"); row++; } while((row >= 0) && (row <= 11)) { document.write(row + "\t" + (row * row) + "\t" + (row * row * row)); document.write("<br>"); row++; } // --> </script> </head> <body> <p>what? seriously, this is working?</p> </body> </html> I am trying to use "&&" like in PHP, but JavaScript doesn't like it: Code: if (document.forms["form"]["30"].value == "" && document.forms["form"]["32"].value == "") {foobar;}
So, if both these conditions are true, then foobar. Does anyone know why it doesn't work? Script::. Code: <script language="javascript">
function temp(form)
{
oops = "";
var sum = 0;
var fld = (form.level.value);
var val = fld.value.replace(/\s/g, "" );
if ( val != "")
{
var deg = parseFloat(fld.value);
if ( isNaN(deg) || deg < 0)
{
fld.value = "0";
oops += "\nInvalid Level";
} else if ( deg != 0 ) {
sum += Math.pow( deg, 3 );}
}
if ( oops != "" )
{
alert("You must correct these errors:\n" + oops);
return false;
}
form.totalexp.value = sum ;
}
</script>
Html::. Code: <form style="text-align:center"> <p>Level</p> <p><input size=30 maxlength=30 value=0 name="level" onfocus="this.value=''"/></p> <input type=button onclick=temp(this.form) value=Calculate /> <input type=reset name=clear id=clear value=Clear /></p> <blockquote><p>Total Exp <input name="totalexp" size=40 maxlength=40 readonly=""/></p></blockquote></form> Can someone help me. Whats wrong with my js code and i am noob to J.S. Your help is most appreciated. Can you please take a look at this and tell me why it is not getting all the way thru the function and why this is not working totally. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript"> function cabFair(start, end, time){ var base = 0; if (start = 1){ if (end = 1){ base = 5; }if (end = 2) { base = 7; }base = 8; }if (start = 2){ if (end = 1){ base = 7; }if (end = 2) { base = 5; }base = 9; }if (end = 1){ base = 8; }if (end = 2) { base = 9; }base = 5; //return(base); if (time > 20){ time1 = (time - 20); time2 = (time1 * (.3)); finalTime = (time2 + 10); }if (time > 10 && time <= 20){ time1 = (time - 10); time2 = (time1 * (.4)); finalTime = (time2 + 6); }if (time >4 && time <= 10){ time1 = (time - 4); time2 = (time1 * (.5)); finalTime = (time2 + 3); }finalTime = (time * .75); var fare = finalTime + base; return fare } </script> </head> <body> <script type="text/javascript"> //Ask user for input var start = parseInt(prompt("Enter the Starting Point", "1")); var end = parseInt(prompt("Enter the Ending Point", "2")); var time = parseInt(prompt("Enter the Total Time", "4")); //output for information document.writeln(cabFair(start, end, time) + " Is the Total Fare."); </script> </body> </html> |
|||||||