JQuery :: Interaction In Tabs - Get Value Just For Selected Tab?
Aug 17, 2009
I have 6 tabs. Each one of them contain many elements with class 'column' I'd like to know, when a tab is selected, how many such elements in that selected tab. no matter how I tried, it gives me the right count on the first one selected and start incrementing them for all subsequent selected. $('#columns > .column').length;
I'm using this jQuery tabs library that uses this simple set up... <!-- the tabs --> <ul class="tabs"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <!-- tab "panes" --> <div class="panes"> <div>pane 1 content</div> <div>pane 2 content</div> <div>pane 3 content</div> </div>
So clicking tab 1 loads the contents of the first DIV, tab 2 second DIV, etc. I have a different image map that loads into each of the separate DIVs. I have set up a search box that allows me to enter a value that matches an ALT value of one of the <area> tags and then using the scrollTo library, scrolls to that value using the coordinates provided in the <area> tag. Currently I have this working when I manually enter the DIV's class into the script:
var id = $('#search').val(); var elem = document.getElementById(id); if (elem) { var parts = $(elem).attr('coords').split(','); parts = $.map(parts, parseInt); $('div.fms1').scrollTo({ left:parts[0], top:parts[2] }, {duration:1000, axis:'x'}); }}); </script>
I'm trying to figure out how I can set up the search box to search the currently loaded DIV which is loaded depending on which tab is selected. I tried the following unsuccessfully: $('div.'+$(this)).scrollTo({ left:parts[0], top:parts[2] }, {duration:1000, axis:'x'});
I am java developer using jquery tabs in my project.I have terrible problem with jquery tabs. when i am in second tab and submit the form,tabs are reloading and first tab selected by default, but i have to be in the second tab.
I will have multiple li's of the same structure below on the same page. I click "more" and then the overlay appears. The only issue is that it appears for each instance. I understand why but I don't understand how to use the $(this) to isolate the interaction.
<li class="marketingItem"> <div class="thumb"> <?=img(array('src'=>'images/marketing/gil.jpg','alt'=>'Book 1'))?> <div> <div class="overlay"> lorem ipsum overlaysum. </div> <div class="title"> This is the Title<br /> <a href="#" class="more">more</a> </div> </li>
Im working on jquery drag and drop inv scripts for my web based game but i need help about item limitation.I want to limit number of items in inventory.How can i do this?
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?
how to embed YouTube videos into a vBulletin installation of mine. How would I go about making a vertically expanding table that expand when the user would click on the "YouTube" text? I'm thinking of starting out out as a size maybe 100px high and 400px wide, and expand to 375px high and 450px tall. I've checked Google, but nothing seemed to come up that I could use.
I've been looking for a gallery that interacts with a ligthbox and I can't seem to locate one to my needs. It either is a good gallery with a lame lightbox implementation or vice-versa. very spiffy prototypish gallery carousal type with a lightbox implementation?
Whenever firebug detects a js error on a page, it prevents you from interacting with the page, so you can't scroll, you can't click, you can't do anything except close the window.
I'm trying to halt a function's execution while waiting for user interaction.
For example, I have a function called getUserValue() that pops up a hidden div containing several buttons. Each button sets a value. I want use a function to pop the box, wait for the users' button press, and then continue the function based on what the user presses.
Behold, simi-code:
function getUserValue() { ... lots of code ... var returnValue = doPopBox(); ... lots more code based on users selection in doPopBox(); }
I've written quite a bit of supporting code, but the getUserValue() continues to execute after the box is popped up, even before the user presses a button.
I used setTimeout() to check to see if the button has been pressed -- but when the timer starts, the interface is locked and a button cannot be pressed. I also tried using a recursive function, (check value=null, if it is, recheck), but Firefox and IE apparently don't like what may seem like an unending recursive loop.
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'm using jQuery to check if a group of radio buttons has one of them selected. This works fine if there IS one selected, but errors if NONE are selected. Can anyone show me how to make it work if NONE are selected?[code]
like for example i have text areas named upload1 and upload2when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts"
I have various list boxes in a web form. I need list box No. 4 to be disabled until a selection is made in a previous list box, the No. 2 listbox. If some selection is done in listbox No. 2 then I can do a selection of list box No. 4. How can I do this?
This is irritating cause i read a arcticle with a solution to this in one of the many newsletters i receive, but then i didn't need it and now i do i can't find it, and i'm searching for days now .
I have say 3 links
link1 --- link2 --- link3
all of then formatted nicelly with CSS. When i select one of then, say link1, it becames with a diferent background color.
What i want is to keep tha backg color even when the user clicks anywhere on the page (thus loosing focus) and until another link is clicked.
I tought this could be possible in a CSS only way, but now i think i have to use some Javascript.
I need some jQuery code to get the data from the URL (example.com/?areaCode=1234) and then use it to add selected="selected" to the correct option from this set.
<option value="1111">one one one one</option> <option value="2222">two two two two</option> <option value="3333">three three three three</option> <option value="1234">one two three four</option>
I hope you understand, it's quite hard to explain even though its super simple. I can do this in PHP by doing<option value="1234" <?php if($_GET['areaCode'] == 1234) { echo 'selected="selected"; }>one two three four</option>
I have a very basic web site directory that I'm organizing with tabs. I want the last option to "Show All" containers. I played with it a little but haven't figured it out yet. Here is the code. Can someone point me in the right direction? Note, I'm new to jquery so I'm a little clueless. [code]...
I am using nested jQuery UI Tabs in my application. My problem is that I want to style them all differently. I can't seem to get this to work, as they all seem to use the same CSS classes.
Is there some way to get the tabs to use different classes, or some other way to do this?
So, i have some basic jquery tabs ( http://jqueryui.com/demos/tabs/ ) which are being switched between them using 2 effects: slide up/down and fade in/out: