I am trying to apply foggy.js (http://nbartlomiej.github.io/foggy/) to the back-drop of Bootstraps Modal. This would allow me to blur every element in the background which I have completed so far but the Modal Popup is also Blurry. So my question is how do I apply the blur to the back-drop and its child elements so the Modal isn't blurred but everything else is.
Here is my code. Note I have some code to start and stop Vimeo as well as start and stop the Carousel.
$(document).ready(function(){
$('.close-video').on('click', function (event) {
for (var i = 0; i < window.frames.length; i++) {
window.frames[i].postMessage(JSON.stringify({ method: 'pause' }), '*') //Pauses Vimeo Video
$('#AVRS-Carousel').carousel('cycle'); //Starts Carousel
$('body').foggy(false); //Disables Foggy.js
}
});
$('[data-frame-index]').on('click', function (event) {
var $span = $(event.currentTarget),
index = $span.data('frame-index');
window.frames[index].postMessage(JSON.stringify({ method: 'play' }), '*') //Auto Plays Vimeo
$('#AVRS-Carousel').carousel('pause'); //Pauses Carousel
$('body').foggy(); //Applies Foggy.js
});
});
Also here is CSS for Bootstraps back-drop class for the Modal:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: #zindex-modal-background;
background-color: #modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(#modal-backdrop-opacity); }
filter: blur(5px)
}
Thank you for your time in advance.
I have found no way to remove the blur effect from child elements. In the end I applied the blur to nav and section elements and kept modals outside of them. Bootstraps documentation for modals also warns about markup placement, saying:
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
So the HTML ends up looking something like this:
<body>
<nav>...</nav>
<div class="modal">...</div>
<section>...</section>
</body>
Javascript (using bootstraps data-toggle attribute on a button):
$('button[data-toggle]').on('click', function (event) {
$('nav, section').foggy();
});
I hope this was somewhat helpful.
Related
I have some code that saves my dark theme after refresh:
(thanks to https://stackoverflow.com/users/519413/rory-mccrossan on this post: Day/Night Toggle Using Cookie to Save on Page Refresh )
jQuery(document).ready(function($) {
$(".theme__switch").on("click", () => {
$(".theme__switch").toggleClass("active");
$("body").toggleClass("dark__theme");
$.cookie("toggle", $(".theme__switch").hasClass('active'));
});
if ($.cookie("toggle") === "true") {
$(".theme__switch").addClass("active");
$("body").addClass("dark__theme");
}
});
The only issue I find with this solution is that it flashes the original state before adding active to the toggle. So it flashes the original white background before adding the dark theme class. Is there a solution to avoid the flicker? or is this as good as it gets
The reason is that your code under jQuery(document).ready function runs when the page fully loaded. So, you have a delay to see its result and see the flashing.
There is no choice in framework-less websites except adding a loading frame fit to the total page at first and add a code to remove it after jQuery comes ready.
Assume this for example:
html
<div id="overlay">
<!-- some loading text or elements -->
</div>
css
#overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #fff;
}
js
jQuery(document).ready(function($) {
$(".theme__switch").on("click", () => {
$(".theme__switch").toggleClass("active");
$("body").toggleClass("dark__theme");
$.cookie("toggle", $(".theme__switch").hasClass('active'));
});
if ($.cookie("toggle") === "true") {
$(".theme__switch").addClass("active");
$("body").addClass("dark__theme");
}
jQuery('#overlay').hide();
});
I'm implementing slide div for creating theme color. It works fine but when I click the outside it's not closing that div and I tried a lot but not working my code so help me out for this..and I research many resources from the internet I got, but don't know how to implement this. here is my code
function clickedThemebtn() {
var ele = document.getElementsByClassName("theme-colors")[0];
if (ele.classList.contains("shown")) {
ele.classList.remove("shown");
} else {
ele.classList.add("shown");
}
}
Here is my fiddle you can Check Here
Please check this fiddle out.
My approach here was to add an fixed positioned div which will occupy the entire screen and it will handle clicking outside.
HTML Outline
<div class='toggleclickoutside' onClick="handleOutsideClick()"></div>
<div id="toggleshown" class="theme-colors">...</div>
JS handler for outside click
function handleOutsideClick() {
var ele = document.getElementsByClassName("theme-colors")[0];
if (ele.classList.contains("shown")) {
ele.classList.remove("shown");
}
}
Css for new div
.toggleclickoutside{
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
}
You can attach an event listener to the document, that it triggers the close event. Keep in mind that the following will hide the menu when you click anywhere inside the menu. You need further checks to prevent it.
function clickedThemebtn(e) {
var ele = document.getElementsByClassName("theme-colors")[0];
// If the click is outside of the button, remove the class
if (e.target.id === "slideBtn") {
if (ele.classList.contains("shown")) {
ele.classList.remove("shown");
} else {
ele.classList.add("shown");
}
return;
}
// all other cases: outside the button
ele.classList.remove("shown");
}
document.addEventListener('click', clickedThemebtn);
Updated fiddle
Here's a jQuery solution since the fiddle had jQuery fiddle
You'd have to listen for the click event on the document object, then check if the click was within the theme selector before closing it.
document.addEventListener('click', handleDocumentClick);
function handleDocumentClick(event) {
const themeSelector = getThemeSelector();
if (!themeSelector.contains(event.target)) {
hideThemeSelector();
}
}
function getThemeSelector() {
return document.getElementsByClassName("theme-colors")[0];
}
function hideThemeSelector() {
const themeSelector = getThemeSelector();
themeSelector.classList.remove("shown");
}
function showThemeSelector() {
const themeSelector = getThemeSelector();
themeSelector.classList.add("shown");
}
Note that I added a few handy functions for convenience sake.
I updated your fiddle and now it looks like this: https://jsfiddle.net/0nqzpyko/
I have a sidebar and I want to close it when someone clicks on a link. In my code, the sidebar just closes for a millisecond when I click on an anchor element. How can I fix this without using jQuery?
The a tags are linking to a html page
JS:
var elem = document.getElementById('slidebar').getElementsByClassName('button')[0]
element.addEventListener("click", slide);
function slide() {
document.getElementById('slidebar').classList.toggle('active');
}
var slidebar = document.getElementById('slidebar');
slidebar.addEventListener('click', handleMenuClick);
function handleMenuClick(event) {
if (event.target instanceof HTMLAnchorElement) {
document.getElementById('slidebar').classList.add('close');
}
}
CSS:
#slidebar.active {
left: 0px;
}
#slidebar.close {
display: none;
}
First, make sure you prevent the default event when clicking the anchor tag. Otherwise, it might be re-rendering the page.
But based on your code, it looks like you're adding two functions onto the slidebar. One that closes and one that opens. Since the anchor tag that closes the slidebar is inside the slidebar - when you click it you first fire off the handleMenuClick function and then it bubbles up and fires off the slide function. So it closes and opens quickly.
Instead, add a third element that is used to open the slidebar and attach the slide function there.
Also, you don't need two classes for managing the state of hidden/not hidden. You can just provide a class that sets the display to none and toggle that class list. If you want transition effects you can do that in CSS
Maybe something like this:
window.addEventListener('DOMContentLoaded', e => {
let slidebar = document.getElementById('slidebar')
let collapseButton = slidebar.getElementById('close-button')
let openButton = slidebar.getElementById('open-button')
collapseButton.on('click', toggleClassList)
openButton.on('click', toggleClassList)
const toggleClassList = e => {
e.preventDefault()
slidebar.classList.toggle('hidden')
}
})
#slide-bar.hidden {
display: none;
}
#slide-bar.hidden #close-button {
display: none;
}
#slide-bar #open-button {
display: none;
}
Obviously, it depends a bit on the code you have already written. But this is a basic example that would work. Just need to add the transitions for the sliding effect in CSS
I have been trying to make a fullscreen menu toggle with smooth fade in and out.
That works fine with all elements except for svg elements and picture.
Basically when you click on the menu burger you can clearly see the image and the svg icons not fading out, everything else does, but not these elements.
At first I thought it could be a z-index related problem and changed the numbers around but nothing worked.
I have been trying to find information about this for days but can't find anything on it.
I would highly appreciate your help on this, thank you.
Heres my fiddle
And code:
(function () {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener("click", function (e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") || $("#testMenu").fadeOut(300) : this.classList.add("is-active") || $("#testMenu").fadeIn(300);
});
}
})();
It happens because menu container is listed before image in source so it has lower index in z axis. Make #testMenu on the top with z-index and position:relative
<nav id="testMenu" style="display: none; z-index: 1000; position: relative;">
To control the z-index, the element must have a stacking order, like declaring a position.
When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements.
Try for example, changing this:
#contact {
z-index: -1;
position: relative;
...
}
Here is the working fiddle
There are a bunch of div elements on the page.
I have a nested div inside of them.
I want to be able to add a class to the clicked element, and .show() the child div.
$('.container').on('click', function(){
$(this).toggleClass('red').children('.insideItem').slideToggle();
});
I can click on it, it drops down.
Click again, it goes away.
So, now I need some method to removeClass() and slideUp() all of the other ones in the event of a click anywhere except the open div. Naturally, I tried something like this:
$('html').on('click', function(){
$('.container').removeClass('red').children('div').slideUp();
});
Well, that just stops the effect from staying in the first place. I've read around on event.Propagation() but I've read that should be avoided if possible.
I'm trying to avoid using any more prebuilt plugins like accordion, as this should be a pretty straightforward thing to accomplish and I'd like to know a simple way to make it work.
Would anyone be able to show a quick example on this fiddle how to resolve this?
Show only one active div, and collapse all others if clicked off
https://jsfiddle.net/4x1Lsryp/
One way to go about it is to update your code with the following:
1) prevent the click on a square from bubbling up to the parent elements
2) make sure to reset the status of all the squares when a new click is made anywhere.
$('.container').on('click', function(){
$this = $(this);
$('.container').not($this).removeClass('red').children('div').slideUp();
$this.toggleClass('red').children('div').slideToggle();
return false;
});
See the updated JSfiddle here: https://jsfiddle.net/pdL0y0xz/
You need to combine your two approaches:
for (var i = 0; i < 10; i++) {
$('#wrap').append("<div class='container'>" + i + "<div class='insideDiv'>Inside Stuff</div></div>");
}
$('.container').on('click', function() {
var hadClassRed = $(this).hasClass('red');
$('.container').removeClass('red').children('div').slideUp();
if (!hadClassRed) {
$(this).toggleClass('red').children('div').slideToggle();
}
});
.container {
width: 200px;
height: 200px;
float: left;
background: gray;
margin: 1em;
}
.insideDiv {
display: none;
}
.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap"></div>