Tiny scrollbar doesn't work with javascript (javascript conflict) - javascript

I'm using tiny scrollbar for my new website www.digimobjobs.com
I'm using this scrollbar in many places, but this webste is the only place that has a scrollbar problem.
This is where: http://www.digimobjobs.com/news.php.
At the twitter tab and news tab, I have to put a specific scroll height:
#newsWidget
{
font-weight:lighter;
font-size:12px;
height:2000px;
color:#333333;
text-align:left;
}
#twitter-ticker{
width:610px;
/* height:921px; */
height:1025px;
color:#4297f9;
/* display:none; */
text-align:left;
}
In the rest of the places I'm using the same code of the tiny scrollbar. I think the conflict is between javascript. Actually I don't have enough knowledge of javascript.
Could any one help me please? If you use firebug you can see my entire code.
Please help me!

I have tested your site with Google Chrome and Firefox and I don't see any problem.
Extra
However, if you are still having problems on yours, you might want to consider changing the scrollbar using CSS3.
Learn more:
Surfin' Safari Blog (harder to understand)
CSS-Tricks* (easier to understand)
In conclusion, it is basically working like this: (From the CSS-Tricks site)
::-webkit-scrollbar { /* CSS here */ } /*the whole scrollbar*/
::-webkit-scrollbar-button { /* CSS here */ } /*the scrollbar buttons*/
::-webkit-scrollbar-track { /* CSS here */ } /*the scrollbar's whole track*/
::-webkit-scrollbar-track-piece { /* CSS here */ } /*the scrollbar's track*/
::-webkit-scrollbar-thumb { /* CSS here */ } /*the scrollbar's moving piece*/
::-webkit-scrollbar-corner { /* CSS here */ } /*bottom corner piece (when no resize)*/
::-webkit-resizer { /* CSS here */ } /*bottom corner piece (when there's resizing)*/
Update
I have done a few testing, and I fixed the second tab:
// Try running this in the console when it the page is completely loaded.
$("#news_feed").tinyscrollbar();
$("#news_feed").tinyscrollbar_update();
According to the Tiny Scrollbar site, it said,
The update (.tinyscrollbar_update()) method can be used for adjusting a scrollbar to its new content.
So you will have to call it every time you change the content. For example, your XML updating needs to call it every time.
But why the problem is happening?
After a few testing, it seems like the api runs before your content is loaded.
As a result, it thought that the two <div>s are empty and has no height (so no scrollbar for you).
The first Twitter tab?
Try to fix it by yourself.
I have never used this plugin before, so I might be wrong. Fix me if you see a mistake.

Please Re Init tinyScroller bar by this mathod.
$('#scrollbar1').tinyscrollbar_update();

Related

Css Double window scroll

I have created a website with many css files and js files. It was previously working fine but i dont know what happened it is now showing two scrollbars , one is of the main window and other in the content. Secondly there is a huge space where the content ends. Its all white space . I have been trying to fix it for a while but no help
Link of site
You just have to scroll up down and you will see it. it only appears on the homepage. It goes when i do any change from the borwser in css.
Just remove overflow-y and height rules for html - line 1285 and 1357 in custom.css. I don't even know what could be the function of setting this.
Honestly, it's not clear to find when you are updating page content, but once you have set your html with some of that rules:
html {
height: 100%;
overflow-y: scroll;
}
And then extend the updated content of your page, the page increased but 100% mean less then you need. It's getting normal with no-scroll.
I'm not sure that it will solve problem. You have to check out console errors that stops your JS to execute with messages like:
getElementsByTagName
On line 99 of yours custom.js wich stops to execute on this fatal error.
In your file custom.css in line 13438 uncomment this section
body, form, select, ul, div{
/* margin: 0; */
/* padding: 0; */
/* outline: none; */
}
Actually you have set body outline:0 in custom.css in line 1247
If outline will be none then all will be fine.

I can't scroll to the bottom

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.

How to remove clone() rule in Javascript when screen width is smaller than

