Mike3456

July 20, 2016

The value of id attribute is supposed to be unique. It doesn't make any sense to use a CSS selector with an element name in front of #id_name, in the sense that no two elements can have the same id value. W3C website implies that two different elements can have the same id. Theoretically, there is a special case for h1#chapter1 where there is a different element with id=chapter1 but in such case there could not be h1 with id=chapter1 in the same document anyway. Such special cases have to be described in any spec and not left out to speculations

This excerpt is from

---------------------------------------------

https://www.w3.org/TR/css3-selectors/#id-selectors:

The following ID selector represents an h1 element whose ID-typed attribute has the value "chapter1":

h1#chapter1

The following ID selector represents any element whose ID-typed attribute has the value "chapter1":

#chapter1

The following selector represents any element whose ID-typed attribute has the value "z98y".

*#z98y

----------------------------------------------

July 16, 2016

In JavaScript, any non-empty string is supposed to evaluate to true, e.g.

Boolean("0"); // true

Boolean("1"); // true

Boolean("2"); // true

Boolean("a"); // true

However, in comparisons where casting is required, JavaScript does not evaluate correctly, e.g.

(true == "0") // false

(true == "1") // true
(true == "2") // false
(true == "a") // false

As you can see, the string "1" with digit 1 seems to be very special and evaluates to true while the others to false

July 4, 2016

Logically, green should be #00FF00 because green is G in RGB where R is #FF0000 and B is #0000FF

However, all the RGB tables list green as #008000 while #00FF00 is actually lime

I played with a browser by setting background color using names and codes and clearly green=#008000 and lime=#00FF00

Some sources provide the codes incorrectly, e.g.

Wikipedia says green is #00FF00 at https://en.wikipedia.org/wiki/Green

It also says lime is #BFFF00 at https://en.wikipedia.org/wiki/Lime_(color)

April 29, 2016

I have been playing with the float property. As an example I use two consecutive paragraphs but you could substitute other elements as well.

Once I set float: left for the first paragraph, the second paragraph fails to position next to the floated first paragraph as long as its width/height are set.

It works as expected with float:right, or the second paragraph has no width/height

================================

<!DOCTYPE html>
<html>
<head>
<style>

#p1 {
float: left;
width: 100px;
height: 50px;
}

#p2 {
width: 100px;
height: 50px;
}

</style>
</head>
<body>

<p id="p1">paragraph1</p>
<p id="p2">paragraph2</p>

</body>
</html>

April 25, 2016

That's a behavior I did not expect, except in Internet Explorer. Internet Explorer has a global object called event on the window object, or at least it used to. I'm not sure if they've removed that feature in new versions, after all it is not standard.

When I remove "event" from the parameter list as listed below, it works only in Chrome. I tried the same in Firefox and it does not work. But even in Firefox, "event" has to be global because I changed the argument name to "event1" in all calls and this does not work either. This means that Firefox implements these attributes with some kind of kludge where the argument name has to be "event", i.e. global

========================

<!DOCTYPE HTML>

<html>

<head>

<style>

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop() {

event.preventDefault();

}

function drag() {

event.dataTransfer.setData("text", event.target.id);

}

