I can't scroll to the bottom - javascript

You see, for some reasons some times I can't scroll to the bottom of the page (some times it happens in the middle too). Here is a screenshot:
Why does this happen? I can't create a jsfiddle, because I can't reproduce it since sometimes when I reload I have this problem, sometimes it works fine... It happens in a random way. I have no idea what might be causing this. It just stops scrolling before reaching the bottom. I know this might be classified as an open question but I just want to see, if anyone have had this problem. Any suggestions are appreciated..
UPDATED
Ok, here is the code I used to style the scrollbar and the scrolling, in CSS:
body
{
scrollbar-face-color: rgb(0,131,168);
scrollbar-track-color: rgba(0,131,168,0.8);
scrollbar-arrow-color: rgba(0,131,168,0.5);
scrollbar-shadow-color: rgb(0,131,168);
}
::-webkit-scrollbar-track
{
background-color: rgba(0,131,168,0.5);
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-thumb
{
background-color: rgb(0,131,168);
}
in the javascript, "vista" is the main container, I wrote:
var vistaProfesional = document.getElementById('vista');
vistaProfesional.style.overflow = "auto";
vistaProfesional.style.overflowX = "hidden";
vistaProfesional.style.height = 100 + '%';
I have been thinking, and I found out that, when I was doing the whole thing, I wanted it to have a smooth scroll, therefore I used the smoothWheel plugin because it is easy to use and since I am new to programming this seems a charm. However, right after the code abode I wrote:
$("#vista").smoothWheel();
to initialize it and though it works, it is when this plugin is active that I have this issue. If I comment that line of code and stay with the normal scroll, the problem described doesn't occur. As for one of the comments, yes, the zoom is already in 100%

I have seen this problem in several websites before. Set your zoom level to 100% to allow you to scroll to the bottom of the page.
Often when the zoom is not equal to 100% there is a partial row that is not shown, so the website thinks that you have not displayed the bottom of the page, so won't fetch the rest, or update the scroll bar properly.

I think you should specify height to body and html because as for as i know Scrolling plugins need that, so
body, html {
height: 100%;
}
If this does'nt solve your issue you may use Nice Scrolling Plugin which has a lot of properties, also it has been documented very well.
Hope this helps you.

Related

Remove swipe away for mobile nav from Jekyll Theme (Sera)

I am trying to remove a nagging feature from a Jekyll theme I am using. The theme is called Sera by Gleesik. In essence, the mobile nabber is toggled by hitting the hamburger, the navbar pops in, and the hamburger turns into an X which can be used to close the navbar. However, it seems there is some CSS or JS that also enables the navbar to be swiped away, this is problematic because I have a rather large navbar now, and so when a user (on a phone) tries to scroll they sometimes cause the navbar to swipe to close. While it is a neat feature, I can live with only the X providing the close functionality.
Link to live preview of the theme - need to use it as mobile to see what I'm talking about
Also, I've not pasted in the CSS as even the scss file for header-responsive is too large for here. I understand this isn't the best question for here, but I am totally stuck. Even if someone could point me towards a css or js feature that does what I describe above, that would be a tremendous help since I don't even know what I am looking for.
On discussion with a friend he suggested I paste this JS from the project:
// Close Mobile Menu
$nav_menu.removeClass('active');
$toggle_menu_button.removeClass('active');
$body.removeClass('no-scroll');
});
// Toggle Mobile Menu
$toggle_menu_button.on('click', function() {
$nav_menu.toggleClass('active');
$body.toggleClass('no-scroll');
$(this).toggleClass('active');
});
Reurning yet again with some CSS this time, I've isolated the following.
// No Scroll - Lock body scrolling.
&.no-scroll {
height: 100vh;
overflow-y: hidden;
.site-header .container {
&:before {
width: auto;
height: auto;
background-color: $black-transparent;
}
}
}
Edit: Not really an answer, but this is what I did, I removed the following which was found down the page:
$window.on('resize', function() {
$nav_menu.removeClass('active');
$body.removeClass('no-scroll');
$toggle_menu_button.removeClass('active');
});
Good enough I guess, kinda bummed that iOS seems to break standards w/r/t this issue. Maybe I'm totally off base, who knows.
Thank You.

IE8-zoom breaks my layout

