|
JavaScript - How To Make This Work?
I am terrible at this.
I want to get this functionality seen here http://davidlynch.org/js/maphilight/docs/demo_usa.html (image map areas highlighting on mouseover) to work on this here http://scratchitrich.com/test/ can anybody walk me through how to make this work? Thanks! Similar TutorialsCode: <script type="text/javascript">
<!--
NS4 = (document.layers) ? true : false;
function launchVsee2() {
try {
location='vsee:';
} catch (err) {
location='http://www.vsee.com';
return true
}
}
//-->
</script>
This app works as a URI and can be triggered to run in an address bar, when launched it will launch the app. Now, I can get this script to run in Firefox; it will test for the URI and if not avail it will redirect to the site website of that app. However when I run this in IE it will just load a page that says the site is in valid and not redirect. Anyone have any tips on how to get this working in IE. ALSO in addition this will not run in Safari either; same issue as IE. Thanks in advance I have this javascript code in this html page and it works fine. As soon as I try to add it to an existing page, it doesn't work. I have tried every position for the form and the script that I can think of but to no avail. I would greatly appreciate soon expert guidance. Frank. The code page is here. The page that I am trying to add it to is here. Hello! I have the following code that I just can't seem to get to work. Here are the issue that aren't working: 1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome) 2. When you click the items, nothing happens. (It used to work and would add the item to the top image) If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS. Code: <div id="avatar_form" width="95" height="141">
</div>
<div id="avatar_stack">
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> />
</p>
<p>
<img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> />
</p>
</div>
<BR><BR><BR>
<script type="text/javascript">
var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume')
var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff')
var inactive_tab_background_colour = '#fff'
var inactive_tab_bottom_border_colour = '#fff'
var stack_height = 1
var on_top = 0
var key = null
onload = layout
function layout()
{
if(!document.getElementById('avatar_section')) return
document.onkeydown = keyhit
tabs()
hide_radio_buttons(document.getElementById('avatar_stack'))
StackImageHolders('avatar_stack');
P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top]
P.style.backgroundColor = layer_colours[on_top]
P.style.zIndex = stack_height++
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<LIs.length; i++)
{
LIs[i].style.backgroundColor = inactive_tab_background_colour
LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
LIs[on_top].style.backgroundColor = layer_colours[on_top]
LIs[on_top].style.borderBottomColor = layer_colours[on_top]
LIs[on_top].focus()
IMGs = document.getElementById('avatar_stack').getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
IMGs[i].className = 'black_border'
IMGs[i].style.cursor = 'pointer'
IMGs[i].onclick=function(){ChangeGarment(this)}
}
avatar_preview_and_hotkey_text()
update_avatar(document.getElementById('avatar_stack').firstChild)
/* I added the following two lines because Internet Explorer
wasn't updating the display properly after loading */
document.getElementsByTagName('body')[0].style.width='95';
document.getElementsByTagName('body')[0].style.width='95';
}
function keyhit(e)
{
thisKey = e ? e.which : window.event.keyCode
alt_key_down = e ? e.altKey : window.event.altKey
ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey
shift_key_down = e ? e.shiftKey : window.event.shiftKey
switch (thisKey) {
case 37: key = 'LEFT'
break
case 39: key = 'RIGHT'
break
default: key = null
}
if(key && alt_key_down && ctrl_key_down)
{
IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img')
for(i=0; i<IMGs.length; i++)
{
if(IMGs[i].className == 'red_border')
{
if((key == 'LEFT') && (i > 0))
{
i--
ChangeGarment(IMGs[i])
return
}
if((key == 'RIGHT') && (i < (IMGs.length - 1)))
{
i++
ChangeGarment(IMGs[i])
return
}
}
}
}
else if(key && alt_key_down && shift_key_down)
{
LIs = document.getElementById('avatar_section').getElementsByTagName('li')
if((key == 'LEFT') && (on_top > 0))
{
on_top--
bring_to_the_top(LIs[on_top])
return
}
if((key == 'RIGHT') && (on_top < (LIs.length - 1)))
{
on_top++
bring_to_the_top(LIs[on_top])
return
}
}
}
function tabs()
{
list = document.createElement('ul')
for(i=0; i<avatar_layers.length; i++)
{
list_item = document.createElement('li')
list_item.appendChild(document.createTextNode(avatar_layers[i]))
list_item.onmouseover=function(){this.className='mouse'}
list_item.onmouseout=function(){this.className=''}
list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values
list_item.onclick=function(){
bring_to_the_top(this)
}
list_item.onfocus=function(){
bring_to_the_top(this)
}
list.appendChild(list_item)
}
document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack'))
}
function hide_radio_buttons(caller)
{
INPUTs = caller.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
INPUTs[i].style.display = 'none';
}
}
}
function StackImageHolders(caller)
{
Ps = document.getElementById(caller).getElementsByTagName('p')
for(i=0; i<Ps.length; i++)
{
Ps[i].className = 'stack'
}
}
function avatar_preview_and_hotkey_text()
{
for(i=0; i<avatar_layers.length; i++)
{
preview = document.createElement('img')
preview.id = avatar_layers[i]
preview.className = 'preview'
preview.width = '95px'
preview.height = '141px'
preview.alt = 'avatar preview image'
document.getElementById('avatar_stack').appendChild(preview)
}
hotkey_text = document.createElement(' ')
hotkey_text.className = 'hotkeys'
hotkey_text.appendChild(document.createTextNode(''))
document.getElementById('avatar_stack').appendChild(hotkey_text)
}
function update_avatar(caller)
{
INPUTs = caller.parentNode.getElementsByTagName('input')
for(i=0; i<INPUTs.length; i++)
{
if(INPUTs[i].type == 'radio')
{
if(INPUTs[i].checked)
{
document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif'
INPUTs[i].previousSibling.className = 'red_border'
}
else
{
INPUTs[i].previousSibling.className = 'black_border'
}
}
}
}
function ChangeGarment(caller)
{
inputs = caller.parentNode.getElementsByTagName('input')
for(i=0;i<inputs.length;i++)
{
inputs[i].checked=false
}
caller.nextSibling.checked=true
update_avatar(caller)
}
function bring_to_the_top(caller)
{
tabs = document.getElementById('avatar_section').getElementsByTagName('li')
for(i=0; i<tabs.length; i++)
{
tabs[i].style.backgroundColor = inactive_tab_background_colour
tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour
}
on_top = caller.tab_number
caller.style.backgroundColor = layer_colours[caller.tab_number]
caller.style.borderBottomColor = layer_colours[caller.tab_number]
put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number]
put_on_top.style.zIndex = stack_height++
put_on_top.style.backgroundColor = layer_colours[caller.tab_number]
}
</script>
I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on. Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below. var bookingForm = document.forms['formName']; var qty = bookingForm.fieldName +'i'.value; with the 'i' been a generated numeric number by a for loop when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on. But when I use; var qty = bookingForm.fieldName.value I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName. Any help will be very much appreciated. I am trying to make the following fill the value box when the page loads as opposed to pressing the button. I cant seem to do it. Any ideas?? PHP Code: <script> var keylist="abcdefghijklmnopqrstuvwxyz123456789" var temp='' function generatepass(plength){ temp='' for (i=0;i<plength;i++) temp+=keylist.charAt(Math.floor(Math.random()*keylist.length)) return temp } function populateform(enterlength){ document.pgenerate.output.value=generatepass(enterlength) } </script> <form name="pgenerate"> <input type="text" size=18 name="output"> <input type="button" value="Generate Password" onClick="populateform(this.form.thelength.value)"><br /> <b>Password Length:</b> <input type="text" name="thelength" size=3 value="7"> </form> How would I go about having this work for Firefox. Is there away to have JQuery work with it? Code: <script type="text/javascript">
region=[//2 dimensional array containing area codes and region pairs
["201","nj"],
["202","dc"],
]
function getRegion(code){
index=0;
while(true){
console.log(index);
if(region[index][0]==code){
return(region[index][1]);
}
index++;
if(index>=region.length){
return(undefined);
}
}
}
function getLocation(number){
out=document.getElementById('output');
var answer;
if(number.length<3){
return(void(0));
}
else{
var code=number.substring(0,3);
answer=getRegion(code)
if(answer==undefined){
out.innerText="unknown area code";
}
else{
out.innerText=answer;
}
}
}
</script>
...
<form>
<input type="text" id="number" onkeyup="getLocation(this.value)">
</form>
<div id="output">
</div>
Hi-- I have a link that has an mp3 sound as its href: Code: <a href="sounds/genealogy.mp3" class="track track-default">this is a link</a> Unfortunately, I also need that same link to go to a part on the site (href=#greenhouse) so that the sound plays on that part of the site. Does anyone know how to accomplish this? I am imagining it would be with javascript, but honestly, I do not know. Any help would be greatly appreciated. Many thanks...! Right now, it only works with IE. This goes in the header... Quote: <script language="JavaScript1.2"> function makevisible(cur,which){ strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 } </script> and this goes in the image: Quote: <img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE"> It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE. Thanks for the help! So I have made a website that you need a password to get into. The following javascript code works in Internet Explorer but, I need it to work in Safari also. Can anyone please rewrite this code, as simple as possible, to work in both Safari and Internet Explorer ? [CODE ]<!--// function mainpass() { if (pass.value=="password") {location="correct.HTML"}; else{location="wrong.HTML"}; } //--> [/CODE] Thanks in advance... I've got this listbox full of hundreds of employee names. Clicking on a name executes a function using onchange. Because of the length of the list I decided a search function would be really handy and I finally found one that works. Now the search function, when you type in the input box, scrolls the list to the first matching entry. And that's good, that's what I wanted. The problem comes in when you try to click on the name the search function found. Nothing happens ofcourse because the onchange tag in the list reacts to changes, not direct clicks. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:260px; width:220px; margin-bottom: 15px;"> <option selected="selected">Loading</option> </select> The list is populated by java but for testing I disabled the function that clears the "Loading" option and I set it to selected. That way the loading option is highlighted by default and the search function is free to highlight something else, then when I click on the search result it works like it's supposed to. But keeping a highlighted option at the top of the list for that sole purpose isn't very elegant, especially since if you click on it the onchange function tries to execute and generates errors. The only solution I can think of is to use java to generate another option way at the bottom of the list that has the selected attribute but I don't quite know how to do that. Does anyone have any thoughts on what I can do? Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) {
steps = 1000;
elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ i +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
Thanks, Jon W I found this copy and paste java script for slide shows... I can only put 1 on the page then the other don't work... how do i edit it so i can put multiple on 1 page? http://www.javascriptkit.com/script/.../jsslide.shtml Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
Code: <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing: Code: <!-- // another fields here //-->
<div id="new_field"--></div>
<script type="text/javascript">
var inputs = {
fields: 0,
target: "new_field",
addInput: function() {
if (this.fields != 5) {
this.fields++;
var newElement = document.createElement('div');
newElement.id = this.target + this.fields;
newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>";
document.getElementById(this.target).appendChild(newElement);
} else {
alert("Only 5 fields allowed.");
}
},
};</script>
i know it does not appear because the php code Quote: newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>"; but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks. I have a notification bar on a Blogger blog (so, little/no access to server side) that I would like to use JavaScript to make the notification bar appear only once per day for each user. The site is www.BenjerMcVeigh.com, and here is the code for the notification bar: Code: <style type='text/css'>
#ut-sticky
{
background:url('http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png') repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:64px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:18px; text-align:center; width:95%; float:left;}
#ut-sticky p a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#cfe7d1;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#cfe7d1; line-height:30px;}
</style>
<div id='ut-sticky'>
<p><a href='http://bit.ly/yq10RE' target='_blank'>Use Google Reader? Why not add www.BenjerMcVeigh.com to your Google Reader list?</a>*****<a href='http://bit.ly/yq10RE' target='_blank'><img alt='Add to Google' border='0' src='http://gmodules.com/ig/images/plus_google.gif'/></a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
I'm very much a novice and appreciate your help...not really sure where to start. Thanks! Code: function get_check_value()
{
var c_value = "";
for (var i=0; i < document.callflow.flow.length; i++)
{
if (document.callflow.flow[i].checked)
{
c_value = c_value + document.callflow.flow[i].value + "\n";
}
}
c_value = "You did the following steps:\n" + c_value;
alert(c_value);
return false;
}
how do you make this code pop up the values of (c_value) instead of an alert?.. thanks Hello, How hard is it to make a "mixer" like this one here? http://mixville.ru/choco/create Having only html and css knowledge and minimal javascript(learning it, very interesting language) I can suppose it's like a table filled with buttons which once clicked move to another table on the left side? Which is made like an array or something. Im a newbye i know. Hope you can guide me in the right direction or atleast tell me the subjects that I need to learn to make this myself. P.S. this is in no way a commercial or spam since the website is russian like, for user and password on a site I'm still pretty new to this Hey -- Right now, I have a variable that I just make a obj that holds functions, variables etc.. but I think it's not very eloquent. Is there a better/more functional way to do it? Class.create? or new obj etc? I have access to jquery or prototype. This is what I have.. it is a pagination builder .. var paginateB = { init: function(param){ this.var = param; this.var1 = somevalue1; this.var2 = somevalue2; this.hashval = $H(); buildNumbers(this); }, buildNumbers: function(){ var var3 = somvaluepresetvalue * this.var1; //do some stuff }, buildLinks:function(){ var var4 = somvaluepresetvalue * this.var2; //do some stuff } } Besides it not completely working (I think I call the functions before they are declared_.. I just feel I am missing out on some eloquence here.. Should I create a class, then initialize those vars at the top? Then somewhere else in my code, I do this: paginateB.init(1); |
|||||||