JavaScript - Pass Id From Href Link & Toggle On Off

Hi--

I have a link that has an mp3 sound as its href:

Code:

<a href="sounds/genealogy.mp3" class="track track-default">this is a link</a>

Unfortunately, I also need that same link to go to a part on the site (href=#greenhouse) so that the sound plays on that part of the site.

Does anyone know how to accomplish this? I am imagining it would be with javascript, but honestly, I do not know.

Any help would be greatly appreciated. Many thanks...!

hi,

I would like to pass a link through the same page using XMLHttpRequest or what ever is best without reloading the page eg;

I have :
Code:

<a id="prev"><? echo $prev;?></a>
<a id="page"><? echo $page;?></a>
<a id="next"><? echo $next;?></a>

if someone click on the link id='next' then they go to the next page where at the moment in the URL it says: default.php?page=3

Hi there!

Okay, here is my scenario:

I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself).

The file that is loaded on toggle doesn't have to be PHP, but it would help a lot.

Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately.

Highly appreciate any help/answers/feedback!

Hi,

I'm using the following Javascript code to show a div layer depending on the URL

Code:

<script type="text/javascript">

if (location.href.match(/folder/)) {

document.getElementById("div-layer").style.display="block";

}

</script>

This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example:

http://www.domain.com/folder/sub-folder
http://www.domain.com/folder/sub-folder2

etc.

Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it?

Thank you in advance.

Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded.


The first toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>



The second toggle:

<script type="text/javascript">// <![CDATA[
function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; }
// ]]></script>

Here is the referenced page:

http://sprintexperts.info/phones/#

Thanks in advance!

I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears.

Here is the code that I have ended up with so far.

Code:

$(function() {
	$("#textbox1").hide();
	$("#wrap").click(function() {
				$("#button-top").animate({right: "860px"}, 2000);
				$('#textbox1').animate({height: "toggle"}, 2000);
	});
});

Hi all, looking for some help. I found this script that does almost everything i need.
I have a form that has a small section of two radio buttons
when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box.
also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled.

here is what i have so far.
placed in head
Code:

<SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
    var visSetting = (chkbox.checked) ? "visible" : "hidden"
    document.getElementById(group).style.visibility = visSetting
}</script>

part of the form having issues with
Code:

<span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/>
<br/>
<center>

  <span class="style30">Send to me to give to the recipant:</span>
  <input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" />
 </center>
  <input type="hidden" name="price3" value=".00" />
    <input type="hidden" name="qty3" value="1" />
  <input type="hidden" name="noqty3" value="3" />

 
  <div id="shipGroup"><table width="616">
<tr>
<td width="125" style="text-align:left">
<span class="style30">First Name</span>
<input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td>
<td width="151"><input type="text" name="product3[]2" value=""/></td>
<td width="147" style="text-align:right"><span class="style30" >Last Name</span>
<input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td>
<td width="173"  style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr>
<tr><td colspan="3" style="text-align:left"><span class="style30">Address</span>
<input type="hidden" name="product3[]5" value="{br}ADDRESS:" />
<input type="text" name="product3[]6" value="" size="30"/></td>
  <td>&nbsp;</td>
  </tr>
<tr><td colspan="2" style="text-align:left"><span class="style30">City</span>
    <input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td>
<td><span class="style30">State</span>
<input type="hidden" name="product3[]9" value="{br}STATE:" />
<input type="text" name="product3[]10" value="" size="10"/></td>
<td><span class="style30">Zip code</span>
<input type="hidden" name="product3[]11" value="{br}ZIP CODE:" />
<input type="text" name="product3[]12" value="" size="5"/></td></tr></table>
</div>

please anyone with help will be great

I'm not sure if this is a JS or CSS problem, but I figure I would start here.

What is wrong with the "onload" function that makes it so that I can not initialize the class name?

I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests.

What I expect to happen is that the <blockquote id=...> class names be initialized to hide
if and only if JS is available for the toggleClass function to work.

Here is what I am doing...
Code:

<!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
  var sel = document.getElementById(IDS);  //  alert(IDS+' : '+sel.className);
  if (sel.className != 'hide') { sel.className = 'hide'; }
                          else { sel.className = 'show'; }
}
window.onload = function() {
  var sel = document.getElementsByTagName('*');
  for (var i=0; i<sel[i].length; ++i) {
    if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
  }
}
//]]>
</script>
<style type="text/css">
 .show { display: block; }
 .hide { display: none; }
 li { list-style-type: none; }
 #Schedule { margin:0px; padding:5px; }
 #Projects { margin:0px; padding:5px; }
