I made use of YUI scrollview to make a menu construction with touch, flick and arrows. However, for some reason the arrows have a bug.
When the page is loaded the first time it works fine, however, as soon as the user scrolls the page with its mouse of with swipe (on tablet or phone) the arrows do not work any more. When I swipe the content, the arrows magically come to live and work again.
This is the script I use for scrollView:
YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#clientslider-content',
width : 950,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
var scrollViewCurrentX = $('#clientslider-content').offset();
content.delegate("click", function(e) {
var scrollViewNewX = $('#clientslider-content').offset();
var scrollMarginL = (scrollViewNewX.left-2);
var scrollMarginR = (scrollViewNewX.left+2);
if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
{
e.preventDefault();
}
}, ".clientlink");
content.delegate("mousedown", function(e) {
scrollViewCurrentX = $('#clientslider-content').offset();
e.preventDefault();
}, "a, img");
Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});
You can find a demo here:
http://www.circlesoftware.nl/demo/test.html
To reproduce:
- load the page
- press the right button (do not do anything else)
- scroll down with your mouse
- arrows are broken now
To fix:
- just grap the content of the slider, swipe it
- try the left or right button and they work again
Does anyone have ANY idea what might be the problem here?
Problem came from the library itself it seems, was using 3.7.3, upgrade it to 3.9.1 and seems to be solved now:
http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js
Related
I am fighting with CKEditor in order that after CKEditor is loaded with a content and without selecting any style from toolbar, the changes (new text) made from an user, are automatically set in bold (no toolbar needed for the user).
I tried executing a command on the "click" event setting the bold style but it does not work very well
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
myEditor.commands.bold.exec();
});
});
so I changed inserting element with bold style on click event
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
var parent = myEditor.getSelection().getStartElement()
//simplified code without check if span already exist
myEditor.insertHtml('<span class="boldStyle">');
myEditor.insertHtml('</span>');
});
});
This works a bit better but I wonder if this approach is a good idea or how I could do better
Thanks
I need to replace all of my png icons with with svg - it is my employee request. I am using FFImageLoading. Some of the icons displayed in Pages are displaying properly but the problem is that I can't display svg icon in toolbar (toolbar item and hamburger icon).
I am using Xamarin.Forms 4.3.0.908675 and Xamarin.FFImageLoading - all in version 2.4.11.982.
My logo.svg is placed in MyProject.EmbeddedFiles.Images.
Here are the code samples I tried:
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "MyProject.EmbeddedFiles.Images.logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly),
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = new SvgImageSource(ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly), 10,10,true),
Order = ToolbarItemOrder.Primary
});
Neither solution works. My solution based on https://github.com/luberda-molinet/FFImageLoading/issues/1105
What am I missing? Is this even possible?
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
I'm using Dojo version 1.6.1. I'm building a menu that has a Dialog dijit as a popup from a PopupMenuItem. This works, however, if the menu is docked on the right-hand side of the application I need the popup to display to the left of the menu. I can't seem to get this to work. If I use another type of widget (like a ColorPalette), this works fine. With popup submenus and a popup ColorPalette, everything opens to the left if the menu is on the right-hand side of the screen, and everything opens to the right if the menu is on the left-hand side of the screen. Dojo just handles this automatically. But with any Dialog widget, even an empty one, it always pops out to the right of the PopupMenuItem regardless of where the menu is on the screen. I thought that perhaps specifying height and width of the div that is the dijit.Dialog would resolve this, but it did not.
Here's a simplified version of the code:
<div data-dojo-type="dijit.Menu" id="toolPalette" style="position:absolute; right:0; top:0; z-index: 999;">
</div>
<script>
// Grab the div for the menu, declared in the HTML above.
var toolPalette = dijit.byId("toolPalette");
// This tool button has a popup
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: new dijit.Dialog()
});
toolPalette.addChild(menuItem1);
// This tool button does not have a popup
var menuItem2 = new dijit.MenuItem({
id: "menuItem2",
iconClass: "shelterIcon"
});
toolPalette.addChild(menuItem2);
toolPalette.startup();
</script>
Any help is greatly appreciated! I've tried everything I can think of.
Way to find your current Cursor location
document.onmouseup = getXY;
var mouseX, mouseY;
function getXY(e) {
mouseX= (e || event).clientX;
mouseY= (e || event).clientY;
if (document.documentElement.scrollTop > 0) {
mouseY= mouseY+ document.documentElement.scrollTop;
}
}
Your Code here .
var myDialog = new dijit.Dialog();
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: myDialog
});
Now apply the X and Y to your Dialog.
dijit.popup.open({
x: mouseX,
y : mouseY,
popup: myDialog
});
I would like to have a qtip2 tooltip without a title bar, but with a close icon in the corner. Is there a way to spec that, or do I have to muck with the code that creates it? I am thinking of something that floats the button to the left or to the right, allowing the rest of the content to fill the tooltip div.
Always keep the close markup separately and update with your current qTip Text.
$('.selector').qtip({
content: {
text: function(api) {
var qTipContent = $('.close-markup').html();
qTipContent += $('.qtip-content').html();
return $('.qtip-content').html();
}
}
});
$('.close-markup').qtip('destroy');
Try the above code.
Note: Does not require to muck the qTip Close code snippet!