I've total four 4 sections and a footer.
Section one, two , three are normal sections.
On section four I need normal scrolling as its height is more than window height.
Below code works fine with keyboard scrolling and mouse scrolling.
But On mobile I've issue while scrolling upward.
Please open the link on a touch device too see the issue.
Js fiddle here
<div id="fullpage">
<div class="section">One</div>
<div class="section">Two</div>
<div id="three" class="section">Three</div>
<div id="four" class="section fp-normal-height fp-normal-scroll">
<div style="height:1000px;">Four</div>
</div>
</div>
<footer style="height:300px;">Site footer</footer>
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
hybrid:true,
fitToSection: false,
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
if(loadedSection.attr("id") == "four") {
$.fn.fullpage.setAutoScrolling(false);
}
if(loadedSection.attr("id") == "three") {
$.fn.fullpage.setAutoScrolling(true);
}
},
});
when we swipe upward from section 4 (as at this point Autoscrolling has been set to false) the swipe takes user directly to first section.
I think The reason Its happening because, when user swipes, the page gets scrolled to the top as normal scrolling has been triggered. If I do console log I can see autoscrolling is being set back to true when it passes section 3 but still page scrolls till top as swipe has triggered the scrolling when auto scrolling was false .
if you open below link on mobile you will see the issue above described. Works fine for keyboard.
Expect issues.
The hybrid option is not documented which means is might not work as expected in all possible scenarios.
Related
I'm using a multi-sectioned website in fullpage.js. Some of the sections should be available only through scrolling, but not through a navigation link. For example, in the first section, you should get to a second part of that section by scrolling (once), but the navigation will still show the first element as active. If you click on the second link in the navigation, you get to the second real section, which would be the third, if you consider the first two seperate. When I assign two sections the same anchor in the initialization, scrolling between the two stops working. If I try to assign multiple values for data-menuanchor in the navigation, it doesn't work either.
The best way to do it would be to create your own navigation element and not the one provided by fullpage.js.
This way you'll have total control over it.
By using the fullpage.js method moveTo you can activate or desactivate elements in your menu by adding or removing a class and you can do that using a callback such as afterLoad or onLeave.
Demo online
Having the following HTML menu:
<div id="myMenu">
<span id="element1">Section 1</span>
<span id="element2">Section 2</span>
<span id="element3">Section 3</span>
</div>
You can use this:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
afterLoad: function(anchorLink, index){
var activeElement;
if(index === 1){
activeElement = $('#element1');
}
else if(index === 2 || index ===3){
activeElement = $('#element2');
}else if( index === 4){
activeElement = $('#element3');
}
activeElement.addClass('active').siblings().removeClass('active');
}
});
I have an element, #i1, that is below another element, .close_button, and they each have a click event associated with them...the former's is called clickFade() while the latter's event is a anonymous function that is defined within the execution of the aforementioned clickFade().
When clickFade() is called by clicking on #i1, the parent div,#welcome, is fadedTo opacity .1 and #A is fadedIn. Also, unbind() is called for #i1 and the anonymous function mentioned above that is associated with a click event on .close_button is defined. This function just reverses the effects that clickFade() has when a close_button image is clicked.
I don't think the problem is a z-index issue (because I've tried it already and the close_button image is always visible on top). I also don't think it's a binding issue because the button works, but only when there's nothing underneath of it...for example, if the button is half overlapping one of the background images like #i1, the half that isn't on top of #i1 will trigger the event while the other half will not.
What's the problem here and how can I fix it?
Here are the gists for the HTML, CSS, and JS; here's the relevant code:
HTML:
<div id="welcome">
<p id="welcomeText">Welcome</p>
<img src="imgs/img1.jpg" id="i1" alt=null/>
</div>
<div id="A">
<img src='imgs/close_button.gif' class='close_button' alt=null
style="width: 10%; height: 10%"/>
</div>
JS:
function clickFade() {
$('#welcome').fadeTo('slow',.1);
$('#i1').unbind('click',clickFade);
$('#i1').unbind('mouseover',mouseOverFunc);
switch (this.id) {
case "i1":
$('#A').fadeIn('slow');
$('.close_button').click(function() {
$('#A').fadeOut('slow');
$('#welcome').fadeTo('slow',1);
$('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
});
break;
.
.
.
}
}
So you both have to set the z-index AND set position:relative for this to work.
z-index not working with fixed positioning and others. Good luck!
I've got everything working well except the drop area element doesn't hide after moving back off the page.
For example, if I drag something to the page, the drop area element shows, but then if I decide not to drop, it stays visible instead of hiding. It looks like in the demos on the site, it should hide again.
I've been studying this page: http://docs.fineuploader.com/branch/master/integrating/options/fineuploader.html#draganddrop-option-properties
There doesn't seem to be a callback for when there is no longer a file about to be dropped in the browser window. My code looks just like the examples, but has my own element id and class names, both of which work.
Any ideas?
Update - here is some code:
<div id="file-upload-well" class="well text-center">
<div id="file-upload-drop-area" style="display:none;">Drop files here</div>
Upload Files
</div>
and here is the DND js:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('file-upload-drop-area')],
classes: {
dropActive: "dropActive"
},
callbacks: {
processingDroppedFiles: function () {
$('#file-upload-drop-area').hide();
},
processingDroppedFilesComplete: function(files) {
uploader.addFiles(files);
}
}
});
The issue was setting the hideDropZonesBeforeEnter is set to false by default and needed to be set to true.
Both the variable name and the help documentation make it seem it will only show the drop zone when a file is directly over it, but instead it hides and shows the dropdown when a file is over a compliant browser.
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand
I have a draggable YUI Panel defined like this
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
When the panel is shown, I want it to remain always visible, even when the window is scrolled.
This is also the case, thanks to fixedcenter: true. The problem is that when the window is scrolled the panel positions itself to the center of the window even if it was dragged somewhere else previously.
How should I modify the above definition so that the position of the panel remains constant relative to the window when the window is scrolled?
Wrap your panel container in a wrapper element that has fixed positioning, e.g.
<div id="wrapper" style="position: fixed">
<div id="parameters">
<div class="hd">Header</div>
<div class="bd">Hello, this is my awesome panel.</div>
<div class="ft">Footer</div>
</div>
</div>
Construct your panel without the fixedcenter configuration property, and center the panel immediately after you render it, e.g.
var panel = new YAHOO.widget.Panel("parameters", {
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px"
});
panel.render();
panel.center();
The panel should now stay in the same position when the window is scrolled. I only tested this in Firefox 3.0 and Internet Explorer 7 and 8.
I've posted the source of a self-contained example that will demonstrate this working.
As per the documentation, set the fixedcenter to:
"contained" To enable fixed center positioning, as with the true
option. However, unlike setting the property to true, when the
property is set to "contained", if the overlay is too big for the
viewport, it will not get automatically centered when the user scrolls
or resizes the window (until the window is large enough to contain the
overlay). This is useful in cases where the Overlay has both header
and footer UI controls which the user may need to access.
http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html