I need something like this http://www.jqueryscript.net/demo/jQuery-Plugin-For-Horizontal-Text-Scrolling-Simple-Marquee/, but with prev and next controls (and free, I've seen some on CodeCanyon). Any suggestions?
jQuery News Ticker is an open source library that scrolls, has forward and backward controls, as well as advanced features like pausing. Hope this helps..
http://www.jquerynewsticker.com/
The website explain in detail, but here are all of the granular options for you:
$(function () {
$('#js-news').ticker(
speed: 0.10, // The speed of the reveal
ajaxFeed: false, // Populate jQuery News Ticker via a feed
feedUrl: false, // The URL of the feed
// MUST BE ON THE SAME DOMAIN AS THE TICKER
feedType: 'xml', // Currently only XML
htmlFeed: true, // Populate jQuery News Ticker via HTML
debugMode: true, // Show some helpful errors in the console or as alerts
// SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
controls: true, // Whether or not to show the jQuery News Ticker controls
titleText: 'Latest', // To remove the title set this to an empty String
displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
direction: 'ltr' // Ticker direction - current options are 'ltr' or 'rtl'
pauseOnItems: 2000, // The pause on a news item before being replaced
fadeInSpeed: 600, // Speed of fade in animation
fadeOutSpeed: 300 // Speed of fade out animation
);
});
Related
I'm currently creating a 'smartobject' widget. In the widgets dialog, the user can choose a 'smartobject', which simply put, generates some html, which should be added to the editor. Here comes the tricky part: the html sometimes div elements and sometimes simply span elements. In the case of the div variant, the widget should be wrapped in a div 'template'. In the case of a span variant, the widget should be wrapped in a span and the html should be added 'inline'.
In the widgets API I see the following way to define a template:
editor.widgets.add('smartobject', {
dialog: 'smartobject',
pathName: lang.pathName,
template: '<div class="cke_smartobject"></div>', // <------
upcast: function(element) {
return element.hasClass('smartObject');
},
init: function() {
this.setData('editorHtml', this.element.getOuterHtml());
},
data: function() {
var editorHtml = this.data.editorHtml;
var newElement = new CKEDITOR.dom.element.createFromHtml(editorHtml);
newElement.copyAttributes(this.element);
this.element.setText(newElement.getText());
}
});
But in my case, the template is more dynamic: sometimes a div and sometimes the span will do the correct thing..
How can I fix this without needing to create two widgets which will do the exact same thing, with only the wrapping element as difference?
I've already tried to replace the entire element in the 'data' method, like:
newElement.replace(this.element);
this.element = newElement;
But this seemed not supported: resulted in undefined errors after calling editor.getData().
I'm using ckeditor v4.5.9
Thanks for your help!
It seems I got it working (with a workaround).
The code:
CKEDITOR.dialog.add('smartobject', this.path + 'dialogs/smartobject.js');
editor.widgets.add('smartobject', {
pathName: lang.pathName,
// This template is needed, to activate the widget logic, but does nothing.
// The entire widgets html is defined and created in the dialog.
template: '<div class="cke_smartobject"></div>',
init: function() {
var widget = this;
widget.on('doubleclick', function(evt) {
editor.execCommand('smartobject');
}, null, null, 5);
},
upcast: function(element) {
return element.hasClass('smartObject');
}
});
// Add a custom command, instead of using the default widget command,
// otherwise multiple smartobject variants (div / span / img) are not supported.
editor.addCommand('smartobject', new CKEDITOR.dialogCommand('smartobject'));
editor.ui.addButton && editor.ui.addButton('CreateSmartobject', {
label: lang.toolbar,
command: 'smartobject',
toolbar: 'insert,5',
icon: 'smartobject'
});
And in the dialog, to insert code looks like:
return {
title: lang.title,
minWidth: 300,
minHeight: 80,
onOk: function() {
var element = CKEDITOR.dom.element.createFromHtml(smartobjectEditorHtml);
editor.insertElement(element);
// Trigge the setData method, so the widget html is transformed,
// to an actual widget!
editor.setData(editor.getData());
},
...etc.
UPDATE
I made the 'onOk' method a little bit better: the smartobject element is now selected after the insertion.
onOk: function() {
var element = CKEDITOR.dom.element.createFromHtml(smartobjectEditorHtml);
var elementId = "ckeditor-element-" + element.getUniqueId();
element.setAttribute("id", elementId);
editor.insertElement(element);
// Trigger the setData method, so the widget html is transformed,
// to an actual widget!
editor.setData(editor.getData());
// Get the element 'fresh' by it's ID, because the setData method,
// makes the element change into a widget, and thats the element which should be selected,
// after adding.
var refreshedElement = CKEDITOR.document.getById(elementId);
var widgetWrapperElement = CKEDITOR.document.getById(elementId).getParent();
// Better safe then sorry: if the fresh element doesn't have a parent, simply select the element itself.
var elementToSelect = widgetWrapperElement != null ? widgetWrapperElement : refreshedElement;
// Normally the 'insertElement' makes sure the inserted element is selected,
// but because we call the setData method (to ensure the element is transformed to a widget)
// the selection is cleared and the cursor points to the start of the editor.
editor.getSelection().selectElement(elementToSelect);
},
So in short, I partially used the widget API for the parts I wanted:
- Make the html of the widget not editable
- Make it moveable
But I created a custom dialog command, which simply bypasses the default widget insertion, so I can entirely decide my own html structure for the widget.
All seems to work like this.
Any suggestions, to make it better are appreciated:)!
As suggested in this ckeditor forum thread, the best approach would be to set the template to include all possible content elements. Then, in the data function, remove the unnecessary parts according to your specific logic.
Here's the scenario
$("p").live('customEvent', function (event, chkSomething){
//this particular custom event works with live
if(chkSomething){
doStuff();
// BUT only per element
// So almost like a .one(), but on an elemental basis, and .live()?
}
})
Here's some background
The custom event is from a plugin called inview
The actual issue is here http://syndex.me
In a nutshell, new tumblr posts are being infnitely scrolled via
javascript hack (the only one out there for tumblr fyi.)
The inview plugin listens for new posts to come into the viewport, if the top of an image is shown, it makes it visible.
It's kinda working, but if you check your console at http://.syndex.me check how often the event is being fired
Maybe i'm also being to fussy and this is ok? Please let me know your professional opinion. but ideally i'd like it to stop doing something i dont need anymore.
Some things I've tried that did not work:
stopPropagation
.die();
Some solutions via S.O. didnt work either eg In jQuery, is there any way to only bind a click once? or Using .one() with .live() jQuery
I'm pretty surprised as to why such an option isnt out there yet. Surely the .one() event is also needed for future elements too? #justsayin
Thanks.
Add a class to the element when the event happens, and only have the event happen on elements that don't have that class.
$("p:not(.nolive)").live(event,function(){
$(this).addClass("nolive");
dostuff();
});
Edit: Example from comments:
$("p").live(event,function(){
var $this = $(this);
if ($this.data("live")) {
return;
}
$this.data("live",true);
doStuff();
});
This one works (see fiddle):
jQuery(function($) {
$("p").live('customEvent', function(event, chkSomething) {
//this particular custom event works with live
if (chkSomething) {
doStuff();
// BUT only per element
// So almost like a .one(), but on an elemental basis, and .live()?
$(this).bind('customEvent', false);
}
});
function doStuff() {
window.alert('ran dostuff');
};
$('#content').append('<p>Here is a test</p>');
$('p').trigger('customEvent', {one: true});
$('p').trigger('customEvent', {one: true});
$('p').trigger('customEvent', {one: true});
});
This should also work for your needs, although it's not as pretty :)
$("p").live('customEvent', function (event, chkSomething){
//this particular custom event works with live
if(chkSomething && $(this).data('customEventRanAlready') != 1){
doStuff();
// BUT only per element
// So almost like a .one(), but on an elemental basis, and .live()?
$(this).data('customEventRanAlready', 1);
}
})
Like Kevin mentioned, you can accomplish this by manipulating the CSS selectors, but you actually don't have to use :not(). Here's an alternative method:
// Use an attribute selector like so. This will only select elements
// that have 'theImage' as their ONLY class. Adding another class to them
// will effectively disable the repeating calls from live()
$('div[class=theImage]').live('inview',function(event, visible, visiblePartX, visiblePartY) {
if (visiblePartY=="top") {
$(this).animate({ opacity: 1 });
$(this).addClass('nolive');
console.log("look just how many times this is firing")
}
});
I used the actual code from your site. Hope that was okay.
Is it possible to disable the pagination (First, Previous, Next, last) links in the tablesorterpager plugin of jQuery. This is my code in jQuery
jQuery('#mentor_engagement_report_table')
.tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterPager({container: jQuery("#pager"), positionFixed: false,size:10});
I've created a fork of the tablesorter plugin on github. After reading this question, I added a new option to the pager plugin named updateArrows which when true it applies a class name, contained in the new cssDisabled option to the arrows. Here is the initialization code and a demo:
$("table")
// initialize tablesorter
.tablesorter()
// initialize the pager plugin
.tablesorterPager({
// target the pager markup
container: $("#pager"),
// disabled class name to use
cssDisabled : 'disabled',
// apply disabled class name to the pager arrows when the rows at either extreme is visible
updateArrows: true
});
And here is some example of css used in the demo:
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
#pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
#pager img.disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
}
There is only pagination if you use the Pager Plugin, if not, not a thing will have pager part...
if you would like just to hide the pager
after your javascript code add:
$(".pager").hide();
Your question should be, Why do i want to hie the pager area? if I only want to shown 10 rows, the data should only contain 10 rows ...
It would be easier if you posted your whole code, and be more clear to what you want.
do you still want to select the row count per page?
then try this: http://jsfiddle.net/q66TA/
If you don't want anything from the pager, don't use it..
Update:
If you need the current page number and the total page count, you'll need to add this functionality to the plugin. There is a callback addon/patch available for this:
http://www.vinertech.com/patches/tblsorter.pager.cbk.patch
More on this: http://daveviner.blogspot.com/2009/12/jquery-tables-and-administrative.html
The best way, and what we use on all our's that require a view all button, is to use the plugin itself's way of disabling it.
This is brought directly from their site http://mottie.github.io/tablesorter/docs/example-pager.html
The code used is real simple actually:
// Disable / Enable
// **************
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + ' Pager');
return false;
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
<button type="button" class="toggle">Disable Pager</button>
I'm having some issues when trying to renew the nivoslider when loading dynamic content. What I need to do is update the slider when I load new content in through an AJAX call.
So basically I have a div that gets new data in from a function AJAX call and after the load I would need the slider to reinitialize.
What I do right now is this:
if ($('#imageSlider').find('div.nivo-slice').length > 0) {
$('#imageSlider').data('nivoslider').stop();
$('#imageSlider').removeData('nivo:vars');
$('#imageSlider').removeData('nivoslider');
$('#imageSlider').attr("class","");
$('#imageSlider').attr("style","");
}
$('#imageSlider').html(newImages);
and then a call to $('#imageSlider').nivoSlider();
It kinda works but the rotation gets stuck on one picture only and sometimes it just doesn't load. Any help on this would be greatly appreciated.
I found a solution for that . Instead of replacing only images inside I replaced html inside . So like made new nivoslider content and it works for me. Then initlize again nivoslider with all parameters
After ajax response -
j('.slider-wrapper').html('');
j('.slider-wrapper').html(request);
j('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 5, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
I want to show notification on my website using Pines Notify jQuery plugin
but i dont know how to use it. Could someone please provide some example code?
This is the only link I have found for documentation:
http://sourceforge.net/apps/mediawiki/pines/index.php?title=Pines_Notify
This is pretty simple to find out.
Go to the pines notify website: http://pines.sourceforge.net/pnotify/
Click around on the buttons until you find the kind of effect you want to do yourself.
In either Chrome or Firefox w/Firebug, just right click on the button for the effect you want. You'll see an input tag, and you want the code inside the onclick="":
onclick="$.pnotify({
pnotify_title: 'Regular Notice',
pnotify_text: 'Check me out! I\'m a notice.'
});"
So if you want to call this at the end of your html doc after you've loaded jquery, you just do something like this:
// call your jquery and pines notify plugin scripts first
$.pnotify({
pnotify_title: 'Whatever the Title Is',
pnotify_text: 'This is the text of the notice!'
});
Obviously there are more options, and you can find them by either inspecting the source of the demo page, or by looking at the pines jquery plugin and finding where they define the options.
It looks like the documentation for Pines Notify is rather lacking. My advice is to look through the HTML source of the demo website. All the JavaScript is on that page (with tons of inline event handlers, yuck).
Make sure to include the appropriate files in your HTML. Then, here is some example javascript code.
function gaserror(){
var distance = Number(document.cars.distance.value);
switch( $('#listofcars :selected').text())
{
case 'Volvo':
if (distance>500)
{
$.pnotify({
title: 'Error',
text: 'You have run out of gas!',
addclass: 'custom',
type: 'error',
opacity: 0.8,
nonblock: true,
nonblock_opacity: 0.2,
sticker: false,
stack: false,
mouse_reset: false,
history:false, //prevents the yellow error history tab from appearing after error triggered
before_open: function(pnotify) {
pnotify.css({
"top": ($(window).height() / 2) - (pnotify.height() / 2),
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
}
});
}
break;}}