JQuery :: Using A URL Substring To Target Tabs On Page Load?
Apr 28, 2011
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 need to target a certain div and all its links and on click of any of those links load a tracking page in an iframe. Right now, if this function can just load the same file into that iframe, that will be great. In the future, if I could loop through all the links and get their name attribute (which will have the specific link to an individual tracking file), and load that into the iframe, this would be the most desirable.
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'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 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
However my problem occurs when the user uses the browsers back arrow to return to the previous page, the script executes again returning them once more to the page they have come from. Is anyone aware of a work around to this problem as it would seem there isn't one? perhaps even a better solution for opening the target page from the iframe as top location. This is really causing confusion for users, and I really need to get the issue fixed.
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
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.
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.
what I'd like to do is be able to click on a link in the popup window, and have the popup window close while reloading the parent window to the selected url.
Using cycle "pager" to call anchors with buttons within ONE page. but, i'm also trying to call these same anchors to show up when referenced on that same page, but from a link on a different page.
I can't seem to get the external page link to go-to the proper anchor on the destination page. I've tried the simple:
<a href="http://website/womens-apparel#">Womens Apparel</a> (traditionally, this would go right to the destination anchor on the targeted page)
I've also tried to set an ID to each anchor in the the destination div, but it won't reference it.
I have an unordered list of hyperlinks present in a right sidebar on each page where each list item is a specific topic. For example:
Drunk Driving Homicide Rape Molestation Etc.
Right now each of these simply hyperlinks to a page that contains a similar list with a few additions and those list items utilize the .load function to draw an external page for each topic into a div located below the list.
So, the sidebar list currently just links to 'crime.html' and 'crime.html' has a JQuery .load functionality built into the list of crimes that summons the respective topic pages into the target div. What I want to do is figure out a way where IF they click on one of the sidebar list items it takes them to the 'crime.html' and displays the specific topic they clicked on automatically in the target div. Right now anytime they click on the sidebar links (any of them) they merely take the person to the 'crime.html' page where would then have to select the topic again from the list that's present which then summons.. yep.. the external file into the target div. So, trying to eliminate that need for the 2nd click.
Here's the code I have on the 'crime.html' page that summons the external pages into the target div and provides some animation (fade in, out):
$(document).ready(function() { $('#crimecontent').load('prostitution.html'); $('.crimes li a').click(function() { var toLoad = $(this).attr('href');
[Code].....
Notice they all point to crime.html since I don't know how I can pass a specific topic to display. Therefore, they have to click again when they get to crime.html.
Basically, I have a link that should open the targeted link in a blank page, and upon the link being clicked, the original page's URL should be changed. The reason for this is that the user has to browse information on another website, and then pass the information on to me via a contact form, so rather than make them click back on my tab in the browser, and then find the "Contact" page link to fill in the form, I thought it would a good feature to simply go ahead and load the "Contact" page upon them clicking the link to the external page (which of course loads in a new tab). Here is the code I have in place:
This all works fine on my computer, regardless of the browser that I use. One of my partners on this project called me this morning and said that the link was taking him directly to the "Contact" page without opening the "Other Site." This is strange because after I put this in place, I showed it to him and it worked fine. Now, a few days later, and it does not work. He said that he cleared his browser cache, history, cookies, etc. and the problem did not go away. He uses IE8. After he told me it was no longer working, I went to test it myself, and it works fine for me no matter which browser I use (IE8 or 9, Firefox 3 or 4 Beta).
why this might have worked one day and not the next? Is it simply a problem on his computer, or could it be an issue where based on what type of browser you are using, this won't work. Also, I know this is the JavaScript forum, but is there a way to do this in PHP without using the JavaScript onclick event? Obviously, I can't use the header() function since this functionality needs to be present on a link within text of a page.
I have several boxes on one page with two tabs. But I have to copy the code for each tabbed box and change the id #showhidebox1 when I use the code below. I think there is a more simple way to do this.
i have been setting up 3 rows of tabs on one page. it works fine in terms of each panel closes when another is selected but on each row there always remains one tab as selectedDo you know of anyway to ensure for example that when i click a tab on row two and it becomes selected it will also remove the selected state from the tab on any other row?i have tried this but it does not do the trick
// $("#tabs1 ul li a").click(function(){ $('#tabs2').tabs({ selected: -1});
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 a single webpage that contains information on all 50 U.S. states. There are 50 links at the top to jump down to the state you want, and at the bottom of the information for each state a Back to Top link.
I'm making the Back to Top link into something more complex, and it will require three or four lines of code.
So that I don't have to repeat the code 50 times, and create a burden when I need to edit it, I want to place it in a .js file and call it x. Then below the information for each state I'll simply have:
Does calling code from a .js file 50 times slow down the page load? Which method would load faster?
I have got tabs working great and have set up a rotate every 5 seconds but whenever it loads a new tab (either by clicking a link or rotating to it) it moves up to the top of the page as if it was following an anchor.
So, I'm working on a website that has tabs and nested tabs. So far they all work perfectly, there is just one thing I can't seem to figure out. There is a tab on the main site that is for members, so they click on it and it brings them to a login screen. Then when the user enters in the username and password, I want it to load another page with more tabs, but in the current tab. The page (with tabs) to be loaded is in a password protected part of the site.
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?
Anyone have any code examples or tutorials on how to implement POST's on the pages that each of the jQuery's Ajaxified tabs loads? Mainly looking for examples of the tab content pages post'ing/get'ing params.
here's an example of the stand-alone page that functions normally:[URL]...(select Oct. 8th, 2009 to see example or POST in action)
but when popped into an Ajax jQuery tab, the POST doesnt work[URL]...As you can see, on the second example, when the page POST's, it's no longer running in the tab. How do i get it to just refresh/POST within the tab?
Is it faster/more beneficial to have two snippets of code be generated by php at 2 different urls and then have a load function for each url? Or have the two snippets on one page, surrounded by id's and then load them that way?
