I use jCarousel, with prev/next button as image.
function mycarousel_initCallback(carousel) {
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#mycarousel").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
I have 21 image (). If I start to click on next button, all is right until the 16th click.
At 16th click on next button, images scrolls back of 3 images.
Any clue?
Alberto
i've just found the solution, and it's really interesting.
just upgrade your jquery to the latest version.
jquery prior to 1.5 have this confirmed bug.
$.fn.animate cannot "start" from any value less than -10000
http://bugs.jquery.com/ticket/7193
the reason it's the 16th image is:
10.000/16 = 625px.
10.000/17 = 588px
your images are sized between 588-625px right?
best,
alp
Related
I have hammer js and the jquery-hammer plugin that handles a very simple swipe action.
What should happen is that when I swipe left I have a calendar with a date that goes back with one day and when I swipe right it should go forward with one day. At the moment when I swipe it jumps multiple days depending on the direction I swipe and the time the swipe took (I'm guessing).
When I change this function to simple click events on a left and right container, the dates advance only one day per click as expected.
event.gesture.preventDefault();
gives a "not function error"
How can I get the swipe to only call this function once for every swipe?
module.exports = View.extend({
template: 'bookings/templates/components/body',
className:'bookings-lists',
deviceType: App.browser.device.deviceType,
events: {
'swipe' : 'swipeMe'
},
swipeMe: function(e){
var that = this;
container.hammer().on('swipeleft', function(event) {
event.gesture.preventDefault();
that.model.pushDateForward();
}).on('swiperight', function(event) {
event.gesture.preventDefault();
that.model.pushDateBackward();
});
} });
My comment above is totally wrong. Checking what direction the swipe is rather than just relying on built in "swipeleft" or "swiperight" works. No more multiple date changes.
swipeMe: function(e){
if(e.gesture.direction === 4)
{
e.preventDefault();
this.model.pushDateBackward();
}
else if(e.gesture.direction === 2)
{
e.preventDefault();
this.model.pushDateForward();
}
},
I'm having a problem here:
When I select a radion button in a page 1 and another one in the same page it works fine, but when I select a radio button in the page number 2, and go back to the page number 1, that first radio button still selected and the one in the page number 2 is also selected, how can I solve this problem? I was looking for a solution here in the forum but couldn't find someone with the same problem.
*[code] $(document).ready(function () { var oTable = $('#example').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers" }); }); [/code]*
There is no solution from DataTables itself. You'll have to do it on your own.
What you can do is save the selected value yourself on a click. Imagine you have a table called projectsTable. Then you can write:
var selection = -1;
$("#projectsTable input[type=radio]").on
(
"click",
function()
{
selection = $(this).val();
}
);
Then, you'll have to unselect all the wrong values every time the page changes. Add a callback in the construction of your table for page draw to do that:
//other settings go here, like the dom one
//you can choose your own, no need for this specific one
"dom": "lfBrtip",
"fnDrawCallback":
function(oSettings)
{
$("#projectsTable input[type=radio][value!="+selection+"]").prop('checked', false);
}
Every time the page is changed, this piece of code deselects everything you don't want to be selected any longer.
i searched about my problem and did not find it .
i have this cod for slide show and need to add pause wen mouse hover the images .
i tryed hours to do it but cant .
this is the code :
$().ready(function() {
$('#ctgslider').ctgslider({
'timelength':1000,
'showbuttons': 'Y',
'minibuttons':'Y',
'minibuttonopacity': .45,
'centerbuttons': 'Y',
'alignrightnextbutton' : 'Y',
'btnoffset':5 ,
'effects':'fade',
'captioneffects':'explode',
'captionclass':'.Caption',
'usenumbers':'Y',
'minibtnimagesrc':'slider/images/circle.png',
'usecaptions':'Y'
});
});
$(document).ready(function(){
$('#ctgslider').mouseenter(function(){
$('#ctgslider').ctgslider({'timelength':'900000'});
});
$('#ctgslider').mouseleave(function(){
$('#ctgslider').ctgslider({'timelength':'1000'});
});
});
a want to play with this part of the code :
$(document).ready(function(){
$('#ctgslider').mouseenter(function(){
$('#ctgslider').ctgslider({'timelength':'900000'});
});
$('#ctgslider').mouseleave(function(){
$('#ctgslider').ctgslider({'timelength':'1000'});
});
can anyone help me to improve the code to get the pause on mouse over the div "ctgslider" ?
thanks
The slider doesn't seem to expose any kind of events you can hook into, which makes life a little difficult.
A quick fix would be to add this code to the bottom of your HTML file:
sliderPaused = false;
$("#ctgslider").hover(function(){
sliderPaused = true;
}, function(){
sliderPaused = false;
});
Then make sure you are using the non-minified version of the script and alter the NextPicture function like so:
function NextPicture(e){
if(sliderPaused && !e) return;
Passing the function a reference to the event object, means that you can differentiate between hovering on the slider and clicking the next slide button.
Here's a demo
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
});
Ok, so i have two ways to perform div refresh
$('#player').load('/videos/index');
in my rails app. One is through link
next
other is through shortcut of that button. And they work fine, until i discovered, that if I refresh player twice in a row through the link, and then through the shortcut, it loads div twicely. If i refresh through the link three times in a row, than through the shortcut, than it's loading div three times. And so on..
So, i've started to trying configure binds (as I assumed, that was the reason), but there were mo result.
Here is my messed up in binds shortcut part of application.js
$(document).ready(function(){;
$(document).bind('keydown', 'space', function() {
$('#player').unbind('load');
$('#player').load('/videos/index');
$(document).unbind();
});
});
I tried to click on link through the shortcut, but the same result, so I've assume, the problem is in load. Any suggestions would help.
The best way to avoid a double refresh, is having an state flag, indicating if it can load again, or if it's loading:
$(document).ready(function() {
var loading = false;
function reloadDiv() {
if(!loading) {
loading = true;
$('#player').load('/videos/index', null, function() { loading = false; });
}
}
$('#nextb').click(reloadDiv);
$(document).bind('keydown', 'space', reloadDiv);
});
Good luck!