function drop() {

event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<p>Drag the W3Schools image into the rectangle:</p>

<br>

</body>

</html>

April 25, 2016

Inside the event attributes, when an event is fired it will pass an event object with data about the event. It's not global, it's local to the block of code inside the event attribute.

In ordinary Javascript, that's equivalent to the "e" in
element.ondragstart = function(e) {
}
Personally I believe W3Schools should not be teaching people to use attributes for events. They should teach addEventListener() and the older standard event model with events as methods of the object.

I just explained that the event functions can access "event" when it is removed from the parameter list meaning the attributes are now defined as:

ondragstart="drag()"

ondrop="drop()"

ondragover="allowDrop()"

This means "event" is global and comes from JavaScript which is strange in itself because the HTML elements are outside <script> block when "event" is used a parameter

April 25, 2016

On the HTML tutorial page at http://www.w3schools.com/html/html5_draganddrop.asp

the example uses the attributes

ondragstart="drag(event)"

ondrop="drop(event)"

ondragover="allowDrop(event)"

and all of them use the parameter "event" that seems to be a global object. Just to test it, I removed the parameter from all three functions

and made them reference the "event" directly, and it works the same way. The issue is that this "event" is not readily documented. I did some

searches but none led to direct answers. Where is this "event" defined? Usually global objects have longer names with camel notation,

so the name "event" itself is unusual .

April 17, 2016

The jQuery tutorial has an example at:

http://www.w3schools.com/jquery/jquery_dom_add.asp

where they use this line to create a text/paragraph with jQuery:

var txt2 = $("<p></p>").text("Text."); // Create text with jQuery

"<p></p>" does not conform to any selector documented for jQuery or CSS. What is the logic behind it?

April 12, 2016

I have been playing with document.getElementById("...").style to get styles of elements like a paragraph. But this thing returns only the inline styles. If a paragraph does not have an inline style with font-size then JS returns simply an empty string even though its font-size is set explicitly by an internal style font-size: 32px

How do you use JS to get the style that is actually used by a given element at a given moment?

================================

<!DOCTYPE html>
<html>
<head>
<style>

p#p1 {
font-size: 32px;
}
</style>
</head>
<body>

<p id="p1">Paragraph p1</p>
<p id="p2" style="font-size:16px">Paragraph p2</p>

<button type="button" onclick="myTest()">myTest()</button>

<br>
<br>

<script>
var x1 = document.getElementById("p1");
var x2 = document.getElementById("p2");

document.write("fontSize of p1: " + x1.style.fontSize + " (" + x1.style.fontSize.length + ")" + "<br>");
document.write("fontSize of p2: " + x2.style.fontSize + " (" + x2.style.fontSize.length + ")");

function myTest() {
var x1 = document.getElementById("p1");
var x2 = document.getElementById("p2");

alert("fontSize of p1: " + x1.style.fontSize + " (" + x1.style.fontSize.length + ")");
alert("fontSize of p2: " + x2.style.fontSize + " (" + x2.style.fontSize.length + ")");
}

</script>

</body>
</html>

April 12, 2016

I tried to run getElementById() directly from onclick="alert(...)" and it does not work! The alert does not even pop up!

I ran it indirectly from my JS function myTest() then it works fine.

I also ran another function document.hasFocus() directly from onclick="alert(...)" and it works fine.

So what is so unique about getElementById() such that onclick= cannot handle?

================================================

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<p id="p1">Test 1</p>

<button type="button" onclick="myTest()">myTest()</button>

<button type="button" onclick="alert(document.hasFocus())">hasFocus()</button>

<button type="button" onclick="alert(document.getElementById("p1").tagName)">getElementById()</button>

<script>
function myTest() {
alert(document.getElementById("p1").tagName);
}
</script>

</body>
</html>

March 28, 2016

For "A == B" to be true the actual values of A and B have to be equal. In the comparison "null == undefined", both "null" and "undefined" are final values that are different syntactically. They are also different semantically, because for an object to be "null" it has to be explicitly defined as such, whereas for anything to be "undefined" it has to be declared without defining (meaning without initializing). Technically, a variable can be initialized and then set to "undefined" but this is the same as if never initialized. In other words, "null" and "undefined" are different values, both syntactically and semantically.

February 17, 2016

I want to create my own website(s) just to play with PHP and MySQL, to learn them.

Apparently, wordpress.com is a hosting site with extensive support for PHP and MySQL. I would like to see many templates pre-written for many different applications so that I could start playing with them right away while learning. The more features of PHP and MySQL are covered the better. Obviously, the more access to the code the better. Is wordpress a good choice or any other hosting site?

Sign In

Mike3456

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by Mike3456

Why h1#chapter1 and not simply #chapter1?

JavaScript does not cast strings to boolean consistently?

Why is RGB code for green such a mess?

Why do width/height void the float property?

What is global object "event" ?

What is global object "event" ?

What is global object "event" ?

What jQuery syntax is this ----> $("<p></p>")

How do you use JS to get the effective style of an element?

Some document functions do not want to run directly from inside onclick="alert(...)"

What's the JS logic behind for "null == undefined" being true

Any site like wordpress.com to play with PHP/MySQL?

Browse

Activity