We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
Related
I am trying to detect when the browser has scrolled all the way to the end of a div, to trigger an action when that occurs - add a class to the div divToCheckEndOf
I found a jQuery solution that checks for scrollTop and height of the window and document.
$(window).scroll(function () {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - divToCheckEndOf.innerHeight())) {
divToCheckEndOf.addClass('abs');
} else {
divToCheckEndOf.removeClass('abs');
}
});
This code works fine on large desktop resolutions, but it fails on laptop resolutions and mobile devices.
Any feedback appreciated.
Thanks!
Not sure what the issue was here, but I ended up using this good old jquery solution:
if ($(window).scrollTop() > section.height() {
//we are underneath the section
}
I looked through this website for similar question, but couldn't find any.
So I've been working on a website with bootstrap3 for a little bit now and most of the formatting/design part is done, but have one problem I can't solve myself.
I added Jquery to make the navbar shrinks and changes background color when users scroll down to a certain point.(Thanks to peeps helped me out here)
It kind of works, but the movement of it is really weird.
When load the page, the navbar is already shrunk and background is colored, but when scrolled a little bit it blows up in size and the background disappears, and when scrolled even more to the point where I set Jquery to start working, navbar shrinks back and background color changes again.
It's hard to explain in writing, so please see the website and see what I'm talking about.
Below is the website I'm working on.
Test website
I'm assuming its the Jquery not working when loaded, so the CSS setting supposed to be hidden(shorter navbar height and background color) isn't hidden initially.
Below is the jquery code:
$(document).ready(function(){
$(window).scroll(function () {
if ($(window).scrollTop() > 70) {
$("#top-bar").addClass('animated-header');
} else {
$("#top-bar").removeClass('animated-header'); }
});
$("#clients-logo").owlCarousel({
itemsCustom : false,
pagination : false,
items : 5,
autoplay: true,
})
});
Thanks for the help in advance!
Nice website!
Take a look at your header element, you will see that you already put the animated-header class there which causes the problem. Here is your code:
<header id="top-bar" class="navbar-fixed-top animated-header">
What you can do is simply remove that class, and your script above will help deal with adding/removing this class base on the scrollTop value. Something like this will help:
<header id="top-bar" class="navbar-fixed-top"> <!-- without animated-header -->
We are setting our scroll position back to zero, so this works fine. Add this,
$(document).ready(function () {
$('html,body').animate({
scrollTop : 0
},10);
});
$(document).ready(function () {
$(window).scroll(function(){
if($(window).scrollTop() >= 70){
$("#top-bar").addClass("animated-header");
}
if($(window).scrollTop() <= 70){
$("#top-bar").removeClass("animated-header");
}
});
});
I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.
I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.
Skrollr Markup
data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"
CSS
.displaying {
display: block !important;
}
JS
var sk = skrollr.init({
forceHeight: false,
beforerender: function(data) {
$(".item").addClass('displaying');
},
render: function(data) {
$(".item").removeClass('displaying');
}
});
EDIT
I made a JSFiddle for it here or you can see it fullscreen for debugging here
Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.
I'm guessing that you need to do a refresh since I notice it works if I resize the browser.
Try this code:
setTimeout(function () {
skrollr.get().refresh();
}, 0);
You can change the timeout to 1000 if necessary to ensure everything loads.
Hope you are all well.
I am trying to create my own video gallery using html, CSS, and Javascript.
My idea is that there are thumbnails that are hyperlinks that when clicked, scroll to the top and plays a youtube video in an iframe.
So far i have managed to get both the scroll to top and changing the iframe source to work individually. But, annoyingly, they do not seem to work when they are together.
Could anybody give me tips on the best way of achieving my goal?
Here is the jsfiddle of the 'changing iframe source' code working: jsfiddle.net/2SH97/ (This has the design of the page and what it'll look like at the end)
Here is the jsfiddle of the 'scroll to top' code: jsfiddle.net/RpPEe/229/ (a short version of the scroll to top with my attempt to change iframe source)
Thanks in advance.
Best,
function scrollt(){
$("body").animate({
scrollTop: 0
}, 600);
}
$("[target='projectsiframe']").on('click',function () {
$("#ifr").attr('src',$(this).attr('href'));
scrollt();
});
DEMO
http://jsfiddle.net/2SH97/3/
I've searched everywhere but couldn't find anything that suited to me.
I would like to do something like on this site:
http://fromtheroughmovie.com
I've looked into the js (800kb!), and from what I could see, it's using scrollTo to stealthily scroll towards elements depending on mouse position.
The closest script I could find was this : http://scripterlative.com/files/cursordivscroll.htm
But it scrolls only when towards the edges (I hacked it to try with a superior size but it stutters with Chrome).
Does anyone know how to do a complete mouse scroll (div is 4000px large, with 6 big divs positionned as absolute)? I tried a lot of things but this leads to nowhere for now.
If more information is needed, just ask.
Thanks in advance.
Have you looked at this plugin?
http://demos.flesler.com/jquery/scrollTo/
It's a pretty adaptable plugin with lots of scrolling functionality. It uses a function called 'scrollTo' which is maybe what you saw in that site's code?
In your example code from scripterlative, you can adjust the scroll area to be from just around the edges. The example is set to 20% boundary:
new CursorDivScroll( 'userComment', 20, 10 );
You can change the second param to be 50 and see if that helps.
As for the original site you need to tidy the javascript up to see how it all works. The page content is loaded via AJAX. Search for function runTransition(page). This pulls in the 'home' page, after the intro. This content contains a more useful bit of javascript: http://www.fromtheroughmovie.com/js/main-home.js
From there, you can see how the cast images are scrolled:
<div id="home-mosaic">
<ul>
<li id="cast-image1">...</li>
<ul>
</div>
The javascript that does the hard work seems to be a jQuery animate:
$("#home-mosaic > ul > li").mouseenter(function() {
$(this).find("div.home-mosaic-separation").animate({'width': (currentWidth*0.20) + 'px', 'left': (currentWidth*0.40) + 'px'}, 400);
});
$("#home-mosaic > ul > li").mouseleave(function() {
$(this).find("div.home-mosaic-separation").css({'width': (currentWidth*0.02) + 'px', 'left': (currentWidth*0.49) + 'px'});
});
Hope that helps!