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;
How can I get that value just for selected tab?
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:
<div>
<input id="search" name="targetId" value="" />
<button type="button" id="searchButton" name="searchButton">Search</button>
</div>
<script type="text/javascript">
$('#searchButton').click(function(){
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.
View 1 Replies View RelatedI 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>
<script type="text/javascript">
$(document).ready(function(){
$('.more').click(function(){
$('.overlay').toggle('slow');
});
});
</script>
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?
im using these files atm :
[URL]...
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.
My HTML:
Code:
<ul class="tabs">
<li>Tab1</li>
<li>Tab2</li>
[Code]....
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
<div id="container-2">
<ul>
<li><a href="#fragment-1a"><span>Section 1a</span></a></li>
[code]....
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 have a table with alternating bg-colors and in which I highlight the row
focused by the mouse. This is achieved by
<TR bgcolor='#A7BCCF' onmouseout="this.bgColor = '#A7BCCF'"
onmouseover="this.bgColor = '#86B1DC'">
<TD> Something ...
<TR bgcolor='#B8CADA' onmouseout="this.bgColor = '#A7BCCF'"
onmouseover="this.bgColor = '#86B1DC'">
<TD> Something else ...
THis works fine. If however I use CSS <TD class='myclass'> the
onmouseXXX-effect disappears. Any suggestions as how to resolve this ?
how to post data/information from one frame to another frame using javascript.
View 1 Replies View Relatedhow 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.
View 3 Replies View RelatedI'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?
View 6 Replies View RelatedWhenever 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.
View 3 Replies View RelatedI'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:
[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]
View 1 Replies View Relatedlike 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"
View 3 Replies View RelatedI 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?
View 2 Replies View RelatedThis 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 have nested tabs structured like this:
<div id="tabs">
<li><a title="outerTab1" href="#outerTab1"></li>
[code]....
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]...
View 1 Replies View RelatedI am trying to have basic tabs with jquery but all the contents displayed at same time, any clues
<div id="tabs">
<ul>
{% for poolname in poolnamelist %}
[code]....
I'm having a problem getting jQuery tabs to work. I'm using a master file along with an aspx that includes a placeholder.
Relevant Parts of Master File:
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Use for local server -->
[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:
Code:
$(document).ready(function(){
$('#MainTabs').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
[code]....