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.
Related
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'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.
without using any framework I'm doing this kind of transition : http://mobiletest.me/iphone_5_emulator/#u=http://daysof.me/57/promo/debug.html
but I've problem dealing with the position. In my above demo, try to scroll down and click on the second item, you will see the flick. This is not css issue, this is position issue.
I tried my research, jquery mobile have their own build in thing call silentscroll, but how I address my problem because I'm not using any of those framework?
From what I understand, you are trying to fix the position of the Back button in the Test 3 part of your link, is that right ?
For that, you'll have to apply
{ position : fixed; }
on the Back element.
You might also want to set a height to the paragraph, along with
{ overflow : scroll;}
I have a div with a horizontal scroll.
Is there any way I can detect the click on the horizontal scrolls
arrow using jQuery ?
Note:
Actually I want the scroll to move a fixed no of pixels to the right when the user clicks the right scroll arrow and vice versa.
The event should not be triggered on scroll. It should be only triggered if user explicitly clicks the scrolls arrow.
There are multiple divs having scrollbars, having same class and no ids.
Would prefer to not use any plugins
Here is a demo for what you want
http://jsbin.com/opufow/4/edit
I hope this will help you?
you can use .scroll function of jquery.
Edit 2: Another suggestion is to do something like this depending on your implementation of scrolling areas (see working jsfiddle):
function CustomScrollArrow(elementToScroll) {
var $el = $(elementToScroll);
return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
$el.scrollLeft($el.scrollLeft()+10);
});
}
$('.ScrollAreaClass').each(function(){
// You could choose to append to your scrolling
// areas or their wrapper classes or whatever...
$('body').append(new CustomScrollArrow(this));
});
Afterwards it's just a matter of styling your handmade arrows.
Edit 1: I've seen you updated your question, so here's an updated answer with an alternative solution.
You can try to circumvent the problem by using a customized scrollbars implementation, for example jScrollPane by Kelvin Luck or any other, whatever. If the solution offers click events on arrows - then you're set. Otherwise just do a bit of tinkering...
I maintain, however, my point of view that unless you are looking to perform an action before the browser executes the arrow click, I would recommend adding an event handler to the actual result of that click, i.e. the scroll.
Doing this will help to avoid inconsistencies across various implementations of scrolling in browsers; will keep working if scrolling is performed in another manner (i.e. swipe gesture); will still work if there's some javascript code that replaces the default browser implementation of scrollbars.
jQuery offers the .scroll handler to capture scrolling and .scrollLeft to determine the resulting position of the horizontally scrolled content.
Try a working jsfiddle or see the code below:
// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) {
// Get new horizontal scroll offset:
var currentLeftScroll = $('#wrapper').scrollLeft();
// Determine the difference
// (did the user scroll horizontally or just vertically?):
var leftScrollDifference = currentLeftScroll - initialLeftScroll;
// Now we can check
if (leftScrollDifference) {
/* Do something here */
}
// Reset the cache:
initialLeftScroll = currentLeftScroll;
});
function allowscroll()
{
if (screen.width<1200){document.getElementById('html').style.cssText='overflow-x: scroll !important;';};
}
<body onLoad="allowscroll();">
hi there, the above code works for any element, e.g. subbing "html" for "wrapper", but how is it possible to edit the css applied to html? Basically, because of overflow:hidden not inheriting in ie7 - which causes a big empty righthand margin and horizontal scrollbar (only in ie7, ie 8 compatibilty), ive set the css to
html {overflow-x:hidden;}
this is the only way to fix it without losing necessary functionality, e.g. overflowed graphics visibilty.
and this is all well and good, however, lower screen resolutions need the horizontal scroll just to see all of the page itself, so I'm attempting to restore the horizontal scrollbar for those users - and restore the big right margin for anyone who happens to be, for example ie7 1024 by 768 - I can live with that (unless anyone happens to have a superdupa solution).
document.getElementById('html').style.cssText='overflow-x: scroll !important;';
So the above code works for editing the CSS of any element, but not the CSS of the html.
I've also tried:
function allowscroll()
{
if (screen.width<1200){document.getElementByName('html').style.cssText='overflow-x: scroll !important;';};
}
and
function allowscroll()
{
if (screen.width<1200){window.style.cssText='overflow-x: scroll !important;';};
}
I would really appreciate any help, - if it helps in seeing the solution, the link where this applies is: delight design, basically, its how to take out:
html {overflow-x:hidden;}
from the css when in lower screen resolutions...
many thanks
Will
There are a bunch of different ways to get the html element:
document.documentElement
document.getElementsByTagName('html')[0]
document.body.parentNode
But in all honesty, there must be a better way. I don't have time right now to track down what exactly happened here, but from what I can tell, adding position:relative to whatever needs the overflow might help.
Try document.getElementsByTagName("html")[0]
Note I just edited the answer as getElementsByTagName returns an array. You want the first element in that array.
Just use the documentElement:
document.documentElement
It has full browser suport.