Search the Community

Hi all, I am trying to work with tabs and using the How to Create Tabs page on the w3 site below. I am unclear on one part. In the HTML code, what is the event parameter referring to in the onclick function. I've copied on of the relevant lines below. If someone could elaborate further it would be much appreciated. <button class="tablinks" onclick="openCity(event, 'London')">London</button> https://www.w3schools.com/howto/howto_js_tabs.asp

Hello everybody, I've got a little problem that I cannot get working. Hope you experts here could help me out with this. I found this hamburger menu animation by Jonsuh: https://jonsuh.com/hamburgers That thing is really nice. Now I want to trigger the animation on hover instead of click. I'd like to hover another item (e.g. 'code') and trigger the animation. Hovering 'code' would start animation and leaving the item would transform hamburger back. I tried it with the mouseover/mouseout function.... but don't know how to get this working with hamburger. I'd really appreciate every help and info. Thanks in advance!

Hello I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please? function drawCircle(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 25, 0, 2 * Math.PI); ctx.stroke(); } function clearArea() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); return false; } function drawEllipse(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); } function drawP(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "12px serif"; ctx.fillText("p", 50, 100); } function drawQ(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "12px serif"; ctx.fillText("q", 50, 100); } function OnClickDraw() { var drawtype = $('#drawType').val().toLowerCase(); switch(drawtype) { case 'c': drawCircle(); break; case 'e': drawEllipse(); break; case 'p': drawP(); break; case 'q': drawQ(); break; } return false; } As you can see I'm using jquery already in my switch statement...

I am trying to stop a mousewheel event from occurring when mousewheeling on a tooltip. Why something like this doesn't work (it only works on the first of the tooltips)... document.body.onwheel = function(e) { e = e || window.event; var target = e.target || e.srcElement; for (var i = 0; i < document.querySelectorAll('.searchPageSections').length; i++) { if (document.querySelectorAll('.tooltip')[i].contains(target)) { return false } // perform some stuff } }; But this does? document.body.onwheel = function(e) { e = e || window.event; var target = e.target || e.srcElement; if (document.querySelectorAll('.tooltip')[0].contains(target) || document.querySelectorAll('.tooltip')[1].contains(target)) { return false } for (var i = 0; i < document.querySelectorAll('.searchPageSections').length; i++) { // perform some stuff } }; Please note I am using return false because e.preventDefault() doesn't seem to work at all either!

http://prntscr.com/a3dz84 please check why it doesn't working ? i have been tested change date in local computer but nothing happen, thanks UPDATE `cu_employee` SET `cu_employee_sisa_cuti` = '12' WHERE 1

