Search the Community

I am trying to switch two divs on an onclick command to a search button. One div should replace the other entirely. I have tried to do this two ways: 1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa 2) make Div 1 display = none when Div 2 display = block, and vice versa. My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely. Any suggestions why this might be doing this and/or, is there a better way to accomplish this than just changing the CSS? I am including the JS, HTML, and CSS attending this problem. Thanks ahead of time: JS (from Option 2) function getSearch() { document.getElementById("searchcontainer").style.display = "block"; document.getElementById("blogcontainer").style.display = "none"; } HTML <div id="rightcontainer"> <div id="searchbox"> <form> <input type="text" placeholder="Search..." required> <input id="cardib" type="button" value="Search" onclick="getSearch()"> </form> </div> <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button> <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button> <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> </div> </div> CSS #blogcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #searchcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #rightcontainer { height: 100vh; width: calc( 100% - 20vh - (.678*(100%-20vh))); position: fixed; overflow: hidden; background-color: gray; margin-left: calc((.678*(100%-20vh)) + 20vh); float: left; margin-right: 0; }

BACKGROUND I have created two functions both of which have been tested and function as expected -- so well, in fact, that one of them can be used to enhance the output of the other. The problem arises when I seek to call these functions with separate button alerts provided below in the order given. Both functions are defined in a jQuery ready statement. BUTTON ALERTS <script> var num = 5; </script> <button onclick="alert(num.annotate('sec'));">Alert!</button> <script> var sec_num = 59039; </script> <button onclick="alert(secTranslate(sec_num));">Alert!</button> DILEMMA: Although the first button-alert works, the second fails with the following error message: "ReferenceError: secTranslate is not defined." with a reference to the onclick attribute. QUESTION: How does one explain this phenomenon? Roddy

I'm trying to develop a simple theatre seat reservation system. I'm using a text file "seats.txt", where I store seat number and status (f, r, s) and read the file line by line. If the user clicks on an image the javascript function is triggered and the image will change: <?php $counter = 0; $file = 'seats.txt'; $line = file($file); for($i=0;$i < 14;$i++){ $counter = $counter + 1; $string = $line[$i]; if($counter == 8) { echo "&nbsp &nbsp <img src='R1.bmp' /> &nbsp &nbsp &nbsp &nbsp"; } if(substr($string,4,1) == "f") { echo "<img id=$i onclick='myFunction(id)' src='chkBox_10.bmp' title='0' /> &nbsp &nbsp"; } else if(substr($string,4,1) == "s") { echo "<img id=$i onclick='myFunction(id)' src='chkBox_2.bmp' title='2' /> &nbsp &nbsp"; } else if(substr($string,4,1) == "r") { echo "<img id=$i onclick='myFunction(id)' src='chkBox_1.bmp' title='1' /> &nbsp &nbsp"; } else { echo "<img id=$i onclick='myFunction(id)' src='chkBox_3.bmp' title='3' /> &nbsp &nbsp"; } } ?> <script> function myFunction(imgID) { var img = document.getElementById(imgID).title; if (img == "1") { window.alert("Reserved seat!"); } else if (img == "2") { window.alert("Sold seat!"); } else if (img == "3") { window.alert("Handicap seat!"); } else if (img == "4") { document.getElementById(imgID).src = "chkBox_10.bmp"; document.getElementById(imgID).title = "0"; } else { document.getElementById(imgID).src = "chkBox_4.bmp"; document.getElementById(imgID).title = "4"; } } </script> My question is now: How can I get the selected seats (from the client side javascript) into a shopping cart (eventually on another page)?

Hello & Thanks , I am learning from this example : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onclick I want to put the .js in a separate file , <script src="skel-main-2.js"></script> instead of within the .html . Code is here : quick.js: www.liesandcowpies.com/testMe/Quickjs/quick.js (if needed) html: http://pastebin.com/EQUTDd4y js: pastebin.com/HXbrb86M I want to put the .js in a separate file , <script src="skel-main-2.js"></script> instead of within the .html . But when I run it , up comes this console error : Uncaught ReferenceError: myFunction is not defined ? How can I connect .html with .js ? Thanks

