Help me with my new website!

[FlatAssembler]

What do you guys think, why do people say that programming requires mathematics and physics?
To me it seems exactly the opposite. Applying the knowledge of mathematics and physics appears to be a way to get away with not knowing how to do something the right way.
For instance, you can make conical gradients using trigonometry and JavaScript, but if you know how to use Photoshop and advanced CSS, you are going to get better results. If you know the physical formulas, you can make a pendulum move perceptively correctly in your analog clock, but you will get better results if you use a physics framework.
What do you think about that?

[KevinM1]

At the university I went to, physics was a requirement for a computer science degree. Not for programming’s sake, but because the degree was a science degree. I actually found the required electrical engineering classes far more interesting and relevant.

In any event, like always, use the right tool for the job at hand. JavaScript is really good at manipulating the DOM (of course it is... that’s why it exists), but styling the DOM should be done with CSS (which is why it exists), preferably in external files in order to separate concerns and make writing/debugging/editing/extending far easier. Same goes for JavaScript.

[bennyboy]

I guess you don't see the formatting because I wasn't using web safe fonts.

By the way, do you have an idea how to make popups in a relatively positioned container without using inline CSS and inline JavaScript? I have made them here, the code doesn't look nice, the popups aren't correctly positioned after you refresh the page in Firefox (I don't know why, they apparently are before you refresh the page), and they aren't correctly positioned at all in Internet Explorer 6 (I don't know why, it otherwise appears to support the directives I was using):
http://flatassembler.000webhostapp.com/I...esian.html

Code:

<span onmouseenter="this.children[1].style.display='block';this.children[1].style.top=this.getBoundingClientRect().top-45;" onmouseleave="this.children[1].style.display='none'">
                   <span>*romk</span>
                   <span style="display:none;position:absolute;background:black;color:#EEEEEE;width:120px;text-align:center;font-size:12px;font-family:Verdana;opacity:0.9;">Compare Lithuanian "ranka" (hand).</span>
               </span>
               (hand)-*lima (hand/five)<br/>
               

1)  IE6 is dead.  Let it die, and move on.  Nobody has it except you, and nobody should.
2)  I don't know exactly what you are trying to do.  When I do popups, I have them centered right in the middle of the screen.  Using auto margins should work fine.

As for your code, try the following, as I find it simpler:
1)  Give your object a unique ID.
2)  Use jQuery with the "#" prefix on the object name, and the built-in hide() or show() methods.
3)  Keep your script separate from the objects.  It's much easier to look at the beginning of a page's markup than to sift through many objects trying to read individual code.

I anticipate that you won't want to use unnecessary bandwidth for jQuery. The script is only about 100k, and gets cached, so you really shouldn't worry about it. Just worry about making coding easier for yourself.

[FlatAssembler]

In any event, like always, use the right tool for the job at hand.

