While I'm on PAGE 1, I click on PAGE2 link, it will slide to the right with duration 2seconds, While it is sliding, I CANNOT click PAGE1 link. How do I click on page1 or stop the slide while it's sliding?
Help me please
$(document).ready(function(){
$('.link2page1').click(function(e){
e.preventDefault();
$('#page2').hide(
function(){
$('#page1').show();
}
);
});
$('.link2page2').click(function(e){
e.preventDefault();
$('#page1').hide('slide',{direction:'right'},2000,
function(){
$('#page2').show();
}
);
});
});
Please check out my code on jsfiddle
I think below code will help you.
$(document).ready(function () {
$('.link2page1').click(function (e) {
e.preventDefault();
$('#page2').hide(
function () {
$('#page1').stop();
$('#page1').css("left","0px");
$('#page1').show();
}
);
});
$('.link2page2').click(function (e) {
e.preventDefault();
$('#page1').hide('slide', { direction: 'right' }, 10000,
function () {
$('#page2').show();
}
);
});
});
Related
When hovering over a link, I'd like to wait at least a second before showing a tooltip with dynamically loaded tooltip.
What I've created is the follow jQuery Code:
$(document).ready(function () {
$("div#galleries ul li:not(.active) a").tooltip({
items: "a",
show: { delay: 1000 },
content: 'Loading preview...',
open: function (event, ui) {
previewGallery(event, ui, $(this));
}
});
});
function previewGallery(event, ui, aLinkElement) {
event.preventDefault();
ui.tooltip.load("http://www.someurl.com/Preview.aspx #preview");
}
Which seemed to work pretty fine, you can see it here:
http://fotos.amon.cc/ (simply hover over the list of galleries)
But I didn't realize at the beginning, that the loading of preview text happens immediately when hovering over the link. So if you quickly hover over all the links, you'll set up several requests:
From the users point of view (without knowing that requests are fired) it looks already the way I want, but how to only start loading the preview, when tooltip is actually showing up?
Thanks,
Dominik
What I did in the end was to use window.setTimeout and window.clearTimeout:
var galleryToolTipTimer = null;
var previewElement = null;
$(document).ready(function () {
$("div#photos div a img").tooltip();
$("div#galleries ul li:not(.active) a")
.tooltip({ items: "a", content: 'Loading preview...', disabled: true, open: function (event, ui) { previewElement.appendTo(ui.tooltip.empty()); } })
.mouseover(function (e) {
if (galleryToolTipTimer != null) { window.clearTimeout(galleryToolTipTimer); }
var aLinkObject = $(this);
galleryToolTipTimer = window.setTimeout(function () { previewGallery(aLinkObject); }, 500);
}).mouseleave(function (e) {
window.clearTimeout(galleryToolTipTimer);
$(this).tooltip("option", { disabled: true });
});
});
function previewGallery(aLinkElement) {
previewElement = $("<div/>").load(aLinkElement.closest("div").data("galleryPreview") + "/" + aLinkElement.data("path") + " #preview", function () {
aLinkElement.tooltip("open");
});
}
Works at least the way I want.
To see it in action, simply navigate to http://fotos.amon.cc/ and hover over one of the gallery links on the left for a preview:
I have a form in jQuery UI Accordion.
With this code, a visitor must validate the first panel and only then the next accordion panel opens. However, if the visitor wants to go back to first panel it doesn't let it go.
$(document).ready(function () {
$("#accordion").accordion({ event: false });
$('#openfirst').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 1 });
// cancel submit
return false;
} else {
alert('Please acknowledge the following before proceeding.');
}
});
$('#opensecond').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 2 });
} else {
alert('Please acknowledge the following before proceeding.');
}
});
$('#openthird').click(function () {
if (varification is okay then) {
$("#accordion").accordion({ active: 3 });
// cancel submit
return false;
} else {
alert('Please acknowledge the following before proceeding.');
}
});
});
</script>
Instead of using
$("#accordion").accordion({ event: false });
try using
$( ".selector" ).accordion( "disable" );
and upon user verification, use
$( ".selector" ).accordion( "enable" ); //for manual operation of tabs
or
$( ".selector" ).accordion({ active: # }); //for code generated operation of tabs
I would like this to log out the value of the input:
HTML:
<input id="spinner" />
JS:
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(ui.value)
}
});
});
Fiddle: http://jsfiddle.net/u9T5s/
jsFiddle Demo
I am not sure what the appropriate hook is as far as the jquery ui API goes, but here is a simple way to do this as well:
$(function() {
$("#spinner").spinner();
$('.ui-spinner-up').click(function(){
console.log("Increased to "+$('#spinner').val());
});
$('.ui-spinner-down').click(function(){
console.log("Decreased to "+$('#spinner').val());
});
});
This this:
http://jsfiddle.net/u9T5s/1/
$(function() {
$("#spinner").spinner({
change: function(event, ui) {
console.log(this.value)
}
});
});
Use this.value instead of ui.value. This will take the current object to which the change function is attached.
Answer to comment: you implement different function one is change and one is spin.
Also change will execute one on blur after a real change happened an spin executes once up/down click is fired.
spin: function( event, ui ) {
if ( ui.value > 10 ) {
$( this ).spinner( "value", -10 );
return false;
} else if ( ui.value < -10 ) {
$( this ).spinner( "value", 10 );
return false;
}
}
Hi I have a JQuery Ui (jquery-ui-1.8.13.custom.min.js) inside a Dialog. When I start typing on the box I get the dropdown of items but it hides right away? Does anyone know why? Here is my code:
$(".openDialog").live("click", function (e) {
e.preventDefault();
var itemId = $(this).attr("data-item-id");
var ajaxurl = $(this).attr('data-ajax-refresh-url');
var dialogId = $(this).attr("data-dialog-id");
$('<div><img src="Content/images/spinner.gif" /> Loading...</div>')
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
width: 'auto',
title: $(this).attr("data-dialog-title"),
buttons: {
"Save": function () {
$(this).find('form').submit();
},
close: function () {
if (typeof itemId != "undefined") {
$.get(ajaxurl, { id: itemId },
function (data) {
// The data returned is a table <tr>
$("#Row" + itemId).replaceWith(data);
});
bindConfirm();
}
$(this).remove();
}
},
modal: true
}).load(this.href, function () {
$(this).find("input[data-autocomplete]").autocomplete({ source: $(this).find("input[data-autocomplete]").attr("data-autocomplete") });
});
});
They also had problems in early 1.8 releases. I remember applying a custom CSS selector to increase zIndex manually.
See also: http://forum.jquery.com/topic/autocomplete-inside-a-dialog-1-8rc2
I use jquery-UI-map for gmaps, and i want to make popup when i click the maps on Gmaps.
$(function() {
$('#map_canvas').gmap( {'center': new google.maps.LatLng(-0.789275, 113.921327), 'callback': function(map) {
$(map).click( function(event) {
$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'title': '', 'draggable': true, 'bound': false}, function(map, marker) {
$('#test').dialog({'modal':true, 'title': 'Edit and save point', 'buttons': {
"Remove": function() {
$(this).dialog( "close" );
$(map).setMap(null);
},
"Save": function() {
$(this).dialog( "close" );
}
}});
findLocation(marker.getPosition(), marker);
}).dragend( function(event) {
var self = this;
findLocation(event.latLng, this);
}).click( function() {
openDialog(this);
})
});
}});
I want to remove all marker when i click remove button in this code :
"Remove": function() {
$(this).dialog( "close" );
$(map).setMap(null);}
But the marker still remain, someone please help me. Thank you
in plugin version 3 one should use:
$('#map_canvas').gmap('clear', 'markers');
You should call
$('#map_canvas').gmap('clearMarkers');
Haven't worked with that plugin before but a quick glance at the API docs seems to suggest that this might work:
"Remove": function() {
$(this).dialog( "close" );
$(map).clearMarkers();
}