For a mobile sticky menu I use the following code (shortened):
<nav class="navigation--wrapper">
<div class="navigation">
<div class="navigation--hamburger js--hamburger">
<svg>
...
</svg>
</div>
</div>
<div class="navigation--mobile is-content-menu js--mobile-navigation">
...
</div>
</nav>
With the following (shortened) CSS-styles:
.navigation--wrapper {
width: 100%;
position: fixed;
z-index: 20;
top: 0;
}
.navigation {
height: 50px;
}
.navigation--hamburger {
float: left;
padding: 14px;
}
.navigation--mobile {
position: fixed;
top: 50px;
left: 0;
right: 0;
z-index: 10;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
}
.navigation--mobile.is-open {
visibility: visible;
opacity: 1;
}
I added an event listener to the div that wraps the hamburger-icon (js--hamburger) which toggles the menu by adding is-open class to js--mobile-navigation.
This works perfectly most of the time but after a random number of clicks, the button stops working.
I added an event listener for all clicks in the document and logged the target to the console:
jQuery(document).click(function(event) {
return console.log(event.target);
});
Now for the clicks where the menu appears, it always shows a part of the svg as target which is just fine. After a few times of clicking (randomly, sometimes also at the first time) the menu is not working an the the div with class js--mobile-navigation is shown as target and the menu stops working until I reload the page.
I think this must be a bug with fixed-positioned elements. This Problem occurs in all major browsers on desktop, tablet and mobile.
Related
I have very simple web page with frames. I understand frames are obsolete.
When I click on a link in the sidebar, a PHP page loads in the main frame.
Page A
Page B
Page C
The pages take several seconds to load. If page A is displayed, then I click on page B, there will be no visible change, and no feedback that the click has happened, until page B is ready.
I would like, as soon as the link is clicked, to clear the main frame, and display a "please wait" sign there, while the PHP script runs. How do I do that?
I am totally open to a solution using iframes, rather than frames.
You could place the sign above the frame (using position: fixed;) and hide it (display: none;). Then make it visible as soon the link is clicked (onclick) and hide it, when frame has loaded (onload).
Here's an example:
function showSpinner() {
document.getElementById('sign').style.display = 'block';
}
function hideSpinner() {
document.getElementById('sign').style.display = 'none';
}
#sign {
display: none;
position: fixed;
}
Page A
Page B
Page C
<iframe name="Frame_Main" src="pageA.php" onload="hideSpinner()">
</iframe>
<div id="sign">
<img src="images/sign.png" alt="please wait" />
</div>
You need to use onload method inside iframe element and click on aside-bar link to set attribute value of iframe src and add active class on frame-wrapper for showing Please wait text and when your page loaded inside iframe then onload method will fire and remove active class from frame-wrapper. Below is working snippet I hope this will help you.
document.querySelectorAll('a').forEach(elem => {
elem.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('wrapper').classList.add('active');
document.getElementById('frame').setAttribute('src', e.target.href)
})
})
.frame-wrapper {
width: 320px;
height: auto;
position: relative;
}
.frame-wrapper::after {
content: attr(data-load);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 30px;
color: #fff;
background: rgba(0, 0, 0, 0.65);
transition: 350ms;
opacity: 0;
pointer-events: none;
}
.frame-wrapper.active::after {
opacity: 1;
pointer-events: all;
}
<aside>
Page A
Page B
Page C
</aside>
<div class="frame-wrapper active" data-load="Please wait" id="wrapper">
<iframe src="pageA.php" id="frame" onload="document.getElementById('wrapper').classList.remove('active')" width="100%" height="220"></iframe>
</div>
you done the following css approach:
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}
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>
My question is based on the usage of this answer. I want to use this solution, as presented here. But instead of on mouse over I would like see the iframe on after I click the link, and be able to close it with another click. Is that possible using only css?
This live preview for Wikipedia<div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
Not with an anchor tag, but you can use the checkbox hack to do that.
.box{
width: 100%;
}
input, .box {
display: none;
}
#checkbox:checked + .box {
display: block;
position: relative;
z-index: 100;
}
<label for="checkbox">Click</label>
<input id="checkbox" type="checkbox">
<div class="box">
<iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe>
</div>
You can show the iframe when you click on an a tag using the :target pseudo class, but 1) it will jump on the page (without javascript), and 2) you can't close it without clicking on another link on the page and changing the hash in the URL.
.box{
width: 100%;
display: none;
}
.box:target {
display: block;
position: relative;
z-index: 100;
}
click to | click to close
<div class="box" id="iframe">
<iframe src="http://en.wikipedia.org/" width="500px" height="500px"></iframe>
</div>
I'm working on this banner ad that I posted here yesterday and I got my images fading properly, but I had everything positioned in an absolute manner, and I need to have it so that when my ad expands, it pushes whatever content below it down. Right now, when I press expand, it covers the image below it, rather than push it down even though the picture's positioning is relative.
Here's a link to my project on codepen.
And here's my CSS:
#banner{
position: relative;
min-height: 100px;
}
.hide {
transition: opacity .5s ease-in-out;
opacity: 0;
position:absolute;
}
.show {
transition: opacity .5s ease-in-out;
opacity: 1;
position: absolute;
z-index: 1;
}
#toggle, #toggle2{
cursor: pointer;
}
#toggle{
margin-left:-123px;
}
#toggle2{
position: relative;
}
#twitterIcon{
position: relative;
}
.videoDiv > video {
display:inline-block;
border: 1px solid;
font-size:0;
margin: 0;
padding:0;
}
.videoDiv{
font-size:0;
margin-left:413px;
padding-top:152px;
}
I've read that absolute positioning makes it this way, but I need the collapsed and expanded version to be absolute so that they're on top of one another. Is there anyway I can make it so that the Coach ad pushes the image of Ron Swanson down rather than covering it?
Here is a complete solution: http://codepen.io/anon/pen/mewMEO
The solution is to make the smaller banner absolute with a negative z-index so it is in fact behind the normally positioned large banner.
Also, I took the liberty of improving your JS code by making it more generic and adding support for multiple banners on the page.
HTML
<div class="banner collapsed">
<img class="preview-size" src="http://i.imgur.com/y6foj3Z.jpg"/>
<img class="full-size" src="http://i.imgur.com/CeUfSAX.jpg"/>
<div class="btn-expand">
<img id="toggle" src="http://i.imgur.com/axmdldH.png" />
</div>
<div class="btn-collapse">
<img src="http://i.imgur.com/5wZwdGz.png" />
<a href="https://twitter.com/intent/tweet?text=I%20LOVE%20the%20new%20%40coach%20swagger!">
<img id="twitterIcon" src="http://i.imgur.com/WxSsDpb.png" />
</a>
</div>
</div>
<div class="push">
<img src="http://i.imgur.com/sFNERNs.jpg" />
</div>
CSS
.banner {
position: relative;
width: 970px;
}
.banner img {
/* Get rid of that margin on the bottom of the images */
display: block;
}
.banner .btn-collapse img {
display: inline;
}
.banner .btn-expand {
position: absolute;
bottom: 0;
right: 0;
}
.banner .preview-size {
z-index: -1;
position: absolute;
}
.banner .btn-expand {
display: none;
}
.banner.collapsed .preview-size {
z-index: 0;
position: relative;
}
.banner.collapsed .preview-size,
.banner.collapsed .btn-expand {
display: block;
}
.banner.collapsed .full-size,
.banner.collapsed .btn-collapse {
display: none;
}
JS
(function() {
var bannerEls = document.getElementsByClassName('banner');
// Support multiple banners
for (var index = 0; index < bannerEls.length; index++) {
var currBannerEl = bannerEls[index];
var expandEl = currBannerEl.getElementsByClassName('btn-expand')[0];
var collapseEl = currBannerEl.getElementsByClassName('btn-collapse')[0];
registerBannerToggle(expandEl, currBannerEl);
registerBannerToggle(collapseEl, currBannerEl);
}
function registerBannerToggle(clickableEl, bannerEl) {
clickableEl.addEventListener('click', function(e) {
toggleCollapseState(bannerEl);
});
}
function toggleCollapseState(bannerEl) {
if (bannerEl.className.indexOf('collapsed') !== -1) {
bannerEl.className =
bannerEl.className.replace(/collapsed/g, '');
}
else {
bannerEl.className += ' collapsed';
}
}
})();
The reason you are not able to do this was intentional to deter advertisers from messing with the actual website content. To pull it off, you would have to keep the position relative for the add or manipulate the ".push" div using javascript.
I dont know much plain javascript so I changed it for jQuery if you don't mind
All I've done was get images height and set animate on them with click on #toggle/#toggle2
CODEPEN
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.