The paragraph is green. Why?

I came across this sort of “CSS riddle” recently.

It goes something like this.

Given this CSS definition,

body {
  max-width: 28em;
  margin: auto;
  padding: 1em;
}

html {
  --color: green;
}

body {
  color: yellow;
}

p {
  --color: inherit;
  color: red;
  color: var(--color, blue);
}

what would be the color of the <p> element?

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>

Source: https://codepen.io/shshaw/pen/wvJmOOq

ANSWER

The output color is Green. As if the title wasn’t a giveaway.

Try it out yourself too.

Here is an explanation: https://twitter.com/SelenIT2/status/1400832345016606722

Quoting from that Tweet:

It does inherit it. But then the color gets overridden with the inherited value of the *custom property* named `–color`, which doesn’t know anything about the actual `color` property and gets independently inherited all the way down from `html`

Can’t copy text from webpage?

Sometimes I come upon a website that I cannot copy text from a HTML web page. Simply cannot click and highlight the lines I try to select for copying. I thought that my browser/mouse was not working. But I go to other sites, I am able to highlight/copy normally. They must’ve done something on that page probably to prevent content from being lifted of the page easily?

Why is this and how do they do it? Is this a javascript in the page that prevents me from copying?

ANSWER

Could be a script on the webpage. I’m certain that can be done or already been done through Javascript before.

I know that the same effect can be achieved via CSS alone. It is easier, cleaner and does not add to another Javascript messing up or slowing down a site. I prefer this method over the other.

Below are the CSS lines that does what you want. Different ones for different browsers. It is vendor specific for some, but does the same exact thing.

   user-select: none; /* Supported by Chrome, Firefox & Opera */
  -moz-user-select: none; /* Firefox (older) */
  -ms-user-select: none; /* Edge */
  -khtml-user-select: none; /* Konqueror */
  -webkit-touch-callout: none; /* Safari for iOS */
  -webkit-user-select: none; /* Safari for Mac */

Try it out. You can make it for entire page/site.

* {
     /* CSS lines go here */
}

Or you can make it so only targeted content will have it using Class or ID selectors.

#text-no-select {
     /* ID selector -  CSS lines go here */
}

.text-no-select {
     /* Class selector -  CSS lines go here */
}

Be aware this does not totally prevent anyone from copying content on a website. There are many other ways to go around this or even with a Javascript impementation. It is a minor roadblock.

several forms in 1 html file and closing a modal when data is valid

i am new to django and html along with css. created my html and css and now working on developing with django. I have 3 forms in 1 html file. login, register and forgot password. Have been breaking my head and couldn’t find a proper solution. what i did so far is create the register form (which is a modal done with css) but don’t know how to define a new form in the same html.
views file:

def index(request):
form = RegisterForm()

if request.method == 'POST':
    form = RegisterForm(request.POST)
    if form.is_valid():
        form.save()
        user = form.cleaned_data.get('username')
        messages.success(request, 'Membership was created for ' + user)
        return redirect('http://127.0.0.1:8000')

context = {'form':form}
return render(request, "index.html", context)

how to add another form which is under index.html?
also i tried the above method for the redirect to close the modal but it is not closing
appreciate someone’s help to explain to a newbie on the solution or provide some link with a solution. on how to add another form to the index.hml and hoe to close the modal once the form is valid and submitted

Go to Source
Author: rabih

jquery: adding rows at the bottom of a table make table y-scroll jump into to start position

I’ve created a “log viewer” method that contains a table with a fixed header; initially this method loads 200 lines into the table, and will load more lines on demand. If you scroll down (until certain y-scroll % ) method will do a request to server asking for a further 100 lines from bottom, then will catch these lines and append them at bottom of this table…

Similar behaviour is for the top if y-scroll reach certain % of table ‘y-scroll’ and the top line is not the initial line, it will request 100 (or the number of lines to the top if less than 100) and insert those lines into the top.

This is working perfectly so I’m very satisfied with it; as it is what I wanted.

All rows are kept in a “<tbody>” block

Now Here is my problem: in some occasions when method is adding new lines at the bottom of the table, the table ‘y-scroll’ jump from its position to start position which is not what I want, as it makes experience very annoying…

Expected behaviour will be: table y-scroll will move slightly up while is appending new rows into the bottom of the table.

This happens if you try to scroll yourself picking the scroll bar with the mouse and dragging it yourself, or pressing PgDown key, or pressing DownArrow Key…

Here is the code of this method:

$.getJSON(
        "get_logfile",
        {
          "logfile_hash_key": logfile_hash_key,
          "initial_line":  initial_line,
          "requested_rows": requested_rows,
          "web_request": true
        },

        function(data)
        {
              // I need to reverse the array to start inserting on the table, because otherwise inserted
              // lines will be reversed
              //
              // If request is from top...
              if (requested_rows < 0) {
                    new_initial = initial_line + requested_rows
                    if (new_initial < 0){
                        initial_line = 1
                    }
                    sinitial_line=document.getElementById("initial_line").attributes["data-value"]
                    sinitial_line.value = new_initial
                    starting_row = 0
                    data.reverse()
              }
              else { // if Request is from bottom...
                    new_final = initial_line + requested_rows
                    if (new_final > file_line_count) {
                         new_final = file_line_count
                    }
                sfinal_line=document.getElementById("final_line").attributes["data-value"]
                last_row_on_table=document.getElementsByClassName("tb-Log-Viewer")[0].rows.length - 1

                starting_row = -1

                sfinal_line.value = new_final

              }

              $.each(data, function(key,value) {
                    row = table.insertRow(starting_row)
                    cell=[]
                    for(cell_n=0; cell_n < value.length; cell_n++){
                        cell[cell_n] = row.insertCell(cell_n)
                        // verify cell has a "String" value
                        //
                        if (data[key][cell_n].__proto__ == "".__proto__) {
                            cell[cell_n].innerHTML = data[key][cell_n]
                            if (cell_n == 0) {
                               cell[cell_n].style = "text-align:center"
                               cell[cell_n].className = "Line"
                            }
                        }
                        // Check value for given cell is an array
                        //
                        if (data[key][cell_n].__proto__ == [].__proto__) {
                            cell[cell_n].innerHTML = data[key][cell_n][1]
                            attributes = data[key][cell_n][0].replace("style=","").replace(/'/g,"").trim().replace(" ",";")
                            cell[cell_n].style = attributes.replace("bgcolor=","background-color:")
                        }
                    }
              }
          )
        }
     )

Here is the HTML portion of this that define the table (All this is being generated by a python code):

...
<table class="logviewer" width="85%" border=1 cellpadding=10 cellspacing=0>
<thead class="th-Log-Viewer">
<style>
.Line {
   width: 70px;
}

.Timestamp {
   width: 170px;
}

.Severity {
   width: 80px;
}

.Message {
   width: 1800px;
}

</style>

<tr class="tr-Log-Viewer">
<th  class="header-Line">Line</th>
<th  class="header-Timestamp">Timestamp</th>
<th  class="header-Severity">Severity</th>
<th  class="header-Message">Message<div class="rows-data"><table><tr><td><span id="scroll-action"></span></td><td><span id="top-row"></span></td><td><span id="bottom-row"></span></td></tr></table></div></th>
</tr>
</thead>
<tbody class="tb-Log-Viewer" onscroll="Log_Viewer(this)">

<tr>
<td class="Line" style='text-align:center'><a id='1'>1</a></td>
<td class="Timestamp" style='text-align:center'>2020-07-07 08:19:48</td>
<td class="Severity" style='text-align:center' bgcolor=#3cb371>INFO</td>
<td class="Message" style='text-align:left'>[INFO ] 2020-07-07T08:19:48,516Z [main] cliutils.CliWrapperBase. - Application Args: generate-node-info</td>
</tr>

...
</tbody>
</table>

So what could be causing this table y-scrolling jump into starting position???

Thank you.

I’ve asked this question on StackOverflow but it has couple of weeks and no answer…

Go to Source
Author: Larry

Port Forwarding – Server responds to remote Java request, responds via local browser, can’t be reached in remote browser

I am hosting an Apache Tomcat instance on a server which is used to display a web page.
It needs to be remotely accessible via a browser.
The web page runs normally via localhost and I have setup port forwarding to make it remotely accessible.
I have tested the port forwarding with Java and successfully connected to the sockets.
Despite being able to connect to the socket, when I attempt to access it via a remote browser is returns “site can’t be reached”.

Locally
Local Browser – Web page runs as expected on localhost:8080

Remotely
Socket test – pass
Remote Java Request – Responds with full html of web page
Remote Browser – Site can’t be reached

Does anyone know why only the remote browser portion would fail, while remote requests sent through Java would work?

Go to Source
Author: jorbo

Is it safe to embed a google form on a website without an SSL Certificate?

I designed a Google Form for a website which does not have an SSL Certificate. I have planned to embed it onto a page using an iframe tag. I am currently testing it and have published a test page with the form, but when I fill out any of the fields Google Chrome says that the page is,

Not Secure

but it is in red unlike the normal grey.

The form is not asking for any information such as credit card numbers, but it is asking for name, email, and some other information.

Is this safe to embed the Google Form or does the site need an SSL Cerficicate?

Go to Source
Author: Vtex

Adding HTML to posts with certain tags?

When I want to add a site-wide HTML code (before the closing tag) to each post and page in my site, I always go to my:

  • WordPress Panel > Customize > Theme Settings > Header/Footer Scripts > Footer Scripts

And paste the code there. Works perfectly fine.

But now I want to add this code only to my posts with certain tags. I tried this (tags are X Y and Z):

function wpb_hook_javascript_footer() {
  if (has_tag ('X' 'Y' 'Z')) { 
    ?>
          // My HTML Code goes here
    <?php
  }
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

But I guess it doesn’t work (update keeps loading, never ends)?

Any words of wisdom?

Go to Source
Author: user190411