I am using jquery colorbox and jquery date picker. My problem is date picker doesn't work in my popup window using jquery colorbox. I tried to used outside colorbox and its work fine.
Any help would greatly appreciated.
I tried the code below but still doesn't work.
onLoad: function(){
$('#date-pick').datepick();
},
I think you may write these codes $('#date-pick').datepick(); in colorbox's onComplete function. When all dom elements are ready then the code will work.
Well, for starters, to create the datepicker with jquery-ui its:
$("#datepicker").datepicker();
It may well be something else, but you really haven't shown us much. I don't even know if you're using the jquery-ui datepicker as you've provided very little information in your question.
Related
I have got a problem with Loopj's jQuery Tokeninput inside Jack Moore's Colorbox window. The problem is that dropdown of Tokeninput shows under Colorbox window, as on screenshot below:
I think that the problem could be with this code inside tokeninput library (lines 343-347):
// The list to store the dropdown items in
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide();
because it is appended to body, not to colorbox window.
Could anyone help me solve this problem?
PS. I am using this lib also outside colorbox window, so appending it to colorbox probably will be a bad idea.
It should be possible to fix this issue by altering the z-index of the TokenInput's dropdown.
The z-index of a Colorbox is 9999, the default value for the TokenInput is lower than that.
Depending on which TokenInput version you're using - if it supports the z-index parameter, you could alter the value with that on initialisation. e.g.
$('#myID').tokenInput("http://sourceurl.com",
{
zindex: 100001
}
Else if it's an earlier version, try altering the value for div.token-input-dropdown in the token-input.css file.
I've put in a pull request for this issue on GitHub, but sadly, the project now seems to have sunk back into inactivity.
There's this website I'm developing which can be found here. It's a photography website and my client asked for me to implement something that would allow her to move the photos around and change the order of which they appear. They come from a MySQL database and are displayed with jQuery Masonry.
I thought instantly of jQuery UI Sortable, and I've been trying to implement it with absolutely no luck at all.
How can I achieve this? Can someone point me in the right direction, please?
Thanks in advance!
I am struggling with the same issue, so far my answer has been to change classes with jquery's sortable start, stop, change and sort events. Like so:
$('#sortable').sortable({
start: function(event, ui) {
console.log(ui);
ui.item.removeClass('masonry');
ui.item.parent().masonry('reloadItems')
},
change: function(event, ui) {
ui.item.parent().masonry('reloadItems');
},
stop: function(event, ui) {
ui.item.addClass('masonry');
ui.item.parent().masonry('reloadItems');
});
Here is a working example and a JS Fiddle on the subject. It's a start.
However, this is not a 'presto' solution, this examples work with older versions of masonry, the latest version has a few bugs implementing it since the "reload" method was replaced with layout() and reloadItems().
Or... you can use the old masonry versions, if it works for you.
Alternatively you can use jQuery.Shapeshift(), which does basically what you're looking for.
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.
I add an onclic event in a com.google.gwt.dom.client.ImageElement using
imageElement.setAttribute("onclick","var tabla=document.getElementById('tablaWidget');var length=tabla.rows.length; for(var i=0;i
This works in firefox but not in IE.
I read here: onclick setAttribute workaround for IE7 that I shouldn't use setAttribute to do this because is not crossbrowser, but I don`t know how to do it because this element doesn´t have the onclick or addEventListener method.
Thanks for your help.
You should use com.google.gwt.user.client.ui.Image instead of com.google.gwt.dom.client.ImageElement for any images that will be used in the UI. Then you can use Image#addClickHandler to handle clicks in a cross-browser compatible manner.
Does anyone know the best way to get the Jquery Validation plugin to run when submitting a form that has been loaded dynamically into a Jquery Colorbox modal window?
Add the validation set up to the colorbox callback. That way the color box has been loaded and the form exists before you attempt to set up validation for it.
$('selector').colorbox({...options...}, function() {
$('form',this).validate( {...options...} );
});
I was playing around with this and found a better solution (at least for myself).
$('selector').colorbox(
{options, onComplete:function(){$('selector').validate({}
});
Visually I can see when the lightbox is finished loading, it'll attach this function to the lightbox. It's the same as what tvanfosson posted, but I like mine for readability purposes.