I want to display a custom message box that an item was added to the cart.I have tried using Bootstrap modals but would want to use CSS instead.The message box should slide from the header and display the message and then dissapear(similar to Bootstrap modals).
<div>
<button type="button" id="notifyProductName" ></button>
</div>
<script>
var display = document.getElementById("notifyProductName");
display.innerHTML = productName + " was added to cart";
</script>
I'm not sure but if you are looking for simple CSS animation.
If you are I think you can use 'transition' property.
Please try this HTML code:
<body>
<div id="popup-msg">
<h4>Product Notification</h4>
<button type="button" id="notifyProductName">OK</button>
</div>
<button onclick="popupMsg()">pop</button>
<script>
var popupMsg = function() {
document.getElementById("popup-msg").style['opacity'] = '1';
document.getElementById("popup-msg").style['top'] = '50px';
}
</script>
</body>
And CSS:
#popup-msg {
position: absolute;
top: -200px;
left: calc(50% - 200px);
width: 400px;
height: 200px;
padding: 10px;
border-style: solid;
border-color: lightgray;
border-width: 1px;
border-radius: 10px;
background-color: white;
box-shadow: 5px 5px 10px #AAAAAA;
opacity: 0;
transition: 0.25s;
}
When you change 'opacity' and 'top' properties from Javascript, it takes some time defined by 'transition' property.
You can make simple animation using this.
Here is my JS fiddle: https://jsfiddle.net/wiany11/07gks6x9/
Related
I made a custom title bar application and then I gave it a file menu also.(electron)
Now I want to open a menu on click of this menu. I want a popup but the popup shouldn't be the standard windows popup for the menus , I want to make that custom too...but crating a new window can become very tedious if it takes too much time.
Most probably I want to instantiate a section , but I have no idea how to do it
The current situation
I have a window with a #container div having a #buttons div having 3 #minimize,#maximize,#close each with a span
The #buttons also has 2 divs .menu1 and .menu2 i want these menus to behave like normal menus in windows like the file and edit menu
<div id="container">
<nav>
<div id="buttons">
<div id="file">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="minimize" onclick="min()">
<span>-</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
<div id="close" onclick="uff()">
<span>×</span>
</div>
</div>
</nav>
</div>
The result is
All the menus and buttons are clickable and have hover colors
Here you need to do something like this:
create the popup window in html and css. Use position: absolute; and z-index to get it to overlay the rest of the application.
Then hide the popup with a css class of for example .hidethat sets the popup to display: none;.
You now need a small piece of javascript to toggle that .hide class. Something like for example a function like this: const togglePopup = () => document.querySelector('.popup').classList.toggle('hide')
Trigger the togglePopup script with the click on one of your elements:
const trigger = document.querySelector('#idOrClassOfTriggerElement')
trigger.addEventListener('click', () => togglePopup()
Add a method for closing the popup with the same type of technique – adding an eventlistener to a trigger element (X icon for example) and calling the same toggle function as in #3.
Hope this was somehow what you wanted to achieve.
EDIT: Example code for a popup overlay:
const popup = document.querySelector('.popup')
const closeBtn = document.querySelector('.popup-close')
const openBtn = document.querySelector('.open')
const body = document.querySelector('body')
const showPopup = () => {
popup.classList.add('fade-in')
body.classList.add('scroll-stop')
}
const hidePopup = () => {
popup.classList.remove('fade-in')
popup.classList.add('fade-out')
body.classList.remove('scroll-stop')
setTimeout(() => {
popup.classList.remove('fade-out')
}, 500)
body.focus();
}
openBtn.addEventListener('click', showPopup)
closeBtn.addEventListener('click', hidePopup)
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fefefe;
z-index: 9;
opacity: 0;
pointer-events: none;
overflow: scroll;
}
.popup-inner {
width: 100%;
position: relative;
padding: 6% 16% 0;
}
.popup-close {
position: relative;
z-index: 10;
text-align: center;
color: #aaa;
font-size: 4rem;
cursor: pointer;
position: fixed;
right: 3%;
top: 3%;
}
.popup-close::before {
content: "\00d7";
}
.popup-close:hover::before {
color: #000;
transition: 0.6s all ease-in;
}
.open {
text-align: center;
cursor: pointer;
background: transparent;
padding: 1rem 2rem;
border: 2px solid;
border-radius: 6px;
color: #000;
font-weight: bold;
position: absolute;
top: 25%;
left: 44%;
}
.open:hover {
background: #ffffff18;
}
.fade-in {
opacity: 1;
pointer-events: unset;
transition: 0.3s all ease;
}
.fade-out {
opacity: 0;
pointer-events: none;
transition: 0.3s all ease;
}
.background {
height: 100vh;
width: 100vw;
background: olive;
margin: 0;
padding: 0;
}
<div class="background">
<button class="open">OPEN POPUP</a>
</div>
<!-- Add popup at the bottom of the html document, before </body> -->
<div class="popup" role="dialog" aria-label="Popup">
<div class="popup-close" role="button" arial-label="Close popup" tabindex="1"></div>
<div class="popup-inner">
<h2>This is a popup title</h3>
<p>Popup content...</p>
</div>
</div>
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer {
width: 40%;
float: left;
}
.info {
display: flex;
}
.info .span {
align-self: center;
}
.info-button{
padding: 0;
border: none;
background: none;
outline: none;
background-color: transparent;
top:-10px;
}
<div class="mainContainer">
<h3>Main Title</h3>
<div class="info">
<h5>Title</h5><span class="info-span">
<button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
<mat-icon color="basic" >info</mat-icon>
</button>
</span>
</div>
</div>
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
You can use popper js to integrate and style tooltips it's easy and simple :
this is a quick exemple from the documentation :
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js :Tutorial
I am fairly new and just experiencing with some html/css . I was planning to make a login screen pop up in the middle of when a user clicks "login".
i've set up a div which is hidden on the screen and i want to make it visible when the user clicks on "login"
the problem i'm having is making the Div visible again . Here is the CSS:
#loginscreen {
position: absolute;
width: 400px;
height: 500px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid black;
border-radius: 40px;
background-color: lightgrey;
visibility: hidden;
z-index: 1000;
}
.loginbtn:active + #loginscreen
{
visibility: visible
}
:active only works for as long as the element is being clicked. As soon as the click is no longer being held the element will no longer be active.
Try using Javascript to do this, for example:
<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> Login </button>
Where <id-of-div> is whatever id you have assigned to the div you wish to make visible.
You cannot trap a user event ("click") without using javascript (or, better yet, jQuery). As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime. To use jQuery, all you must do is include the jQuery library in the <head> tags of each page, like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
The jQuery to show the login form would look something like this:
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
Here is an example you can use for ideas:
jsFiddle Demo
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
$('#loginscreen').fadeOut(800);
});
div{position:relative;box-sizing:border-box;}
#loginscreen {
position: absolute;
width: 400px;
height: auto;
top:0;
right: 0;
border: 1px solid #ddd;
border-radius: 4px;
background-color: lightgrey;
z-index: 1000;
display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
#headLeft{float:left;width:80%;}
#headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
<div id="logHead">
<div id="headLeft">Login:</div>
<div id="headRight"><div id="logX">X</div></div>
</div>
<div id="logTop">
<div id="logUN"><input type="text" id="username" placeholder="user"/></div>
<div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
</div>
<div id="logBott">
<button>Login</button>
</div>
</div>
<input type="button" id="mybutt" value="Login" />
Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)
I have 3 divs. 2 of them change their color when focused. Can also an action be performed on another div when 2 of them get focused?
div {
border: 1px solid;
margin: 5px;
width: 300px;
height: 50px;
padding: 2px;
}
.myClass:focus {
background-color: yellow;
outline: none;
}
<div class="myClass" tabindex="-1">
Focus me!
</div>
<div class="myClass" tabindex="-1">
You can focus me too!
</div>
<hr />
<div class="anotherClass">
I cannot be focused, but want to change my color, when one of the other divs above me get focused.
</div>
So when 1 of the 2 upper divs get focused I want the 3rd div at the bottom to change its color.
Here you can have a look: https://jsfiddle.net/ogpvvwtg/
Sure, you can use the general sibling selector ~
.myClass:focus ~ .anotherClass {
background-color: red;
outline: none;
}
div {
border: 1px solid;
margin: 5px;
width: 300px;
height: 50px;
padding: 2px;
}
.myClass:focus {
background-color: yellow;
outline: none;
}
.myClass:focus ~ .anotherClass {
background-color: red;
outline: none;
}
<div class="myClass" tabindex="-1">
Focus me!
</div>
<div class="myClass" tabindex="-1">
You can focus me too!
</div>
<hr />
<div class="anotherClass">
I cannot be focused, but want to change my color, when one of the other divs above me get focused.
</div>
you can do this with a little bit of javascript which might give you more control of the things you want to color.
colorDiv3 = function() {
window.document.getElementById("div3").style.backgroundColor = "lightGreen";
}
div {
border: 1px solid;
margin: 5px;
width: 300px;
height: 50px;
padding: 2px;
}
.myClass:focus {
background-color: yellow;
outline: none;
}
<div class="myClass" tabindex="-1" onFocus="colorDiv3()">
Focus me!
</div>
<div class="myClass" tabindex="-1" onFocus="colorDiv3()">
You can focus me too!
</div>
<hr />
<div id="div3" class="anotherClass">
I cannot be focused, but want to change my color, when one of the other divs above me get focused.
</div>
You can also accomplish this using JavaScript:
First give the divs IDs:
<div id="topDiv" class="myClass" tabindex="-1">
etc...
Then you can find them with:
var top_div = document.getElementById('top_div');
var middle_div = document.getElementById('middle_div');
var bottom_div = document.getElementById('bottom_div');
Assign an event listener to the objects. This allows you to call a function when an element is focused:
top_div.addEventListener("focus", changeBottomDivColor);
middle_div.addEventListener("focus", changeBottomDivColor);
And finally, the function to actually change the color:
function changeBottomDivColor() {
bottom_div.style.backgroundColor = "red";
}
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.