Bootstrap glyphicon/nav bar showing popup window - javascript

I'm using a few things from bootstrap in my template, like glyphicon's and a navbar. Which is on my "forum.php". Now when I want to delete a topic, I want a javascript popup to show up which is working just fine. But through that popup I can see bootstraps navbar and glyphicon. How do I fix this?
forum.php
<table class="overview">
<tr class="row1">
<td class="col1">
<button>
<span class="glyphicon glyphicon-eye-open">
</span>
</button>
</td>
</tr>
</table>
<button onclick="showDiv()">Delete category</button>
css.css
#popup_container {
width:100%;
height:100%;
opacity:.99;
top:0;
left:0;
display: none;
position:fixed;
background-color:#313131;
overflow:auto
}
#prompt-delete {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
}
popup.php
<div id="popup_container">
<div id="prompt-delete">
<h2> my popup</h2>
<button onclick="closeDiv()">Close</button>
</div>
</div>
Javascript.js
function showDiv() {
document.getElementById('popup_container').style.display = "block";
}
function closeDiv() {
document.getElementById("popup_container").style.display = "none";
}
When popup is showing, through that div, on the background I see the glypicon of bootstrap without being faded into the background. It shows without opacity.
The rest of the page is faded with the opacity defined in the css.

Change The z-index of your pop-up to 1.

Related

How can I blur only the background behind popup?

I implemented a popup that appears when a button is pressed, and want the background to be blurred when the popup message is on the screen. I've added a function called toggle() which activates/deactivates when clicking on the button:
function toggle() {
var blur = document.getElementById('blur');
blur.classList.toggle("active");
var popup = document.getElementById('popup');
popup.classList.toggle("active");
var popup2 = document.getElementById('popup2');
popup2.classList.toggle("active");
}
HTML code:
<div class="container" id="blur">
<div class = "col-8" style = "display: flex;">
<div class = "container-buttons">
<div class = "canvas-menu">
<ul>
<li><button id="clear-button" class="btn" onclick="toggle(); displayPopup();"><span style="color: black;">
<i class="fa-solid fa-circle-xmark"> Clear</i>
</span></button></li>
<!-- Content popoup -->
<div class="popup" id="popup">
<p>Are you sure you want to delete blocks?</p>
<button id="no-btn" onclick="toggle(); closePopup()">No</button>
<button id="yes-btn" onclick="toggle(); closePopup(); clearAll();">Yes</button>
</div>
<div class="popup" id="popup2">
<p>There are no blocks to clear :(</p>
<button id="back-btn" onclick="toggle(); closePopup()">Go back</button>
</div>
And these are the CSS attributes I've added:
.container#blur.active {
filter: blur(10px);
pointer-events: none;
user-select: none;
}
#popup.active, #popup2.active {
pointer-events: all;
filter: none;
}
.display-popup {
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
filter: blur(0px);
}
where container is the whole website screen and popup and popup2 are two different popups. Right now, when the button is clicked, the whole website is blurred including the popup message.
I'd appreciate any help :)
(I'm using JavaScript)
I fixed it! I just had to take the popup HTML code out of the HTML container scope and it works perfectly now.
The important thing to remember about CSS is that it cascades; so if your popup is a child of the blur element, it will have blur applied to it. Try changing your markup to ensure the popup is not a child of the blur item and has a higher z-index too.

I want my div to show in desktop after I toogle the div close in mobile

I did a simple toggle button to hide and show. My coding skills in Javascript/Jquery are very bad.
In desktop view the description is showing perfectly fine.
(Picture in Desktop view.)
, while in mobile there's a button to toggle hide and show the description.
(Picture in Mobile View.)
.
However, when I toggle hide the description in mobile view it disappear in desktop view when i dragged the browser. Only when I toggle show in mobile, it likely to show on the desktop. How do I make it appear?
Javascript:
//Script
<script>
$(document).ready(function () {
$(".toogle-button").click(function () {
$(".toggleholder").slideToggle("slow");
$(this).find("i").toggleClass("fa-chevron-down");
});
});
</script>
Html:
//html
<div class="toogle-button">Introduction<i class="pull-right fa fa-chevron-up fa-chevron-down"></i></div>
<div class="toggleholder">
<div class="desc-holder">
<p>
<p><b>Subject:</b></p>
<span class="side-text">Design</span>
</p>
<p>
<p><b>Description:</b></p>
<span class="side-text">This quiz is to test your knowledge on HTML basic foundation.</span>
</p>
</div>
<div class="user-holder">
<p><b>Assigned By:</b></p>
<div class="profile-holder">
<div class="avatar-holder">
<img src="/include/images/default/avartar_32.png" class="avatar32" />
</div>
<div class="username">Admin Asriah Asadi</div>
<div class="clearfix"></div>
</div>
</div>
Css/Less:
.toogle-button {
display: none;
margin-top: 15px;
padding: 10px;
background-color: #055eac;
#media only screen and (max-width: #screen-xs-max) {
display: block;
}
}
I suggest you to use the event handler window.resize, and what do you do on new scale:
$(window).resize(function()
{
var desktop_mobile_breakpoint = 768; //or whatever else!! it should be you #screen-xs-max...
//when you drag your window
if ($(window).width() > desktop_mobile_breakpoint) $('.toggleholder').show(); //desktop: we show it
else $('.toggleholder').hide(); //mobile: we hide it
});

