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
Related
i would like use the Bootstrap Popover with ajax templates. The next script running good,...
$('.popover-trigger').bind('click', function(k) {
var e=$(this);
title="Jeepieee"
$.get('/popover/'+e.data('pophtml'),function(d) {
e.popover({
content: d,
container: 'body',
title: title,
html: true
}).popover('show');
});
});
...but, if I open the popover by the first send a ajaxcall, this is right. I open the popover again, it showed me my html, but the html from the popover is old and not ajax-call..
When i use $().popover('destroy'), then i have no click-event on my button and it opens nothing.
if I have multiple, will make matters worse.
Loading a content via AJAX in a Bootstrap popover is a very common pattern and, although it is not supported out of the box by Bootstrap, it is very easy to get this functionality with jQuery.
First we should add a data-poload attribute to the elements you would
like to add a pop over to. The content of this attribute should be the
url to be loaded (absolute or relative):
blabla
And in JavaScript, preferably in a $(document).ready();
$('*[data-poload]').hover(function() {
var e=$(this);
e.off('hover');
$.get(e.data('poload'),function(d) {
e.popover({content: d}).popover('show');
});
});
off('hover') prevents loading data more than once and popover() binds
a new hover event. If you want the data to be refreshed at every hover
event, you should remove the off.
Please see the working JSFiddle of the example.
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.
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();
}
});
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.
I'm working on an application that uses JQuery layouts and loads only website parts (like Gmail). Every time I load a "panel" using JQuery I have to substitute some links to make it work with panels (i.e., to load this link content in a panel, not in the full page). Is something like this:
function changeMainPane(href) {
$("#screen").load(href);
$("#screen a.ajax-page").click(function () {return
changeMainPane($(this).attr("href"))
});
}
This is a very simplified changeMainPane function, mine has tens of $("#screen ...").click() calls to integrate the new piece of HTML into the page.
The question is: there is any better way to do this? Something like:
$("#screen").ready(function() {
// All my html setups
}
Or something like "always a user clicks on a link, check if has ajax-page class and the call this function" without having to initialize each link independently.
You can have a look at the delegate method. The delegate method can be registered for the common parent element of all the links on which you wants to reload the main panel. It can be the document object or a lower level element like "body" or another div like "div.mylinks".
$(document).delegate("a.ajax-page", "click", function(){
changeMainPane($(this).attr("href"))
})
Maybe jQuery live() is what you're looking for. You use it like this:
$("#screen a.ajax-page").live('click', function () { whatever; });
Then you don't need to reinitizalize after ajax activity.