I've been fiddling around with my navigation menu and decided to add a feature when you scroll down past a certain point the NAV slides down into viewport so that the user doesn't have to scroll back up to the top of the page to navigate. This is something that's become quite popular lately.
So I fiddled around and this javascript did the trick (note that I am not fluent with jquery at all):
jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
$("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});
});
Now I read that as ... duplicate or 'clone' (make another) .menu_wrapper element before the original + add the class .shrink to it ... AND only once we've scrolled past 700px, we'll see this duplicate NAV because of the class .slidedown
CSS:
.shrink { position:fixed; top:-400px; left:0; width:100%; border-top: 0px solid #35d3c3; z-index:99999}
.slidedown .shrink { top:0;}
Now this is working 100% and I'm stoked BUT (it's never smooth sailing is it!!!) now I've got a problem when I change my viewport to a screen width less than 767px - YES my website is responsive and this is where my NAV changes to the typical drop down (even without the javascript / effect above) by using css and javascript:
jQuery(document).ready(function($){
$('.menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#menu").slideToggle();
$(this).toggleClass("active");
});
});
My problem is that there is now a duplicate dropdown prepended NAV (1 on top of the other), like so:
+ MENU
+ MENU
The one NAV works but the other doesn't ... anyway regardless, when my media query hits 'mobile status' (below 767px) and the NAV prepends to a dropdown, this is when I DON'T want the whole slide-down-effect-clone (first jquery posted above) thing anymore. I want that rule to almost not exist or not apply when I'm below 767px screen width. How can I do this?
I've tried one of the obvious like:
.shrink { display:none}
.slidedown .shrink { display:none}
which almost seems like I've hit the jackpot leaving me only 1 prepended menu:
+ MENU
but nothing happens when I click on it - it doesn't slidedown and show the menu list items.
but I'm thinking like adding a rule within for the javasacript:
jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
$("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});
});
that when we get below a width of 767px, we ignore the clone() function / rule etc?
I've done some googling of removeclass etc but because I'm a bonehead at javascript, I'm probably doing it all wrong.
Any help I'd appreciate it?
Since you want to hide that menu based on certain viewport dimensions, why not use a media query?
#media all and (max-width: 766px){
.shrink{ display: none; }
}
or
.shrink{ display: none; }
#media all and (min-width: 767px){
.shrink{ display: block; }
}
(That might not be the best width values or CSS properties to use there, but that should get you started.)
Edit: If you wanted to do the entire thing in javascript, the matchMedia() API is there for you, too.
If the CSS media query approach that ajm posted does not work for you, you could try only executing your code if a media query is met. The code in handleMediaQuery() will only run if the width is above 767px;
//Media query listeners
var mql = window.matchMedia("(min-width: 767px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);
function handleMediaQuery(mql) {
if (mql.matches) {
// Do stuff here that you want done when the query matches
}
else {
// Do stuff here that you want done when the query does not match
}
}
See https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries for more info

Content jumps horizontally whenever browser adds a scrollbar

I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.
I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP
I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.
Use this CSS:
body { overflow-y: scroll; }
You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html
The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.
Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

Always on top html block for iPhone

How can I create a DIV block that always stays at the bottom of my page? When scrolling more content should show up right above the block. The only solution i can think of is to use 2 iframes but I prefer using CSS.
Update: The solution needs to work on iOS
Here's some CSS:
.bottomFixed {
position:fixed;
bottom: 0;
/* technically not necessary, but helps to see */
background-color: yellow;
padding: 10px;
}
Here's some HTML:
<div class="bottomFixed">Hello, world!</div>
This div would be placed at the bottom of the screen and stay there. Note: this won't work on iOS because of the way it does scrolling.
div.bottom {
position:fixed;
}
Then just move it where you want. Unfortunately, browser support is limited. IE6 for example doesn't support this option for position. Also note that this removes the div from the flow, so you'll have to make sure there's enough space for the viewer to see stuff at the bottom of the page with the div on top.

Categories

Resources