Most JavaScript frameworks I've looked at that deal with input events (like jQuery) normalize events by checking for the presence of various properties when the event is received. It seems though it should be possible to determine in advance what properties to use by using event creation, e.g. (exception logging omitted for brevity): var mouseButtonPropertyToUse = "button";var event = null;if (typeof MouseEvent === "function") { event = new MouseEvent("");} else { try { event = document.createEvent("MouseEvent"); } catch (exception) { try { event = document.createEvent("MouseEvents"); } catch (exception) { } }}if (event && "buttons" in event) { mouseButtonPropertyToUse = "buttons";} This seems like it would work, but I haven't seen it done this way in practice so I'm wondering if there are potential problems I'm overlooking. Is this a viable approach for event normalization?

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.sectionseparator { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 0px;}.sectionseparator:hover { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 101px;}.sectionseparator.open { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 27px;}.sectionseparator.open:hover { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 64px;}</style><script language="javascript" type="text/javascript">function imgHover(o){ //what script shoud I put here??};function showHideInfo(o){ //Don't worry about this. Already done.};</script></head><body><a id="section-spg" href="#" onClick="showHideInfo(this);" onMouseOver="imgHover(this);"><img id="section-spg-img" src="/asset/image/invis.gif" width="27" height="27" class="sectionseparator" style=" position:absolute;margin-top:5px;"> <div style="display:inline-block; position: relative; top:6px; left:35px;">SPG</div></a><div id="spg-info">SPG Info</div></body></html> I want background image of 'section-spg-img' changed as 'sectionseparator:hover' when I hover mouse in any region within 'section-spg'. I've searching and try every event method. Either I'm stupid enough and failed or I'm not understand anything about event. Image sprite contain {+,hovered +, -, hovered -}. showHideInfo() change either + or - of the image and show or hide 'spg-info'. (success) imgHover() change either hovered + or hovered - of the image. (failed) Example : http://www.microsoft.com/en-us/download/details.aspx?id=30653 (Detail, System Requirement, etc...) I don't wanna use jQuery. Thank you.

Hi, friends, this is my first time here (sorry for my english). I have rpoblem in my code and I've tryed hard to solve it unsucessfully! I hope someone can help me...The problem: The form runs almost perfectly, except for the javascript function "mostrarCampo()". It should show an "imput field" each time I check the checkbox beside it. It happens that it shows only the first input. Here is the code: [background='light grey']//-----------------function Javasscript (in a file .js)------------------//function mostrarCampo(){ var nameForm = document.forms[0].name; switch (nameForm) { case "f_Ins_Suprimento": document.f_Ins_Suprimento.sClaNome.style.visibility="visible"; document.f_Ins_Suprimento.tfSupNome.style.visibility="visible"; document.f_Ins_Suprimento.tfSupEstoque.style.visibility="visible"; break; . . . case "f_Solicitacao_2": est = document.getElementsByName("tfEst[]"); for(var i = 0; i<est.length; i++){ document.f_Solicitacao_2.tfEst[i].style.visibility="visible"; } break; default: break; }}[/background] [background='light grey']//------------------THE FORM--------------------------------------------------//<!-- FORMULARIO DINÂMICO COM TRECHOS EM PHP QUE TRAZEM DADOS PARA SEREM MANIPULADOS --><form name="f_Solicitacao_2" action="index.php" method="post"><div align="center"><table id="tabRel"> <tr> <th colspan="4">SOLICITAÇÃO DE ALOCAÇÃO DE RECURSOS</th> </tr> <tr><td colspan='2'>Equipamentos</td><td>Estoque</td><td></td></tr><?php/*RESCUING A VRIABLE */ $proId = $_REQUEST['id'];/* CAPTURANDO E TRATANDO UMA EXCEPTION*/ try {/*GETTING DATA*/$lista = Equipamento::listarEquipamento();/*FOR EACH DATA IN ARRAY LIST, GET...*/foreach($lista as $value){$equ_Id = $value['equ_Id'];$equ_Nome = $value['equ_Nome'];$equ_Est = $value['equ_Estoque'];/*WRITTING IN SCREEN A TABLE WITH FOLLOWING ROWS* IN THE FIRST ROW, THE FUNCTION 'mostrarCampo() RUNS WHEN* THE CHECKBOX IS CHECKED AND SHOULD TURN "VISIBLE" THE "INPUT"* ON NEXT ROW */echo " <tr><td colspan='2'><input type='checkbox' id='chEquName' name='chEquName[]' onclick='mostrarCampo();' value="".$equ_Id."" />".$equ_Nome."</td> <td>Estoque :<input name='tfEst[]' id='tfEst[]' type='text' size='4' style='visibility:hidden;' value="".$equ_Est."" /></td> <td><input type='hidden' name='hProId' value="".$proId."" /></td></tr>";}/* CASO A EXCEÇÃO TENHA SIDO CAPTURADA, EXEBE MENSAGEM*/} catch (N_ListaVazia $exc) {echo $exc->getMessage();}?></table> <input type='hidden' name='hLabel' value='tela_Solicitacao_2' /> <p align="center"><input type="submit" name="bSubmit" value="confirmar"/></p><p align="center"><a href="?acao=tela_Servicos">VOLTAR</a></p><p align="center"><a href="?acao=logout">SAIR</a></p></div></form>[/background]

I want to capture keypress event while passing other value in function. I've already and still googling but still not found the answer.Here is the coding : function inputkeyup(i){if (event.keyCode!==13){// do something like thisalert(i.value)};};<input name="myipt" type="text" id="myipt" size="15" maxlength="12" onKeyUp="inputkeyup(this)"><input name="myipt2" type="text" id="myipt2" size="15" maxlength="12" onKeyUp="inputkeyup(this)"> Latest Firefox console tell "ReferenceError: event is not defined" and the code is not functioning How to make it working? No jQuery please because I will learn nothing. Thanks for any help.