Show loading spinner before Bootstrap Carousel Load

I'm trying to show a spinner before a carousel loads and also when you click left and right controls of the carousel. Currently I'm able to show a spinner before page load using the following code..
//HTML code
<script src="js/jquery-1.11.3.min.js"></script>
code just after body tag
<div id="loader">
</div>
//CSS code..
#loader{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
}
//JS code..
$(window).load(function(){
$("#loader").delay(1000).hide(0).fadeOut("slow");
});
Using the above logic now I'm trying to display a spinner of smaller size and transparent background every time user clicks the left/right controls of the bootstrap using the below code..
HTML code..
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="carousel_spinner">
</div>
CSS code...
#carousel_spinner{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:50%;
height:50%;
background:url(../images/loader.gif) 50% 50% no-repeat;
}
JS code..
function loadNextSlide(){
$("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
}
The above code shows a small spinner on the top left side on page load and when I click on the right control of carousel no spinner is shown.. Can't understand where I'm going wrong..Please help..
Bootstrap Doc:
According to bootstrap documentation Carousel offers following events:
slide.bs.carousel
Occurs when the carousel is about to slide from one item to another
slid.bs.carousel
Occurs when the carousel has finished sliding from one item to another
What you need:
is to put your spinner code inside:
$("#carouselObject").on('slide.bs.carousel', function () {
//show spinner here
});
And then hide that spinner code in slid event:
$("#carouselObject").on('slid.bs.carousel', function () {
//hide the spinner here
$("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
});
P.S: The above code is not tested but it will take you where you are heading

How to print a specific section in HTML page Angular JS

Parent page
<div class="row">
<div class="col-md-3">
link 1
link 2
link 3
.
.
.
</div>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
When link is clicked child page will be loaded in ng-view>
<table class='table table-bordered'>
<tr>
<td>
this is my screen view
when user clicks a link in parent page
specific contentd loaded here
</td>
</tr>
</table>
<button type="button" class="btn btn-success btn-md" ng-click="myprint()" >
<span class="glyphicon glyphicon-print"></span> Print
</button>
<div id ="printsection">
<table style="width:80mm;">
<tr style="text-align: center;">
<td>this is my print view contents
send these contents
to print to printer
</td>
</tr>
</table>
</div>
Above child page have 2 sections. screen view and printsection.
I want when user clicks on print button, printsection contents send to printer.
I have define these CSS rules for media print.
print.css
body {
background-color: white;
color: black;
font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
visibility: hidden;
}
#printsection * {
visibility: visible;
}
#printsection {
position: absolute;
left: 0;
top: 0;
}
Problem is on click of print button, its hiding all the contents, even the print section.
What i am doing wrong?
Please note i am using POS printer 80mm width, dats i made width = 80mm in printsection.
You can use a simple function to replace the page and print as well.
<button onclick="printElement('my-section')">Print</button>
function printElement(id) {
var printHtml = document.getElementById(id).outerHTML;
var currentPage = document.body.innerHTML;
var elementPage = '<html><head><title></title></head><body>' + printHtml + '</body>';
//change the body
document.body.innerHTML = elementPage;
//print
window.print();
//go back to the original
document.body.innerHTML = currentPage;
}
Are you setting changing the visibility to visible for the "printsection" when you click the print button?
I would use the following css rules for visibility.
display:none, display:block.
You didn't make the printSection itself visible. Same with all it's parents. So you'll have to do something like this:
#printSection{
visibility: visible;
}
And all of it's parents since you hid all of them with body *{ ... }
I'm so sure that must use CSS media rules - #media print, on this case. Take a look:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
#media all {
/* media-specific rules, suitable for all devices. */
}
#media screen {
/* acreen media-specific rules */
}
#media only print {
/* Intended for paged material and for documents
viewed on screen in print preview mode .*/
main {
display: none;
}
}
</style>
</head>
<body>
<main>
<button onclick="window.print()">Print</button>
<h1>hello</h1>
<p>Some paragraph</p>
</main>
<div id="print-section">
<h2>subtitle</h2>
<table border="1" width="50%">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So when user press CTRL + P or clicking on button invoking window.print(), everything outside of main tag will be printed. It is the best approach.
From the docs:
Syntax:
#media <media-query> {
/* media-specific rules */
}

