I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does everything I need but I'm having a little trouble with it calculating the wrong height.
You can see the issue at: http://verypc.very-dev.co.uk/
You'll need to shrink the menu down, then hit the 'hamburger' at the top left. The menu slides out but you'll notice that you can still scroll the body of the page. The extra height is coming from pikabu and an inline style that it calculates.
My initial thought is that this is something within my CSS that's possibly causing the extra height but I haven't been able to track it down successfully.
I'm trying to avoid editing Pikabu itself but it's not a huge problem to do so if necessary.
Any help would be great!
this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)
line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();
window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)
you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile
I was fiddling around with Firebug.
In the css when you turn off header { position: fixed; } it seems to pop into the right place (main.css).
I would not use position: fixed/absolute at all in CSS. If you remove those, including the top: 0, right: 0 and height: 50px tags, you clean up your code. It seems to work properly too.
Related
I am currently runnning a test site on Wordpress.
I have my page with several divs which have IDs and a menu on top with anchors which lead to those IDs.
My header is sticky, so when I click an anchor, it navigates to the div ID, but the beginning of the div stays hidden below the header. I would like it so that when I click an anchor, it navigates to the div, but few pixels above it.
I managed to do that, though with a little problem.
(function($,document){
$("a[href^='#']").click(function(){
var url = $(this).attr('href');
$('html,body').animate({scrollTop: $(url).offset().top - 90}, 2000);
});
})(jQuery);
What happens is:
I click an anchor with a href="#someid"
My browser navigates to the #someid with offset of - 90px (It works perfectly so far)
Then my browser scrolls 90px down, to the position where the div #someid starts at the beginning of the viewport (and behind the sticky header).
Finally my URL changes to http://example.com/#someid
I just want to delete step 3. Any help is much appreciated.
Update:
I just found out my theme has jQuery "One-page-nav" plugin installed and it is interfering. Still trying to understand how it works and if I can modify it to have offsets
I was having the same issue and in my case I solved it by adding padding-top and a negative margin-top of the same value:
.some-class {
padding-top: 4em;
margin-top: -4em;
}
By doing this my element looks like it's on the exact same location but the browser finds it sooner while scrolling. You can set these values to the height of your sticky header or play around to make sure the heading is exactly where you want it to be.
I hope I'm explaining this in a way that's understandable... It sure makes sense in my head :D
I'm looking to do a fluid reponsive equal height column, with an 'overlay' on click.
To get the responsive equal height thing working, I've made the 'overlay' the actual base content (so it sizes the columns), and am attempting to then put the initial state in the overlay.
This works fine on FF and Chrome, but not IE10 or 11 (haven't tested earlier).
On IE, doing position: absolute; right: 0; left: 0; top: 0; bottom: 0 inside a TD doesn't seem to make the overlay cover the whole TD, rather just the size of the content inside it.
http://codepen.io/anon/pen/dooJjb
Any ideas?
Bonus Points:
What my designer originally wanted was for the header to slide up, and the paragraphs to slide up from the bottom - don't really think this is possible without a lot of JS?
I've not checked your example in IE but I know there are serveral ways you could get this working on all browsers.
I always avoid before & after with layout as they have some cross browser issues, this may not be your current show stopper but either way before & after are not really for layout IMHO.
I did something similar a few months ago:
[ [box,box,box] [overlay,overlay,overlay] ] : The two holders have position absolute, top & left = 0, the overlay holder z-index:1.
[ [box,overlay] [box,overlay] [box,overlay] ] : The boxes are relative and the overlays are positioned absolute. All overlay dimensions are defined and given a z-index of 1.
The key is to keep it clean you really don't need more than 3 levels deep in this scenario you just need to position, and set the layers right.
Animating paragraphs would be clean, with jQuery but I'd prefer to us another animation lib like GSAP. But if you must natively and if you can afford to skip the animation with IE8 then you will basically set CSS3 transitions and use something like .classList to toggle the class http://jsfiddle.net/davidThomas/Tpz86/
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
Hoping that someone out there has some experience with packery, which I'm using for a project.
I cannot get the horizontal layout to work. Declaring the packery object in HTML seems to work somewhat.
<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
...
</div>
Although it appears that the width and height are not changed through CSS as the documents suggest. But I've not bothered digging further because I need to use Javascript. And the equivalent doesn't seem to work at all:
$('.packery').packery({
itemSelector: '.item',
isHorizontal: true,
});
This results in the <div> element the packery object was assigned to 0px high and 4px wide. (The 4px width probably comes from some items' 1px border.) The packery docs say that horizontal layout requires setting height. But the CSS provided by the docs seems to do nothing, whether packery was initialized in HTML or Javascript:
/* containers need height set when horizontal */
.packery.horizontal {
height: 200px;
}
Still, none of my inserted items are visible and the packery <div> is 4px x 0px. So, I forced the container's height in Javascript:
$('.packery').css('height', '400px');
This does increase the element's height but the width remains at four. And therefore all the elements are essentially zero width and invisible. So, I tried forcing the container's width:
$('.packery').css('width', '1000px');
But this width seems to be ignored. I can force the <div>'s width using the element editor in Chrome's developer mode, and that produces some visible, although ugly, content. But how the hang do I set the <div>'s width in Javascript? It seems packery is overriding the width I set, whether I do it before or after the call to packery().
Everything in packery seems to work great for vertical layouts. But I really want to use the horizontal layout but I'm obviously doing something wrong. Can anyone help?
I had similar issue with the isHorizontal option. I solved it using !important tag in my css on the div width around the packery.
I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...
I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns
Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.