I have some code that im trying to enter text into a text box with a button click. example you click button 1 and enter 1 into text box. I tried it on jsfiddle it works but just in a regular page it dosent work it gives me [object HTMLInputElement] in the text box. <html><head> <script src="jquery-1.7.1.js"></script> <script src="sprintf.js"></script> <script type="text/javascript"></script> <script>function NUMBERS(num){ var txt = document.getElementById("textfield").value; txt = txt + num; document.getElementById("textfield").value = txt; } </script></head><body><p> <input type="text" id="textfield"></p><p> <input type="button" name="no" value="1" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="2" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="3" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="4" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="5" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="6" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="7" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="8" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="9" onClick="NUMBERS(this,value)"> <input type="button" name="no" value="0" onClick="NUMBERS(this,value)"></p></body></html>

I am trying to run a function that will convert a number and output it to a program. I have 2 different buttons and i want them to do a different event but i dont know what parameter to send to the function. Html code <input name="COM1" type="button" id="COM1" value="COM1 A" onClick="COMSET(paramter1)"><input name="COM1S" type="button" id="COM1S" value="COM1 S" onClick="COMSET(parameter2)"> Javascript function COMSET(){var FREQ = Number(prompt ("Frequency"));var jqXHR;$.ajaxSetup({ async: false });jqXHR = $.getJSON("http://" + location.hostname + "/clear_events", function(dane) {});jqXHR = $.getJSON("http://" + location.hostname + "/add_event?name=COM1A&eventname=COM_RADIO_SET", function(dane){});jqXHR = $.getJSON("http://" + location.hostname + "/add_event?name=COM1S&eventname=COM_STBY_RADIO_SET", function(dane){});$.ajaxSetup({ async: true });FREQ = FREQ.toFixed(2);alert(FREQ);var n1 = FREQ.substr(0, FREQ.indexOf("."));n1 = n1.substr(n1.length-2);alert(n1);var n2 = FREQ.substr(FREQ.indexOf(".")+1,2);alert(n1 + " : " + n2);var bcd = (parseInt(n1.charCodeAt(0) - 0x30 )<<12) + (parseInt(n1.charCodeAt(1) - 0x30 )<<8) + (parseInt(n2.charCodeAt(0) - 0x30 )<<4) + parseInt(n2.charCodeAt(1) - 0x30 );alert(bcd);var jqXHR;jqXHR = $.getJSON("http://" + location.hostname + "/set_event_value?name=COM1&value=" + bcd, function(dane) {});jqXHR = $.getJSON("http://" + location.hostname + "/set_event_value?name=com1s&value=" + bcd, function(dane) {});}

Admittedly I'm fairly new to Javascript, but I've taken numerous tutorials, classes, and have searched for hour online and I can't seem to figure out how to make my script work, and have edited it and edited it so many times I just want to start over. What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it. I have this much, but as I've said I've looked through so many tutorials that I just scrapped loads.http://jsfiddle.net/petiteco24601/hgo8eqdq/ $(document).ready(function () {$(".talkbubble").mouseout(function(){$(".sidebar").show();});$$(".talkbubble").click(function(){$ How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?

Hi all, This will be probably the newbiest question you have had to deal with! is it possible to trigger an event on one page which changes the source of an image on a different page? Background: I have created a display page with either red or green status indicators. The child page will have the "Controls" Here is my function function change() { var image = document.getElementById("imageID"); image.src = "red.png" } On the "Control" page I have a button with onclick attribute <input type="button" value="Hard Down!" id="hybButton" onclick="change();"> On the display page I have an image with an ID of "imageID" I can't get it to work, both pages are linked to the same .js file

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]

