I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
Related
How do you prevent the content from floating behind the Navbar when scrolling?
<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>
Or is it in:
<Nav className="navigation"..
Thanks
Add a custom class to your navbar component, say, sticky-nav. Define the following CSS properties on it:
.sticky-nav {
position: sticky;
top: 0;
}
This will make your navbar stick to the top and will automatically adjust the height of its following DOM elements. You can read more about the sticky property on MDN.
As Scrotch said adding:
<Navbar style={{backgroundColor: "#071740", position: "sticky"}} variant="dark" fixed="top">
worked for me, I did it inline but putting in a separate CSS file should work as well. This is the only thing that's worked so far for me.
NB: I'm using "react-bootstrap": "^1.0.0-beta.16"
I was running into this too. I found the following (baseline bootstrap) page that shows a fixed navbar and has the main page showing up properly below it. It seems to be a function of the css that they are using. Specifically:
padding-top: 70px;
I added
body {
padding-top: 70px;
}
to my css file, and it seems to be working. Obviously mileage may vary, not applicable in all territories, etc. I am going to need to test it further for myself, but that might get you started.
In order to get responsive padding-top for body you may use sth. like this (ES6 example):
import ReactDOM from 'react-dom';
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
export default class Template extends React.Component {
constructor(props) {
super(props);
this.state = { navHeight: 50 };
this.handleResize = this.handleResize.bind(this);
}
handleResize(e = null) {
this.setState({ navHeight: ReactDOM.findDOMNode(this._navbar).offsetHeight });
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
render() {
return (
<body style={{paddingTop: this.state.navHeight}}>
<Navbar ref={(e) => this._navbar = e} fixedTop>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Some title</Link>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/link1">Link1</NavItem>
<NavItem eventKey={2} href="/link2">Link2</NavItem>
</Nav>
</Navbar>
<main>
{this.props.children}
</main>
</body>
);
}
}
Template.propTypes = {
navHeight: React.PropTypes.number,
children: React.PropTypes.object,
};
This way your <body> padding-top will always fit your navbar height even after adding more links in mobile view.
I also assume that base height is 50px (see the constructor) but it shouldn't matter as long as you call this.handleResize() in componentDidMount().
There is also the option to specify sticky-top which basically implements the solution of using position:sticky that others have suggested (see documentation).
So in your example you could just specify sticky-top instead of fixed-top as a className, and it satisfies your requirements.
react-bootstrap provides position utilities.
<Navbar sticky="top">
react-bootstrap documentation
However in-page anchor does not work properly, and position can be under the navbar after jump from a link.
I also use this custom css to fix the issue.
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Reference
I came across the same problem. Wanting to stay within bootstrap and avoid custom css I tried adding class 'position-sticky', which gave me a left-shifted navbar. Apparently, for whatever reason, the navbar has a negative padding, so adding 'ps-0' to the class list fixed it.
<Navbar
fixed={'top'}
className={'position-sticky ps-0'}
>
for anyone using tailwind use sticky as a property in the top div of your navbar
<div className="sticky"> navbar-content </div>
I've been using Zen Grids for responsive layouts for a while now, and somehow never came across this. I've referenced the documentation, but for the life of me cannot figure out how to do something which should be relatively simple.
I have a block which I set on the grid, such as:
<div class="container">
<div class="item">
</div>
</div>
==========
.container {
#include zen-grid-container();
}
.item {
#include zen-grid-item(1, 1);
}
I then have a media query where, for whatever reason, I need to remove the item from the grid completely:
#media screen and (min-width:50em) {
.item {
???
}
}
To be clear, I'm not looking to re-declare the item to a different col-width/position, I just want to remove the mixin from being called completely. I know I can just reset the CSS manually, but was wondering if there was a better way from any Zen Grid ninjas.
Thanks!
Have you tried to just use
.item {
display: none;
}
in your media query? That should hide it and probably remove the spacing it took up as well.
I am trying to display an ajax spinner when loading AJAX content.
The following code appears to work fine in Firefox but not in IE7. The functions to show and hide the spinner are being called but the browser just does not display it.
Here is the jQuery:
$.ajax({
url: filterorSearch,
data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
beforeSend: function(){
showLoadingGraphic();
},
complete: function(){
hideLoadingGraphic();
},
success: function(data){
$("#BreakingNews").html(data);
GetRelatedarticles();
}
});
function showLoadingGraphic() {
alert("show");
var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
return showSpinner;
}
function hideLoadingGraphic() {
alert("hide");
var hideSpinner = $('#ajaxLoader').remove();
return hideSpinner;
}
And the associated CSS for the spinner:
#page-placeholder-wrapper #main-left
{
position:relative;
}
#ajaxLoader
{
background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:9999;
}
To get you working try this:
background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);
I don't know why the rgba has to be last!
[EDIT]
IE does not support rgba, therefore with it starting on background: it errors and the rest of the line isn't executed for the css
See: Browser Support for RGBa
JQuery actually fires events when it's doing ajax.
$(document).ajaxStart(function(){
$('#ajaxIndicator').show();
}).ajaxStop(function(){
$('#ajaxIndicator').hide();
});
This will save you a lot of time over manually doing it for each individual call.
You could have a DIV relative to the top of the document which you can show/hide which overlays everything else on the page. (I forget the exact CSS which makes it always be 200px from the top of the screen, etc) update: I think it's position:fixed, although I'm not sure how well this will work in IE.
<body>
<div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
<img src="../indicator.gif" /> Loading ...
</div>
...
Might be problems with Z sorting of your DOM elements;
IE handles Z sorting of objects in a bit different way then other browsers. Try setting z-index on your wrapper element and it should help. Generally it's a best practice if you want to save you troubles with elements positioned with relatie or absolute positioning to always give their parent proper z-index;
Having the actual page to debug would make it easier.
For the sake of my sanity and getting this done today.
I have added the "ajaxLoader" element to the markup, hidden initially with CSS and then show/hide when AJAX starts/stops.
This works fine for all browsers.
Thanks to all for their input.
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.