Develop Reference

embedded javascript alert message not showing in google sites personal webpage

I embedded below code into my google sites page. for some reason the alert window is not popping up.
<form xmlns="myform">
<input id="HelloWorld" onClick="alert('Hi')" type="button" value="HelloWorld"/>
</form>
I tried the code in W3school code editor site and its works. Pictures attached.

google actively blocks stuff like popups in JS and maybe some HMTL implementations. I found a post here and k8oms mentioned his CSS and HTML version works. Check out their write up for a solution k80ms blog post.
2: https://www.k8oms.net/document/popup
My apologies on the late edit.
Use JS to getElelementByID and select a visible/hidden element on myPopup to "show / hide" your window.
popupWindow.js
// When the user clicks, open the popup
function popupFunction() {
// get the HTML element "myPopup" which is defined in your span element
let popup = document.getElementById("myPopup");
// toggle visibile
popup.classList.toggle("show");
}
Next you need to style your window with CSS something very basic would be.
style.css
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
}
Then we can create an onclick to call popupFunction() from your HTML page.
id="myPopup" is the important thing here, this is where JS's getElementById attaches itself to.
<button onclick="popupFunction()">clickMyButton
<div class="popup">
<span class="popuptext" id="myPopup">
Here is your "alert box" 🫤 not perfect. <br>
But you can place this span anywhere you'd like, including pop over all content like an alert box.. Just need to create a box template for "alerts".</span>
</div>
</button>
This is a very basic way to create an "alert" style popup window. If you were to define a stylized box with CSS that looks like a modern alert box you can call the <span class="popuptext" id="myPopup"> anywhere in your HTML to create a popup window. Areas such as a header or upper banner area would be a good place to add this span so it would display in the same spot "top & center" just as an alert box would.
I have a slightly styled answer over on my GitHub as I worked towards a solution, with a href link as a makeshift close button.

Weird behavior CSS overflow-y

I'm making a scrolling menu that has a list of cards, Each card has a button that shows more information.
the problem is that the overflow-y property hides the (toggled info) that should appear at the left side of the menu.
enter image description here
as you can see in the picture, I wanna get the (overflow-x visible) for the card-list but making it overflow-y: auto/scroll simply hide it
code Sandbox if you wanna take a look at the code:
https://codesandbox.io/s/github/Machfar-Souhayel/TestingOverflowBehavior

You could have the expanded version outside of the original list and just alter it to fit the item and then make it visible.
It also is not nessesary to create a class that make it visible/invisible and add and remove that with toggledElement.classList.add("show");
Instead just use element.style.display = 'block'; // 'none';
That way you do not need to use the target.children property but can call the function with an argument.
<button onclick="toggleClass('Title','Content');">Expand</button>
<script>
function toggleClass(header, content){
document.getElementsByClassName('expanded')[0].innerHtml = `<h1>${header}</h1><br><p>${content}</p>`;
document.getElementsByClassName('expanded')[0].style.display = 'block';
}
</script>
<style>
.expanded{
position: abolute;
top: 50vh;
left: 50vw;
transform: translate(-50%,-50);//just for some styling
display: none;
}
</style>
<div class="expanded"></div>
I hope I could help you.

Animating the "body" tag in jQuery does nothing

So one of the buttons on my site's nav bar brings down a small grey tab from the top which tells you about the site. Here is the code I'm using for the animations:
var aboutMenu = function(){
$(".aboutButton").click(function(){
$("body").animate({top: "42px"}, 200);
$(".about").animate({top: "0px"}, 200);
});
}
$(document).ready(aboutMenu);
The idea is that the body of my website, along with all its content, moves down 42 pixels. This is whilst the content in the "about" class moves down so that it's visible on the screen. If you do click on the "About" button, all that happens is the grey tab moves down, but the body stays where it is. This would not usually be a problem, except the tab obscures the rest of the nav bar.
Here is some more relevant code (if needed):
HTML:
<div class = "about">
<p align = "center">placeholder text</p>
</div>
and the actual link:
<li> <a class = "aboutButton">About this website</a></li>
CSS:
.about{
background-color: gray;
top: -42px;
height: 42px;
position: fixed;
}
.about p{
color: white;
}
.aboutButton{
cursor: pointer;
}

As mentioned in my comment, to be able to animate top (or other positions for that matter), you need to set a position: ... (e.g. position: relative;.

You could try using a different way to call your function, e.g. add this attribute to your link: `onClick(aboutMenu())
Also try putting an allcontent div around everything and animating that, body tags aren't that good for animations

Make a div a link in JavaScript?

Everything I've searched for has shown about making a full div clickable, what I'm wondering is, is it possible to make a div in to a clickable link using just JavaScript and the div ID?
I have a layout of boxes and if a value in my database, I want PHP to echo some values in to JavaScript and say if this box is taken, give this div (boxID) the link that relates to it from the database. Only, there aren't going to be links on every div, as some won't exist in the database.
I suppose the alternative to this is wrapping each div in a <a> tag and an if exists statement?

In pure JS:
document.getElementById('your-div').addEventListener('click', function() {
location.href = 'http://your-url.com'
}, false);
By jQuery
$('#your-div').on('click', function() {
location.href = 'http://your-url.com'
});

you can easily make it so that when you click your div you go to another page, like this (using jQuery)
$('#myId').click(function () {
window.location = 'newurl.php';
});

In html5 you can just do:
<div>test</div>

This solution is for html <= 4. For html5, please read #Spencer solution.
Since the javascript is probably not what you want (waiting for extra comments), here's a example of how to do this in pure html/css. An anchor tag that fills completely a div, making that div clickable.
html:
<div>
<a href = "http://whatever.com/">
</a>
</div>
css:
div {
width: 200px;
height: 200px;
position: relative;
background-color: red;
}
a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 255, 0, 0.5);
}
Demo in jsfiddle (background-color added for demonstration purposes):
http://jsfiddle.net/Gx3f5/

jQuery fadeIn making page scroll to top / jump

jQuery is destroying me this week. I'm using fadeIn via jQuery on my portfolio site (http://www.codeisdna.com) to open up a section once it's clicked. Here's the HTML code I'm using:
<div class="project first project_name">
<div class="title">
Project Title!
<div class="date">2012</div>
</div>
<a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a>
</div>
Which opens up a tab:
<div id="project_1" class="project_full pname"></div>
Using this js:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
});
EDIT: Here is the CSS code for .project_full (the expanded tab -- the CSS code for .project is irrelevant):
.project_full {
display: none;
margin-top: 20px;
width: 100%;
max-height: 450px;
padding: 20px 0px;
text-align: center;
background: url(../img/code.jpg) top center no-repeat fixed #293134;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
color: #fff;
overflow: hidden;}
.project_full .wrapper {position: relative;}
I've tried assigning a fixed height to a parent div, e.PreventDefault() doesn't work (I'm using anchor based tabs, so nothing of that sort will work), and so on. The page jumps on the first click and with each successive click. I know it jumps due to the missing content once the div is unhidden and "rehidden."
I'm wondering if HTML5 data attributes would remedy this? But then again, why would it as the anchor would still exist, albeit it being blank (#).
Hopefully someone with a lot more JS experience can help me!

Either change your handler adding preventDefault
$(".project").click(function(e) {
e.preventDefault();
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
Or change your a tag href attribute to be something like 'javascript:'
Or replace a tag with say span and let your click handler remain unchanged.
Or add name attribute to a tag (<a name='project_1'></a>) in right place as it is scrolling to this tag or beginning of the page as there is no ancor with corresponding name