Although the documentation ( http://www.w3schools.com/jsref/event_onresize.asp ) states: I can not get a situation where resizing a div causes the oresize handler to be executed. It looks like onresize only works on the window object and the body tag. Among other things, i tried this, a simple mod to the example code: <!DOCTYPE html><html><head><script>function myFunction(){var w=window.outerWidth;var h=window.outerHeight;var txt="Window size: width=" + w + ", height=" + h;document.getElementById("demo").innerHTML=txt;}</script></head><body><div style="width:100%" onresize="myFunction()" ><p>Try to resize the browser window.</p><p id="demo"> </p><p>Note: this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</p></div</body></html> I would like to see a working example where the onresize event handler as attribute of a div tag is actually executed, or, if it is indeed not possible, to get the documentation updated according to the actual possibilities.

<!DOCTYPE html><html><head><script>function myFunction(e){ alert(e.target);}</script></head><body onclick="myFunction(event)"><p>Click on a paragraph. An alert box will alert the element that triggered the event.</p><p><strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p></body></html> Hi guys, I am really struggling with this right now, please help. As you can see the above, I don't really understand these lines of code <body onclick="myFunction(event)">, and function myFunction(e) {alert(e.target);} what do "event" and "e" do, I know they are parameters which I can use whatever I like, my question is, why do I need "event" and "e" parameters here, and why are they so important? Second question, this line <body onclick="myFunction(event)">, I don't really know what the difference between <body onclick="myFunction(event)"> and <body onclick = myFunction>(without parenthesis and quotes). Thanks a bunch guys.

Hi there, I'm back with one that would again considered a pretty obvious question. I hope not to be too annoying but, on the other hand, I guess it will be easy for you to address this little problem. Let's say I have a link with id="goo" and I want it to be opened in another tab and leave the current tab unchanged (kinda like doing right click -> open in new tab). And I want to use listeners not handlers. So that's my code so far: var linkEst ={ init:function() { var link = document.getElementById("goo") if(typeof link.addEventListener != "undefined") { link.addEventListener("click", linkEst.oTab, false) } else if (typeof link.attachEvent != "undefined") { link.attachEvent("onclick", linkEst.oTab) } }, oTab:function(event) { if(typeof event == "undefined") { event = window.event } if(typeof event.preventDefault != "undefined") { open(this.href) event.preventDefault() } else { open(this.href) event.returnValue = false } }}linkEst.init() Works like a charm in FF, but messes up in IE. IE pops an error: "can't find /path/to/undefined". As soon as I click ok he then follows the link (in the same tab). So I assume that in IE's case, this is not pointing to the actual address, or is the error somewhere else? As always, thanks in advance for any kind of help or suggestion. I know I can find snippets to achieve the same result, but I'm trying to learn as best as I can.

Hey I've got a problem with fireing a change-event manually.So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values.If I choose a value of this dropdown-list, a datatable should be updated. This works correctly, if i choose this value manually.Now there is a case, where I need to insert a new value to the selectOneMenu. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button: <p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices"oncomplete="fireChange()"/> For the fireChange()-function, i tried a few different things: function fireChange() { var element = document.getElementById("createEvent:EventSeatingPlan_input");element.onchange();} function fireChange() {var element = document.getElementById("createEvent:EventSeatingPlan_input");$(element).trigger("change");} function fireChange() {if ("fireEvent" in element) element.fireEvent("onchange");else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); element.dispatchEvent(evt);} But none of these work :(Can you please tell me how I can achieve this?Thanks, Xera

Hi! I am making a little game for iOS using apache's Cordova.I use Zepto.js as a light css3 jQuery replacement for animations etc. Players have to create letters as Wim Crouwel did in his New Alphabet, they have to do it in a short amount of time, thus far the project is going fine for the limited skills i have but now i am encountering a problem and i dont know where it could come from. What happens is that when i validate if a letter hase been constructed correctly and it is in fact correct it adds 2 "levels" instead of just 1, what i discovered is that the script actually runs twice. It even reacts tot the amounts of clicks i made on the page, lets say i click 4 "clickable" element's on the page it ads 4 levels. This is what i get in the console: 2 clicks = 2 levels up?validating...correct! go from level 0 to..1validating...correct! go from level 0 to..2 here is a live demo:http://bram-de-leeuw...welGame/(you'll probably have to resize your browser to make it work, the first thing you'll see is a iPhone5 version that isn't styled correctly. When you'll make your browser smaller it will show a iPhone 4 version.) This is the validation code: // Validate Letter A$("#verder").click(function () {//if (Level = 0){ // LETTER = A // CORRECT console.log("validating..."); if ( // LETTER A $(".CenterBottom").hasClass("black") === true && $(".CenterRight").hasClass("black") === true && // NOT LETTER A $(".CenterLeft").hasClass("black") === false && $(".CenterTop").hasClass("black") === false && // ETC.. ){ // IF ITS CORRECT console.log("correct! go from level 0 to..") Level++; $("#alert-fact").animate("Alert", {duration:2000, easing: 'ease'}); $(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'}); $(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'}); console.log(Level); // SOMETHING IS MISSING } else if ( $(".CenterBottom").hasClass("black") === true && $(".CenterRight").hasClass("black") === false || $(".CenterRight").hasClass("black") === true && $(".CenterBottom").hasClass("black") === false ) { $("#alert-missing").animate("Alert", {duration:2000, easing: 'ease'}); if ($(".CenterBottom").hasClass("black") === true) { $(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'}); }; if ($(".CenterRight").hasClass("black") === true) { $(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'}); }; // WRONG } else { $("#alert-wrong").animate("Alert", {duration:2000, easing: 'ease'}); };//};//if (Level = 1){ // LETTER = B//};});

So I'm pretty new with all this and have just been learning xml, javascript, html5 and css3 over the last week or so to work on this idea. I've got a lot of the background stuff in a rough draft and set up in place, and for the most part I'm working on just displaying it all now. I have a side column (nav) which I'm using a transition to slide on and off the page, with an arrow "button" attached to do this. The arrow is an embeded SVG on a <div> tag with an absolute position to the nav column, so when the column.left property is slid off screen the arrow slides with it. The issue though is that the div tag is not firing the onclick event I have setup calling the javascript to change the .left property. Initially as I was first building it I just activated the script by clicking on the nav and it worked fine until I started implementing the arrow. I've tried a few options and I think I'm stuck. Note: the script runs fine, I can even just inject toggleNav(); and it goes back and forth perfectly. Here's the focus of the code: onclick Event <script> // Scripts for sidebarsfunction toggleNav(){var navLeft = document.getElementById("nav").style.left; if (navLeft == 0 || navLeft == "0px"){ document.getElementById("nav").style.left = "-251px"; document.getElementById("nodes").style.left = "0px";}else if (navLeft == "-251px"){ document.getElementById("nodes").style.left = "251px"; document.getElementById("nav").style.left = "0px";}}</script> Body <body><header> <h1>BibleGene</h1> <div id="bottomHeader"></div></header><section id="container"> <section id="nav"> <div id="navArr" onclick="toggleNav();"> <embed src="expandArrow.svg" type="image/svg+xml" /> </div> </section> <section id="nodes" onclick="toggleInfo()"> <p id="test"></p> </section> <section id="info" onclick="toggleInfo()"> </section></section> </body> Styles #nav {height: 100%;width: 230px;padding: 0 10px;position: absolute;z-index: 2;left: 0px; background-color: #f7f7f7;border-color: #a5a5a5;border-right-style: solid;border-width: 2px; /* Transition Effects */transition: left 0.5s;-moz-transition: left 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s; /* Safari and Chrome */-o-transition: left 0.5s; /* Opera */}#navArr {height: 20px;width: 20px;margin: 8px 0px; opacity: 0.3; position: relative;z-index: 2;left: 248px;}#navArr:hover {opacity: 1;}#nodes {height: 100%;min-width: 450px;margin: 0 10px;position: absolute;z-index: 1;left: 250px;right: 250px; /* Transition Effects */transition: left 0.5s, right 0.5s;-moz-transition: left 0.5s, right 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s, right 0.5s; /* Safari and Chrome */-o-transition: left 0.5s, right 0.5s; /* Opera */}

I'm using this function to detect whether a key is being hold: var keyDown=new Array(false,false,false,false,false,false); function keys(e,isDown) {keynum=-1;if (e.which) { keynum=e.which;}else if (window.event) { keynum=e.keyCode;}if (isDown && keynum==32) alert("Spacebar!"); // Test 1if (keynum==38) { // Arrow-up keyDown[0]=isDown;}else if (keynum==39) { // Arrow-right keyDown[1]=isDown;}else if (keynum==40) { // Arrow-down keyDown[2]=isDown;}else if (keynum==37) { // Arrow-left keyDown[3]=isDown;}else if (keynum==32) { // Spacebar keyDown[4]=isDown; if (isDown) alert("Spacebar!"); // Test 2}else if (keynum==80) { // P-key keyDown[5]=isDown;}} The function is called in the body-ellement: <body onkeydown="keys(event,true)" onkeyup="keys(event,false)"><!-- Body contents... --></body> Like you can see, when a button is pressed (or released) this is stored in the array. Thismakes it possible for functions to see if a key is being hold at any time (yes, maybe there are other ways to do this). But this combinations do not work (push the keys in the order I give them):1) Press the right and down-arrow;2) Press the spacebar; On my computer the spacebar is not detected, when trying this combination. This combination doesn't work either:1) Press the left and up-arrow;2) Press the spacebar; I really want the spacebar to work! Even the alert boxes do not show up when trying this.I tried this in Firefox en Chrome. Both browsers do not detect the spacebar when pressed. Is there something wrong with the script, or is it a javascript bug? Thanks in advance!

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>window.onload = function(){ document.getElementById("txt").onkeypress = function(evt){ var evt = (evt) ? evt : ( (event) ? event : null ) ; var elem = (evt.target) ? evt.target : ( (evt.srcElement) ? evt.srcElement : null ) ; if((evt.keyCode == 13) && (elem.type == "text")) { document.getElementById("t").focus(); return false; }}}function c(){alert(document.getElementById("txt").value);}</script></head><body><form name="form" id="form" onchange="c();"><input id="t" type="input" value="t"/><input id="txt" type="input" value=""/><input id="t2" type="input" value="t2"/></form></body></html> The onChange event is only fired in IE9, not IE7 or IE8.