|
JavaScript - Making Javascript Recognise Different Targets
Hello! I'm rather new to the Javascript/jQuery world and I've been attempting to code a small game..
I've been attempting to get six images to evaluate either "Correct" or "Wrong" depending on which image they're dragged onto. apple, guava and pear(.png) should all evaluate correct when dropped onto sprite1, while pineapple, plum and purple should all evaluate correct when dropped onto sprite2. That said they should also evaluate wrong, when dropped onto the incorrect sprite. The problem I'm having is that they'll all either evaluate correct or wrong depending on whichever fruit is dropped onto a sprite first. It won't recognise when a fruit is dropped onto the incorrect sprite and I'm not sure what to add to make that happen? Diagram of problem: http://i.imgur.com/u9oH5Mo.png Code: <div id="answerBoxes">
<div id="target1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/sprite1.png"/>
</div>
<div id="target2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/sprite2.png"/>
</div>
</div> <!-- end of sprite's -->
<div id="whatsWhatContent">
<div id="answers">
<div id="answer1Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer1" src="img/apple.png" draggable="true"
ondragstart="drag(event)"/></div>
<div id="answer2Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer2" src="img/guava.png" draggable="true"
ondragstart="drag(event)"></div>
<div id="answer3Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer3" src="img/pear.png" draggable="true"
ondragstart="drag(event)"></div>
<div id="answer4Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer4" src="img/pineapple.png" draggable="true"
ondragstart="drag(event)">
<div id="answer5Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer5" src="img/plum.png" draggable="true"
ondragstart="drag(event)">
<div id="answer6Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer6" src="img/purple.png" draggable="true"
ondragstart="drag(event)">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image = ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
if($('#target1').find('#answer1').length == 1)
{
alert("CORRECT!");
}
else if ($('#target2').find('#answer2').length == 1)
{
alert("Wrong.");
}
else {
alert("Wrong!");
}
}
Similar TutorialsPresently am using below code, and it is showing an error message says "Cannot call method "getCurrentWindow" of undefined (<Unknown source>#4) in <Unknown source> at line number 4" ========================================= function insertDataIntoHtmlEditorIE() { currentwindow = this.browserbot.getCurrentWindow(this); var iFrame = currentwindow.getElementById ('ctl00_MainContent_editor_ctl02_ctl00'); var iFrameBody; iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; iFrameBody.innerHTML = "xyz"; } ================================================ please help me out to resolve this issue.. *am calling this script in Selenium RC through Eclipse This has stumped me for the last couple of hours and I was wondering if anyone else could shed some light... I have a page which loads some cookies, when taking the value from the cookie it defines whether a checkbox should be ticked or not. This works if the value of the cookie is true but not if the value is false and it ticks the box anyway. The code is.... Code: var widgetVal = loadCookie(widgetName);
switch(i){
case 1:
document.getElementById('calender_widget').checked = widgetVal;
break;
case 2:
document.getElementById('calculator_widget').checked = widgetVal;
break;
case 3:
document.getElementById('timetable_widget').checked = widgetVal;
break;
};
i is incremented each time in a for loop and a different cookie is loaded each time. As I said the code works if it set to true but not false however if I remove the variable and specify it as false it works. Thanks. hey guys, new to the forum here but i think i may be staying here for the long haul i've lurked around here a while but recently i havent been able to find a solution to something i'm having trouble with. i need to create a script that allows me to take an image and a button and apply it to the page the button will have a value of "Start" and when the "onClick" event is triggered the image will begin to reposition itself towards the right side of the page (as if it were panning towards the right, like if it were on wheels). once it reaches the end of the window i have get it to come back to the starting position and just keep on looping. the trickiest part (imo) is getting the value of the button to change to "stop" and onClick it needs to reset everything back to neutral. now i am a HUGE javascript "nub" and i dont want someone to do the code for me, i just want some help. i need to learn this. i'll post what i have so far in post #2. if anyone can help with this ASAP i would love you forever. thanks! Hi! I need to make my own web page with quiz on it! Something like this http://www.javascriptkit.com/script/popquiz.htm The main problem - how to calculate scores? I need to make, for example, pop up box that shows, how many answers are right/wrong. What should I use for that? can u like make games like pong wikth javascript? my friend said he did, but i dont think u can.
Right now, I am trying to use this widget from widget box to figure stuff out but its not working. I want to make a moving ticker The text would be from a rss This is what there source was: <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('23bf7f48-242e-489d-99b9-4a1ac7b47eac');</script> And inside it is this... (http://cdn.widgetserver.com/syndicat...nsertWidget.js) Code: //
//
//
if(!window.WIDGETBOX){(function(){var D=false;var C=function(){WIDGETBOX.setPageLoaded();};var B=function(){WIDGETBOX.setPageUnloaded();};WIDGETBOX={libs:{},version:"41509",urls:{runtimeBaseUrl:"http://widgetserver.com/syndication",galleryBaseUrl:"http://www.widgetbox.com",cdnRuntimeBaseUrl:"http://cdn.widgetserver.com/syndication",cdnGalleryBaseUrl:"http://pub.widgetbox.com",metricsBaseUrl:"http://t.widgetserver.com/t",proxyBaseUrl:"http://p.widgetserver.com/p",markupRuntimeBaseUrl:"http://widgetserver.com/syndication",mobileSiteRuntimeBaseUrl:"http://m.wbx.me",linkbarBaseUrl:"http://l.wbx.me/l",imageProxyBaseUrl:"http://i.widgetserver.com"},globals:{token:"",tokenTime:0,widgets:[],widgetCount:0,pageLoaded:false,pageUnloaded:false,eventListeners:[],pageLoadListeners:[],pageUnloadListeners:[],panels:[],panelCount:0,showPanelMarks:true,suppressGetWidget:false,disableGetWidget:false,suppressQuantcast:false,enableLogging:false,disableHitTracking:false,log:"",trustedPage:false,disableInstallerMenu:false,renderInstallerMenuInline:false,anchorEl:null,vid:null,startTime:new Date().getTime()},init:function(){if(!D){D=true;if(window.WIDGETBOXLOADLISTENERS){for(i=0;i<WIDGETBOXLOADLISTENERS.length;i++){A.addPageLoadListener(WIDGETBOXLOADLISTENERS[i]);}}A.addEvent(window,"load",C);A.addEvent(window,"unload",B);if(window.WIDGETBOXINITLISTENERS){for(i=0;i<WIDGETBOXINITLISTENERS.length;i++){try{WIDGETBOXINITLISTENERS[i]();}catch(E){WIDGETBOX.logMessage(E);}}}}},namespace:function(G){G=G.replace(".","/");if(G.indexOf("WIDGETBOX/")===0){G=G.substr(10);}if(G.indexOf("POSTAPP/")===0){G=G.substr(8);}var E=G.split("/");var I=WIDGETBOX;if(E){var H;for(var F=0;F<E.length;F++){H=E[F];if(!I[H]){I[H]={};}I=I[H];}}return G;},logMessage:function(E){if(A.globals.enableLogging){A.globals.log+=E+"\n";}},newLibInfo:function(G){G=G.replace(".","/");var J=G;var H="";var F=G.lastIndexOf("/");if(F>=0){H=G.substr(0,F);J=G.substr(F+1);}H=A.namespace(H);G=H+"/"+J;var I=G.replace("/","_").toLowerCase();var E={ns:H,name:J,path:G,id:I,status:null,callback:null};return E;},load:function(I,H,J){var G=A.newLibInfo(I);if(!WIDGETBOX.libs[G.id]){WIDGETBOX.libs[G.id]=G;G.status="loading";if(H){if(!G.listeners){G.listeners=[];}G.listeners.push(H);}var E=document.createElement("script");E.id="widgetbox_lib_"+G.id;E.type="text/javascript";E.setAttribute("async","true");if(!J){E.src=WIDGETBOX.urls.runtimeBaseUrl+"/"+G.path+".js?"+WIDGETBOX.version;}else{E.src=WIDGETBOX.urls.cdnRuntimeBaseUrl+"/"+G.path+".js?"+WIDGETBOX.version;}var F=document.documentElement.firstChild;if(!F||(F.nodeName&&F.nodeName.toLowerCase().indexOf("comment")>-1)){F=document.getElementsByTagName("head")[0];}F.appendChild(E);}else{G=WIDGETBOX.libs[G.id];if(H){if(G.status=="ready"){try{H(G);}catch(K){WIDGETBOX.logMessage(K);}}else{if(!G.listeners){G.listeners=[];}G.listeners.push(H);}}}},ready:function(F){var E=A.newLibInfo(F);if(!WIDGETBOX.libs[E.id]){WIDGETBOX.libs[E.id]=E;}E=WIDGETBOX.libs[E.id];return E.status=="ready";},setReady:function(G){var F=A.newLibInfo(G);if(!WIDGETBOX.libs[F.id]){WIDGETBOX.libs[F.id]=F;}F=WIDGETBOX.libs[F.id];F.status="ready";if(F.listeners){var E=0;for(E=0;E<F.listeners.length;E++){var H=F.listeners[E];try{H(F);}catch(I){WIDGETBOX.logMessage(I);}}}},addEvent:function(I,H,F,E){if(I.addEventListener){I.addEventListener(H,F,E);return true;}else{if(I.attachEvent){var G=I.attachEvent("on"+H,F);return G;}else{alert("Handler could not be attached");}}},removeEvent:function(H,G,F,E){if(H.removeEventListener){H.removeEventListener(G,F,E);return true;}else{if(H.detachEvent){return H.detachEvent("on"+G,F);}else{alert("Handler could not be removed");}}},addEventListener:function(E,G){if(G){if(!A.globals.eventListeners){A.globals.eventListeners={};}if(!A.globals.eventListeners[E]){A.globals.eventListeners[E]=[];}var F=A.globals.eventListeners[E];F[F.length]=G;}},notifyEventListeners:function(F){if(!A.globals.eventListeners){return ;}var G=A.globals.eventListeners[F];if(!G){return ;}for(var E=0;E<G.length;E++){var H=G[E];try{H(this);}catch(I){WIDGETBOX.logMessage(I);}}},addPageLoadListener:function(E){if(E){if(!A.globals.pageLoaded){A.globals.pageLoadListeners.push(E);}else{try{E();}catch(F){WIDGETBOX.logMessage(F);}}}},addPageUnloadListener:function(E){if(E){if(!A.globals.pageUnloaded){A.globals.pageUnloadListeners.push(E);}else{try{E();}catch(F){WIDGETBOX.logMessage(F);}}}},setPageLoaded:function(){if(A.globals.pageLoaded){return ;}A.globals.pageLoaded=true;A.removeEvent(window,"load",C);var F=A.globals.pageLoadListeners;var E;for(E=0;E<F.length;E++){try{F[E]();}catch(G){WIDGETBOX.logMessage(G);}}},setPageUnloaded:function(){if(A.globals.pageUnloaded){return ;}A.globals.pageUnloaded=true;A.removeEvent(window,"unload",B);var E=A.globals.pageUnloadListeners;for(i=0;i<E.length;i++){try{E[i]();}catch(F){WIDGETBOX.logMessage(F);}}},generateGUID:function(H,E){var I=(H)?H:Math.random;var K=(E)?36:32,M="0123456789abcdef".split(""),F,G=[];if(E){G[8]=G[13]=G[18]=G[23]="-";G[14]="4";}for(var J=0;J<K;J++){if(!G[J]){F=0|I()*16;G[J]=M[(J==19)?(F&3)|8:F];}}var L=G.join("");if(!WIDGETBOX.globals.vid){WIDGETBOX.globals.vid=L;}return L;},generateProxiedImageUrl:function(E,H,G,F){var I=E;I=this.urls.imageProxyBaseUrl+"/ip/origin=="+encodeURIComponent(I);if(H){I+="&&w=="+Math.round(H);}if(G){I+="&&h=="+Math.round(G);}if(F){I+="&&type=="+F;}I+="?token="+WIDGETBOX.globals.token;return I;},createElement:function(F,E){if(E){return E.ownerDocument.createElement(F);}else{return document.createElement(F);}}};POSTAPP=WIDGETBOX;var A=WIDGETBOX;A.init();})();}
//
//SOF: subscriber/InsertWidget.js
//
//support rendering a widget in an element by supplying and id to the element
WIDGETBOX.renderWidgetInElement = function(appId, parentNodeId) {
return WIDGETBOX.renderWidget(appId, false, parentNodeId);
},
WIDGETBOX.renderWidget = function(appId, mode, parentNodeId) {
if (!parentNodeId) {
parentNodeId = "widgetbox_widget_parent_" + WIDGETBOX.globals.widgetCount++;
document.write("<div id=\"" + parentNodeId + "\" style=\"line-height:0\"></div>");
}
function libReadyCallback() {
var parentNode = document.getElementById(parentNodeId);
if (!parentNode) {
document.write("<div id=\"" + parentNodeId + "\" style=\"line-height:0\"><span style=\"visibility:hidden\">-</span></div>");
parentNode = document.getElementById(parentNodeId);
}
WIDGETBOX.subscriber.Main.insertWidget(appId, null, parentNode, mode, null, null);
}
WIDGETBOX.load("subscriber.Main", libReadyCallback, true);
};
//
//EOF: subscriber/InsertWidget.js
What do i change and do to make this work? I followed the tutorial below and got my image fade to work: http://clagnut.com/sandbox/imagefades/ Now I want to have text become visible once the fade is done. I can't get it to work. style portion: .enhanced { visibility:hidden; } javascript functions: <script language="javascript"> document.write("<style type='text/css'> ##thephoto {visibility:hidden;} </style>"); window.onload = function() {initImage()}; function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0); } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999pacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 150); } if (opacity = 100) { textId = 'enhanced'; text = document.getElementById(textId); text.style.visibility="visible"; } } } </script> I have added this to the last function: if (opacity = 100) { textId = 'enhanced'; text = document.getElementById(textId); text.style.visibility="visible"; } But the text appears instantly. (Please note, although I've included jQuery code here, this is a general JavaScript question.) At http://jquery14.com/day-05 (code at http://pastie.org/783420) I saw this code: Code: // all <a href="#anchor"> smoothscroll to those elements
$("a[href^=#][href!=#]").live('click',function(e){
$('html,body').animate({'scrollTop': $($(this).attr('href')).offset().top+'px'});
e.preventDefault();
});
I'm using this idea of smoothscrolling to destination anchors in a page I'm developing, but is it a bad idea from an accessibility point of view? I don't have a screen reader (couldn't get Fire Vox to work), but I am assuming that when you follow a link to a destination anchor in the same document, a screen reader begins reading from the destination anchor. But this code cancels the default action of the link being followed. The page scrolls, but I assume this means nothing to a screen reader. If my assumptions are correct, the links concerned are broken for screen reader users. (I suppose none of this matters if screen readers turn off JavaScript, but do they?) A related question: From what I can tell, when you follow a link to an anchor somewhere on the same page, the page is entirely reloaded. Does this happen in every browser? Thanks for any help Hi there, I am looking to make a javascript hover menu. Like the main hover menus at websites like... http://www.godaddy.com and http://www.mediatemple.com How can i do this? Are there any tutorials? And is javascript the best language to do this in, or ajax or web2.0 ? so i am trying to make a music player where you select a song from a drop down list and then click submit. it then brings up the audio controls with the HTML5 "<audio>" tags and then you can click play and it should work. i am having trouble actually doing this though. the html is Code: <html> <head> <title>Music Player</title> <script language="javascript" type="text/javascript" src="popup.js"> </script> </head> <body bgcolor="000000"> <font color="lime" size="6"> <div align="center"> <u>The Mighty Peacock Music Player</u> </font> <br> <br> <font color="red" size="5"> <select id="convert_to" name="convert_to"> <option value="danza" id="danza">Danza Kuduro by Dan Omar</option> <option value="iron" id="iron">Iron by Woodkid</option> <option value="boot" id="boot">Das Boot by Vat19</option> </select> <br> <input type="submit" value="submit" onClick="dispResults(convert_to)"> <p>The song selector is not functioning yet. Sorry for the inconvinence.</p> <br> <br> <div class="music_box" id="music_box"> <audio src="/music/Danza Kuduro.mp3" controls="controls"> </audio> </div> </div> </body> </html> and the javascript is Code: function dispResults(convert_to) {
if (id == "danza") {
document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/Danza Kuduro.mp3" controls="controls"></audio> + "</p>";
}
if (id == "iron") {
document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/woodkid.mp3" controls="controls"></audio> + "</p>";
}
}
any help would be greatly appreciated. Thanks Alright, I am going to post the sections that matter, and then post the full JS at the bottom. Alright, so youtube allows you to pull videos using javascript. here is the what I am using Code: function insertVideos(div,typ,q,results,overlay){
inlineVideo = overlay;
youtubediv[q.toLowerCase()] = div;
var script = document.createElement('script');
if(typ == "favs")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
if(typ == "user")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
alright, and here is the HTML code. Code:
<div id="youtubeDivFavs" align="center">
</div>
<script>
insertVideos('youtubeDivFavs','favs','lancxeon','5',0);
</script>
<div id="youtubeDivUser" align="center">
</div>
<script>
insertVideos('youtubeDivUser','user','lancxeon','5',0);
</script>
Now as you can see there are two here. the second one "user" pulls from the url http://gdata.youtube.com/feeds/users/lancxeon/uploads It works fine on my website. the second one pulls from http://gdata.youtube.com/feeds/users/lancxeon/favorites It does not work. It makes no sense as you can see both of the urls work fine. I have already tried only using the favorites one and getting rid of the user one.. to see if it was interfering. And it still would not work. It truly makes no sense to me why it does not work, if one works why will the other not work? Here is the full JS file Code: <!--
var cleanReturn = 1; //do you want a full youtube return, or just an image list
var inlineVideo = 1; //do you want to redirect to youtube, or play inlinevideo
var timer;
var i =0;
var youtubediv = new Array();
function clearList(ul){
var list = document.getElementById(ul);
while (list.firstChild)
{
list.removeChild(list.firstChild);
}
}
function hideOverlay(){
var overlay = document.getElementById('youtubeoverlay');
overlay.style.display = 'none';
overlay.innerHTML = "";
}
function videoOverlay(id){
var objBody = document.getElementsByTagName("body").item(0);
if(objBody){
var video = document.createElement('div');
video.setAttribute('id', 'youtubeoverlay');
video.innerHTML = '<div id="youtubecontent"><a href="javascript:hideOverlay()" id="close">Close</a><br /><object width="510" height="420"><param name="movie" value="http://www.youtube.com/v/'+id+'"></param><param name="autoplay" value="1"><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="510" height="420"></embed></object></div>';
objBody.insertBefore(video, objBody.firstChild);
}else{
alert('no body element. please add');
}
}
function mousOverImage(name,id,nr){
if(name)
imname = name;
//make border orange
imname.style.border = '4px solid orange';
imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
nr++;
if(nr > 3)
nr = 1;
timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
}
function mouseOutImage(name){
if(name)
imname = name;
//make border back to greyish
imname.style.border = '4px solid #333333';
if(timer)
clearTimeout(timer)
}
function getVideoId(url){
var match = url.lastIndexOf('=');
if (match) {
id = url.substring(match+1);
return id;
}
}
function getId(string){
var match = string.lastIndexOf("'s Videos");
if (match != -1) {
id = string.substring(0,match);
return id.toLowerCase();
}
var match = string.lastIndexOf("query");
if (match != -1) {
id = string.substring(match+7);
return id.toLowerCase();
}
}
function listVideos(json,divid) {
divid.innerHTML = '';
var ul = document.createElement('span');
ul.setAttribute('id', 'youtubelist');
if(json.feed.entry){
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
var thumb = entry['media$group']['media$thumbnail'][1].url;
var li = document.createElement('span');
li.setAttribute('id', 'youtubebox');
if(cleanReturn == 1){
if(inlineVideo == 1){
li.innerHTML = '<a href="javascript:videoOverlay(\''+getVideoId(url)+'\');"><img src="'+thumb+'" id="youtubethumb" alt="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
}else{
li.innerHTML = '<tr><a href="'+url+'" target="_new"><img src="'+thumb+'" border="0" id="youtubethumb" alt="'+entry.title.$t+'" title="'+entry.title.$t+'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\''+getVideoId(url)+'\',2)"></a>';
}
}else{
li.innerHTML = entry.content.$t;
}
ul.appendChild(li);
}
}else{
divid.innerHTML = 'No Results Found';
}
document.getElementById(divid).appendChild(ul);
}
function youtubeInit(root) {
//this hacks the layer for mutiple json queries
id = getId(root.feed.title.$t);
listVideos(root, youtubediv[id]);
}
function insertVideos(div,typ,q,results,overlay){
inlineVideo = overlay;
youtubediv[q.toLowerCase()] = div;
var script = document.createElement('script');
if(typ == "favs")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/favorites?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
if(typ == "user")
script.setAttribute('src', 'http://gdata.youtube.com/feeds/users/'+q+'/uploads?max-results='+results+'&alt=json-in-script&callback=youtubeInit');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
//-->
hey, i am trying to add events to my website...i have all the events stored in my google calender and i am trying to show only four events at the time for example: 10/01/2011 - John's Birthday 12/01/2011 - Party i found this example on google however i am having problems...the problem i am having is that it works fine on my computer however when i look at it on another computer nothing appears http://gdata-javascript-client.googl...le_sample.html thanks I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now. Here is my code: Code: function fillcap(){
var wire = document.getElementById("wireSize");
var conduit = document.getElementById("conduitSize");
if (wire.option.length >= 10 && conduit.option.length == .5) {
windows.alert("Wire Size exceeds conduit max fill!")
}
And the html Code: <h2>Fill Capacity</h2><br>
<b>Wire Size</b><br>
<select id ="wireSize">
<option value="1">#14</option>
<option value="2">#12</option>
<option value="3">#10</option>
<option value="4">#8</option>
<option value="5">#6</option>
<option value="6">#4</option>
<option value="7">#3</option>
<option value="8">#2</option>
<option value="9">#1</option>
<option value="10">1/0</option>
<option value="20">2/0</option>
<option value="30">3/0</option>
<option value="40">4/0</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="750">750</option>
</select> <br>
<b>Conduit Size</b><br>
<select id="conduitSize">
<option value=".5">1/2</option>
<option value=".75">3/4</option>
<option value="1">1</option>
<option value="1.25">1-1/4</option>
<option value="1.5">1-1/2</option>
<option value="2">2</option>
<option value="2.5">2-1/2</option>
<option value="3">3</option>
<option value="3.5">3-1/2</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br>
<input value="Wires allowed" onclick="fillcap()" type="button">
<input type="text" name="myresultbox" id="resultbox10"> Wires<br>
Thank you for any advice. I'm a newbie...please! html lists making javascript array I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f Code: <div class="demo" id="demo_1"> <ul> <li id="1" class="open"><a id="1" href="#"><ins> </ins>Root node 1</a> <ul> <li id="2"><a id="2" href="#"><ins> </ins>Child node 1</a></li> <li id="3"><a id="3" href="#"><ins> </ins>Child node 2</a></li> <li id="4"><a id="4" href="#"><ins> </ins>Some other child node with longer text</a></li> <li id="6"><a id="6" href="#"><ins> </ins>Root node 222</a> //SHOUL NOT BE IN MY ARRAY <ul> <li id="7"><a id="7" href="#"><ins> </ins>Child node 222a</a></li> <li id="8"><a id="8" href="#"><ins> </ins>Child node 222b</a></li> <li id="9"><a id="9" href="#"><ins> </ins>Some other child node with longer text 222</a></li> </ul> //END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1 </li> </ul> </li> <li id="5"><a id="5" href="#"><ins> </ins>Root node 2</a></li> </ul> Hi! I'm trying to make a multiple choice quiz using javascript. I downloaded codes from http://www.javascriptkit.com/script/cut180.shtml But when I used it nothing comes up on the results (number of correct answer, number of wrong answer and percentage) as well as the solution box is empty. I tried it on Google Chrome and it says "Your browser does not accept cookies. Please adjust your settings." So I tried it in Safari because that's what we use in school and it doesn't work. The results and solution box is empty. I am guessing that problem is with cookies? Please help me. Here are my codes: - Quiz //Enter total number of questions: var totalquestions=10 //Enter the solutions corresponding to each question: var correctchoices=new Array() correctchoices[1]='a' //question 1 solution correctchoices[2]='d' //question 2 solution, and so on. correctchoices[3]='b' correctchoices[4]='b' correctchoices[5]='c' correctchoices[6]='b' correctchoices[7]='a' correctchoices[8]='c' correctchoices[9]='d' correctchoices[10]='b' /////Don't edit beyond here////////////////////////// function gradeit(){ var incorrect=null for (q=1;q<=totalquestions;q++){ var thequestion=eval("document.myquiz.question"+q) for (c=0;c<thequestion.length;c++){ if (thequestion[c].checked==true) actualchoices[q]=thequestion[c].value } if (actualchoices[q]!=correctchoices[q]){ //process an incorrect choice if (incorrect==null) incorrect=q else incorrect+="/"+q } } if (incorrect==null) incorrect="a/b" document.cookie='q='+incorrect if (document.cookie=='') alert("Your browser does not accept cookies. Please adjust your browser settings.") else window.location="results.htm" } function showsolution(){ var win2=window.open("","win2","width=200,height=350, scrollbars") win2.focus() win2.document.open() win2.document.write('<title>Solution</title>') win2.document.write('<body bgcolor="#FFFFFF">') win2.document.write('<center><h3>Solution to Quiz</h3></center>') win2.document.write('<center><font face="Arial">') for (i=1;i<=totalquestions;i++){ for (temp=0;temp<incorrect.length;temp++){ if (i==incorrect[temp]) wrong=1 } if (wrong==1){ win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>") wrong=0 } else win2.document.write("Question "+i+"="+correctchoices[i]+"<br>") } win2.document.write('</center></font>') win2.document.close() } ______________________________________________________________ For Results <html> <head> <title>Instant Quiz Results</title> </head> <body bgcolor="#FFFFFF"> <p align="center"><strong><font face="Arial"> <script src="quizconfig.js"> </script>Quiz Results Summary</font></strong></p> <div align="center"><center> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form method="POST" name="result"><table border="0" width="100%" cellpadding="0" height="116"> <tr> <td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Number Of Correct Questions:</font></strong></td> <td height="25"><p><input type="text" name="p" size="24"></td> </tr> <tr> <td height="17" bgcolor="#D3FFA8"><strong><font face="Arial">Wrong Questions:</font></strong></td> <td height="17"><p><textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea></td> </tr> <tr> <td height="25" bgcolor="#D3FFA8"><strong><font face="Arial">Grade Percentage:</font></strong></td> <td height="25"><input type="text" name="q" size="8"></td> </tr> </table> </form> </td> </tr> </table> </center></div> <form method="POST"><div align="center"><center><p> <script> var wrong=0 for (e=0;e<=2;e++) document.result[e].value="" var results=document.cookie.split(";") for (n=0;n<=results.length-1;n++){ if (results[n].charAt(1)=='q') parse=n } var incorrect=results[parse].split("=") incorrect=incorrect[1].split("/") if (incorrect[incorrect.length-1]=='b') incorrect="" document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%" for (temp=0;temp<incorrect.length;temp++) document.result[1].value+=incorrect[temp]+", " </script> <input type="button" value="Retake Quiz" name="B1" onClick="history.go(-1)"> <input type="button" value="Show Solution" name="B2" onClick="showsolution()"></p> </center></div> </form> </body> </html> Please help me. I've been trying to find out what is wrong with my codes for a week. Thanks in advance! Okay so to be short, I'm trying to make a script similar to a link checker but instead of having to input each link in one by one and click a button (A button saying Validate, for instance), I was looking for something that would do it automatically? Example - 1. First I input the link http://www.example.com/posts.php?do=1000000000 and click Start or Validate. 2. After clicking Start or Validate, the validator or script would begin checking links, modifying the http://www.example.com/posts.php?do=1000000000 to http://www.example.com/posts.php?do=1000000001 and so on and so on, until it reached all 9's. 3. After the scanning, every existent link (Meaning links that didn't give the 404, or re-direct to another page) would be displayed in the page below or a log file. I really appreciate the help everyone, since I'm still into learning about Javascript. Thanks in advance! Hello, I'm un-sure on what I should have called this topic so sorry for the possibly mis-leading topic name. Firstly, my menu bar is attached to the top of the clients screen as seen here. Secondly, I've been wondering how could I make it so when a button is pressed another div around 40px in height would appear above it(that div is also attached to the clients screen). For example I saw http://9gag.com/, when you click on search button in the top right hand corner the search bar appears ontop of the menu bar. My JavaScript knowledge is very limited, I know how to make a div appear with the click of a button, but how can I make it be attached to the top of the clients browser and the menu bar in under it? Codes Menu bar Code: <ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="Online.php">Server</a>
<ul>
<li><a href="Online.php">Server</a></li>
<li><a href="Bans.php">Bans</a></li>
<li><a href="Search.php">Search</a></li>
<li><a href="rules.php">Rules</a></li>
</ul>
</li>
<li><a href="http://thepilotslife.com/forums">Forums</a></li>
<li><a href="Donate.php">Support Us</a>
<ul>
<li><a href="Donate.php">Support Us</a></li>
<li><a href="Donate.php">Donate</a></li>
<li><a href="Ad.php">Advertising</a></li>
</ul>
</li>
<li><a href="Highscores.php">Highscores</a></li>
<li><a href="Airlines.php">Airlines</a></li>
<li><a href="Forms.php">Forms</a>
<ul>
<li><a href="">Forms</a></li>
<li><a href="">Report Player</a></li>
<li><a href="BanAppeals.php">Appeal Ban</a></li>
</ul>
</li>
<?php
echo "<li><a href='Help.php'>Help</a>";
echo "<ul>";
echo "<li><a href='Help.php'>Help</a></li>";
echo "<li><a href='Help.php'>Topics</a></li>";
echo "<li><a href='Help.php?submit=1'>Submit</a></li>";
if(isset($_SESSION['username']))
{
if($_SESSION['Admin'] == 5)
{
echo "<li><a href='ViewHelp.php'>New Topics</a></li>";
}
}
echo "</ul>";
echo "</li>";
if(isset($_SESSION['username']))
{
echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a>";
echo "<ul>";
echo "<li><a href='user.php?user=$_SESSION[username]'>$_SESSION[username]</a></li>";
echo "<li><a href='logout.php'>Logout</a></li>";
echo "</ul>";
}
else
{
$path = $_SERVER['SCRIPT_NAME'];
echo "<li><a href='login.php?path=$path'>Login</a></li>\n";
}
?>
</ul>
Menu bar CSS code. Code: #menu {
height: 34px;
position: fixed;
width: 100%;
z-index: 15;
top: 0;
}
#menubar {
color: #B4B4B4;
border-top: 1px solid #363636;
border-bottom: 1px solid #363636;
background: #292929;
background-image: -moz-linear-gradient(top, #292929, #333, #232323);
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333));
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323);
}
#menubarcont {
width: 900px;
height: 34px;
}
#menubarcont ul {
margin: 0;
padding: 0;
list-style: none;
}
#menubarcont ul li {
display: block;
position: relative;
float: left;
}
#menubarcont li ul { display: none; }
#menubarcont ul li a {
display: block;
text-decoration: none;
white-space: nowrap;
}
#menubarcont li:hover ul {
display: block;
position: absolute;
}
#menubarcont li:hover li {
float: none;
font-size: 11px;
}
#menubar ul li {
display: inline;
}
#menubar ul li a {
float:left;
line-height: 34px;
font-size: 12px;
width: 100px;
margin: 0 0 0 0px;
text-decoration: none;
font-family: 0.75em/1.5 'Lucida Grande', sans-serif;
color: #B4B4B4;
background: #292929;
background-image: -moz-linear-gradient(top, #292929, #333, #232323);
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#232323), color-stop(0.5, #333));
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#292929, endColorStr=#232323);
}
#menubar ul li a:hover
{
color: #FFFFFF;
background: #222;
}
Thanks for reading and hopefully somebody can point me in the right direction. I'm decent at JavaScript but I have no idea how I should go about making a calculator. So far I'll drop a bunch of buttons down that all onclick to a function (a,b) and then it will add or w/e then return. How would I incorporate multiple methods such as subtraction or multiplication though? Basically I'm confident I the ability to code or learn to make this calculator, just have no idea how to set this up, thanks. Hi all, I have a client who wants a gallery of images to pop up on her enter page similar to this site, http://bit.ly/mUscmo . It won't be identical, but she likes the way the images all pop up and then just stay there. I know how to function JavaScript, but I don't know how to write it from scratch. Is there any where I could find a code that does something similar to this? Or, does anyone know the basic coding that I'd need for this? Thanks! Q |
|||||||