I need to implement a pretty basic javascript functionality in my site, but have never used it and wonder if there is a script available or if someone can give me the basics.
I have a nav bar at the top of the page with four links, and then divs for each of the links. The link you click on displays the associated div and hides the rest of them. Pretty simple, right?
I am trying to create a basic menu where if you put your mouse over a button you get a bit of descriptive text or an image appearing somewhere else on the page. I have tried to do this with hiding/revealing hidden divs - works fine with IE but no others.
<html>
<head>
<script language="javascript">
var descriptions = new Array();
descriptions[0] = "<p>See whats been added to the web site recently</p>";
descriptions[1] = "<p>Find out more about me</p>";
descriptions[2] = "<p>Check out me links</p>";
function showDescription(descriptionIndex){ .....
I'm using a bog standard script which reveals content when something is clicked. This script works fine everywhere else (or it did before I tweeked it a bit to get it to work on this one page; an easy thing to do), however, on this one page, it shows the content, but messes up the layout.
[Code]...
I have a page, which looks a bit like this:
....
<body>
<div ID=id1>................</DIV>
<div ID=gsd>................</DIV>
<div ID=ewd>................</DIV>
<div ID=fac>................</DIV>
<div ID=act>................</DIV>
</body>
I would like id1 to be visible at all times, but the other ids only to be
visible one if the time, using something like
<A HREF="#esf" onclick="showdiv('act')">
What would be the best way of doing this?
I have this simple checkbox menu [URL]
If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top.
Toggling divs is a popular subject and I have found plenty of information and was able to make it work. There is only 1 thing I am still stuck with for quite some time.
I have a dropdown menu and when I select a date from this menu it displays another select box with times for that day. When I select another date another dropdown is shown with times. The problem is now that my page shows two dropdown menus with times.
The dropdown with dates has several dates, so the dropdowns with times that show increases all the time. The question is how do I hide 1 time dropdown div as I select another one? Code:
I have a dynamically generated page that has a rollover div that needs to be displayed for each of a number of links.
Now, this is easy enough to do on a small scale: as part of the loop that dynamically generates the page, I have a separate hidedivlinkID() and showdivlinkID() function, and it works really well except in NS4.x, which I'm not supporting.
However, once the list of links grows to a certain size--and in this case the list has grown to about 150--the page takes on a rather large size. At this point, it's around 250K.
What I'd like to do is have a single pair of functions in the header script:
function showdiv(linkID) { }
function hidediv(linkID) { }
Such that I can call them easily. The problem comes in at the point where I try to pass the linkID out of the function, into the style-changing parts of the function. To wit:
function showdiv(linkID) {
linkID.style.visibility = "visible"
document.getElementById("legend").style.visibility = "hidden"
} // End showdiv
doesn't work. (The "legend" div is separate and unique; it's not overduplicated). Similarly,
function showdiv(linkID) {
document.getElementById(linkID).style.visibility = "visible"
document.getElementById("legend").style.visibility = "hidden"
} // End showdiv
doesn't work. Is there any way to make this work... or am I stuck with a bunch of extra functions on my page?
I am trying to let my user hide or show certain div's on a page. I am managing it in Firefox but IE wont do it for me. IE errors saying Object doesnt support the Property or Method? I have dynamic naming for the divs and call the script like so where you see x my array fills in the number index so the div's gets id's like myDiv(0) up to whatever.
Code:
<a href="javascript:showhide('myDiv(<%=x%>)')">Show Hide Div</a>
The Script that gets used is as follows.
Code:
<script language="javascript">
<!--
var state = 'none';
function showhide(myDiv) {
if (state == 'block') {
state = 'none';
} else {
state = 'block';
} if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + myDiv + ".style.display = state");
} if (document.layers) { //IS NETSCAPE 4 or below
document.layers[myDiv].display = state;
} if (document.getElementById &&!document.all) {
hza = document.getElementById(myDiv);
hza.style.display = state;
}}
//-->
</script>
I would like to know if there is a way to keep the script as is but also add a function to this script so that if a user clicks on another tab (div) the open tab will close on click? Please see code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[code].....
I am trying to use JS to change the display.style property of a div from �block� to �none� in order to hide and show it. I find that my code works in Firefox but not in IE. Furthermore, I find that the code works fine in IE if the div I�m trying to show/hide is not floated, but when it IS floated then I�m able to hide the div but unable to re-show it once it�s been hidden. Finally, I find that when the div I�m trying to show/hide is floated left and is the left-most element on the page, it works fine, but when I have another element floated left before it, then it fails to re-show once it�s hidden. Here is my code. In order to solve this problem I have removed all other code form my website, so this is the only code. The HTML:
[Code]...
Getting myself back into jQuery and have an issue which I didn't previously fix, and was wondering if anyone would be able to assist me. I have multiple DIVs (up to 50 on one page) that I wish to individually be able to hide and close an extra DIV once pressing the 'Details' to show, and 'Hide' to hide the extra hidden DIV.
[Code]...
I'm new to jQuery, and I'm having issues with showing my DIVs correctly. The problem with the script at the moment, is that it currently opens up every single .display div, whereas I only want it to open up the one which corresponds to the.input a.edit which I've clicked.
The script hides them individually, displays the hide button and makes the show button display correctly like I wish, but it's displaying all the the .display div's at the same time which isn't what I want. For reference here is my jQuery script:
[Code]...
i have an html page, in it there is input box
<input type=button id="parambtn" onclick="paramProcess(this);" value=v />
now when we click this button it will show a corresponding div objec, which is the parent div called 'frame1'. this div has two radio buttons "static" and "dynamic".
if the user clicks on static radio selection, i want to show a stDiv. here is the problem as this stDiv is not showing up on click event.the function is getting called as i had checked it using an alert.
if the user clicks on dynamic radio selection, i want to show a dynamicDiv, this is also not working.
this is the code.
<div id="frame1" width="20px" height="50px" style=";display:none;background-color:red;" >
<table>
<tr>
[Code]....
i would also like to add one more problem. right now, when we click on button, it shows the frame Div, but this displaces all the other elements in the page, which are inside a table. is there a way to show this div above other elements without any changes in their position.. i tried to change the z index of the frame Div, but nothing changed..
I'm wanting to hide certain divs within a container. If the sub div DOESN'T have a checkbox which is selected in it, then it should be hidden when you click the link. eg: if #2 and #5 checbox only where selected then divs(sub_1,sub_3,sub_4) would be hidden when link was clicked.
[Code]...
{foreach key=num item=account from=$accounts}
<div id="info">
<div class="box round">
<table cellspacing="1" class="data">
<tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">
<td>{$account.regdate}</td>
<td>{$account.product}<br /><a href="http://{$account.domain}" target="_blank">{$account.domain}</a></td>
<td>{$account.nextduedate}</td><td>{$currencysymbol}{$account.amount} {$currency}</td>
<td><a>View Details {$account.id}</a></td></tr></table></div></div>
I need the info div to hide when the the table row is clicked:
<tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">
This is what I'm using to hide it. But because I have multiple divs called info that I need hidden it is not working currently its only hiding the first div called info.
Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.
Here's the code I've got for the Javascript:
function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
[Code]....
I awhen it comes to "developing" jQuery but I am trying to do something that is seemingly something simple but I can't for the life of me, figure out the best way to do it.
http:[url].....
Here, you'll see the area below the navigation that has five buttons which are supposed to help scroll between the five associated divs.All I want to do is hide the currently shown div and then slide in the div associated with the button clicked.http:[url].....Here is what the animation is SUPPOSED to look like but the problem is is that the correct one uses Prototype and I am trying to use only one library and jQuery is the most suitable because I use it for other effects in the site and jQuery and Prototype obviously don't mesh well.
I'm using the following css code which wrapped around a dynamically populated field;<span class="ui-widget-header platform ui-corner-all"></span>
When the span is empty I want to hide it, and I've used this jquery to do this.
However, the ui-widget-header class appears to be stopping it from hiding - if I remove this class it hides fine.
I'm new to DOM and javascripting and have constructed a hide/show menu. I can't find a way to keep IE6 from revealing all the sub-lists onload. The code (inspired by PPK and Jeremy Keith's recent books) follows:
window.onload = function () {
var topnav = document.getElementById ("navmain");
var parent = document.getElementsByTagName("ul");
for (var i=0;i<parent.length;i++) {
if (parent[i].className != "section") continue;
parent[i].style.display = "none";
var header = parent[i].previousSibling;
if (header.nodeType != 1)
header = header.previousSibling;
header.relatedTag = parent[i];
header.onclick = openClose;
}
}
function openClose () {
var currentValue = this.relatedTag.style.display;
var newValue = (currentValue == "none") ? "block" : "none";
this.relatedTag.style.display = newValue;
}
Markup:
<div id="navmain" class="clearfix">
<ul><li><h4>Markets</h4>
<ul class="section">
<li><a href="/corporate/">Corporate</a></li>
<li><a href="/govt/">Govt/Agency</a></li>
<li><a href="/municipal/">Municipal</a></li>
<li><a href="/mbsabs/">MBS/ABS/CDO</a></li>
<li><a href="/funding/">Funding</a></li>
</ul>
</li></ul>
</div>
Hoping for some simple solution, but all advice is welcome.
I am having trouble with the following code. Right now the user clicks the button and it shows all of the blogs from the blog array. However I want it to just reveal 2 then two more and two more and so on as the user clicks button. I have tried multiple things but can't seem to get it right. Most of the things i try either reveal the entire blog on start or when the user clicks hides all of them.
[Code]...
Below is the code for a Facebook "Like" button. When I click the Like button, I would like it to show some html code below.
[Code]....
I'ld like to insert a feature seen in www.k10k.net and www.rangermag.com whereby once a link is clicked it instantly reveals a hidden layer - seems a great way of quick navigation of info.
View 1 Replies View RelatedI am a relatively inexperienced programmer and what I want to do here is to have an onClick for a div that reveals a random hint (one at a time) from a selection of 3 (they are all currently on top of eachother and hidden using body onLoad.)
[Code]...
I was just wondering if there is a JavaScript tutorial online that shows you how to do similar hover effect to what Twitter does with the trending topics. Such as Inception. When you hover over it and a black bubble appears. Also I'm not sure what it is called.
View 1 Replies View RelatedI have hidden div, that i want to show by sliding it in from topborder.The problem is that i don't know how to make it "slide in" instead of"wipe in".I want it all to move with it's content instead of showing more andmore of it.
View 1 Replies View RelatedI am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
[Code]...