Why doesn’t this javascript code for a basic canvas operation work?

Why does the following code not display a black box on the screen. It titles the page Chatroom so at least the beginning part works…

<html>
<head>
<title>Chatroom</title>
</head>
<body>
<canvas id=“chatroom” width=“240 height=“400”></canvas>

const canvas= document.getElementById('chatroom');
const context=canvas.getContext('2d');

context.fillStyle ='#000';
context.fillRect(0,0,canvas.width,canvas.height);

</body>
</html>

Thank you!


Source: stackoverflow-javascript

Find and replace <?php & ?> in string

I have a large string of valid HTML code that will be inserted into the DOM, the string also contains PHP code. I want the php code to be displayed as plain text, Chrome automatically comments out the PHP code. Obviously the PHP code is wrapped in <?php ... ?> so my question is:

How can I replace the open <?php with a <span> tag, and replace the ?> with a </span> to close the open <span> tag so that the PHP code is within the <span> tags and therefor visible as plain text?

EDIT: I will be wrapping the PHP code back in <?php ?> by replacing the span, so escaping the characters will make that more difficult.


Source: stackoverflow-javascript

Delete elements below some element using jQuery

I’ve next code:

$(function () {
    $('#delete-button').click(function () {
        deleteElementsBelow('#parent-container', 'element-2');
    });
    
    function deleteElementsBelow(parentContainerSelector, deleteBelowSelector) {
        var deleteOthers = false;
        $(parentContainerSelector).children().each(function () {
            var $elem = $(this);

            if (deleteOthers) {
                $elem.remove();
            } else if ($elem.hasClass(deleteBelowSelector)) {
                deleteOthers = true;
            }
        });
    }
});
#parent-container div {
    background-color: red;
    width: 20px;
    height: 20px;
    margin: 10px;
}

#parent-container div:nth-child(2n) {
    background-color: green;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<button id="delete-button" type="button">Delete</button> </div>

Is it possible to do action deleteElementsBelow by native jQuery API?


Source: stackoverflow-javascript

How do I a get SPECIFIC string from webpage and then use it in my own JavaScript code?

So basically, I need to get a SPECIFIC number from a website’s page source via Google Chrome and then use that number in my own js code. The number from the website is not from it’s HTML, but from one of it’s scripts. There are some pictures below to help you better understand.

View image here, because I don’t have enough ‘reputation points’…

As you can see in the picutre circled in red, that is the number I want to take. It changes everytime the page reloads so I need a script (if possible) that will reload the page, find and take that number (it will change everytime it reloads), and then use it in my own JavaScript function as a variable or something.

The url in Google Chrome is: “view-source:http://www.investopedia.com/simulator/portfolio/?gameid=383710

NOTE: Because this is from a page where the user has to be signed in, you will not get the same page source code but that’s why I gave you a picture.

I have searched everywhere on the internet and cannot find any answer to my question so maybe you could help. Thanks a lot!


Source: stackoverflow-javascript

Different Color in The Active Navigation Button

I would like to change the background color of the menu button when I’m on the page

enter image description here

This is my code:

HTML

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

I know that I have to use Javascript but I don’t now the code to change the class when the link is active.


Source: stackoverflow-javascript

targeting a specific nav div in code

I have the following code which applies classes to the <nav> element. The code works so no issues there.

$(document).ready(function() {

$(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
        $('nav').addClass('stick');
        $('nav').css('top','0');
    }

    if ($(window).scrollTop() < 300) {
        $('nav').removeClass('stick');
        $('nav').css('top', '0');
    }

});

});

however I use two elements in my website so I only want the code to apply to this specific nav

html

<nav role="main-navigation">   ...  </nav>

As well, I would also like the code to ONLY apply to this nav element on screens >768px


Source: stackoverflow-javascript

html form doesnt ‘ work after Jquery load()

I have a problem with jQuery load() and html forms.
After loading a div from a php. file into a div, the form doesn’t work anymore:

jquery:

script>
        $(document).ready(function ()
        {
            $("#buttest").click(function ()
            {
                $("#ajax").load(
                        "Vokabeltrainer_sec.php?Lektion=<?php echo $lection ?> #area"
                        );
            }
            );
        }
        );

HTML-Form:

<?php
                            echo '<form action="Ergebnis.php" method="post">';
                            generateRadio($translation, $firstWord, $i, $index, $lection);
                            echo '<form>';
                            ?>

The .php function is generating radio buttons.
Before reloading the div evrything works fine! Of course there is also a submit-botton:

<button type="submit" name="submit" value="Submit" id="subbut" class="btn btn-default">weiter</button>

Sorry for my bad english!


Source: stackoverflow-php

changed values not showing after PDF conversion with wkhtmltopdf

Currently inside my html page I change some values, the way it works is like this:

The function:

function change1(){
   var myNewTitle = document.getElementById('myTextField1').value;
   if( myNewTitle.length==0 ){
       alert('Write Some real Text please.');
   return;
   }
   var titles = document.getElementsByClassName('title1');
   Array.prototype.forEach.call(titles,title => {
    title.innerHTML = myNewTitle;
   });
}

The values that get changed and the textfield used for input:

      Voornaam: <h3 class="title1">Kevin</h3>
      <input type="text" id="myTextField1"/>
      <input type="submit" id="byBtn" value="Change" onclick="change1()"/><br/>

      <p class="title1">Test.</p>

And I convert using wkhtmltopdf, which is a command line tool for html to PDF conversion. However the changes I make are ofcourse not done on the server but locally, and this is why my changes do not show in my conversion.

I was thinking about downloading the changed html page first and then convert it with wkhtmltopdf.
Would anybody be able to give me an example of how this could be done or perhaps some me another and better way?


Source: stackoverflow-php

How to get name attribute of an image from php when click on it

I want to get the name attribute of an imagen when someone click on it.
Then, with the name, I will access a MySQL database with this name as a searching parameter for the query.
But I am not able to get the name of an image from php.

Can someone help me?

This is the code that I have, I suppose to have a php function in the onclick attr.

<a class="img_a" onclick="" name="xxx">   
    <figure class="img_figure">
        <img class="img_user" src="users/xxx.png" alt="">
    </figure>
</a>

<a class="img_a" onclick="" name="yyy">   
    <figure class="img_figure">
        <img class="img_user" src="users/yyy.png" alt="">
    </figure>
</a>


Source: stackoverflow-php