I'm having problems changing the background color of an element (".background") using Scrollmagic. I've successfully changed other elements background colors, but this specific one has defeated me. Here is the scenario:
When a user scrolls down to or clicks on the "Studios" navigation link some of the elements will change background colors (most of them work already). I'm specifically trying to change the background color of the "tooltips." These are the boxes that appear if you hover over the navigation dots on the left (there are 5 currently) or top (currently 2 on the Studios section). Each of these tooltips has the "background" class.
When you first load the page and hover over the top dot on the left you should see "Expedition" pop up in a purple box. When you scroll down to Studios it should change this box and others like it to a red box. It doesn't.
Here is a link and relevant code.
Link to live example
Warning This is a work in progress. Ignore the fact that a lot of other things don't work. This definitely won't work on mobile or small-width devices.
//Studios
var redBG = '#7d1217';
var redLight = '#7d3537';
var redNav = '#fc1925';
function tooltipStudios() {
jQuery(".backdrop").css({"backgroundColor" : redBG})
}
//Create Studios Timeline
var studiosColor = new TimelineMax()
.to('#site-header-menu', 0.3, {backgroundColor: redLight})
.to('#wpfp-navmenu', 0.15, {backgroundColor: redBG})
.to('#fp-nav ul li a span', 0.3, {backgroundColor: redNav})
.to('#secnav-studios span', 0.15, {backgroundColor: redLight})
.to('.dropdown-content li', 0.05, {backgroundColor: redBG})
.to('#colophon', 0.3, {backgroundColor: redBG})
.to('.background', 0.15, {backgroundColor: redBG});
// Studio Scene
var studiosScene = new ScrollMagic.Scene({
triggerElement: '#slide-studios',
offset: 200
})
.setTween(studiosColor)
.addTo(controller);
I've been trying to narrow down what is preventing it from triggering and so far here is what I can think of:
The Fullpage plugin has a default setting for color (right now it is the purple) and is preventing any changes somehow. The css it includes is a style tag with ID "wpfp-dynamic-css"
.to() isn't the right action to use in the tween. This is my first time using Scrollmagic so I'm learning as I go.
I wanted to see if there were other ways to change the tooltip color successfully and I was able to. You'll notice in the code block i included i have a function called tooltipStudios(). If I use this function as a call() in the tween it will successfully change the color (you can see an example if you go down to the Agency section. It will change the tooltip bg to #000000). However, the color won't change back if you scroll back up to any section like the colors of other elements do when I use .to().
I'm completely stumped at this point. Here is a quick list of some of the relevant plugins/scripts that you may need:
Wordpress (up to date at the time of writing)
WP Fullpage plugin (incorporates fullpage.js)
Scrollmagic (up to date at the time of writing)
Please feel free to ask for any other information/code and I'll supply it.
Thanks in advance to anyone willing to tackle this!
If you read fullPage.js FAQs you'll find the answer in this questions:
jQuery scrollTop function doesn't work
jQuery scroll event doesn't work
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.
Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
Related
Demo
Codepen
PRESS FULL SCREEN ICON ON MAP IN CODEPEN TO START TOUR
Desired Outcome
The bootstrap tour element should appear over the top of everything, along with highlighting the element its targeting.
What I'm getting
Ignore the difference in red button compared to image above, content doesn't matter
Problem
When the user toggles the fullscreen button (using leaflet fullscreen plugin), it starts the tour.
The tour is activating fine, but the elements of the tour are not responding properly, my hunch is that it is struggling to compete against the fullscreen map for attention at the front as it were.
Currently, the popover isn't displaying, even when in the dev tools I put its z-index as high as it will go. The dark overlay also isn't displaying over the top of the fullscreen map.
Lastly the target is not being highlighted properly. When inspecting the target on other pages with the tour working, it is still the original element, but when inspecting element on this page, it's not the element, but a new bootstrap div placed over the top. No idea why it's not working in the same way.
What I've tried
Tour code
//Bootstrap tour
function takeTour() {
console.log("Taking tour");
("use strict");
// Instance the tour
var tour = new Tour({
name: "leafletTour",
storage: false,
steps: [
{
element: "#custom-control",
title: "One Stop Tour",
content: "There is only one stop in this tour",
placement: "right"
}
],
backdrop: true
});
tour.init();
tour.start(true);
}
My understanding is that bootstrap tour assigns the target elements new classes as they are selected, which are then set to z-index: 1101
I have been trying to brute force higher z-index's onto the bootstrap tour elements, but with no luck - no matter how high I set them, they aren't fighting to the top level.
I've also forced the map to be z-index: 100 !important, and still overrides to the top - despite in the dev tools still showing as z-index: 100 !important
Any ideas/advice would be great.
I have reviewed your code, its really strange but i have found one solution :
Just add class
.fade{
opacity:1 !important;
}
Here you can find working example.
https://codepen.io/anon/pen/MveMrL
Hi I'm trying to get 2 plugins to work so that when you scroll there's a 'slide' transition from one full page container to another along with a background color fade transition.
Plugins
Magic scrolling colour
http://codepen.io/daveredfern/pen/zBGBJV
Fullpage.js
http://alvarotrigo.com/fullPage/
However the 'magic scrolling colour' doesnt seem to work if I contain all the ".panel" divs in any other tag/div other than - the issues is that I need a container div in order for fullpage.js to work.
Even if I change the background colour js to target that container div name
(i.e. )
$body = $('#fullpage') or $body = $('fullpage')
...it still won't work. I find it hard to believe it wouldn't work with anything between the variable divs and body tag.
I've mocked up an example of the issue here: https://codepen.io/anon/pen/qmbmMm
I would be grateful if you could offer any assistance!
Cheers
The problem is that you have
#fullpage {
background: #f4f4f4;
}
and
.color-indigo {
background-color: #4332CF;
}
In CSS ID's have a higher priority than classes, so it overrides the custom color always. Easy fix, change the classes to
#fullpage.color-indigo {
background-color: #4332CF;
}
The scroll event won't get fired in fullPage.js unless you use the fullPage.js options scrollBar:true or autoScrolling:false as detailed in the fullPage.js FAQs.
So, you need scroll bar in order to register the scroll event that is being used by Magic Scrolling Color.
If you do not want to use a scroll bar and just want to recreate a fading effect, I would encourage you to go for the fullPage.js Fading Effect extension.
Please, if somebody know, how to build main menu like on that webpage, can you help me?
I really like their menu, namely the fact that when you are scrolling down - it changes . And when you return to top again, its resets to original design. Thanks a lot.
I know how to create menu, edit it, etc. I do not know on what principle works switching of design.
Here we go:
You should do it with jQuery script like this:
This will change the page color to blue when you scroll more than 210px, and will revert back to red if you go back up:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("#header_menu").css('background-color', 'blue');
} else {
$("#header_menu").css('background-color', 'red');
}
});
});
Or you can see there code source, open the web page and click right click mouse choose 'Explore'(Prozkoumat in czech language). Here you can watch how works it, it's easy:)
Hope it helps;)
The basic premise of the navigation you reference in your post is scrollTop() ( https://api.jquery.com/scrollTop/ ). The WordPress theme (Avia) used on your reference site has a jQuery function that does the following:
By default, add a class that applies the transparency effect.
'Listen' to the scroll position of the website and, if it is >50px remove the transparency class (allowing the default stylings to take effect). Re-apply the transparency class as needed.
Other than that it's a bit of CSS transition effects to make the change a bit smoother. This particular website relies on jQuery due to it being a WordPress installation, but you can achieve this same effect using any other JavaScript library (or in pure JS if you are so inclined).
I want to stop the toolbar from scrolling with the page up and down. I am using ckeditor 4 "beta" as i want to use it's inline editing feature.
I looked through the config class properties without any luck:
"http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.config".
I took a look at the rest of the API for any hooks to the toolbar events with no luck either. I also tried to find where the toolbar listens to scroll events and remove it. No luck!
is there anyway to do this? Even if I need to dig into the code and change it by myself! I just need someone to point me to the right direction.
Indeed there's no such an option right now. We'll add some, but first we have to release final v4 version :).
Anyway - to stop toolbar floating update plugins/floatingspace/plugin.js:57 to:
function changeMode( newMode ) {
var editorPos = editable.getDocumentPosition();
updatePos( 'absolute', 'top', editorPos.y - spaceHeight - dockedOffsetY );
mode = newMode;
}
It works for me - toolbar is displayed above the content and it doesn't move.
I have some jquery ui sliders you can see here
When you click the slider bar, the tic jumps to that part of the bar. This is great however the bar is very thin and easy to miss when you try to click it. I don't want to change the appearance but I am wondering if there is a way to make the click radius a little padded so if you click a few pixels above or below the bar it still counts as clicking the bar.
It's a pretty hackish solution, but I believe this will work. What you need to do is to inject an additional transparent element into each slider that has a height larger than it's parent's. The code looks something like this:
$('<div></div>').appendTo('.ui-slider').css({
'height': '20px',
'position': 'absolute',
'top': '-8px',
'width': '100%'
});
Of course it would be better if you give them a class and apply the CSS in the stylesheet instead. In addition to that, I would suggest adding in cursor: pointer to make it clear which areas are clickable.