Refactor jquery animate - javascript

I am using the datepicker plugin from here - The example is on the bottom of the page.
It is utilizing jquery animate() like this:
$('#widgetField>a').bind('click', function(){
$('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
state = !state;
return false;
});
I need a recommendation on how to refactor this into an accordian-like expanding div. I do not want the calendar to float, I need it to push the div content below it down.
Recommendations?

Updated Answer
The widget floats because it has a position:absolute; and a height offset in the jquery function.
See the css:
#widgetCalendar has a style, position:absolute. You will need to remove that, which will make it work, but then there are additional styling issues that can all be taken care of with css adjustments.
Or, you can try using jQuery .slidedown:
$('#widgetCalendar').slideDown();
Then you wouldn't need the height offset.
It would be great if you could do a jsfiddle, as I am unable to test without seeing what you are doing.
Edited - user not using jQuery UI
This is due to the nature of jquery UI - the calendar is a specialized dialog. The jQuery UI dialog is a popin. But, you can counteract this:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

Related

HTML5 Page Loading Issues (using jQuery + JS + HTML5)

My service pages have some loading/displaying issues.
I am using jQuery UI - Tabs for outer and inner tabs and a "footable" component to display table records. jQuery tabs & footable component are prepared in jQuery ready method.
$(document).ready(function(){
$( "#tabs" ).tabs();
$( "#tests" ).tabs();
$('.footable').footable();
....
}
From some reason the page is displayed before the UI is well positioned and the page has some poor layout effects which looks very unprofessional.
Is there a problem with jQuery tabs which requires to initialize them in other way?
Appreciate any idea...
Example: here is how the page looks before it is well positioned
here is how the page looks after it is well positioned
Ran into this problem before using jquery tabs with other table plugins.
jQuery UI's tabs have an activate event that fires when you click a tab. You will need to call the footable's redraw() method inside that.
$('#tests').tabs({
activate: function( event, ui ) {
$('.footable').data('footable').redraw();
}
});
I found a solution,
In the container DIV which holds the tabs I place a style of display:none
And at the end of the jQuery ready function (after I prepare the tabs) I turn it on
with a css display block.

jquery colorbox and custom scrollbar

I would like to use a custom scrollbar with Colorbox
I am using Wordpress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I'm guessing that I need to apply to the #cboxLoadedContent div so I've loaded as per this code, however it's not working:
(function(jQuery){
jQuery(window).load(function(){
jQuery("#cboxLoadedContent").mCustomScrollbar();
});
})(jQuery);
Using Firebug there's no alteration to the standard coding i.e. the JavaScript isn't firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn't have a scrollbar so nothing is shown.
The question is why isn't it working on the right div i.e. #cboxLoadedContent?
#cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won't work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).
The best way is to call mCustomScrollbar function inside colorbox's onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.
From colorbox examples:
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxContent").mCustomScrollbar();
}
});
Just a quick note about the code in the accepted answer. I couldn't get it to work with $("#cboxContent") as shown; I needed to use $('#cboxLoadedContent').
$(".callbacks").colorbox({
onComplete:function(){
$("#cboxLoadedContent").mCustomScrollbar();
}
});

jQuery tabs flash (FOUC) when page loads

I have the following website:
http://cassidoo.public.iastate.edu/
I am using JQuery UI Tabs for my menu. When you load the page, there is a flash of the content in the tabs.
I've tried everything from the ui-tabs-hide trick to hiding things in Javascript. Is there a trick I'm missing? What should I do?
Thank you for your help!
I ran into a similar situation and here's how I addressed the issue:
(1.) define a css class called "hide" and set it to "display:none"
(2.) in each div with class "contentpanel", add "hide" right next to
it in your markup. this will ensure the page loads with display
none, rather than waiting for javascript to handle it.
(3.) when you create the jquery.ui.tabs selector, use the
"tabscreate" method to remove the class "hide" from your content
panels. so your selector would look something like this:
//define tabs instance
$( "#tabs" ).tabs({
create: function( event, ui ) {
//when tabs are created, remove your class .hide from each content panel
//so jquery tabs will control when panel content will surface
$(your contentpanel selector).removeClass(hide);
}
//whatever else you need to do
....
...
..
});
To find out more about jQuery UI tabs internal methods, read this:
http://api.jqueryui.com/tabs/
and read
create( event, ui )
Hope this helps.
Chris

jQuery button displayed on top of menu

After calling .button() on my buttons, they are being displayed on top of my sub menu. To better explain, here's a screenshot:
I call my jQuery on my MasterPage:
<script type="text/javascript">
$(function (e) {
$("button, input[type='button'], input[type='submit']").button();
});
</script>
I'm referencing google's jQuery's 1.5 and 1.8 jquery script. (Otherwise my .button() doesn't work and get script errors such as 'Object [object Object] has no method button')
Why is this happening, and how can I change it?
Thanks.
The depth involved with HTML elements is controlled by their individual z-index values. You'll need to go through your CSS to adjust these values (or dynamically change them using jQuery).
Reference: https://developer.mozilla.org/en/CSS/Understanding_z-index

Fancybox - Modify javascript to add options

I have the following Fancybox declarations in my page:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
I need to reduce the size of the image used by the modal box and I believe I can do that by setting the "autoDimensions", "width", and "height" options available with Fancybox, I just don't know how to integrate that with the hover function, since there isn't an option in Fancybox to specify a function for a hover event. (I hope this is making sense.)
Anyhow, does anyone know how I can modify the above javascript to control the width and height?
Thanks!
Sorry but images in fancybox don't use "autoDimensions", "width", and "height" API options. Those options are for ajax, iframe or inline content only.
Images in fancybox are displayed either, re-sized to fit into the viewport (when autoScale is set to true) or in their original size (when autoScale is set to false). If the original size is bigger than the height of the viewport, then you have to scroll down the parent page to see the whole image.
The only way you can re-size images in fancybox other than above is using jQuery css() API (which, I wouldn't advise ... it produces an odd behavior). You can call it using fancybox's callback option onComplete like:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'onComplete': function(){
$("#fancybox-outer, #fancybox-content").css({'width':300,'height':150});
}
}).hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
Note that options mentioned above are for fancybox v1.3.x.
Use it at your own risk.
you can always add code to document.ready to trigger every time. so just check for the event and resize.
or since the elements are hidden at first, you can get the event trigger using the show event
Check for the event onstart. onstart will be called right before attempting to load the content, and you can add your resize operations there.

Categories