a overflow:hidden body element works well on desktop browsers. but mobile browsers/ touchscreens ignore this behavior.
<style>
body {overflow:hidden; height:100%; width:100%;}
.content {height:2000px; width:1000px;}
</style>
<body>
<div class="content"> long content </div>
</body>
I think the problem comes from the touch!? But I don't know how to fix this.
Not sure if it helps but the way I got around it was using another container inside the body tag that wrapped everything else and put overflow on that. i.e.
.siteContainer{
position:relative;
overflow:hidden;
}
Related
I have a simple div which has a transition. It transitions from a yellow background to a red one.
<div class="foo" ng-class="{'foo-visible': vm.visible}">
The transition is played once the foo--visible class is added to the div.
This works fine in Chrome, IE...etc.
However once I add a wrapper div around it, the transition stops working in Internet Explorer (tested with IE10).
<div class="foo--wrapper" ng-if="vm.visible">
<div class="foo" ng-class="{'foo--visible': vm.visible}">
</div>
I need to include ngAnimate in this case. Then it works in Chrome, but in IE I immediately get the red div, the transition is never played. No transitionstart (IE only) or transitionend events are fired.
Here's a plunker illustrating the issue:
http://plnkr.co/vpJzudnLxTwoJGZoZaNd
Does anybody have an idea what is causing this?
This plnkr adds two similar boxes to yours. http://plnkr.co/edit/lkyWHu?p=preview
<div ng-if="vm.visible">
<div class="animate-box animate-if">
<h2>Inner Class</h2>
</div>
</div>
<div class="animate-box animate-if" ng-if="vm.visible">
<div>
<h2>Outer Class</h2>
</div>
</div>
The "Outer" works in both IE and Chrome.
Chrome iterates the child animation for "Inner" in a way that makes sense. Internet Explorer, as for your example, does not.
On closing, neither do the child animation because the delay to remove the parent is zero.
An interesting point though, IE and Chrome appear to work the same for the authoritative answer at https://docs.angularjs.org/api/ngAnimate/directive/ngAnimateChildren
The CSS I used was:
.animate-box {
height: 100px;
width: 100px;
background-color: red;
}
.animate-if.ng-animate {
transition: all 3s linear;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
background-color: yellow;
opacity: 0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
background-color: red;
opacity: 1;
}
here's my plunker: http://plnkr.co/edit/HSVBuzzp1IIDjFdbuf4E?p=preview
in short: I cannot find a way to put the footer at the bottom of the page.
I tried to just rely on html:
<footer></footer>
I tried using bootstrap ui's class:
<div class="modal-footer">
or
<div id="footer">
<div class="container">
...
</div>
but nothing...It just doesn't seem working...
Check this out:
http://plnkr.co/edit/caLGN05wzH3Ls2PcRoTe?p=preview
html, body {
height: 100%;
}
.modal-footer {
position: absolute;
bottom: 0;
width: 100%;
}
I have added some more css in the head of the page.
Firstly, if you inspect the page, the length of the body is only half of the page. So we have to give it height 100% so that it takes the whole page.
Secondly, to place footer at the bottom of the page, we need to position it as absolute so that it aligns itself to its first positioned parent(in this case none, as we have not specified position to any other element), and then you can specify bottom as 0 so that it sticks to the bottom.
This is the normal way in which we can put footer at the bottom. You can check if bootstrap might have something inbuilt.
Hope this helps.
I'm trying to get a div container with some text to fade in after the page loaded, but I fail. I was using the ng-animate directive like this:
<div class="motd" style="text-align: center;" ng-init="quote = getQuote();">
<div class="slide-fade" ng-class="animation">
<span class="quote"><i>{{quote.content}}</i></span><br><br>
<span class="author">{{quote.author}}</span>
</div>
</div>
Which obviously does not work, due to the fact that the animation does not get triggered by a click or something like that.
So how do I tell the browser that after the page loaded, it should fade in my text?
I hope you can help me!
Edit: At the date where I asked, I did not know that animations will also trigger when the page has loaded. I always thought there have to be some "user interaction" like a click or something to trigger them.
If you're using bootstrap, you can do this:
<html ng-app="myApp" ng-strict-di>
<head>...</head>
<body ng-init="ngLoaded = true" class="fade" ng-class="{ in: ngLoaded }">
<div>Content</div>
</body>
</html>
It may also work do to it this way as well:
<body
ng-app="myApp"
ng-strict-di
ng-init="ngLoaded = true"
class="fade"
ng-class="{ in: ngLoaded }">
<div> Content </div>
</body>
The fade class has 0 opacity and the in class applies the transition. ngLoaded will become true (in the $rootScope, I believe) as soon as angular has loaded due to ng-init="ngLoaded = true".
I use this so that the page doesn't blip with bits of angular brackets and such while the page loads.
I don't see the problem.
You just want to have animation when the element appears( you can think about it that way right? ).
Basicaly what I would do.
I would use then animate.css
http://daneden.github.io/animate.css/
and I would just add:
class="animated fadeIn"
Or plain css with this animation.
What I like to do is to use delay
.delayedx1{
animation-delay: 0.2s !important;
-webkit-animation-delay: 0.2s !important;
-moz-animation-delay: 0.2s !important;
-o-animation-delay: 0.2s !important;
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
x2 x3 x4 or in ng repeat delay directly in "style" based on $index.
One way to do this is to use a flag (like $scope.fade = false;) to indicate that the page has loaded. Then, on your element, you'd use an ng-class with a conditional e.g.
class="animation" ng-class="{'fade-in': fade }"
The actual fade would be handled by CSS.
.animation { opacity:0; transition:all 200ms ease-in-out; }
.animation.fade-in { opacity:1; }
In your case, the fade-in condition could be as simple as ng-class="{'fade-in': quote }" since any truthy value you cause the class to get applied.
Here's a working plunker for you to play around with: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview
I have a website running on a mapping platform called Ushahidi. The default template is quite boxy so I was fiddling with the CSS and rounding everything off using border-radius.
It has helped with other elements but the map is such a square it won't ease up!
It might be that it's not possible, wondered if anyone here had any experience of this. The html using inspect element and view source are different. Not sure what this means exactly but guessing that the html is pulled in by the map provider?
Here is the html on view source:
<div class="map " id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
<div id="mapScale"></div>
<div id="mapMousePosition"></div>
<div id="mapProjection"></div>
<div id="mapOutput"></div>
</div>
I've added a screen of inspect element HTML too. Looks like it's using "Open Layers". I've heard of that but don't fully understand whats going on.
Is it possible to round the edges of my map? Here is the site if that helps: http://tinyurl.com/c8djrvr
Apply the border-radius to two layers.
CSS
div.map {
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 25px; /* ADD THIS */
}
#OpenLayers_Map_11_OpenLayers_ViewPort {
border-radius: 25px; /* ADD THIS */
}
It works. Use however many pixels you want. I used 25px.
I would suggest more general and safer CSS selectors (since ID #OpenLayers_Map_11_OpenLayers_ViewPort is generated by OpenLayers and it's value is unpredictable; and OL 2.12 and older produce ID's, that contain dot and are therefore unsuitable for CSS selectors):
.olMap, .olMapViewport {
border-radius: 25px;
}
Here is the link :
www.guidegather.com
(sorry, tried posting image but cannot)
If you look at the footer section, it appears correctly in all major browser (including IE9) but in IE7, the width of the div#mainfooter follows the max-width of .center class instead of extending horizontally to fill the space.
Here is the CSS :
.center{
margin:0 auto;
padding:0 50px;
max-width:960px;
}
#mainfooter{
background-color:#000;
color:#CCC;
list-style:none;
}
Here is how the HTML roughly looks like :
<body>
<div class="center">
Something here
</div>
<div id="mainfooter">
<div class="center">
Something here
</div>
</div>
</body>
As you can see, the div#mainfooter is independent of the previous div, but the width is restricted to the max-width of the previous div (and child div). Any solution to this?
Any help is appreciated. Thanks!
Since #mainfooter's rules will take priority over any inherited rules, you could specify a width for #mainfooter (width: 100%, or barring that, max-width: 100%). That should solve the problem.
So the solution is to add display:block to #mainfooter. Hope this helps anyone facing this issue in the future and great thanks for those who tried helping me