JQuery :: UI Tabs (Nested) With Proper Browser Location (bookmarking)?
Jan 10, 2011
I'm trying to force jQuery UI Tabs to work with browser locations (as in direct-linking or bookmarking), but having very little luck doing so. It feels like I've seen this question at least 50 times around the net, and the answer mostly consists of one of the following 5:
[Code]...
Hierarchically based tabs (hopefully something better than "level1-level2-level3") As I said, I know it has been asked before, but apparently I am now the only one struggling with this. So if anyone could give some suggestion on how to use jQuery Address, jQuery BBQ or any other method to accomplish this,
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
This is my first jQuery code so I am noob at that case. I have created page with 4 tabs based on that tutorial:Each tab has form to fill out and submit. Starting on first tab, then if passed validation goes to next, etc. But when will not pass a validation I want to keep open that tab where the error occurred. My PHP code for the second tab looks like:
full sample script which demonstrates the problem, inner tabs company/department come up as list instead of tabs.I have already tried what People have suggested that inner tabs should also be tabified via jquery but it doesn't work all the examples I have seen e.g.URL... use topmost div for jquery tabs call.[code]
I've been developing my beta site (not yet live) and I am integrating a live last.fm stream of the songs I am listening to by using javascript to parse the API's JSON and then place into tables (works very well): [URL]
Now, the trouble begins, I currently have the data layed out all nice and neat in a table: Screenshot
The "I'm Listening To" section is the section I wish to tab out like this: [URL]
So that on hover over the Image the relevant meta data will move in,
The problem I'm now having is that apparently JQuery wont let me do this with tables, thus completely nullifying most of my scripting and I need to reformat the parsed data into nested DIVs rather than tables, and maintain the same layout...
The problem is, I CAN manage to create the parent DIVs that contain the images but cannot get the JSON data to be parsed into the child DIVs,
All DIVs are being created dynamically,
My code so far:
Code:
//Calculates date text function calculateDateAgo(secAgo) { var agoString, agoRange, agoScaled; if(secAgo >= (agoRange = 60*60*24))
I'm trying to nest 7 tab sets in an accordion representing each day of the week. I've tried all kinds of fixes, but no matter what I do, the results are inconsistent. It's easier to see than explain now: [URL]
I'm trying to make a web page with tabs which you can navigate between without the page reloading. I have one set of tabs working great, but when I add nested tabs there is a problem with the 'visibility' not being inherited and some parts stay visible in the sub-tabs. Sorry if this is unclear.
Here's how I have it layed out: I have a <span> for each content section of a tab. Then I have do the same thing for the content of each inner tab. When a tab is pressed some javascript code goes through and makes all content sections hidden and the content section for the tab that was pressed visible. If I select a tab and then select an inner tab it looks like is should, but when I try and select a different tab for the outer tabs the content for the inner section doesn't go away. I've found that this is because visibility is not inherited. My question is if anyone has a solution for this problem. I'm sure there is somebody that knows of some javascript trickery to do this.
Is there a way in Javascript, or perhaps in HTML, to force a browser to re-render an image on an HTML page after a round-trip between the client and the server ?
In my particular case, the image is changing on the server although the URL for it remains the same, but the browser is still displaying the old image from its cache rather than the new image from its URL location.
Basically i need the menu to be collapsed to the first level initially. So only the User, Admin and Company User links are visible.
When these 1st level menu items are clicked the 2nd level sub menus need to be displayed when navigated to the 1st level index page and so on for the third level menus.
I need to be able to remember the location as well so the menu stays open on the correct page.
The annoying thing is that if i was allowed to do this in Coldfusion this would only take me a little while but i don't know much JavaScript therefore am a bit stuck. I am not allowed to use libraries either such as JQuery, MooTools
Another challenge is to style the 'active' link locations.
When you are at the first level the class of the anchor needs to be selected_bg.
When in a sub of said first level the class of that selected anchor needs to be selected_bg and the first level needs to change to selected.
For the third level both the above stays the same but then the third level takes the class of selectorThird when active.
The problems im facing is when I use something like jcarousellite inside tabs. It works fine in browsers other than ie. In ie, the carousel loads fine in the active tab, but in the inactive ones it doesnt preload.
Basically when you click on a previously inactive tab, it displays nothing until you click outside the tab.
I have narrowed down the problem to this: My tabs use a css style where the inactive tabs set the display to none. This somehow in ie causes whatever jquery that is contained within not to load before hand. If I remove this display: none property, all my carousels show fine, but ofcourse so do all the tabs
i.e. they are no longer hidden when inactive, instead all are shown as overlapping blocks on the page.
Note: all elements used are div elements
View this message in context: [url]
Sent from the jQuery General Discussion mailing list archive at [url].
Need some help on closing the IE browser, having multiple Tabs. Currently we can close the current tab with window.close(), but is there any other way where we can close the complete browser having multiple tabs by writting some logic program...???
I know how to get Explorer to bookmark a page, at least to call the add favourites dialog, but is it possible to detect if the user already has the page bookmarked?
I've seen java coding for bookmarking via text...now how about via image? (I'm a coding defunct)
Another bookmark related question. Matt had this great article about adding a bookmark logo to IE 5.5--
I made a nifty logo for my site and it worked! However when I came back to the site a day later, I noticed the logo was no longer showing up. Is that because you have to register the favicon program??
I already understand that one cannot disable a browser's forward and back functions. This is a situation where I have code working in Mozilla V1.6 and would like something similar for Opera and IE.
I link within a page and display individual divisions of that page, manipulating their visibility and display styles with an onClick function. As long as I explicitly click a link to progress, it works with browsers I've tried.
If I click the browser's back button I see the content of the browser's location bar change as I expect. But I need to set the visibility and display styles for the corresponding division. In Netscape/Mozilla I have a little function enabled by setInterval(). It looks to see if window.location.hash matches the division which is visible and modifies styles accordingly.
Under IE window.location.hash seems to be "stuck" at the most "forward" link. Under Opera I can get only the URL without the hash; it claims that the hash property is undefined or empty. I've tried document.location and document.URL with the same results.
Since there's no page load or unload involved, there's no event generated; I could kludge some history of my own to traverse.
Am I looking in the right place to get the hash info? Is there some direct access to read the location bar?
Is there another approach to the problem, other than breaking up the page so that I force a load or unload?
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 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 am using jQuery.get to make an AJAX request to the server which should return a JSON object, but it is interpretated by jQuery as a string, not an object.[code]I do not use getJSON because I want to make one request which could return in a JSON object, or just a string, depending on some conditions.
Very new using jQuery. Anyway, I have the following few lines which create a component on a web page.[code]...
Upon some analysis, I can see that the css does contain the styles used by my div. So now, I would like to change the colors of the component, but I am not sure what is the best practice. Can one override in the div tag the colors, or should one duplicate the .css and change it?
Seeking the best way to perform this that other in the group use.
So I have the following form field: Code HTML4Strict: <input type="text" size="9" style="width: auto"> I do this, because in CSS I set all my input fields to 'width:200px;' (looks better), but also require some fields to be shorter (which I do by setting 'width:auto' and attribute size="x"). The problem with this is that I need to get the precise width of all inputs with jQuery!
But if I do the following: Code JavaScript: alert( $( "input" ).css( 'width' ) ); It outputs: 'auto' How do I make it return the element's actual width?
I'm trying to create a list, to which you can: 1. Add and remove items. 2. According to what's in this list, there should be dynamic content loaded on to the page.
I've accomplished 1 with the code below. I'm not sure about how to accomplish 2. <script language="javascript"> var listItems = new Array(); var currentList = new String(); function listManager(task, id, name) { //$("#debug").append(" ##### List manager. ("+listItems.length+" items) ##### "); if(task == "add") { refreshList(); // refresh the list .....
