Search the Community
Showing results for tags 'element'.
Found 11 results
-
hello all i am trying to use 'keydown' function to move through html rows. but i could not succeed. here is what i tried-- $("body").on("keyup", function(e) { if ($("#mid").find(".maintable tr[data-selected='Y']").length == 0) { $("#mid").find(".maintable tr").first().data("selected", 'Y').addClass("thisrow"); } else { if (e.which === 40) { $("#mid").find(".maintable tr[data-selected='Y']").next().data("selected", 'Y').addClass("thisrow"); $("#mid").find(".maintable tr[data-selected='Y']").first().data("selected", 'N').removeClass("thisrow"); } else if (e.which === 38) { $("#mid").find(".maintable tr[data-selected='Y']").prev().data("selected", 'Y').addClass("thisrow"); $("#mid").find(".maintable tr[data-selected='Y']").last().data("selected", 'N').removeClass("thisrow"); } } }) in the above code, '#mid' is a div that holds data retrieved from jQuery.ajax function. below is the backend code data from which is attached to the '#mid' div. $data = "<table class='maintable'>"; $sn = 0; while ($r = $q->fetch_object()) { $sn++; $name = $r->name; $aid = $r->aid; $ac_id = $r->ac_id; $ob = $r->ob; $data .= " <tr data-target='acregister.php?aid=$aid&m=e' data-selected='N'> <td>$name</td> <td style='width: 150px;'>$ac_id</td> <td style='width: 150px;'>$ob</td> </tr>"; } $data .= "</table>"; echo $data; here i want to use up and down arrows to move through the rows retrieved from ajax function. on the rows i've attached 'data-selected' value to know which row is selected. and on each keydown function i want change the 'data-selected' value of next row to 'Y' and change its value to 'N' for the previous one. the above code worked only once. it changed the value for new row but didnot change the value for the previous one and hence when i press down arrow, it selects first row but does not move to next row on another down arrow press. please guide me, what i missed?
-
Hello & Thanks for your Help : When <textarea> is enabled , it cancels drag element movement . <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h5>Draggable DIV Element</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Can anyone show me how to fix it ? Thanks
-
Hi, I'm trying to fake the placeholder attribute for a contact form using jQuery. To do so, I placed an input on top of a label tag (which is basically the value I want inside the input), and used jQuery to hide the label when pressing a key and show it back when the field is empty. I used the keypress and keyup events, like so: jQuery(function($){ $(".placeholder").each(function(){ var label = $(this).find("label"); var input = $(this).find("input"); […] input.keypress(function(){ label.stop().hide(); }); input.keyup(function(){ if(input.val() == ""){ label.stop().show(); } […] }); It works just as expected except if I start filling the input out with accents/diacritical signs which will just write on top of my label until I end up pressing a key that doesn't take accents. Is there any chance to fix this issue? Ideally, I would like to make my label disappear when pressing any key. Thanks for your help. Edit: just added an example here https://jsfiddle.net/0kfp10Lf/3/ The label doesn't hide if I start filling out the input with any of the following keys ~ ^ ¨ ` ´, whether I combine them or not with a a, e, y, u, i, o or n. Otherwise, everything's fine. -
i want to introduce my first open source framework. its name is tedjs(easy elemen definer) . a library oriented framework. with this you will can design your html in your way. you can create elements , attributes , text nodes and comment nodes. you can control every thing. could you please visit its documents and tell your comments? i write a complementary library for it. its name is aml. it has some functions to help you. you can use it as a sample. tedjs documents: https://tedjs.org/#page:doc tedjs github: https://github.com/poryagrand/tedjs aml github: https://github.com/poryagrand/tedjs.aml.std thank you in advance
-
Hello, (please accuse me for not using technical terms correctly and such, I am a newbie) I'm trying to add an "active" class to two buttons in a nav menu...one goes to the main/top section button and the other on the btn in the drop down. The code that I'm using works, but I have to do this for three pages and when I add the others some buggy stuff starts to happen. Here's the code that I'm using (at least for the home page and the "public safety" section of the site): <script> var current = window.location.href; if ( current == "http://www.tfmcomm.com" || current == "http://www.tfmcomm.com/" || current == "http://www.tfmcomm.com/index.htm" ){ jQuery('#mainmenu > li > a[href=/index.htm]').parent().addClass("current-menu-item"); } else if ( current == "http://www.tfmcomm.com/motorola/accessories/public-safety/" ){ jQuery('.sub-menu > li > a[href$=/motorola/accessories/public-safety/]').parent().addClass("current-menu-item"), jQuery('#mainmenu > li > a[href$=/public-safety/index.htm]').parent().addClass("current-menu-item"); } else if ( current.indexOf("http://www.tfmcomm.com/public-safety/") > -1 || current.indexOf("http://www.tfmcomm.com/motorola/accessories/public-safety") > -1 ){ jQuery('#mainmenu > li > a[href$=/public-safety/index.htm]').parent().addClass("current-menu-item"); }</script> The code in red is where I seem to be running into a problem. As you can see I'm just separating the two .addClass lines with a "comma". I have a feeling that's not legit. I tried to find the correct way to go about this, but with no luck. Any and all help would be greatly appreciated. Thanks in advance, m@
-
Hello, Let's say I have 2 <div>, one wiith id=A and one with id=B I want that, when hovering the mouse cursor to #A, the div #B performs an animation (let's say a transition). Is that possible with CSS? Thanks for reading, tomatoKetchup
-
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]
-
Hello, Recently i faced a problem which seems very odd to me and I would like to find the answer or at least acceptable explanation. But let's go straight to it. Let's have two divs one inside the other - the code is something like: <div id="imgframe"> <div id="innercont" class="dragme"> <a class="marker" style="left: 1060px; top:658px;" onclick="movepos(1060, 658)"></a> </div></div><button type="button" onclick="displayattr()">Test</button> they are styled with css like this: #imgframe { width: 950px; height: 600px; overflow: hidden;}#innercont { width: 1994px; height: 1144px; position: relative; left: -600px; top: -300px;} And with javascript I am trying to find the top and left values of the #innercont. I have written the following functions: function getx() { var bg = document.getElementById("innercont"); var xs = bg.style.left; var x = Number(xs.replace("px","")); return x;}function gety() { var bg = document.getElementById("innercont"); var ys = bg.style.top; var y = Number(ys.replace("px","")); return y;}function displayattr() { var sum = getx() + ", " + gety(); alert(sum);} Everything so far seems fine, but when I use displayattr() just after the page has been loaded it returns 0, 0. The code works fine when I use javascript to set the position of the #innercont: function reset() { var bg = document.getElementById("innercont"); bg.style.left="-600px"; bg.style.top="-300px";} They say that element.style.top sets or returns the top position of a positioned element, but it appears that it is not the same if we set the position by using css or javascript. So far I have managed to solve the problem by using "getComputedStyle" or adding onload="reset()" to the body tag but I don't want to use either since they mess my code later. If anyone has an explanation why does it happen so I'll be very grateful. Thanks in advance.
-
Hi there!!Is there any way to find the absolute position of an element? (Element.offsetTop, Element.style.top etc, are all give the relative position of the element related to its parent element).Thanks in advance!!Atar.
-
Hello internet - here is what I would like to do: I want to load an html file into a <div> element in my current html file.I have several buttons on my webpage where I would like to be able to click the button so that the <div> element that I placed in the middle of the page (which is sort of large 500px by 500px) will display a dynamic file where I would have more buttons and <a href> links and anything that html page would have coded in it. Where should I start? You help as always is appreciated!!! -
If an element is relatively positioned, its child is absolutely positioned (within the parent container), and the child has a child which is also absolutely positioned. Why is it that the child's child continues to be absolutely positioned relative to its parent container, when it's parent isn't relatively positioned? It seems to go on an on like this.I'm probably just thinking about this the wrong way, but I find it to be confusing. If someone could explain this to me, I would be greatful.
