JQuery :: UI Tabs Take A Split Second To Load / Initialise?
Jun 23, 2009
I have a page with UI Tabs. With a very small amount of content in each one. It has been working brilliantly but a problem started today. When the page loads for a split second it displays the tabs as the raw html. So it shows the tabs as the list items and displays the content of all tabs stacked beneath them. The page then switches to how it should look. This happens on every refresh. This is not a critical error but looks bad to a user of my page.
However, it is appearing ont the page in Firefox for a split second when the page loads. Is there a way to stop this? The site is on localhost at the moment but I can easily upload it if need be.
Here is a live view of the problem I have:As you can see I am building a page which has an image cycle/carousel. On each of the images I would like to also have a zoomable loupe - I am using the jQzoom plugin to achieve this. Hover over the first image and you will see the zoom appear.
However, whilst all works fine on the first image, as soon as I click the next arrow (just visible at present top left of image as CSS tweak needed) to load the second image and hover over for the zoom, the second zoomed image fails to load. Anyone know why?
I am presuming it's because the cycle plugin hides the images so the jqZoom plugin can't 'grab' them.
I've been reading up on .live() function - can I use this to solve the problem? If so, could you provide some pointers...?
createMessageBox(...);I want to see the message created by createMessageBox when the load is complete and not before (as it happens).I also tried to bind the tabsload event and callback createMessageBox but it doesn't work
im new to Jquery and new to the forum as well.Ive made an web application using jquery witch several tabs. Ive declared them this way: <li class="aba"><a href="#reconhecimento"><span>Reconhecimento</span></a></li>
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
- The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
- If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
I'm trying to read the substring of a url so when the page loads up, it would know if it needs toimmediatelyjump to another tab.So a user clicks a link like this:[URL] On that page, there are already functions listening for click events on objects with a class names like "gotoTab2".So all I really need is for jquery to check if there's a '#something' in the url when the page loads up, and if so execute a 'click' on that substring as if it was a class.
I've almost finished employing the jQuery Accordian and Tabs UI functions on a website, but still have one remaining problem.I have a page using the UI tabs. When the page first loads the content of all the tabs flashes for a second or two and then the selected tab is displayed. After that the tabs work great with smooth transitions as expected.
The tabs on page load are filled with php include calls. Then I use ajax to refill the tabs base upon the users selections. That works fine without the load flashing of all tab contents. I did try switching all the php includes to jQuery ajax. The resulting page had the same problem with the content of all tabs flashing before the selected tab displayed.Here's some of my code:In the head:
Is my code the problem or is there something I'm leaving out that would hide the copy of the tabs loading until the document is ready and selects the first tab (index 0)?
I have a column of links that use ajax to load content into the adjacent DIV, and I have used the loadobs function to load the JS and CSS files along with the external file. Now within the external file I have used javascript to create a 3 tab section; when you first load the page it is fine BUT if you navigate away from the page and then try going back and loading the same external page then the tabs stop working and all the content of the tabbed sections stack ontop of one another as though the javacript isnt working?
It is a work in progress but the page I am having the problems on can be found at [url] if you click on the top link in the left hand column called Tara - Female vocalist you will be able to see where the tabs are.
I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.
I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.
2) I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
Code: page2.html#tab3
I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.
I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work.
I have nested tabs in jquery tabs which are pretty simple to do if we want static jquery tabsbut what if we want nested tabs that the remote page should decide what would be the tabs.or in other words i want nested tabs in a remote page (or ajaxified) For example i m calling this page(remote page) through tabs
I am using jQuery tabs and when I have very long content within the tabs, my browsers scroll bar reflects the content in the tab with the most content.
Example, "Tab 1" & "Tab 3" has a very long scroll bar, even though it has no content (because of Tab 2) and you can scroll down through the empty space
[URL]
Is there a way I can hide the content in Tab 2 so that my browsers scroll bar displays correctly in relation to the content in the active tab?
I'm having trouble figuring out why content isn't showing up on the 2nd and 3rd tabs of a tabbed content section embedded on a page. The content shows fine for the first tab but not at all for 2 and 3.
Page of tabbed content is [URL].. It's an OsCommerce site using STS Templates for the pages. Here's the code:
I would like to split jquery into smaller files to enhance loading timefor mobile devices. Smarphones can't cache files larger than 20kb. Is it possible spilt jquery into smaller files?
$( '#<%=GridView1.UniqueID%> td:nth-child(5):contains(08)').closest("tr").hide(); I need to split the string of the fifth column cell in order to get the hour value, and those cell which match the 08 o' clock will hide. The cell value is '3/22/2010 08:00' , '3/22/2010 07:00', '3/22/2010 18:00' and so on....
What I've had tried is : $( '#<%=GridView1.UniqueID%> (td:nth-child(5).split(" ")[1]).split(":")[0]):contains("08")'.closest("tr").hide(); But is not able to get the result I need.........
Have cycle plugin implemented and it is functioning correctly except for the page quickly flashes the third slide before the rotation starts up.
I was able to assign opacity: 0 in the CSS for webkit and Firefox browsers that hides all three <LI>'s before it starts and that works. However, IE (even with filter: alpha(opacity=0);) won't take.
I tried using the cssBefore option but it throws an error when I try to put thefilter: alpha(opacity=0), into it.
Heres' the current code:
jQuery('.video-gallery').each(function() { var holder = jQuery(this), list = jQuery('.video-holder > ul', this), switcher = jQuery('.items > ul', this),
I'm working on redesign of a vacation rental company web site, and I'm looking to use a drop down calendar to select the arrival/departure date on the search form. getting the number of nights difference between dates (though I think the code/labels are slightly backward in that example), but I don't know where to start to split off the variables I need. Basically, the search.php file I'm passing the variables to need to be in this format:
Code: search.php?month=(arrival month digit)&day=(arrival day digit)&year=(arrival year, 4 digits)&days_count=(number of nights)(...plus some other variables...)
how to split things off properly and get a properly formatted URL? I'll experiment a bit, and come back here with sample code
I couldn't find any in Google or in the JQuery plugin library.I am trying to develop a book like app, where the site manage enters a text as long as he like into CKEditor textbox. the editor of course create tags around the text, and also there might be images inside the text.Then when someone chooses the book (bunch of DIV tags), he gets a book like js (this is working) and i need to populate the book with the content from the DB.
The problem is that i just can't figure a way to split the text into small chunks without destroying tags in the process.Is there a split app in jquery that does that?
i have a function (below) which reads the last n lines from a text file. rather than read the whole line and output it as is, i want to be able to read the line and split the tab delimited text file so I can present it in columns, exclude unwanted data etc....
