Expandable List To Display Text When Item Clicked?
Jun 4, 2009
I've got a couple of problems that I cannot figure out how to do.
1. I'm trying to create a list where clickable items are visible on a page and then when clicked they expand to read a text file and stay expanded until I click them again to collapse. I've got this partially working except when I click on the item now(machine1 for example), the item I clicked on is replaced by html/txt file(machine1_output.html). Then the links are not available unless I hit the back button in the browser. Instead I want them both displayed and I want to be able to see all the items in the list and have the items expanded too. The reason for this is I want to be able to click all the links, have them display what's in the html/text file and be able to do a CTRL+F to search for an item. Is this possible?
2. When I add a third item(machine3 below) to my list none of the items are clickable. code...
I want to calculate student fees payment on my php page, but my coding here its not working. One more thing is when selected item click and its can display value of the item in other textbox(ex: if course Diploma Multimedia is selected, then the course fee is 19000 is display on txtCourseFee).I'm using java script for the calculation and save into mysql database. The code is here :
<script language="JavaScript" type="text/javascript"> function CalculateFee (form) { var coursefee; var payamaount = form.txtpayamount.value; (user input) var balfee;
I am able to display the validation error messages at top of with wrapper: "li" like the following screen: But when I enter a valid email into E-mail field, the list item bullet not display (hide) properly in the error container, please see the screen below: Is this a bug or did I missed some settings in my source code? Attached here is the sample code that demo the problem (after extract the compress file, please open sample-code/demo/demo.html). Attachments sample-code.tar.gz Size : 32.36 KB Download : 345
I have built an expandable menu that displays some categories and subcategories. The menu is populated from a MySQL DB and I'm using PHP to configure the data for the Javascript menu. All of this works correctly.
There are 2 options when using the menu.
1. Click the arrow icon next to the category option. This opens the subcategories for that category while remaining on the current page.
2. Click the category title (text link). This brings you to the category page.
When a user clicks the category title to go to the category page, I want the subcategories for that category to be open when they get there.
Everything seems to be working correctly, until I get to the line to open the subcategory.
I am new to javascript, and am having an issue, which I'm sure is elementary.. I found a script for expandable content, it suffices fine. As it stands, the script toggles images onclick. For example, whence the menu is collapsed, it displays "plus.gif" next to it, and when the menu is expanded, it displays "minus.gif" next to it.
Basically, what I would like to know is, thus: how would I change it to display text icons next to it? For example, in place of "plus.gif" I should like it to display "+" as actual text. I've dredged a number of places, however, I've found nothing. Furthermore, I cannot figure out how to do it.
when I click on a button, it should display below the button a random randomStrings(AAA, AAB, AAC, AAD, or AAE). The problem is that when I click on the button nothing is being displayed. Instead it just re-opens the web page I am on.
How can I get it so that when I click on the button, a randomStrings appears at the bottom.
question 2 is that in the future I want the randomStrings to display AAA, AAB, AAC ... all the way to ZZZ. Is there a shorter way to display the randomStrings than just AAA, AAB, AAC and so on.
Below is my code
<head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Create a Session</title> <script type="text/javascript">
i have a menu and i would like to change the color of the Categories which have subcategories only. In my example the basic categories are: News , Announcements , Contact and Career. Only Announcements and Career categories have subcategories. So i would like those two to turn green. The fact is that the list items include a href ,so i don't know how to access those "a href" combined with "this".
I'm attempting to display a list of email addresses from a text file (one address per line) in measured increments, such as one email address per second. sorry, I don't know where to begin on this.Basically I want to use this to "simulate" the appearance of being able to view the real-time send to a series of email addresses. I'm using the PHP mail() funtion to send to the looped list of email addresses, pulled from a text file.It would be great to view the actual realtime send to each address as it occurs in the mail loop, but this simulation will suffice.
I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state. Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.
I've been beating my head against a wall for a few days trying to get this working. I'm trying to create a dynamic menu where a user selects one item and another select list is shown, then another and another (and so on). Here is my JS, it *should* be taking the ID of the div, comparing it to the selected value and then showing another div by settings it's class property to visible:
I'm trying to create a horizontal dropline menu out of an unordered list. List items can have one unordered list child. I want to add a click event on all li:has(ul) elements. The pseudo-algorithm I'm thinking of is as follows:Find all other li:has(ul) elements on the page.For each, check if they are displayed.If displayed, hide it.Then, if the clicked li is displayed, hide it. Otherwise display it.Only one li:has(ul) element should be displayed at a time.
What I have doesn't work because in the .each() function, the clicked li is also evaluated. So, if the clicked li is already visible, it gets toggled inside that function and then toggled again outside that function.
write function that bolds each item was clicked...e.g. i clicked on "Cases" tag and it's bold....than i clicked on "Graphics" tab... it bolds too ,but "Cases" tag should be normal fontWeight.
Hi, i'm creating my own image gallery using jQuery, and there is a set of thumbnails at the bottom. The thumbnails have been put into an array, using jQuery, but what i am trying to do is to return the position of any clicked thumbnail in that array. i.e. when the 3rd thumbnail in the list is clicked, return 3, when the 5th thumbnail is clicked return 5 etc....
This in turn will dictate which item in another array (the main images array) will be displayed.
I have been working on a dropdown menu using Clarklab's Tutorial:The only problem is that this tutorial only shows how to create one dropdown instance.It's in use here:My issue is that when I click on one menu item, all the submenus open up. Is there a simple fix that I just haven't figured out yet?My instinct is to give each ul it's own id, but I'm not sure how to direct the jquery in the header to work with individual elements.
I'm trying to find the currently clicked index of .accordion_trigger from within another element.
When inside the .accordion_trigger click event I can simply do the below to get the current clicked index:
Code: $('.accordion_trigger').click(function(){ var index = $('.accordion_trigger').index(this); } return false; });
Obviously this doesn't work when called from within another element. I understand that 'this' is part of the problem but can't seem to find a way to form the code in such a way for it to produce a valid result. Thus far I only get -1 or 0.
When .accordion_trigger is clicked it has an "$(this).toggleClass('active').next().slideDown();" applied so in theory I shold be able to search for which of the .accordion_trigger's are "active".
I've also tried doing this via the below method but to no avail:
Code: var current = $('.accordion_trigger'); current.each(function() { if ($(this).hasClass('active')) {
So, I have this menu set up that reduces the opacity of all but the hovered link. It works fine, but it's a video playlist, and I realized that I need to make sure that this style persists after the link has been clicked.I can figure out how to add a class on click, but how to combine the two? How can I set it up so that, if the link doesn't have the class .selected, the opacity will be at 0.3. Unless, of course, it's being hovered over.I'm in a little over my head here. Here's what I'm working with:
I currently have a website with a number of menu items, many of which result in the main site being redisplayed but with an iframe being inserted somewhere within the middle of the page. The iframe is initially loaded as hidden but there is a JavaScript 'onload' routine which calculates the height of the iframe and then makes it visible in order to avoid the iframe showing scrollbars since the content of the iframe is variable.
Roughly, things look like this:
Menu button: reloads main page and passes one or more parameters, e.g. [url]
Then elements of the main page including the menu are displayed. Then, if specified by the relevant 'func' parameter the iframe is shown using code similar to the following:
This works fine but I was wondering whether there is any way of using jQuery such that I don't have to reload the page when the menu item is clicked. In other words, you'd click on the menu item and the relevant iframe would be inserted within the middle of the website, automatically sized.
In the code below, I have an ordered list and a javascript function to add new list items to the list. My problem is that the function adds items to the bottom of the list. How can I go about adding items to the top of (or anywhere else in the list)?
<script type="text/javascript"> function addLI(id){ var Parent = document.getElementById(id); var NewLI = document.createElement("LI");
I have a list called drawPathList thats just a list of xy coordinates. I use this to construct a drawing on a map. However, people would like to be able to 'Undo' something that they have drawn, so I'd like to yank that last item in a given list.
drawPathList looks like this: 23,34||45,67||456,678||43,78
Can someone help me with a function to remove the last item in the list (regardless of length)?
I have have some values stored in javascript variables. I have a <select> dropdown list whose options correspond to these values. I want to be able to select an item on the dropdown list based on the value of the javascript variable.