</style>

</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
 <li>Monday:</li>
 <li>Tuesday:</li>
 <li>Wednesday:</li>
 <li>Thursday:</li>
 <li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
 <li>Current</li>
 <li>Past</li>
 <li>Future</li>
 <li>On-going</li>
</blockquote>

</body>
</html>

I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

Here is by code;

Javascript;
Code:

function toggle_visibility(o,id) {
 var obj = document.getElementById(id);
 obj.style.display=(obj.style.display == 'block')?'none':'block';
 if (obj.style.display!='none') {
 obj.style.left=zxcPos(o)[0]+20+'px';
 obj.style.top=zxcPos(o)[1]+20+'px';}
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

Here is a sample of my a to z table;
Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
        
</tr></table>

And here is an example of the Brand name div ;
Code:

<div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid;  background-color: white;  padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>

You can view the site on my test page;
http://www.dp-development.co.uk/ProteinStop/site/

(Brand menu on the left nav)

Thank you for any help you can give

Hi. I am looking for a way to have a button that toggles the background colour of my website.

So for instance, I will have one button called 'switch to light', when its clicked it switches the colour of the background to a light colour, and another button replaces this that says 'switch to dark', and so on.

The main problem is I have no idea how to store this information when the user is on the site so when the page is refreshed the colour is remembered. I am a complete newbie to Javascript, so any help will be greatly appreciated!

Thanks

I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this.
how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.

thanks

I created an FAQ toggle for my site.

I have the toggle working great. The problem is everytime I click one of the toggle links I am brought to the top of the page.


Here it is.

Any help is appreciated.

Hey, while your there if you want to like my site on facebook, I won't complain.

Im using the toggle script demonstrated he
http://www.sohtanaka.com/web-design/examples/toggle/

It works perfectly, but im wondering if it is possible to have a button to expand all and contract all.

Ive been reading through this page: http://api.jquery.com/toggle/

Im having a hard time understanding it, because this is one of the first things I have worked on with jquery. Can anyone help explain how I can do this?

I forgot how to do this. I did this a long time ago but have deleted the example.

I want to absolute position 11 scrolling div tags of the same dimensions with the same top and left positions. In other words, on top of each other. This is easy.

What I can't remember how to do is trigger them so one shows up and the others are hidden.

Code:

<style>
.one {
position:absolute;
top:200px;
left:0px;
background:skyblue;
width:250px;
height:250px;
}
.two {
position:absolute;
top:200px;
left:0px;
background:aqua;
width:250px;
height:250px;
}
</style>
<input type="button" onClick="" value="one">
<input type="button" onClick="" value="two">
<div class="one">one</div>

<div class="two">two</div>

Following are my script to toggle b/w two different links,

<html lang="en-US">
<head>
<title>toggle b/w 2 different links</title>
<script type="text/javascript"><!--
display=1;
function displayvalue()
{
document.getElementById("sv1").style.display = "block";
document.getElementById("dw1").style.display = "none";
}
function ShowHide()
{
if (display==1) {
document.getElementById("sv1").style.display = "none";
document.getElementById("dw1").style.display = "block";
//document.getElementById('javaFun') calling java func from javascript
display=2;
}
else {
document.getElementById("sv1").style.display = "block";
document.getElementById("dw1").style.display = "none";
//document.getElementById('javaFun1') calling java func from javascript
display=1;
}
}
function Func1Delay()
{
document.getElementById("sv1").style.display = "none";
document.getElementById("loadimage").innerHTML="<input type='image' src='Loading.gif'>";
setTimeout("LoadImage()", 300);
}


function LoadImage()
{
document.getElementById("loadimage").innerHTML="";
ShowHide();
}


--></script>
</head>
<body background="GsNJNwuI-UM.gif"onload="displayvalue()">




<div id="sv1" >
<a onclick ="Func1Delay()" href="javascript:;">click me</a>
</div>
<div id="loadimage"></div>
<div id="dw1" >
<a onclick ="ShowHide()" href="javascript:;">Download me</a>
</div>
</body>
</html>

whenever we call a java method , (consider this line:- document.getElementById('javaFun');)after the completion of java call the page is reloading, how control this reloading after the server completing the request....?