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.
Related
I'm in a JSF2.0 application which has many jsf files, each page could has inputs + some selectMenu . I want a concrete solution on how to display a warning message (as a Modal) when the user makes some changes in this current page (filling some inputs for example) and decide to visit other pages or close the current tabs.
So there's a few parts to this.
First of all to create the modal you need a hidden div. You then need some JQuery that will detect any changes made to then pop this modal up.
You can do this by having a div looking like this with the CSS below as well:
HTML
<div class="modal hide">
<p>Content here...</p>
<button class="close">Close</button>
</div>
CSS
.hide{
display: none;
}
.modal{
position: fixed;
width: 50%;
height: 100px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
background-color: red;
color: white;
text-align: center;
}
Then add a class to anything that needs to be alerted when changed. If it's an input that has to be filled out just add the required attribute shown below For example:
<input type="text" name="example" class="change" required>
Then you can use JQuery to detect any changes and display the modal:
JQuery
$(".change").on("change", function(){
$(".modal").removeClass("hide");
});
$(".close").on("click", function(){
$(".modal").addClass("hide");
});
This then shows the modal with a button that gives the option to close it.
In regards to on leaving the page this is much more complex as you could end up giving a warning upon the user successfully submitting a form. Not to mention the user experience issues. Please refer to this answer here: Detect browser or tab closing
I've also put together a working JSFiddle for you here - https://jsfiddle.net/Rockhopper92/vsmLkqLm/
I have a drop-down select box on a web page to select (e.g.) a customer code - this is a short code used on an existing database to represent the customer.
In order to make the UI easier to use, I would like more information to be displayed in the drop-down than just the code - e.g. the customer full name as well.
However, for reasons of space, I would NOT like the customer name to be displayed in the select box when it is not dropped down, just the code.
Can anyone suggest a reasonably easy way to do this? I am currently using jquery in the project, if that's any help.
To summarise - when the select is closed, I want to just display the customer short code. When it is dropped down, I would like to display both the code and the full name in each select option.
It has occurred to me that I could do this by changing the option text, depending on whether the drop-down is open or not. However, I can't seem to find an event that is triggered when the dropdown opens and closes.
That's just not possible. I'd suggest you build a custom droprown, for example:
<div class="dropdown">
<span class="dropdown-label">1234</span>
<select>
...
</select>
</div>
In this case, with CSS you can place the span on top of the select and use pointer-events: none so when the user clicks the span, the select (which is under it) receives the click and opens. Then is just a matter of listening to the select's change event to update the label when an option is selected, with whatever you want to display.
Set the text of the selected dropdown item with $('.dropdown option:selected').text("text") and use javascript string.split() on the value (likely whitespace) that separates the customer code from the name.
I liked a lot the answer from Gabriel
but I have not enough experience with CSS, so I decided to show the full answer
with a very useful example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
#the_td_of_time_zone{
position: relative;
width: 50px;
}
#the_span{
/*To align text horizontally and vertically inside the parent*/
text-align: center;
vertical-align: middle;
line-height: 20px; /* The same as your parent height */
pointer-events: none; /*allow the click to pass through the element*/
position: absolute; /*To help overlap Zone with dropdown*/
z-index: 100; /*To put the Zone on top of the dropdown*/
background-color: #006699; /*To match with Admin Menu background*/
height: 20px;
width: 100%;
left: 0px;
text-decoration: None;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
}
}
#the_select{
position: absolute;
}
</style>
<div id="the_td_of_time_zone">
<span id="the_span">Time Zone</span>
<select id="the_select">
<option>uno</option>
<option>dos</option>
</select>
</div>
</body>
</html>
I'm using simplemodal to pop up a modal on my page. I'm hiding the modal content on page load with display:none. I have the simplemodal-container styled properly, and that pops up fine. The content that's supposed to be in the container, though, remains undisplayed; unless I resize the page. When I do resize it, the content appears just as I want it to.
How do I get the content to appear properly without resizing the page?
Here is roughly what my code looks like, in a phtml file:
<div id="div_for_simplemodal" style="display:none"></div>
<script type="text/javascript">
*script that generates content*
</script>
Then, in a separate JS file:
$("#div_for_simplemodal").modal({overlayClose:true});
And the CSS:
#simplemodal-container {
height: 600px;
width: 1200px;
color: #bbb;
background-color: #333;
border: 4px solid #444;
padding: 12px; }
Again, the simplemodal-container appears fine, but without the content that my javascript is supposed to generate. The content appears on the page and in the container without "display:none" added to "div_for_simplemodal", and appears in the container after I resize the page.
You have used the selector $("#div_for_simple_modal") which doesn't match the ID of the element.
Use $('#div_for_simplemodal');
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
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