hi, I am very new to javascripts, I hope this is no to easy or absurd and you will ignore it... pleas don't! I am trying to fill out a form using applescripts and do javascript commands, and I have notice that all submit buttons include a tag called "OnClick". My question is.... Were is the code in the OnClick coming from? for example take a look at this page: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onclick in this page the button copy text activates a string called "copyText()" Were is all the code? does it load at the beginning? is it in the server? how can I see and read this code? can I hijack this code and activate my one javascript once I made a few adjustments? Thank you for your time! Brian

I am new to this and have almost achieved what i would like to achieve. I want the complete output text (which comprises of plain text + text from the function to only appear once a button is clicked. At the moment the plain text appears immediately and the text from the function appears as soon as the text box is populated. i have tried to use: <button type="button" onclick="updateTxt()">Run</button> but cant get it to work. Please help <html> <script type="text/javascript"> function updateTxt(field,toField, toField2){ var field = document.getElementById(field); var toField = document.getElementById(toField); var toField2 = document.getElementById(toField2); toField.innerHTML=field.value; toField2.innerHTML=field.value; } </script> Name: <input type="text" id="box1" onkeyup="updateTxt('box1','txt1', 'txt111');"></BR> Country: <input type="text" id="box2" onkeyup="updateTxt('box2','txt2');"></BR> My name is <span id="txt1"></span>, and i named my son <span id="txt111"></span> too. We live in <span id="txt2"></span> </html>

I have run the gradient creation code on its own as the page loads, but now I want to use it in a button click event, so I have tried to enclose it as a function that the button onclick event calls. I get no response at all so I assume I need to pass something in as a parameter, but I cant see what. or does it need an event listener somewhere? index.html testprojectcss.css

I have tried so many different approaches. This is what I currently have. I know it's not pretty but my first goal is to get it to work, then figure out how to make it more elegant. I have a form where the required elements are outlined in red. Then I have a radio button input for contact preference with the choices Email or Phone. I want the input for these respective elements to be outlined in red based on the radio button selection. But if they change their mind, the red box has to go back to not being red anymore... Here is what I have so far... <script type="text/javascript"> function highlight(a,{ thing1 = document.getElementById("a"); thing2 = document.getElementById("b"); thing1.style.border="solid 1px #EE0000"; thing2.style.border="#7F9DB9";} </script><form name="FelixContact" enctype="multipart/form-data" action="process.php" method="post"><table><tr><td>Prefered contact method</td><td><table> <tr><td> <input type=radio name="ContactBy" value="Email" onclick="highlight(EmailAddress,PhoneNumber)">Email<br> <input type=radio name="ContactBy" value="Phone" onclick="highlight(PhoneNumber,EmailAddress)">Phone<br> </td></tr></table></td></tr><tr><td>Email Address</td><td><table id="EmailAddress" border="0"><tr><td> <input type=text name="EmailAddress"></td></tr></table></td></tr><tr><td>Phone Number</td><td><table id="PhoneNumber"> <input type=text name="PhoneNumber"></td></tr></table></td></tr> I also tried onchange instead of onclick and it didn't work either

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 am working on a project, and i need the new phone image to show up after the bus slides in... http://webapps.easy2.com/ce/ext1104/messages/iris_messages.html

Pretty straight forward question I think... I'm redesigning my website buttons to use an image sprite. I can get them to display the normal image from the sprite, as well as the :hover image, but I'm having no luck finding a way to get the button to change appearance when you click on the button (not in the new page, but the actual "onclick"). Is this even possible with an image sprite and CSS or would I need to implement something else? I've found absolutely nothing on the internets related to this. Thanks!

I have this php script stop.php <?phpinclude('ssh_con.php');$stop = 'screen -S testapplication -X quit';ssh2_exec($con, $stop);mysql_query("UPDATE servers SET Online=0 WHERE Owner='".$_SESSION['Username']."'");echo "<meta http-equiv='refresh' content='0;index.php'>";?> now i want to execute/call/get this page/script using javascript onclick to execute the code and the page refreshes itself. Can anyone guide me to do this? Thanks before hand.