exactly copying source code from Pnotify project page, and put in in my page.
all links to jqueryUi and Pnotiy and other relative files were done and correct.
but when hovering on element for showing tooltip, toltip box goes to top-right of page;it's fixed and do not care of cursor position !
can ya help ?
$('span.required').bind({
mouseenter: function() {
var ttText = $(this).siblings('.required').html();
var ttTitle = "it's required";
tooltip = $.pnotify({
pnotify_title: ttTitle,
pnotify_text: ttText,
pnotify_hide: false,
pnotify_closer: false,
pnotify_history: false,
pnotify_animate_speed: 100,
pnotify_opacity: .9,
pnotify_notice_icon: "ui-icon ui-icon-comment",
pnotify_stack: false,
pnotify_after_init: function(pnotify){
pnotify.mouseout(function(){
pnotify.pnotify_remove();
});
},
pnotify_before_open: function(pnotify){
pnotify.pnotify({
pnotify_before_open: null
});
return false;
}
});
tooltip.pnotify_display();
},
mouseleave: function() {
tooltip.pnotify_remove();
}
});
Stacks are how you change the positioning.
Browse to http://pines.sourceforge.net/pnotify/.
Scroll down to "Advanced Demos".
Examine "Examples of custom stacks" bit. Click the buttons there.
View Source on the page to get to the code.
The tooltips do not use stacks like all the other notifications do. Instead you need to set up the position through CSS.
tooltip.get().css({
'top': event.clientY + 12,
'left': event.clientX + 12
});
Related
I am using accessible slick slider which functions the same as regular slick slider but has some additional fields
I cannot for the life of me work out what is going on. Everything works perfectly, but when I add breakpoints, the arrows just stop working entirely, including on page refresh.
I tried adding
mobileFirst:true
and while the arrows started working again, it reverted back to the original slides to show and slides to scroll.
Note - I have called the buttons outside of the container so they can be positioned how I want.
Any help would be greatly appreciated
( function( $ ) {
class SlickCarousel {
constructor() {
this.initiateCarousel();
}
initiateCarousel() {
$( '.log-book-carousel' ).slick( {
autoplay: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: false,
dots: false,
regionLabel: 'Latest news stories',
instructionsText: 'Changing the slide of this carousel will scroll through each news story item one by one. You can click each one to read more.',
responsive: [
{
breakpoint: 1100,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
]
});
$('.slide-prev').click(function(e){
//e.preventDefault();
$('.log-book-carousel').slick('slickPrev');
} );
$('.slide-next').click(function(e){
//e.preventDefault();
$('.log-book-carousel').slick('slickNext');
} );
}
}
new SlickCarousel();
} )( jQuery );
edit: Adding mobile first makes the buttons work on mobile but NOT desktop
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
I have a Firefox extension which adds a toolbar Widget with a panel which should display when the widget is clicked. Under certain circumstances, the panel should not show when the toolbar widget is clicked.
I am instantiating the toolbar and panel like so:
var popup = panel.Panel({
width: 310,
height: 400,
contentURL: self.data.url('panel.html'),
contentScriptFile: self.data.url('panel.js'),
// NOTE: You can't use the contentStyleFile option here.
});
var toolbarOptions = {
id: 'someid',
label: 'Some Label',
contentURL: self.data.url('icon-16.png'),
panel: popup
};
// There doesn't seem to be a way to remove the toolbar in PB mode.
var toolbar = widgets.Widget(toolbarOptions);
How can I cancel the panel opening from the widget click handler? It seems to always open no matter what logic I put in there.
toolbar.on('click', function() {
if (dontShowPanel()){
// I want to somehow cancel the panel opening at this point.
} else {
panel.show();
}
});
I have tried to return false; from the click hander which doesn't seem to work. I have also tried to call panel.hide(). That doesn't seem to work either.
I'm using version 1.10 of the add-on SDK.
Your click event handler is called before the panel shows up which means that you can still change the panel at this point. However, something that is non-obvious: changing the panel of the Widget object won't have any immediate effect, you need to change it for the WidgetView object (the widget instance in the particular browser window). That object is being passed as a parameter to the click event handler. So your toolbar options could look like this:
var toolbarOptions = {
id: 'someid',
label: 'Some Label',
contentURL: self.data.url('icon-16.png'),
onClick: function(view) {
if (dontShowPanel()){
view.panel = null;
} else {
view.panel = popup;
}
}
};
When you create the widget, you need to add the panel instance as a property:
var panel = require("panel").Panel({
width: 250,
height: 250,
contentURL: data.url('panel.html')
});
require("widget").Widget({
id: 'id',
label: 'my-label',
contentURL: data.url('http://www.mozilla.org/favicon.ico'),
panel: panel
});
Update: sorry I didn't understand the entire question. As far as I know there is no way to conditionally prevent show the panel based on the click event, in a way that will preserve the anchoring.
I'm building a simple dialog plugin to replace the default link tool. The design calls for a particular layout that is difficult to achieve with the CKEdit dialog definition: We want a single field to appear above the tab elements in the dialog (see illustration).
Can anyone suggest a way that this might be implemented? Thanks!
As far as I can tell it is not possible to achieve this using the built-in dialog definition.
I was able to get around this limitation by building my dialog plugin using the iframedialog plugin. This basically pops up a CKEditor dialog window and loads an external URL into it. You can do anything you want in that iframe, and then return the text to CKEditor when the user presses the OK button.
A simple example:
// plugins/iframelink/plugin.js
CKEDITOR.plugins.add('iframelink', {
requires: ['iframedialog'],
init: function(editor){
CKEDITOR.dialog.addIframe('iframelinkDialog',
// title
'Insert a Link',
// src
this.path + 'dialogs/link.html',
// minWidth
500,
// minHeight
250,
// onContentLoad
);
var cmd = editor.addCommand('iframelink', {exec: iframelinkOnclick});
editor.ui.addButton('iframelink', {
label: 'Insert a Link (Special Link Tool)',
command: 'iframelink',
icon: this.path + 'images/world_link.png'
});
}
});
function iframelinkOnclick(editor){
dialog = editor.openDialog('msiteslinkDialog');
};
// plugins/iframelink/dialogs/iframelink.js
$(function() {
if (typeof(window.parent.CKEDITOR) != 'undefined') {
CKEDITOR = window.parent.CKEDITOR;
var dialog = CKEDITOR.dialog.getCurrent();
var editor = dialog.getParentEditor();
// Get value of the selected text:
var selection = editor.getSelection().getSelectedText();
// Do something when the user presses the OK button:
var okListener = function(ev) {
link = yourFunctionToDoSomethingClever();
this._.editor.insertHtml(link);
dialog.removeListener("ok", okListener);
};
// Bind the OK button to your okListener method:
dialog.on("ok", okListener);
};
}
So you can make the dialog look any way you want:
hey guys,
I have an input field that looks for matched characters on a page. This page simply lists anchor links. So when typing I constantly load() (using the jquery load() method) this page with all the links and I check for a matched set of characters. If a matched link is found it's displayed to the user. However all those links should have e.preventDefault() on them.
It simply won't work. #found is the container that shows the matched elements. All links that are clicked should have preventDefault() on them.
edit:
/*Animated scroll for anchorlinks*/
var anchor = '',
pageOffset = '',
viewOffset = 30,
scrollPos = '';
$(function() {
$("a[href*='#']").each(function() {
$(this).addClass('anchorLink');
$(this).bind('click', function(e) {
e.preventDefault();
//console.log('test');
anchor = $(this).attr('href').split('#')[1];
pageOffset = $("#"+anchor).offset();
scrollPos = pageOffset.top - viewOffset;
$('html, body').animate({scrollTop:scrollPos}, '500');
})
});
});
Well, I'm looking for all href's that contain a #. So I know those elements are anchors that jump to other elements. I don't want my page to jump, but rather scroll smoothly to this element with this specific #id.
This works fine when I use bind('click', ... for normal page-elements that have been loaded when the page is opened. It doesn't work for anchors that have been loaded via ajax! If I change the bind to live nothing does change for the ajax loaded elements - they still don't work. However normal anchors that have always been on the page are not triggering the function as well. So nothing works with live()!
When you say "it won't work" do you mean that your function is not been called or that you can not cancel out of the function? As far as I know you can not cancel out live events. With jQuery 1.4 you can use return false to cancel out live event propagation. Calling e.preventDefault() won't work.
Edit: right so this code should in principal work. What it still won't do is, it won't add the 'anchorLink' class to your new anchors. However if the clicks work then let me know and I will give you the right code to add the class too!
var anchor = '',
pageOffset = '',
viewOffset = 30,
scrollPos = '';
$(function() {
$("a[href*='#']").each(function() {
$(this).addClass('anchorLink');
});
$("a").live('click', function(e) {
if ($(this).attr("href").indexOf("#") > -1) {
e.preventDefault();
//console.log('test');
anchor = $(this).attr('href').split('#')[1];
pageOffset = $("#" + anchor).offset();
scrollPos = pageOffset.top - viewOffset;
$('html, body').animate({ scrollTop: scrollPos }, '500');
//nikhil: e.preventDefault() might not work, try return false here
}
});
});