This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
JavaScript hide/show element
(13 answers)
Closed 3 years ago.
Referring to the example code below.
CSS is not changing the display value after the js function changes it.
Expected example behaviors:
narrowing window hides "nav display"
widening window displays "nav display"
clicking "toggleNav" toggles visibility of "nav display"
Unexpected example behaviors:
clicking "toggleNav" disables the effect of window width
/* toggle between showing and hiding nav when the user clicks on toggleNav */
function toggleNav() {
var x = document.getElementById("nav");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#nav {display: block; } /* display is not restored after js function */
/* narrow window */
#media screen and (max-width: 70rem) {
#nav {display: none } /* display is not removed after js function */
}
<div>
<!-- button to toggle nav display -->
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<div>toggleNav</div>
</a><br>
<nav id="nav">
<h1>nav display</h1>
</nav>
</div>
<p>Initially, #media width toggles nav display.</p>
<p>After running toggleNav() function, #media width does nothing.</p>
Apparently, CSS does not change display value after js changes it.
Is there some way for media max-width to change a display value after js changes it?
ANSWER:
The solution is to use js for all show and hide:
<!DOCTYPE html>
<!-- based on https://www.w3schools.com/howto/howto_js_media_queries.asp -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dropbtn</title>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>
<!-- button to toggle nav display -->
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<div>toggleNav</div>
</a><br>
<nav>
<h1>nav display</h1>
</nav>
</div>
<p>Initially, #media width toggles nav display.</p>
<p>After running toggleNav() function, #media width does nothing.</p>
<script>
/* toggle between showing and hiding nav when the user clicks on toggleNav */
function toggleNav() {
$("nav").toggle();
}
/* if narrow window, hide nav, if wide window show nav */
function wideShowNav(x) {
if (x.matches) {
$("nav").hide();
} else {
$("nav").show();
}
}
var x = window.matchMedia("(max-width: 70rem)")
wideShowNav(x) // Call listener function at run time
x.addListener(wideShowNav) // Attach listener function on state changes
</script>
</body>
</html>
Trying to center this ngx-boostrap modal using CSS like this but it's not working:
.modal.fade.in{
display: flex;
justify-content: center;
align-items: center;
}
But in the dev tool, I'm able to add CSS like this:
.modal.dialog{
top: 50%
}
So at least it is centered vertically, but this is in the dev tool, and there is no .modal.dialogclass in the html template
Is there a way to center properly the ngx-bootstrap modal ?
I want to create a generic modal component to use it anywhere, by providing an input message and adding a yes/no dialog and output the user choice (using EventEmitter)
I've found an example in the following Plunker, but not able to reproduce it in a separate custom component.
The plunker example comes from this website: https://github.com/valor-software/ngx-bootstrap/issues/2334
Update:
After #Wira Xie answer, when I use the Static modal and this CSS:
.modal-sm
{
top: 50%;
left: 50%;
width:30em;
height:18em;
background-color: rgba(0,0,0,0.5);
}
The modal shows centered, but only the Esc key can hide it, so when I click outside the modal, it's still visible.
Why not to use bootstrap modal-dialog-centered class:
this.modalRef2 = this.modalService.show(ModalContentComponent,
{
class: 'modal-dialog-centered', initialState
}
);
in the .ts file you have a code like this (to open modal popup)...
private showModal(template: TemplateRef<any>): BsModalRef {
return this.modalService.show(
template,
{ class: 'modal-lg modal-dialog-centered',
ignoreBackdropClick: true,
keyboard: false
});
}
You can see that I've added modal-dialog-centered to the class. after doing this you can also modify the modal-dialog-centered class in your css.
Try adding this attribute to your CSS: vertical-align: middle to your .modal.dialog class
Plunker for modal
.modal.fade {
display: flex !important;
justify-content: center;
align-items: center;
}
.modal-dialog {
vertical-align:middle;
height:18em;
background-color: rgba(0,0,0,0.5);
}
You need to use the bootstrap class.
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
import { Component, OnInit, TemplateRef } from '#angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
#Component({
...
})
export class ModalComponent {
modalRef: BsModalRef;
// Here we add another class to our (.modal.dialog)
// and we need to pass this config when open our modal
config = {
class: 'modal-dialog-centered'
}
constructor(private modalService: BsModalService) { }
openModal(template: TemplateRef<any>) {
// pass the config as second param
this.modalRef = this.modalService.show(template, this.config);
}
}
You have to pass the modal-dialog-centered bootstrap class for the BsModalService.show() function like this:
const initialState = {
organization: organization,
};
this.modalRef = this.modalService.show(AdminOrganizationCreateComponent, {
class: 'modal-dialog-centered', initialState
});
Note: if you need to pass initial data you can pass it using the initalState object.
A bit late, but for reference.
The reason the styling of the dialog in the component is not working, is because component styling is isolated and restricted to elements within the component. The dialog created through the bsmodalservice is outside of this component. (directly under <body>).
So, while your styling is encapsulated in the component and some random identifier, the dialog itself is not. The final css (like mycomponent[_ngcontent_bla_323] .modal) does not apply to the div.modal that is added by the service.
Possible solutions are:
Move your css for this dialog to some global (s)css file instead of the (s)css for the component
Instead of using bsModalService with a template, use the bsmodal directive with a div within your component. That way the component local (s)css will apply.
I have added mat-step inside the modal and because of that it didn't align centered for modal-dialog-centered bootstrap class ether. But modal-lg class worked for me. Sample code is very similar to the accepted answer. Only change the bootstrap class which is passed to the modal.
this.modalRef = this.modalService.show(AddDevelopersGroupComponent,{
class: 'modal-lg',
initialState,
});
This is a snippet from my personal project using ngx-bootstrap too.
.modal-sm
{
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em;
margin-left: -15em;
background-color: #001b00;
/*position:fixed;*/
}
<!--typecript files-->
<script>
//here is the typesciprt file
export class AppComponent
{
//for default ngx-bootstrap modal
public modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
public openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
}
</script>
<!--end of ts file-->
<!--Modal-->
<div class="container">
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Small modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<!--enf of modal-->
According to the documentation you can center the modal vertically via setting centered property to true (as it is false by default)
const modalRef = this.modalService.open(ConfirmationDialogComponent, {
size: dialogSize,
centered: true
});
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
I've got the font-awesome-ie7.min.css in my html, however I'm unable to change the icon class dynamically using JavaScript/jQuery in IE7, works fine in other browsers.
<div id='iconDiv'>
<i class='icon-hand-down'></i>
</div>
<script>
$(document).ready(function() {
$('#iconDiv i').addClass('icon-hand-up');
});
</script>
Any help! appreciated.
Woohoo! I have a solution to this annoying issue. As with all coding that targets IE7 this is a complete hack but hey, it works...
<div id='iconDiv'>
<i class='icon-hand-down'></i>
<i class='icon-hand-up hide'></i><!-- initially hidden -->
</div>
<script>
$(document).ready(function() {
$('#iconDiv i.icon-hand-down').addClass('hide');
$('#iconDiv i.icon-hand-up').removeClass('hide');
});
</script>
Put both icons into your DOM and conditionally display whichever is relevant. You get the idea. I am using this same approach for toggles in my app.
Sample CSS from bootstrap:
.hide {
display: none;
}
.show {
display: block;
}
For reference, in my case I am using AngularJS:
<i data-ng-click="collapsed = !collapsed" class="icon-collapse ng-class:{'hide':collapsed}"></i>
<i data-ng-click="collapsed = !collapsed" class="icon-collapse-top ng-class:{'hide':!collapsed}"></i>
I am trying to in include twitter widget in my web site. It is developed using Smarty . I am trying to customize the widget. Now it has a scroll bar in the right section. I think we can remove that by adding a style overflow:hidden to the class stream. But I am not sure how can we do that . I have tried with an external css file , but it is not working. Please help me to customize it by removing the scroll bar.
<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="myid" width="376" height="200">Tweets by #name</a>
{literal}
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");</script>
{/literal}
Please check the page here http://www.jobslamp.com/test.php
New code
-------------
<div class="clear"></div>{literal}
<style TYPE="text/css">
#footer {
background-image: none !important;
}
</style>{/literal}
<a class="twitter-timeline" href="https://twitter.com/username" data-widget- id="myid" width="376" height="200" style="border:1px solid red !important;">Tweets by #username</a>
{literal}<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script>{/literal}
<div class="clear"></div>
try this css:
#footer {
background-image: none !important;
}
No need to disable all. Just use new parameter provided by the API :
<a href="your_timeline" data-chrome="noscrollbar" ...
source = dev.twitter