Well, finding what's the right tool for the job isn't the easiest thing to do. Especially when you have, preparing for the programming competitions, read quite a few books about C++ that try to convince you all the other languages (especially C# and Java) suck.
Do you think C++ is really that good for algorithms, data structures and string manipulation as it's portrayed to be? Now it seems to me that it's one of the worst languages for those things. Have you ever tried to use Emscripten? What do you think about it?

IE6 is dead. Let it die, and move on. Nobody has it except you, and nobody should.

Well, almost everyone who has Windows XP has it (along with a few better browsers). Most of the Internet forums even today appear to work just fine in it.
Besides, the NetFront browser on my old Samsung SGH-E840 appears to behave just like Internet Explorer 6. When it comes to JavaScript, it appears to support basic DOM manipulation and alerts, yet it fails to even run the Acid3 test or HTML5 test.
I am not trying to make my website look the same in simpler browsers, I am trying to make the text readable in simpler browsers. That is something to be expected, right?

I don't know exactly what you are trying to do.

I am trying to do this (but not that it's triggered on click, but on hovering):
https://www.w3schools.com/howto/howto_js_popup.asp
However, the solution they present depends on the container for the pop-up being absolutely positioned. I can't make the container absolutely positioned if it has to be scrolled to in the "main" (which has overflow:auto).

I anticipate that you won't want to use unnecessary bandwidth for jQuery.

No, I just don't see how it would help exactly.

[KevinM1]

Windows XP is dead. Outside of governments who are still stuck using old machines, Microsoft doesn't even support it any more. I'd say that the minimum Windows OS you should target is Windows 7. Even though it's near or at EOL, lots of people who didn't like what 8/10 became still use it.

Never heard of Emscripten until now. Looks pretty cool, but it's outside my wheelhouse.

Regarding using the right tool for the job, well, first you need to define the job. Every language will allow you to implement algorithms and data structures, and manipulate strings to a certain extent, and with a certain amount of ease. The question, really, is what do you need? Like, PHP doesn't have pointers, and the way it handles references is kinda half-assed. So, you wouldn't be able to implement your own dynamically linked list (as an example) in it. That said, there are built-in structures/functions that may do what you want. C# is more liberal with direct memory access, but requires such code be marked as unsafe (which does somethings with the intermediary language it gets compiled down into).

And, yeah, part of it is knowing what the strengths and weaknesses of any particular language are. For whatever reason, programming languages are a lot like video game consoles - everyone has their favorite, and there's lots of vocal fans/critics out there saying that this one is great and the other one is terrible, so it's hard to get a clear idea of what each language is like. Branching out and trying different languages for yourself is one of the best ways to learn those things.

[bennyboy]

Well, almost everyone who has Windows XP has it (along with a few better browsers). Most of the Internet forums even today appear to work just fine in it.
Besides, the NetFront browser on my old Samsung SGH-E840 appears to behave just like Internet Explorer 6. When it comes to JavaScript, it appears to support basic DOM manipulation and alerts, yet it fails to even run the Acid3 test or HTML5 test.
I am not trying to make my website look the same in simpler browsers, I am trying to make the text readable in simpler browsers. That is something to be expected, right?

I am trying to do this (but not that it's triggered on click, but on hovering):
https://www.w3schools.com/howto/howto_js_popup.asp
However, the solution they present depends on the container for the pop-up being absolutely positioned. I can't make the container absolutely positioned if it has to be scrolled to in the "main" (which has overflow:auto).

No, I just don't see how it would help exactly.

Unless you have a VERY compelling reason to stick to an old browser or an old OS, then I'd recommend upgrading.  There are SO many new features with modern .css and HTML5 that it really is a joy now to work with them, rather than a struggle.

A popup is an object which is placed in front of other content (either by the order you lay things out or using z-index), but which starts out hidden, perhaps with style "display:none".  In order to place it in front of the other content, obviously you'll need a positioning style that takes it out of the positioning flow, and that's what "position:absolute" or "position:static" do.  Other than that, you can position it however you want to.  There's no particular reason to place your popup inside the control which triggers it, but you can if you like.

What your javascript or jQuery will do is handle an event.  In the event, you'll find your object, and then show (or hide) it.  jQuery in this case just allows a nice shorthand, which makes the code more readable.  If my controlling button is called "PopupShower" and my pop is called "MyPopup," then the jQuery code will look something like this. Important: if I ever come back to this code in the future, it will be super-obvious what it does, and very easy therefore to modify or improve:

https://jsfiddle.net/1u6wzs7q/1/

Code:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#PopupShower").click(function () {
            $("#MyPopup").show();
        });
        $("#MyPopup").click(function () {
            $("#MyPopup").hide();
        });
    });
</script>

<span id="PopupShower" style="cursor:pointer; background-color:darkturquoise">Click on me!</span>
<div id="MyPopup" style="display: none; cursor:pointer; z-index:1; position: fixed; top: 45%; bottom: 45%; left: 40%; right: 40%; background-color:pink">Oh snap!  You went and done did it now! </div>

One word of advice.  In modern Chrome browsers, you can right-click an element and "Inspect."  This will give you a very good and easy way of looking at the live markup of the page.  You can see how properties are changing when you click-- it even auto-highlights what part of the markup is being changed so you can easily find it.  Best web-debugging tool ever, IMO.

[The Valkyrie]

I think this now qualifies as re creating the internet...

[KevinM1]

@bennyboy, wouldn’t toggle() be the better option in that example?

[bennyboy]

@bennyboy, wouldn’t toggle() be the better option in that example?

It doesn't really matter much.  I was using different objects to show and hide the popup, so I gave them dedicated functions.  You could also attach the click event to a class-defined collection (using "." instead of "#"), so clicking anything that has that class name will toggle the popup.

https://jsfiddle.net/1u6wzs7q/2/

Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
</head>
<body>
<form id="form1" runat="server">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
   $(document).ready(function () {
       $(".PopupToggler").click(function () {
           $("#MyPopup").toggle();
       });
   });
</script>

<span class="PopupToggler" style="cursor:pointer; background-color:darkturquoise">Click on me!</span>
<div id="MyPopup" class="PopupToggler" style="display: none; cursor:pointer; z-index:1; position: fixed; top: 45%; bottom: 45%; left: 40%; right: 40%; background-color:pink">Oh snap!  You went and done did it now! </div>
</form>
</body>
</html>

Off-topic but maybe interesting:

I very often use a class-collection technique in jQuery for making repeatable custom controls, making the class name also include some kind of useful information. For example, I'll have a picture control with a class name "UserImage ###" where ### is a userID. Then when any "UserImage" control is clicked, the ".UserImage" click handler parses the UserID out of the class name, and does something useful with it (add homework to that student, delete them, whatever).

It's a very nice little trick, actually, for controlling a lot of repeatable objects which need to carry their own information: a collection of cards you want to be able to turn over for a game, items in a graph that you want to be able to click to use JASON to populate an order popup, etc. You can also use mouseover events to popup the name of an image and so on very easily.

[KevinM1]

Ah, I didn’t realize that you attached show() and hide() to different elements’ click events.