I am having problems, basically I have a set of nested lists I need to show and hide
Code:
<ul id="smenu3"><ul id="smenu4">
<li>stuff here..</li>
<li>stuff here..</li>
<li>stuff here..</li>
</ul><ul id="smenu5">
[Code]...
I always want "smenu3" to show with "smenu4" and "smenu5" collapsed... When the user clicks the link, it calls a javascript function to show "smenu4" like so...
[Code]...
I am having a few issues with a client who requires me to code their menu in JavaScript.
Here is the HTML:
Code:
<ul id="navigation">
<li class="firstElement"><a href="#">User</a>
<ul>
<li><a href="#">Manage my profile</a></li>
[Code]....
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.
I have a set of nested ULs that is generated for me. I want to use it to create a drop-down navigation menu, however I don't want to use the values in the second level of ULs in the navigation. It looks something like this:
<ul class="topMenu">
<li>home</li>
<li>community
[code]....
Level one is visible as sort of tabs, and then mousing over should reveal a list of the next level of links.I would like to use the above list and mouse over "community" and see a list of links
award type 1
award type 2
discussion 1
[code]....
Or another option would be to combine levels 2 and 3 so I would see
awards
award type 1
award type 2
discussions
discussion1
and then mousing over discussion 1 would reveal the more info link.
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
Code:
I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript.
This is how I'd like it to work:
-- User selects from DropDown List 1.
-- DropDown List 2 options appear based on the selection in 1.
-- User selects from DropDown List 2,
-- Appropriate div is shown.
Here's the Javascript I'm using to show/hide a div:
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
[Code]....
I got a table.Each row has a list of statuses.If status == yes, then several elements will be shown in the rowif status != yes, then hide those elements.Im not sure if I have made a good solution, but it seem to work ok (opera9.6, ff2, ie7)The status selector passes on a unique rowid, and itself. This way the js function can get the row, and the status of the selection. Then toggle various elements in that row.Only annoying thing is the way row elements are named and found. It kinda have to rely on some hard coding, but its ok I guess.Im not sure if its possibel to just call toggle( this ), and that way get to the elements in the row.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[code].....
I can't figure out why it dosen't work. I'd like to show/hide a <p> block depending on the value selected in the dropdown list:
$(document).ready(function(){
$('#report_rep_type').change(function(){
$('#report_rep_type').change(function(){
if($(this).text()!= 'Contigency Liabilities/Others')
$('#someElement').hide();
else
$('#someElement').show();
});
});
});
HTML code:
<form action="my action>
<fieldset>
<legend>Report details</legend>
<p>
<label for="report_rep_type">Report type</label><br />
<select id="report_rep_type" name="report[rep_type]"><option value="">Please select</option>
<option value="Scientific & Technical">Scientific & Technical</option>
<option value="Financial">Financial</option> .....
<p>
<button class="button " type="submit"><img alt="Tick" src="/images/silk/icons/tick.png?1245400388" /> Create</button>
</p>
</form>
I have a simple list of members names that I pull from my members database for printing members info. I want to show the members profile/family image as well. Because its for printing I want to add the ability to hide/unhide the pics. I put the pics in a div with an ID.
[Code]...
I have a list item, where only some of the items are linking to a quote from the client. The quotes are in another list, where each list item has an id corresponding to the client link. I want to show the client quote when you roll over the client anchor link. Currently when I mouseover it's showing nothing.
Here's my HTML
<!--client list-->
<ul id="clientList">
<li>no quote Client /</li>
<li><a href="#client1">Client 1</a> /</li>
<li>no quote Client /</li>
<li><a href="#client2">Client 2</a> /</li>
</ul>
<!--client testimonials--> .....
At the moment, when I mouseover one of the anchored client links, the content disappears, so it's not showing the correct client quote <li>.
$(document).ready(function() {
// see if the requested page url contains an anchor '#'
var hash = window.location.hash.substring(1);
// if no anchor, show the default blockqoute
if(!hash){
var id = 'default';
}else{
var id = hash;
} .....
I am maintaining a site which is written in ASP. Now i have to create
some new pages.
In one page we have a table with many rows. Now, I want to enable or
disable(showing and hiding also) 2 rows of this table depending upon
the value selected by the user from a drop down list.
I have a vertical navigation menu with the basics (a <ul> with four <li>) but I need one of these list elements to slide to the left and when it finishes show or slide down a nested <ul> with its own li that is now hidden with display: none. and when I click again the first list element I wish everything to close back. or alternatively to close with a timeout. so far I got to this:
$(document).ready(function(){
$("#gioca").click(function(){
$("#gioca").animate({ left: "+=400" }, 1200)
[code].....
I am trying to hide some form elements in a form by default and show/hide
depending on which radio button is clicked. This is what I have but it is
not working: Code:
I'd like to have a show/hide widget on my web site, kind of like "show
details" / "hide details" in Google Groups. Is there a tutorial
explaining how to make them? Google's is a bit complex and it's easy to
get something wrong. If the browser does not support the required
features, I want it to generate a completely static page with the
"details" shown automatically.
Check this code:
<a>text</a>
<div id="pkg">pkg</div>
<div id="table_pkg">table_pkg</div>
I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do?
I am using some simple javascript to show and a hide a div
Code:
function showHide(d) {
if (document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
[Code]...
i have 5 sections in seperate divs and i am trying to collapse them using anchor onclicks and some js to toggle the display style. I am a little unsure of how to make this piece of code work a little more elegantly(lack of js symantic knowledge). Code:
View 3 Replies View Relatedgives me a type mismatch when I try to hide the div using the function hideTip2? Code:
View 3 Replies View RelatedI have 5 links and 5 divs. When the page loads I've set the visibility of first div to visible and all the rest are hidden. When the user clicks on second link I want to hide all the other divs and show only second. Similarly when the user clicks third link I want to show third div only. You get the idea. Here is what I have so far. Nothing happens when I click the second link.
[Code]...
Basically, I need a link that gives the user an option to show the rest of an article, and then a link UNDER the rest of the article to hide a post again. The link needs to work uniquely with each link. Every method I've used so far has worked for one post, and on the next post, when the link is clicked, it just shows the rest of the first post.
View 8 Replies View RelatedI have a javascript that works great in every browser except IE8. In IE8 the rows of links change but this ONLY happens when you open and close the info using the same link.
View 1 Replies View RelatedNow I know this is a fairly easy task, but I need to show the random div from a selection of 10 which all have the same class. I am not able to do this using unique IDs as the divs will be created by the end user as a repeating region from Adobe contribute.So I'll have a list looking something like the following but I only want one to show.
<div class="mydiv">Line Number One</div>
<div class="mydiv">Line Number Two</div>
<div class="mydiv">Line Number Three</div>
[code]....
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
i Have a table with two columns and a checkbox above it.
when the box is checked, i like to show the two <TD>s
i have:
<TD ID=1000 style=display=none>APPLE</TD>
<TD ID=1000 style=display=none>ORANGE</TD>
how can i do this with JS ?
i have used getElementById, but it only return one of the ids 񟝘'
I have a working Show / Hide form, that works on FF, but what I would
like to do is to be able to display one part when a user clicks on one
radio button and display another part when the user clicks on the
second radio button - here is the code which just shows / hides the
whole form:
Code:
The idea is that the blue help text rechtangle will have to remain
visible when mouse over (because there will be soon links in it) and
invisible when onmouseout.
I have now placed javascript on the small numbered balls and within
the rechtangle itself.
But I have it in a way that when "onmouseout" the blue help rechtangle
will be hidden. But now the onmouseout event is acting like
onmouseover. Any Ideas to do this correctly? So right now when you
onmouseover it it will disappear :S
If I get this working I can start thinking of putting a timeout on the
rechtangle for it to disappear within a couple of seconds after
"onmouseout"
I'm using a simple show function, called from a button.
function show(rowId) {
var hideRow = "View_" + rowId
document.getElementById(showRow).style.display ="block";
}
QUESTION: I'm using xsl and can have more than one table row with the
specific rowId, and I want ALL of them to show when the button is
clicked for that rowId. But although the html source is there, I only
get the first row with the rowId.