i have a problem with my zoom in ie8.
Okay, i have the function where i have 3 buttons. Onclick on those button my webpage get zoomed for the value that stands behind that button. All is saved into a cookie and onload of the page this cookie is loaded and the css property is set throughout the entire page.
My JS-Code:
var content = document.getElementById("zoomable");
document.getElementById('zoomable').style.zoom = myvalue;
document.getElementById('zoomable').style.overflow = "auto";
content.style.overflow = "auto";
document.getElementById('zoomable').style.MozTransform = 'scale('+myvalue+')';
document.getElementById('zoomable').style.MozTransformOrigin = '0 0';
document.cookie="mysize=" + myvalue;
Everything is okay in Chrome, IE9, IE7 (at least it seems like it is okay there, i may be wrong) and FF. In ie8 this function destroys my layout. It seems like the zoom function rezizes everything instead of just zooming in. It breaks through the borders to the right and creates a nasty overflow that isn't even scrollable. I searched and tried and tried and searched but without any success.
Does anyone know the problem? (if it is not clear, what i mean by all that feel free to ask :) )
so far
Adi
edit:
If it is important, i might add, that my layout isn't made of tables but created with divs with the "display-table:" prop
edit2:
Okay i got it.
If someone had the same problem, i show i my personal mistake.
my div for the "zoomable" property which is my body tag:
margin: 10px auto;
width: 974px;
background-color: #fff;
padding: 0 12px 5px 12px;
text-align: center;
font-size: 11px;
Now the problem is, that ie8 changed the scaling of the page width by impossible ammounts. So i used a div to wrap everything inside the body tag and gave all those atributes above to the new div and removed the older ones from the body tag. I didn't change anything in my jquery, i still use the zoom on the body tag or else i get the same problem as before.
I don't know what is causing this beheivor.. It is only in the ie8.
But thanks anyways for everyone who had read this! :D

Relative Positioning at bottom of the screen issue with Flex and different browsers

I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative

Firefox page "moves" when hiding/showing divs

We have a web page with this general structure:
<div id="container">
<div id="basicSearch">...</div>
<div id="advancedSearch" style="display: none">...</div>
<div>
With this CSS:
#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}
We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:
var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
advanced.style.display = '';
basic.style.display = 'none';
} else {
basic.style.display = '';
advanced.style.display = 'none';
}
This all works great in IE.
It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?
Is it causing a scrollbar to appear / disappear?
Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.
What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }
Here's a good related SO post.
Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).
On a side note jquery has some really nice animations that make this switch much nicer on the eyes.
I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.
Firebug has saved my hours of debugging time when it comes to CSS and showing and hiding divs.
With firebug you can view what may be different between the two divs.
From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.
One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.
I hope this helps.

How can I convince Firefox to redraw CSS Pseudo-elements?

I'm having issues getting Firefox to update a webpage when its class is changed dynamically.
I'm using an HTML table element. When the user clicks a cell in the table header, my script toggles the class back and forth between sorted_asc and sorted_des. I have pseudo element which adds an arrow glyph (pointing up or down) depending on which class the cell currently is.
.thead .tr .sorted_asc .cell:after {
content: ' \25B2';
}
The problem is, that when you click the cell header a second time, the page doesn't update the arrow... until the user mouses away from the element. I think it's a bug as it works fine in Safari, and as I don't see any :hover tags in my CSS or other entries that might interfere.
Anyone seen this before, or know how to work around the issue?
It's kind of cheesy, but since you're using javascript anyway, try this after you changed the className:
document.body.style.display = 'none';
document.body.style.display = 'block';
This will re-render the layout and often solves these kind of bugs. Not always, though.
This is 2014 and none of the proposed solutions on this page seem to work. I found another way : detach the element from the DOM and append it back where it was.
Would you be able to use different CSS to accomplish the same thing without relying on the :after pseudo-selector? You might be able to simple define a background-image which you align as needed (I assume you would want the arrow on the right hand side).
For example:
.thead .tr .sorted_asc .sorted_asc {
background: url(images/down_arrow.png) no-repeat right;
}
.thead .tr .sorted_asc .sorted_des {
background: url(images/up_arrow.png) no-repeat right;
}
I only suggest this since I assume there isn't a specific reason why you need to use the :after pseudo-class. If you do need to use it, please update.
The bug can still be triggered in Firefox 58. Thankfully the opacity trick also still works. Just make sure to time it correctly. You might need to set a timeout between opacity changes.

Categories

Resources