I have a bootstrap 4 modal which is shown the first time a page is loaded. A cookie is set after that first time which hides the modal on load. The first time the site is loaded, everything works fine even after you close the modal. However, subsequent page loads, when the modal is not shown, for some reason nothing is clickable on the page. It has something to do with the z-index, because I'm able to set the z-index of individual elements (ie the nav bar) really high and then they become clickable...I just want to avoid having to go through and put a z-index on every single element.
Here is the code deciding whether or not the modal is shown.
$(document).ready(function () {
if (!<?php echo $modalCookie; ?> && !<?php echo $showOnce; ?>) {
$('#aboutModal').modal('show');
}
}
Here is a link to the site with the issue: https://dev.vmc.w3.uvm.edu/xana/indicators/vt
Let me know if there's any other info that may be helpful...
Thanks!
What you're doing to hide the popup is to reduce it's opacity to 0, but the element still takes space in the screen even if you cannot see it. It's transparent now, but it's actually showing.
You could fix this issue by using display: none to hide it instead.
/* Don't show modal by default */
#aboutModal {
display: none;
padding-right: 17px;
}
/* Only display modal when it has class .show */
#aboutModal.show {
display: block;
}
Adding this css seemed to do the trick.
.fade:not(.show) {
z-index: -1;
}
Related
has anybody got a way to make a bootstrap 5 dropdown nav open on hover but then also go to another page on click as well.
for example my dropdown looks like this:
<a class="nav-link dropdown-toggle" href="/category/mens" data-bs-toggle="dropdown">Mens</a>
And using the CSS to make it open on hover
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
On hover the dropdown opens a megamenu which shows the list of categories but I also want the user to click on the dropdown text to go to the main category page if that makes sense. but even know I have a href it does not go to that page because of data-bs-toggle, Any help would be appreciated.
In case you still haven't found an answer, here's what you need to do:
In the dropdown parent anchor element, change data-bs-toggle="dropdown" to data-bs-hover="dropdown". That's it. Now your parent link will work, too.
However, the data-bs-toggle attribute is needed for the dropdown to work on mobile devices (small resolution screens), so I my solution is to use jQuery to restore it on smaller screens like this:
$(document).ready(function() {
if($(window).width() <= 831) {
$(".nav-link.dropdown-toggle").removeAttr("data-bs-hover");
$(".nav-link.dropdown-toggle").attr("data-bs-toggle", "dropdown");
}
});
I just add this code in my css
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
If You Want to show dropdown on hover in bootstrap then you need to visit here here is very easy way to do that . there are less number of code of css and your issue will fix and if yout want to go to new url you should add attriute target="_blank" in anchor tag.
https://www.youtube.com/watch?v=owdqNLzII38
Bootstrap tabs are great but they have an annoying downside: content on the inactive tabs gets removed from the flow of the page. in other words when you switch to a new tab, the previous tab's display attribute sets to none (instead of setting visibility: hidden or using other methods)
In my case I have dynamically positioned elements using Masonry.js on the tab foo, whenever I switch to bar and then switch back to foo I have to re-calculate their position since they are all at top: 0px; left: 0px;
this is a costly behaviour, another example is when you have a form filled with data on the tab foo and then switch to bar, all the filled data would be lost so you have to re-enter everything back on.
what is the best workaround to keep the previous tab's state intact while switching?
This workaround works fine for me so far:
you can override these classes so the content on tab foo becomes "hidden" not totally removed from the page.
.tab-content>.tab-pane {
display: block;
height: 0;
overflow: hidden;
}
.tab-content>.active {
height: auto;
overflow: visible;
}
Note: you can also set width: 0 if you have horizontal overflow, please don't forget to reset the width attribute back to normal under .tab-content>.active{...} .
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click
I suppose this had been answered before, but I couldn't find a similar issue on the web.
I have an img element inside a hidden div (a side menu). It is not hidden actually, it is an absolutely positioned div residing outside of the body borders. When user clicks a button to open the menu, I make use of jQuery's animate to move it back into the viewport by playing with its left property. The setup is as follows:
.menu {
.
.
.
width: 200px;
position: absolute;
left: -200px;
}
When user clicks the button to open the menu, I run this animation:
$('.menu').animate({
left: "+=200"
},
500,
function() {
// stuff here
}
);
The problem is, when this animation is completed, the img inside the menu is pixelated for a short period of time, like 3 seconds, then it renders correctly. This happens everytime I close and open the menu again. How can I solve this?
EDIT
I've prepared a fiddle, but couldn't reproduce the issue in the fiddle. Image renders with no problem in the fiddle. I am posting the link here anyway, maybe that could help to understand the setup. Could the reason be other elements present in the document at the time of the animation? Or could it be about hte size of the image?
http://jsfiddle.net/j5aecuqx/
I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.