I have a div which starts display:none. I want it to display on scroll and animate down at the top of the page (it's a fixed position menu).
I can make it display on scroll, but I can't figure out the animation.
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = 120;
var bottom_of_window = $(window).scrollTop();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
if ($(this).css('opacity')==0) {$(this).fadeTo(0,1);}
} else {
if ($(this).css('opacity')==1) {$(this).fadeTo(0,0).hide();}
}
});
});
I'm probably looking at $(this).animate but I don't really know what I'm doing and have no idea to incorporate this into my existing code. Animation required: Move top of div from top -66px to 0px.
Html:
<div class="hideme" style="display:none; z-index:4000; position:fixed; background-color:rgba(255, 102, 0, 0.95); top:0px; height:66px; width:100%; left:0%; border-bottom:1px solid rgba(255, 255, 255, 0.5)">
<img src="logo_01_151_45.png" alt="logo" style="position: fixed; top:10px; left:50%; margin-left:-490px"/>
</DIV>
Any assistance you can provide would be greatly appreciated. Thank you.
Solved:
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = 120;
var bottom_of_window = $(window).scrollTop();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
if ($(this).css('opacity')==0) {$(this).fadeTo(0,1).animate({top:'0px'});}
} else {
if ($(this).css('opacity')==1) {$(this).fadeTo(0,0).hide().animate({top:'-66px'});}
}
});
});
Related
All my secondary header navigation links can only go (top left, bottom left, top right, etc.).
Currently enabled as "top left", however I want two out of those four links to be "top right".
Current code works perfect, other than after the 75% resizing mark, the links discombobulate.
#media screen and (min-width: 800px)
{
a[href="/terms-of-use"]
{
position:absolute;
right:120px;
}
a[href="/privacy"]
{
position:absolute;
right:200px;
}
}
It has been said that using absolute positioning within flex-box will not work reliably. I'm going to guess that, because I was viewing your site in Firefox and Chrome and did not see the issue, that you are viewing your site in Safari, where the issue can be seen.
In any case, due to the above, I would recommend using Javascript in order to move the navigation items to the desired location. Then, add some additional CSS in order to get those newly-moved items to look like the others.
First, remove the CSS you've added that addresses those navigation items.
Then add this via site-wide Footer code injection:
<script>
(function() {
var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
var i;
for (i=0; i<targetLinks.length; i++) {
targetParent.appendChild(targetLinks[i]);
}
})();
</script>
And finally, add this via the CSS Editor:
body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
margin: 0 .618em;
padding: .618em 0;
font-family: myriad-pro;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
display: none;
}
I'm a bit of a noob to ionic so this may be a dumb question.
On the press of a button I want to overlay my entire app with a black image (or make everything invisible) but still have the buttons working underneath.
My app is based on the tab sample app.
So far I've tried the following
app.scss
.dark-overlay {
background-color: #000 !important;
opacity: 1;
}
my-tab.html
<ion-content class="dark-overlay" (ng-hide)="showOverlay">
....
<div tappable (click)="stealthMode()"><img src="assets/img/stealthMode.png" width="100%" scroll="false"></div>
my-tab.ts
stealthMode () {
this.myElements = document.querySelectorAll("dark-overlay");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
}
Even if i can get this to work it's not going to be the final answer as setting the opacity in app.scss to 0 still leaves the tabbar visible but I need that to go black too.
I think it's related to property binding.
Any ideas?
Thanks
you need to use pointer-events to let events go through your dark overlay.
I have demonstrated that in this Plunkr (go to second tab which shows home page)
style.css
.dark-overlay{
position:absolute;
width:100%;
height:100%;
background-color:#888;
opacity:0.9;
top:0px;
left:0px;
z-index:1000;
pointer-events: none;
}
and have this in home.html
<button (click)="stealthMode()">Tint</button>
<div class="dark-overlay" [hidden]="showOverlay"></div>
and this in home.ts
showOverlay:boolean = false;
stealthMode(){
this.showOverlay = !this.showOverlay;
}
You can make a binding to render that part dynamically using angular directives.
Check this for clean implementation:
ngIF
Is there a way to use Bootstrap 3 Fixed Navbar to have it fixed to top on md+ but fixed to bottom on smaller devices?
Currently doing this with two separate navs being hidden and displayed based on screen width. Would much prefer to have one nav that will affix based on screen size but can't figure out how.
I'm front end and do not know JavaScript so please be detailed in any instructions that may include JS!
Thanks in advance.
If you don't want to use javascript for this case, here is my solution.
Since you should use:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
to make the nav fixed to top or:
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
to make the nav fixed to bottom you can simply do this insted of those two:
<nav class="navbar navbar-default navbar-position" role="navigation">
And after that:
/* LESS */
#media (max-width: 767px) {
navbar-position {
.navbar-fixed-bottom;
}
}
#media (min-width: 768px) and (max-width: 991px) {
navbar-position {
.navbar-fixed-bottom;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
navbar-position {
.navbar-fixed-top;
}
}
#media (min-width: 1200px) {
navbar-position {
.navbar-fixed-top;
}
}
So, as you see, insted of navbar-fixed-top or navbar-fixed-bottom you can use navbar-position witch inherit navbar-fixed-top or navbar-fixed-bottom classes depending of device type (xs, sm, md, lg)
Pretty simple with a bit of jQuery.
Simply check the width of the browser on load, and if it's equal to or less than 768 pixels wide, add navbar-fixed-bottom to your navbar.
jQuery:
var width = $(window).width(),
height = $(window).height();
if ((width <= 768)) {
$('.navbar').addClass('navbar-fixed-bottom');
}
The variable width gets the width of the window on load, and then the if statement checks to see if it's equal to or less than 768 pixels. If it is, then it appends the appropriate class, otherwise it leaves it alone. You need to fire this on page load, so it'll end up looking more like this:
$(function() {
var width = $(window).width(),
height = $(window).height();
if ((width <= 768)) {
$('.navbar').addClass('navbar-fixed-bottom');
}
});
FIDDLE
Simply make the result pane in the fiddle narrower to simulate a samller device/screen size/window, then hit run to see it flip from top to bottom.
Optionally, you can make it switch from top to bottom even if the user resizes the window. Could come in useful for when a user rotates a mobile device.
$(window).on('load resize', function() {
if($(window).width() <= 768) {
$('.navbar').addClass('navbar-fixed-bottom');
} else {
$('.navbar').removeClass('navbar-fixed-bottom');
}
});
I made a JS Bin for this one because JS Fiddle was acting weird with the load feature. Adjust the size of the output window to see what I'm talking about with this bit of code.
I'm trying to implement a navigation toolbar down the left side of my application with rotated buttons. When I rotate the buttons using css transform:rotate, border container still does all of its layout calculations as if the buttons were not rotated so they end up overlapping and in the wrong position vertically. Before I dig into understanding the dijit/layout/utils module well enough to solve this, I'm wondering if anyone already has a solution I'm just not seeing.
Thanks!
Fiddle here http://jsfiddle.net/eric_isakson/2bkKk/6/
JavaScript:
require(["dojo/_base/window", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer"], function(win, Toolbar, Button, BorderContainer) {
var bc = new BorderContainer();
bc.placeAt(win.body(), "last");
var tb = new Toolbar({region: "leading"});
bc.addChild(tb);
var b1 = new Button({label: "button1"});
tb.addChild(b1);
var b2 = new Button({label: "button2"});
tb.addChild(b2);
bc.startup();
tb.startup();
b1.startup();
b2.startup();
});
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
.dijitBorderContainer {
width: 100%;
height: 100%;
}
.dijitButton {
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
display: block;
}
Here is the desired appearance:
If i understand you right, you want your Buttons horizontal?
Then you only need to delete the rows for the rotation.
.dijitButton {
display: block;
}
Regards, Miriam
Well, my application requires me to disable the entire grid , on a button click.
I tried to use
var grid = dijit.byId('myGrid');
grid .set('disabled',true); , but it's not working.
I basically need to 'grey out' all the contents of the grid , so that the user cannot select any row. Thus, just changing the CSS doesn't help me.
Please reply.
Thanks,
Sonia
I actually don't know, but I have a rather ghastly way to do it myself. I create a partly transparent overlay over the grid when it's disabled.
So I'll have this CSS:
.gridOverlay {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99;
display: none;
background: rgba(0,0,0,0.02);
}
.disabledGrid { color: #DDD; }
.disabledGrid .gridOverlay { display: block; }
And my button's click event will be something like this:
dojo.connect(dojo.byId("btn"), "onclick", function()
{
//dojo.byId, not dijit.byId, to get the outer DOM node
var grid = dojo.byId("myGrid");
if(!dojo.query(".gridOverlay", grid).length)
{
dojo.create("div", {"class": "gridOverlay"}, grid);
}
dojo.toggleClass(grid, "disabledGrid");
});
Like I said, ghastly, but for my use it actually did the trick. YMMV :)