|
JavaScript - A Dropdown Column Not Coming Into View When Focused, In Ie7
I have a dataTable in which on the keyup event, the cursor focuses to the next field. In IE7, after a field, the next field is not coming into the view. Please help.
The occField(2nd attachment) comes into view only after focus moves to next field, i.e LTD Buy up. Code: if (currId.indexOf("Occ") >= 0)
{
if(stdBuyUpSelected){
autoTabFocus("SBuy",index);
}else if(ltdBuyUpSelected){
autoTabFocus("LBuy",index);
}
else if (isStateZipDisp){
autoTabFocus("Zp",index);
}
}
function autoTabFocus(next,index)
{
var focusElem = document.getElementById(next+index);
if (focusElem != null)
{
focusElem.focus();
}
}
Similar TutorialsHello Again everyone. For the life of me I cannot get a handel on how to access a Form Drop Down menu. I have tried many different codes and tried re-writing my own code in different ways but for reason I am unsure of my VAR myselect will not hold the value of document.getElementById(pathPicking) Below is my current code I am using but first I have tried these different vaients and I ether get nothing printed to teh screen or it will say null. Code: <button type="button" onclick="showme();">Lets test this out</button>
*
*
*
var myselect=document.getElementById("pathPicking");
The Code above was a different way i wrote my code (when I wasn't passing anything too the showme function) Code: <html>
<body>
<form id="aform">
<select id="pathPicking" size="1">
<option value="nothing" selected="selected">Select a location</option>
<option value="\\\\mycomputer">\\mycomputer</option>
<option value="F:">F: Drive</option>
<option value="R:">R: Drive</option>
</select>
</form>
<button type="button" onclick="showme(document.getElementById('pathPicking'));">Lets test this out</button>
<script type="text/javascript">
function showme(myselect)
{
document.write("enter showme function <BR />");
document.write("<BR /> " + myselect);
document.write("<BR /> " + myselect.options.length);
for (var i=0; i<myselect.options.length; i++)
{
if (myselect.options[i].selected==true)
{
alert("Selected Option's index: "+i)
break
}
}
document.write("<BR />leaving function");
};
</script>
</body>
</html>
I have a form that I am using for several different pages as they are exactly the same... however at the top you must make a choice from the drop down box that then shows the appropriate fields to fill in. Can I make the drop down default to a certain option depending on which page they are coming from? What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code. Code: <script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
suggestions.hide();
// On the change of the id_location text search for matching results.
$('#text').keyup(function(){
// Get the value of the id location.
var text = $('#text').val();
// Trim any unnecessary white spaces.
text = jQuery.trim(text);
// Start guessing after the length of text if greater than one.
if (text.length > 1) {
// Create a query string for ajax.
var qry_str = '?suggestion=' + text;
// Send an ajax json request.
$.getJSON('http://example.com/page.html' + qry_str, function(data){
// Empty the suggestions box.
$('#suggestions').empty();
// Show the suggestions box.
$('#suggestions').show();
if (data.length > 1) {
// Start a list for the suggestion.
$('#suggestions').append('<ul class="suggestion_list"></ul>');
// Loop through all the results.
for (i = 1; i < data.length; i++) {
// Get the name.
$('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>');
}
// If an id selection was made then place its complete text in the box and its id in the id location box.
$('.suggestion').click(function(){
// Get the id from the substring of the html id.
var html_id = $(this).attr("id");
var id = html_id.substring(11);
// Get the name from the text.
var name = $(this).html();
// Alert just to test if you have the id.
alert(id);
// Set the value of the text box to the complete name.
$('#text').val(name);
// Hide and empty the suggestion box.
$('#suggestions').hide();
// Turn the focus back to the text.
$('#text').focus();
});
/* This is the part that messes up the suggestion click function if turned on. */
// Hide the box when focus is else where.
$('#container').focusout(function(){
alert('test');
// $('#suggestions').hide();
});
});
}
});
});
</script>
<div id="container">
<input type="text" id="text" name="text" value="">
<div id="suggestions">
<ul class="suggestion_list">
<li id="suggestion_1" class="suggestion">Option 1</li>
<li id="suggestion_2" class="suggestion">Option 2</li>
<li id="suggestion_3" class="suggestion">Option 3</li>
<li id="suggestion_4" class="suggestion">Option 4</li>
</ul>
</div>
</div>
The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help. Hello, I wonder if someone could help me with this? I want to include a flights search box on a website I'm building and they have given me some JavaScript to produce it. Test page: http://gercia.co.uk/js.html I want to customise the search box but can't see where the css is contained. Can anyone point it out for me? Ok im doing a basic javascript program as i am just starting out.... I believe you will understand what I am trying to do, basically holiday company they have an initial price that the buyer puts in, then asks for age of the person if person <=5 it's free if person <= 15 its initialprice/2 (or I wanted it as a seperate var not sure if thats the best way to go about it though..) else initial price.... the code i have so far for it is.... Code: var initialPrice;
var age;
var halfPrice;
initialPrice =
window.prompt('Please enter the advertised price of the holiday in pounds', '');
initialPrice = parseFloat(initialPrice);
age =
window.prompt('Please enter age of holidaymaker', '');
age = parseFloat(age);
halfPrice = initialPrice/2;
if (age <= 5}
{
document.write('Your holiday is Free');
}
else
if (age < 15)
{
document.write('Your holdiday is ' + halfPrice + '');
}
else
{
document.write('Your holiday is ' + initialPrice + '');
}
</SCRIPT>
Really have no idea why i't wont run.. it's really bugging me as I believe it will be something simple and I just need to know what so I remeber it for next time, any help is MAJORLY appreciated and the sooner the better :) Thanks James (yes i saw the one asking about the same question pretty much a few posts down haha) basically I have some programming doing delphi and pascal and im mixing them up with my very very limited javascript... hence why I think i messed something up.... everything seems to be ok ... but the prompts wont come up or anything.... all the var's match up so what am I doing wrong :( also couple of rules.... im assuming the people inputting are using valid numbers (dont need a check) no need to check for sensible values either dont worry about decimal places (basically the stuff like it checking is for a different part of the assignment that I am doing which i can do by myself if i get this actually working...) hey friend i am trying to use automatic html input creation using java script for my new project .... my problem is the field "type propositon 1:is it answer? ignore this one:" not come into input variable such as $_POST['prop1'] i used PHP Code: pint_r($_POST) and the result was Code: Array ( [radio1] => on [cid] => 65 [desc] => dfdfdfdfd [submit] => Submit ) why my javascript created input field come into role? my php html code is PHP Code: <table> <form action="new.php" method="post"> <tr><td> question type:<br /> True or False:<input type="radio" name="radio1"> Objective:<input type="radio" name="radio2"> Other:<input type="radio" name="radio3" > </td></tr> <textarea name="desc" rows="6" cols="35" ></textarea> <br /> <a href="javascript:add()" ><b>add proposition</b></a> <div id="cat"></div> <div id="num" style="display:none;"></div> <br> </table> and the java script is ... PHP Code: <script language="javascript" type="text/javascript"> function add() { k=document.getElementById("num").innerHTML k=parseInt(k); if(!k) {document.getElementById("num").innerHTML=1; k=1;} else{ document.getElementById("num").innerHTML=k+1; k++; } document.getElementById("cat").innerHTML+="<tr><td>type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\"><td>is it answer? </td> <td> <input type=\"checkbox\" name=\"ans"+k+"\"></td><td><td> ignore this one:</td><input type=\"checkbox\" name=\"ign"+k+"\"></td></td></tr><br>" } </script> While these questions have probably been asked before, separately, I'd like to know how to put them together. What I want to do, is create a link, that goes to an url that I decide, after which, the page goes back to the previous page and refreshes. It would be ideal, if that could be done with AJAX, but that's probably asking too much. Especially if I want to use it for wordpress. Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > <title>Assignment 5 - JavaScript Loops</title> <head> <script type="text/javascript"> function getGrade(){ var i= Number(document.getElementById("input1").value); m=Math.floor(i/2); for(var k=1; k<=i; k++){ for(var j=1; j<=k; j++){ document.write(j+" "); if(j==k){ document.write("\n"); } if(j==i){ decreaseLoop(j, k); } } } function decreaseLoop(j, k){ for(k=k-1; k>0; k--){ for(var l=1; l<=k; l++){ document.write(l+" "); if(l==k){ document.write("\n"); } } } } } </script> <style type="text/css"> #main{ margin:auto; width:70%; } #top{ font-size:20px; font-weight:bolder; color:#007700; text-decoration:underline; } #s1{ font-size:20px; font-weight:bold; color:#7700ff; } #s2{ font-size:20px; font-weight:bold; color:#00ff00; } #s3{ font-size:20px; font-weight:bold; color:#ff0000; } #form1{ width:600px; height:80px; padding:20px; background-color:#aaaaaa; } </style> </head> <body> <div id="main"> <p id="top">Assignment 5 - JavaScript Loops</p> <span id=s1>This is Form for checking Loop</span> <form id=form1 name=form1> <table> <tr><td>Enter Number </td><td>: <input type="text" id=input1 name="input1" /></td></tr> <tr><td><input type="button" name=btn1 value="Get Number" onclick=getGrade() /></td></tr> </table> </form> </div> </body> </html> When I execute this code, on the screen I see all output in one line. Which is not hat I want. But when I see it in Firebug (for firefox)or Developer Tool Bar(for IE) , I see it printed out in pyramid form(as required). So why is this output in one line on screen ? How cn I get it in pyramid form ? Thanks hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe HI , IF there is error in JS then in FF i can see in console window using firebug But i am noe getting script error in IE but i am not able to find where the error is. Is says object required line 499 now i don't understand which script is IE talking about . Is there any way to find error in IE In a webpage I am developing I need to change the presentation depending on user selection. At the moment this code is huge and not very maintainable. The first purpose was to have a working code, now I would like to make it more maintainable. Below is a main part of the problem; Code: function myFunction(type)
{
if (type.value == "1")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "block";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "2")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "block";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "3")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "block";
}
}
<div id="OrderForm" style="display: block;">
<div id="OrderForm1" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm2" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm3" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
</div>
Basically the myFunction will be called based on user input. This input will show one section of html code and hide other sections of html code. So if input is "1", then OrderForm1 shall be shown and OrderForm2 and OrderForm3 must be hidden. if input is "2", the OrderForm2 shall be shown and OrderForm1 and OrderForm3 must be hidden etc. By adding more forms to show and hide, this code is growing massively. I would like to add some kind of for loop function to this but I am not sure how to loop through the various section names (OrderForm1, OrderForm2 and OrderForm3) and set the appropriate value. Appreciate any help If there is no street view available for a specific long and lat on google maps, is there a way to display some kind of message instead of the grey box which google shows? I cant find anything in the API?
Hi Sorry if the title is a bit vague. I have a single page with fixed background and <A name=section> / #section type menu also have a margin-bottom: 1000px; so content isnt visible until the link in menu is pressed I am using the smooth pack javascript so it scrolls rather than jumps straight to the #section content what I want to do is have the content invisible until it reaches the fixed background is it possible to have content invisible until it scrolls into a div, i'm sure it is the fixed background is about 800x500 and black all round so the text is visible, I could alter to have any text black but at the moment its blue and white What is the code to stop people from viewing your source. Such as this site: http://bad-behavior.com (View The Source of That Site) I've searched the forums, and all I got was a bunch of "nothing can protect your source" I don't care about all of that. I want the code because: 1. Most people don't know how to view a source after it has been blocked 2. I think it's cool How do I hide my javascript from html page (from view source on right click)?
My goal is to have one big picture center with 4 smaller pictures to the left that you click on and is target to the center. When you click on the center it will zoom. I haven't worked on it in a few years and not able to find the person who wrote the code. I added the zoom coding to the picture switch. The zoom works fine but when you click the smaller images the image is not viewable. Coding in the head Code: <!--Image Viewer-->
<script language="javascript" type="text/javascript">
<!--
function canManipulateImages() {
if (document.images)
return true;
else
return false;
}
// loadPosterImage
function loadPosterImage(imageURL) {
if (gImageCapableBrowser) {
document.imagePoster.src = imageURL;
return false;
}
else {
return true;
}
}
gImageCapableBrowser = canManipulateImages();
// -->
</script>
<!--End Image Viewer-->
<!--Picture Zoom-->
<script>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
<!--End Picture Zoom-->
The body code Code: <!--Picture #4-->
<tr>
<td><A href="F:\mamies\santa_pic\purple_bottom.gif"
onClick="return(loadPosterImage('F:\mamies\santa_pic\purple_bottom.gif'))">
<img src="F:\mamies\santa_pic\purple_bottom.gif"
border=1 align=center width=56 height=75></A>
</td>
</tr>
</table>
<table align="center" border="1" cellspacing="0" cellpadding="5" height="10" bgcolor="#002152" bordercolor="#980008">
<tr>
<!--Image Zoom-->
<td><img name="imagePoster" src="F:\mamies\santa_pic\purple_front.gif"
border="0"
width="354"
height="502"
onclick="zoomToggle('354px','502px','708px','1004px',this);">
<!--End Image Zoom-->
Thanks for your help Charlene Hi everyone, While designing my www I used the tab view script made by Lyubinskiy found on javascript kit www. It works brilliant on mozzila and chrome. However when I tried on safari and IE, the tabs don't work. Can anyone tell me how should I adjust the sript for it to work on IE and Safari? Code: function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
thanks for any suggestions |
|||||||