Contextual menu on mouseover

I'm facing a little problem with my code :
<style>
.btn_remove{
position:absolute;
right:-25px;
}
.test:hover > table{
background-color:#708ab3;
}
</style>
<a href="page/ABC" class="test" ng-mouseenter="showRemove = true" ng-mouseleave="showRemove = false">
<div class="btn_remove" ng-show="showRemove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>mercedes class a</td>
<td>70'000</td>
</tr>
<tr>
<td><i>Nice car</i></td>
<td>Color: Red</td>
</tr>
</table>
</a>
So as you can see I have a table into a <a href>. When I pass my mouse over the table it calls the class .test:hover > table and also set the angular variable showRemove = true which will then show the absolute div on the right of the table.
My problem is when I mouse over the absolute div, it has the href from the parent (page/ABC).
If I try to write
<div class="btn_remove" ng-show="showRemove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
then nothing is working because the first link isn't closed.
How could i manage to get :
Mouseover on table = background change + link (page/ABC) + show remove image on the right.
Mouseover on remove image = JS function to be called or whatever but do not be part of the parent link.
Mouseout of table or remove image = remove "remove image" and remove background change.
All this without using jquery. JS or angular, but i guess it's mostly div and css.
Solution:
<style>
.test{
position:absolute;
right:-25px;
visibility:hidden;
}
.wrapper:hover table{
background-color:#708ab3;
}
.wrapper:hover .test
{
visibility:visible;
}
</style>
<div class="wrapper">
<div class="test"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
<a href="table link">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>Mercedes Class A</td>
<td>70'000</td>
</tr>
<tr>
<td><i>Nice car</i></td>
<td>Red</td>
</tr>
</table>
</a>
</div>
<hr/>
Glad to hear you got it working.
for reference you can add javascript:; to the href of an anchor to make it not do anything.
You can select a child element on hover using:
.parent:hover .child
{
the hover styles for the child
}
here is the fiddle for anyone else who needs to select a child element on hover jsfiddle.net/jE7J6

Categories