Jump to content

Funce

Moderator
  • Posts

    602
  • Joined

  • Last visited

  • Days Won

    19

Posts posted by Funce

  1. On 8/27/2019 at 3:57 AM, Maheshwaran said:

    Hi All,

     

    Can you please give some coments

    You'll need to show us two, possibly three, snippets of code.

    Your table element showing your form input names. If the submission is done via JavaScript, we'll need to see that bit too.

    Your php showing the processing and database communication.

  2. Usually the green links have separate pages they link to. This means it doesn't matter what's left at the end of your time on a page.

    If you're doing a one-page based system, you might need to add the hamburger closing event onto the links.

  3. And all of the w3schools ad space is google powered, which only shows you what you've been looking at before that.

    If you do not like an ad, you can always report it in the corner of said ad if it says "powered by Google"

    • Haha 1
  4. 1 hour ago, vmars316 said:

    OK  Funce 

    I have poor eysite , and a learning disability ,

    so let me absorb this , it may take a while . 

    I have to see example first and work backwards , 

    I realize it makes more work for you folks , and I apologize for that .

    Apologies vmars, I didn't intend to sound condescending or aggravated. If that is what you heard then allow me to apologize again.

    I'll keep this one short.

    • Take my For Loop
    • Take the Original Drag Element Code
    • Replace dragElement code with my Replacement dragElement code (changing "header" to "mydivheader")

    Result: https://www.w3schools.com/code/tryit.asp?filename=G75VCGLH4SCA

  5. 3 minutes ago, vmars316 said:

    Here's what have so far 
    BUT I am still getting an error:
    " Uncaught TypeError: Cannot set property 'onmousedown' of undefined "
    Pls, what am I doing wrong 

    You've made a lot of unnecessary changes to the dragElement function. The whole function was never designed in such a way that it would take a collection. If you take my first post with the DragElement function, then before it include the for loop I provided, you won't have too many problems.

    4 minutes ago, vmars316 said:

    What is the purpose of these two statements :

    dragElement(document.getElementsByClassName("mydiv"));
    dragElement(document.querySelectorAll("p")); 

    AND what is that purpose called (It must have a name (Then I can study up on it .))?
    AND what are these statements doing ?
    HOW do they relate to  " function dragElement(elmnt) {} "

    If you're unsure about the use of functions, invocations and how they apply, have a look here: https://www.w3schools.com/js/js_function_definition.asp

    If you're specifically looking at our example, I'll provide a small explanation.

    The purpose of dragElement is to bind some onclick events to the provided element. Depending on if it has a header or not, depends on whether the header gets the behaviour or the whole element.

    dragElement(document.getElementById("mydiv")) in this case here, elmnt would be the Element returned by getElementById.

     

    In our example, we're trying to do multiple at the same time, so we first get a list of the elements that have the mydiv class. Then we need to bind each and every one of them with on click handlers. Binding the collection does nothing, as its not an Element and lacks the properties for binding. So a for loop is used as shown in my previous post.
    This means you may treat elmnt, as any one of your given mydiv Elements. Not all of them at once. Only one.

  6. In the HTML code, there are references to the words that are shown, and the image that is shown.

    <div class="container">
      <img src="img_avatar.png" alt="Avatar" class="image">
      <div class="overlay">
        <div class="text">Hello World</div>
      </div>
    </div>

    Replace img_avatar.png with the file name of your own picture on your site to include yours, and change "Hello World" to whatever you would like written when you hover over it.

    To make this a link, you should be able to apply an <a> tag around the container with the link you want it to travel to. If you instead want a button inside your text area, you can put your <a> tag in there.

  7. 3 hours ago, vmars316 said:

    I think I understand what you are saying :

    "document.getElementsByClassName()" returns a nodeList . "

    This was made bold to emphasize that you spelled it wrong (as Element instead) and to indicate plurality.

    3 hours ago, vmars316 said:

    I get error: 

    " Uncaught TypeError: elmnt.getElementsByClassName is not a function " .

     

    Once I solve that , then I can proceed with this following question

    So if " elmnt " is that nodeList ,

    What does it look like ?

    Does it show two "mydiv" ? 

    If so then how do I determine which "mydiv" was clicked ? 

     

    Thanks for sticking with me !

    dragElement is only supposed to take an element, therefore elmnt is an Element. Passing in a NodeList will give you that TypeError, as a NodeList does not have that function.

    If you include my for loop, as written in my previous, in your code, we can see what the error is going forward from there.

  8. You haven't changed your headers from id= to class= in your HTML

    Also, you'll need to loop through the collection provided by getElementsByClass by using a for loop, rather than directly putting it into dragElement

    var mydivs = document.getElementsByClassName("mydiv");
    for (var i = 0; i < mydivs.length; i++) {
      dragElement(mydivs[i]);
    }

    Disclaimer: Untested

  9. vmars, did this solution not work out for you?

    On 8/2/2019 at 9:44 AM, Funce said:

    Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted.

    You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well)
    Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code.

    
    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (elmnt.getElementsByClassName("header")[0]) {
        /* if present, the header is where you move the DIV from:*/
        elmnt.getElementsByClassName("header")[0].onmousedown = dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
      }

    Try this and then go from there.

    The code above should work with this type of HTML provided you've applied dragElement to each one of these that you require.

    <div class="mydiv">
      <div class="header">Click here to move</div>
      <textarea class="textArea" rows="4" cols="20"> </textarea>
    </div>
    On 8/12/2019 at 7:21 PM, vmars316 said:

    Also , 

    
    dragElement(document.getElementById("mydiv"));

    what exactly is being put into dragElement ?

    A reference to "mydiv" or "mydivheader"  ? 

    How does dragElement know to only Drag "mydivheader" 

    and not <textarea> . 

    dragElement specifically takes a "mydiv" Element. dragElement only applies the "draggable" behaviour to the header. The reason why the function takes the mydiv Element instead of the header, is that sometimes the header doesn't exist and in that case the "draggable" behaviour is applied to mydiv.

     

    In regards to that other code, the textarea probably prevents propagation of click events in its center area, so it cannot be dragged unless you're right on the edge.

  10. On 8/11/2019 at 4:50 AM, mickylee said:

    I believe there is an error on https://www.w3schools.com/css/css_float.asp page.

    The Example - No float shows the effect of no float.  The image is on the left side of the page and the first line of the text is on the right and centered halfway on the image. where the beginning text is positioned just to the right of the image. That first line is in the wrong position.

    The "Try it Yourself" link example correctly shows where the first part of the text will be: just above the image and left aligned.

    See the two attachments below.

    (Images Removed for Brevity)

    Hi there, thanks for pointing that out.

    There is additional styling on the main page, than as compared to the try-it.

    In particular

    img {
        vertical-align: middle;
    }

    If you were to add the vertical align property to the try-it, it would produce the same result as the CSS page.

  11. mysqli_stmt::bind_param binds each variable to a matching parameter. You cannot match all of them to one. It doesn't work like that.

    (Neither can you attempt to use a string like an array)

    What you can do however, is bind an array using variable length argument lists. Use ... to indicate an argument list as below.

    <?php
    $vals = [101, "ASUS H61M-E", "abcde", 2, 1, 5300.00, 6500.00, 11, 5300, 55528, 101];
    $uq = $mysqli->prepare("UPDATE $tbl SET $cols WHERE $whcol='$whval'");
    if (!$uq) {
    	$msg = "Error1: $mysqli->error!";
    } else {
    	$uq->bind_param('issiiddiiii', ...$vals);

     

    • Like 1
  12. You aren't passing your ID along with your edit action.

    You need to add a line like this

    <?php
    echo "<input type='hidden' name='id' value='".$row['id'] ."' />";

     

    Rather than Echoing all your output, have you considered the following method?
    (<?= ?> is shorthand for <?php echo ?>)

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>Produto</th>
          <th>Valor</th>
          <th>Ações</th>
        </tr>
      </thead>
      <?php
      if ($result->num_rows > 0) {
        ?>
        <tbody>
          <?php
          while ($row = $result->fetch_assoc()) {
            ?>
            <tr>
              <td><?= $row['id']; ?></td>";
              <td><?= $row['produto']; ?></td>";
              <td><?= $row['valor']; ?></td>";
              <td>
                <form action='deletar_produto.php' method='post'>
                  <input type='hidden' name='id' value='<?= $row['id']; ?>' />
                  <button type='submit' class='btn btn-outline-primary' name='editar'>Editar</button>  
                  <button type='submit' class='btn btn-outline-primary' name='apagar'>Apagar</button>
                </form>";
              </td>";
            </tr>
          <?php
          }
          ?>
        </tbody>
      <?php
      } else {
        echo "0 results";
      }
      ?>
    </table>

     

  13. On 8/1/2019 at 10:47 AM, vmars316 said:

    Hello & Thanks ,

    In the "howto/tryit.asp?" page  the 

    'Your Code has Been Saved
    File has been saved to:'

    pop doesn't give any filename. 

    Is there something I am doing wrong 

    What do I need to do to get it working ??

    Thanks

    Everything working fine on my end. Maybe it was a temporary outage. Can you try it again?
    Unless you're creating your own try it as hypothesized by JMRKER. Then you've got a whole different kettle of fish.

     

  14. 14 hours ago, vmars316 said:

    Referring to the article:
    'Draggable DIV Element' here:
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable

    I would like to have multiple movable <div>s . 
    But having problems . 
    Here is the code so far:

    [Omitted for Brevity]

    I tried many things:
    For one , When I tried changing '#item & id="mydiv" ' to 
    '.item & class="mydiv" .
    I don't understand why that doesn't work .
    class= vs  id=  ?

    Thanks for your help !
     

    Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted.

    You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well)
    Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code.

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (elmnt.getElementsByClassName("header")[0]) {
        /* if present, the header is where you move the DIV from:*/
        elmnt.getElementsByClassName("header")[0].onmousedown = dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
    }

    Try this and then go from there.

    2 hours ago, vmars316 said:

    For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .)

    XcQfW3F.png

    Code block button is here if you've missed it.

    2 hours ago, vmars316 said:

    That uses .id , #mydiv , I want to use .mydiv  instead . 

    And I will have multiple <div class="mydiv"> elements .

    So how can I translate ' ev.target.id)  '  into ev.target.class) ?

    How can I identify which .mydiv was actually clicked .

     Is there a different syntax or format or properties that I can use ? 

    Or is there away to set up an  ' id array ' so that when a click  on  a <div> 

    I know which was clicked ?

    Thanks 

    ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked.

    So rather than document.getElementById, you use ev.target inside this function.

    • Like 1

    TLJ232

    You might be able to do something like this.

    SELECT myFieldA
    FROM myTable
    WHERE (myFieldA - Trunc(myFieldA, 2) <> 0);

    Anything with a 0 decimal should end up as 0 and would be omitted. You can reverse this by changing <> to =

  15. Hi there Alejandro,

    The JSON HTML page is different to the JSON PHP due to what they are illustrating.

    Unlike some of the other tutorials, they do not use sequential examples. This is to avoid someone having to learn a lot of unrelated things to the page that they're currently on.

     

  16. <li> elements are block level tags, which means they usually take up the full page width, forcing the next li element to go on the next line.

    By floating them, we can take them out of normal page flow, and put them next to each other.

     

    Putting the float in li means that we float the li. This is the reason why its horizontal.

    Styling li a is actually styling the links and not the container. The container (li) normally goes vertically

  17. Ouch, yeah you're getting undefined because you're accessing the <select> element that has no data on it.

     

    You'll need to put what you had earlier to access the <option> element.

    <script>
    function eventFunction(eventname){
       var selected = eventname.options[eventname.selectedIndex];//get the selected option
       var date = selected.dataset.eventdate;//get the data attributes of above
       var venue = selected.dataset.venuename;
    
       document.getElementById("eventdate").value=date;//set the data
       document.getElementById("venuename").value=venue;
    }             
    </script>

     

    Hopefully this helps.

×
×
  • Create New...