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

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.

Related

Add/Remove classes from navigation loaded with Jquery

I am loading in the content of my sidebar navigation with jquery from a nav-content.html file so I don't have to update it on every page each time it updates.
What I am trying to do is when on a specific page, the sidebar nav with uncollapse based on what category that page is on.
I am trying to target elements in that loaded nav to be active when on certain pages and it only works when the nav is hard coded into the page's html but it doesn't work when I load it in from the nav-content.html file with jquery.
I did noticed when i view the source code on browser it doesn't actually paste in the html but still displays it which I think is the disconnect but I am not 100%. Not sure if I should look into different way to load it in or if my jquery is the issue.
Any insight would be greatly appreciated.
HTML:
<nav>
<div id="sidebar">
<div id="sidebar-content">
<!-- nav loads here from nav-content.html -->
</div>
</div>
</nav>
Jquery:
/*Loads the Nav */`
window.onload = function(){
$.get("nav-content.html", function(data){
$("#sidebar-content").html(data);
})
}
/* changes classes within the loaded nav based on what page it's on */
$(document).ready(function() {
$('ul#devSubmenu').removeClass('collapse'),
$('ul#appStackSubmenu').removeClass('collapse'),
$('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
$('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
});
I asked this a few days ago but this is a rephrased/re-explained of deleted post.
Two things to get you on the right path.
1) jQuery's get() does not load an HTML file. You might mean to use load() to get your sidebar content: https://api.jquery.com/load/
2) $(document).ready fires before window.onload. See: window.onload vs $(document).ready()
In order to ensure that your content is loaded before modifying the classes, you can make your modifications in the callback from load() (the function passed as the second parameter to load()).
Something like [untested]:
$(function() {
$( "#sidebar-content" ).load( "nav-content.html", function() {
$('ul#devSubmenu').removeClass('collapse'),
$('ul#appStackSubmenu').removeClass('collapse'),
$('a[href^="#devSubmenu"]').attr("aria-expanded","true"),
$('a[href^="#appStackSubmenu"]').attr("aria-expanded","true");
});
});
The wrapping $(function() { ... }) is just jQuery shorthand for $(document).ready();

jQuery-Page not loading correctly

I recently used accordion jquery to help me expand/collapse content ( like a drop-down menu )..I used this script and placed it in the <body>
Script:
jQuery(document).ready(function($)
{
$("#accordions-727.accordions").accordion({
active: "",
event: "click",
collapsible: true,
heightStyle: "content",
animated: "swing",
})
})
The script is working fine but the page is not loading correctly..When I view or refresh the page, all the contents inside the drop-down menu becomes visible but once the page finishes loading everything becomes fine..Now how can I fix this?..Should I place the script in the <head>?
This is using jQueryUI accordion implicitly #Stew.
You have a wrong attribute in your accordion setup code, use the animate in place of animated.
Take a look in this API documentation: http://api.jqueryui.com/accordion
And it's the original component demonstration: http://jqueryui.com/accordion/
I suggest you to take a look in your jQuery files too, if they are OK and in the correct order (in <header> section).
Another point is to put your JavaScript in <header> section of your HTML and be sure you have no conflict or using older jQuery files versions than the component needs.
Hope it helps.

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

Refactor jquery animate

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.

Categories