JavaScript - Amending Right Click Menu To Download Audio From Jplayer

I can't seem to play MP3s with jPlayer, only OGG.
Any ideas? My custom code is below:

Code:

<script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){

    Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        jQuery.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        jQuery(this.cssSelector.jPlayer).jPlayer(this.options);

        jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            jQuery(this).blur();
            return false;
        });

        jQuery(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            jQuery(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            jQuery(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                jQuery(this.cssSelector.playlist + " ul").append(listItem);
                jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = jQuery(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        jQuery(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    jQuery.each(this.playlist[i], function(property,value) {
                        if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
                            jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $(this).data("index");
                                jQuery(self.cssSelector.playlist + "_item_" + index).click();
                                jQuery(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            jQuery(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        },
        supplied: "mp3",
        addMedia: function(media){
            this.playlist.push(media);
            this.playlistNext();
        }
    };

});

var last_el='';
jQuery('.track .wrap .play').click(function(){
    var cur_img = jQuery(this).css('backgroundImage');
    if(cur_img.substring(cur_img.length-10)=='play.png")'){
        if(last_el!=''){
            last_el.css('background-image','url("img/play.png")');
        }
        var el = jQuery(this);
        last_el = el;
        parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
        el.css('background-image','url("img/pause.png")');
    }else{
        parent.frames[1].pauseSong();
    }
});
jQuery('.jp-interface .jp-pause').click(function(){
    last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
    var el = jQuery(this);
    var href = el.attr('href');
    if(href.substring(0,1)=='/'){
        parent.location.href = parent.location.href + href.substring(1,href.length);
    }    
});

//]]>
</script>

Hi,

I am trying to amend the showHint Function from w3schools.

I adapted the basic script to allow multiple calls and I don't have a permanent array so I made my php page create one from the table.

Have tried to play around with this a bit but I currently get nothing.

My script is:
Code:

<head>
<script type="text/javascript">
function showHint(str,FILE+str,ID){
if (str.length==0){
	document.getElementById(ID).innerHTML="";
	return;
	}
	if (window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	}
	else{
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

xmlhttp.open("GET",FILE,true);
xmlhttp.onreadystatechange=function(){
	if {xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById(ID).innerHTML=xmlhttp.responseText;
		}
	}
xmlhttp.send()
}
</script>
</head>
<body>
			<label>Search by name: </label>
				<input type="text" class="input"  onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Search':this.value;" onkeyup="showHint('getNames.php?q=','txtHintName')" Value="Search" />
	<br />
	<div id="txtHintName"></div>
	<br />

There will be more calls but I thought I would try and get one working first.

My Name.php is:
PHP Code:
<?php


    $con = mysql_connect("localhost","user","password");
    if (!$con){
        die('Could not connect: ' . mysql_error());
        }
    mysql_select_db("mydb", $con);
 
    $result=mysql_query("SELECT * FROM members");
 
 
    while($row = mysql_fetch_array($result)){
        echo "$a[]='" . $row['name'] . "';";
        }

$q=$_GET["q"];

if (strlen($q) > 0){
    $hint="";
    for ($i=0; $i<count($a); $i++){
        if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))){
            if ($hint==""){
                $hint=$a[$i];
                }else{
                $hint=$hint . " , ".$a[$i];
                }
            }
        }
    }

if ($hint == ""){
    $response="no suggestion";
    }else{
    $response=$hint;
    }

echo $response;
?>
        
 
mysql_close($con);
?>

Nothing happens. I have names in my db so they are there to be called.

Hi

I've just found out that a piece of code is not working as expected in certain browsers - but the way in which it goes wrong is not consistent, so maybe it's something wrong with my code.

Oddly enough, it works exactly as I was expecting when viewed in IE.

Here's the code... any help would be much appreciated.

Thanks


Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">
	function fillboxAddress() {
		if (document.getElementById('tbAddress').innerHTML == '') 
			{ 
			document.getElementById('tbAddress').innerHTML = 'Address';
			}
	}
	
	function clearboxAddress() {
		if (document.getElementById('tbAddress').innerHTML == 'Address') 
			{ 
			document.getElementById('tbAddress').innerHTML = ''; 
			}
	}
</script>

</head>

<body>

<p><textarea name="tbAddress" rows="2" cols="20" id="tbAddress" onfocus="clearboxAddress()" onblur="fillboxAddress()">Address</textarea></p>

</body>

Hi Im trying to make a dropdown menu like IGN has on his site with the following javascript code.
The only problem however is I can't seem to hide the menu when a user clicks outside the menu.
This is a bit frustrated because when a user wants to hide the menu again the need to reclick the menu header.

Is there anyway I could solve this problem? Also a explanation about the code would be helpfull im not used to work with javascript.

Also this is the code I have so far which works to onclick hide and show the menu.

javascript:
PHP Code:
function toggle(id) {
    var el = document.getElementById(id);
    if ( el.style.display != 'none' ) {
        el.style.display = 'none';
    }
    else {
        el.style.display = '';
    } 


HTML:
PHP Code:
<a href="#top" onclick="toggle('view_user-options');";>Panel</a>
<div id="view_user-options" style="display:none;">
 <div class="nav_option"><a href="">my test</a></div>
</div> 


Also if anyone knows how to do it plz combine it with my code so it works.
I always get in trouble with javascript when combining two codes in one.

Note: plz don't give me solution with tons of code I just want a verry simple solution.

Good morning Guru's and Experts,

I really need your help with this one.


It seems that the function this_week('end') is returning a bad date of 12/33/2014 (mm/dd/yyyy) where it should properly read:

01/02/2015

Code:

function this_week(x) {

    var today, todayNumber, fridayNumber, sundayNumber, monday, friday;
        today = new Date();
        todayNumber = today.getDay();
        mondayNumber = 1 - todayNumber;
        fridayNumber = 5 - todayNumber;

        if (x === 'start') {
            //var start_dd = today.getDate() + mondayNumber
            var start_dd = today.getDate()
            var start_mm = today.getMonth() + 1
            var start_yyyy = today.getFullYear()

            return start_mm + '/' + start_dd + '/' + start_yyyy
        }
        if (x === 'end') {
            var end_dd = today.getDate() + fridayNumber
            var end_mm = today.getMonth() + 1
            var end_yyyy = today.getFullYear()

            return end_mm + '/' + end_dd + '/' + end_yyyy
        }


}

Reply With Quote




12-29-2014, 07:43 PM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

I understand that you are trying to get the date next Friday. Try this script:-

Code:

<span id = "info"></span>

<script type = "text/javascript">
var curr = new Date(); // get current date
var first = curr.getUTCDate() - curr.getUTCDay(); // First day is the day of the month - the day of the week
var last = first + 5; // last day is the first day + 5  = Friday
var lastday = new Date(curr.setDate(last));
var yy = lastday.getUTCFullYear();
var mth = lastday.getUTCMonth()+1;
if (mth<10) {mth = "0" + mth}
var dy = lastday.getUTCDate();
if (dy<10) {dy = "0" + dy}

// now manipulate the display of year,month,date as desired
var result = mth + "/" + dy + "/" + yy;
document.getElementById("info").innerHTML = "Week Ending Friday " + result;
</script>

Lottery: A tax on people who are bad at math.

Hi

I am trying to implement a scroll to DIV (i.e. smooth scrolling with some easing) on various events in jPlayer, a javascript audio playlist. Essentially the playlist is in a scrolling DIV with scrollbars and mousewheel scrolling, and when the track changes I would like it to trigger a scroll to the currently playing track, i.e. the new track, such that it is centred vertically in the DIV (which has a variable height).

I thought I would start first with trying to add some code to the #jplayer_next event which usually looks like this:

Code:

$("#jplayer_next").click( function() {
		playListNext();
		$(this).blur();
		return false;
	});

I came up with the following code to add:

Code:

$("#jplayer_playlist").scrollTop($(".jplayer_playlist_current").offset().top);

where #jplayer_playlist is the scrolling DIV and .jplayer_playlist_current is the class of the currently playing track. The code does do something, but I am seeing fairly nonsensical jumping around the div, which does seem somewhat related to the currently playing track, but certainly not what I am looking for.

You can see the playlist here. The currently playing track is highlighted in green, and, when you click on the next button, the DIV certainly isn't scrolling smoothly to the currently playing track!

If someone could help me amend the code to get this working properly I'd be grateful.

Thanks,

Nick

Hello all, I built a javascript accordian menu that works very well. However, after a menu is opened, I have to click on another menu to close the current one. I would like to be able to toggle opening and closing of a menu without having to interact with other menus.

I appreciate any help!

Here is the Javascript code:

Code:

var expandFirstItemAutomatically = false;	// Expand first menu item automatically ?
var initMenuIdToExpand = false;	// Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true;	// Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand
var initialMenuItemAlwaysExpanded = true;
var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();

var dg_activeItem = null;

function popMenusToShow()
{
	var obj = divToScroll;
	var endArray = new Array();
	while(obj && obj.tagName!='BODY'){
		if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
			var objFound = -1;
			for(var no=0;no<otherDivsToScroll.length;no++){
				if(otherDivsToScroll[no]==obj){
					objFound = no;
				}
			}
			if(objFound>=0){
				otherDivsToScroll.splice(objFound,1);
			}
		}
		obj = obj.parentNode;
	}
}

function showSubMenu(e,inputObj)
{
	if(this && this.tagName)inputObj = this.parentNode;
	if(inputObj && inputObj.tagName=='LI'){
		divToScroll = inputObj.getElementsByTagName('DIV')[0];
		for(var no=0;no<otherDivsToScroll.length;no++){
			if(otherDivsToScroll[no]==divToScroll)return;
		}
	}
	hidingInProcess = false;
	if(otherDivsToScroll.length>0){
		if(divToScroll){
			if(otherDivsToScroll.length>0){
				popMenusToShow();
			}
			if(otherDivsToScroll.length>0){
				autoHideMenus();
				hidingInProcess = true;
			}
		}
	}
	
	if(divToScroll && !hidingInProcess){
		divToScroll.style.display='';
		otherDivsToScroll.length = 0;
		otherDivToScroll = divToScroll.parentNode;
		otherDivsToScroll.push(divToScroll);
		while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
			if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
				otherDivsToScroll.push(otherDivToScroll);

			}
			otherDivToScroll = otherDivToScroll.parentNode;
		}
		ulToScroll = divToScroll.getElementsByTagName('UL')[0];
		if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
	}

	if(e || inputObj) {

		if(dg_activeItem) {
			dg_activeItem.className = dg_activeItem.className.replace('coursefinder_activeItem','');
		}
		var aTags = inputObj.getElementsByTagName('A');
		if(aTags.length>0) {
			aTags[0].className = aTags[0].className + ' coursefinder_activeItem';
			dg_activeItem = aTags[0];
			if(aTags[0].href.indexOf('#') == -1 || aTags[0].href.indexOf('#') < aTags[0].href.length-1){
				return true;
			}
		}
	}
	return false;
}

function autoHideMenus()
{
	if(otherDivsToScroll.length>0){
		divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
		parentDivToHide.length=0;
		var obj = divToHide.parentNode.parentNode.parentNode;
		while(obj && obj.tagName=='DIV'){
			if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
			obj = obj.parentNode.parentNode.parentNode;
		}
		var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
		if(tmpHeight<0)tmpHeight=0;
		if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
		ulToHide = divToHide.getElementsByTagName('UL')[0];
		slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
		scrollUpMenu();
	}else{
		slideMenuHeightOfCurrentBox = 0;
		showSubMenu();
	}
}

function scrollUpMenu()
{
	var height = divToHide.offsetHeight;
	height-=15;
	if(height<0)height=0;
	divToHide.style.height = height + 'px';

	for(var no=0;no<parentDivToHide.length;no++){
		parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
	}
	if(height>0){
		setTimeout('scrollUpMenu()',0);
	}else{
		divToHide.style.display='none';
		otherDivsToScroll.length = otherDivsToScroll.length-1;
		autoHideMenus();
	}
}

function scrollDownSub()
{
	if(divToScroll){
		var height = divToScroll.offsetHeight/1;
		var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
		height = height +offsetMove ;
		divToScroll.style.height = height + 'px';

		for(var no=1;no<otherDivsToScroll.length;no++){
			var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
			otherDivsToScroll[no].style.height = tmpHeight + 'px';
		}
		if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',0); else {
			divToScroll = false;
			ulToScroll = false;
			if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
				initExpandIndex++;

				showSubMenu(false,objectsToExpand[initExpandIndex]);
			}
		}
	}
}

function initSubItems(inputObj,currentDepth)
{
	divCounter++;
	var div = document.createElement('DIV');	// Creating new div
	div.style.overflow = 'hidden';
	div.style.position = 'relative';
	div.style.display='none';
	div.style.height = '1px';
	div.id = 'slideDiv' + divCounter;
	div.className = 'slideMenuDiv' + currentDepth;
	inputObj.parentNode.appendChild(div);	// Appending DIV as child element of <LI> that is parent of input <UL>
	div.appendChild(inputObj);	// Appending <UL> to the div
	var menuItem = inputObj.getElementsByTagName('LI')[0];
	while(menuItem){
		if(menuItem.tagName=='LI'){
			var aTag = menuItem.getElementsByTagName('A')[0];
			aTag.className='slMenuItem_depth'+currentDepth;
			var subUl = menuItem.getElementsByTagName('UL');
			if(subUl.length>0){
				initSubItems(subUl[0],currentDepth+1);
			}
			aTag.onclick = showSubMenu;
		}
		menuItem = menuItem.nextSibling;
	}
}

function initSlideDownMenu()
{
	dhtmlgoodies_slmenuObj = document.getElementById('coursefinder');
	dhtmlgoodies_slmenuObj.style.visibility='visible';
	var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];
	var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
	mainItemCounter = 1;
	while(mainMenuItem){
		if(mainMenuItem.tagName=='LI'){
			var aTag = mainMenuItem.getElementsByTagName('A')[0];
			aTag.className='slMenuItem_depth1';
			var subUl = mainMenuItem.getElementsByTagName('UL');
			if(subUl.length>0){
				mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
				initSubItems(subUl[0],2);
				aTag.onclick = showSubMenu;
				mainItemCounter++;
			}
		}
		mainMenuItem = mainMenuItem.nextSibling;
	}	

	if(location.search.indexOf('mainMenuItemToSlide')>=0){
		var items = location.search.split('&');
		for(var no=0;no<items.length;no++){
			if(items[no].indexOf('mainMenuItemToSlide')>=0){
				values = items[no].split('=');
				showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));
				initMenuIdToExpand = false;
			}
		}
	}
	else if(expandFirstItemAutomatically>0	){
		if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
			showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
			initMenuIdToExpand = false;
		}
	}


	if(aTag.className.indexOf("active") == -1)
			{ 
				aTag.onclick = showSubMenu;
			}
			else
			{
				aTag.onclick = scrollUpMenu;
			}

				mainItemCounter++;
			}

	if(expandMenuItemByUrl)
	{
		var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
		var currentLocation = location.pathname;
		for(var no=0;no<aTags.length;no++){
			var hrefToCheckOn = aTags[no].href;
			if(hrefToCheckOn.indexOf(currentLocation)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
				aTags[no].className = aTags[no].className + ' coursefinder_activeList';
				initMenuIdToExpand = false;
				var obj = aTags[no].parentNode;
				while(obj && obj.id!='coursefinder'){
					if(obj.tagName=='LI'){
						var subUl = obj.getElementsByTagName('UL');
						if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
						if(subUl.length>0){
							objectsToExpand.unshift(obj);
						}
					}
					obj = obj.parentNode;
				}
				showSubMenu(false,objectsToExpand[0]);
				break;
			}
		}
	}

	if(initMenuIdToExpand)
	{
		objectsToExpand = new Array();
		var obj = document.getElementById(initMenuIdToExpand)
		while(obj && obj.id!='slidedown_menu'){
			if(obj.tagName=='LI'){
				var subUl = obj.getElementsByTagName('UL');
				if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
				if(subUl.length>0){
					objectsToExpand.unshift(obj);
				}
			}
			obj = obj.parentNode;
		}
		showSubMenu(false,objectsToExpand[0]);
	}
}

Ok, first let me explain what I try to do.

I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.

When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.

So, here is the code I have so far:
Code:

<div id="topnav">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">Over Meves</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Historie</a></li>
                    <li><a href="#" class="suba">Onze mensen</a></li>
                    <li><a href="#" class="suba">Werkzijze</a></li>
                </ul>
            </li>
            <li>
                <a href="vervolg3.html">Disciplines</a>
                <ul class="submenu">
                    <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
                    <li><a href="#" class="suba">Elektrotechniek</a></li>
                    <li><a href="#" class="suba">Sanitaire techniek</a></li>
                    <li><a href="#" class="suba">Energiebesparingstechniek</a></li>
                    <li><a href="#" class="suba">Bouwfysica en geluid</a></li>
                    <li><a href="#" class="suba">Diensten energiebesparing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Expertise</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
                    <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
                    <li><a href="#" class="suba">Milieu & Energie</a></li> 
                    <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
                    <li><a href="#" class="suba">EPA & EPC</a></li> 
                    <li><a href="#" class="suba">Legionella beheersing</a></li>
                </ul>          	
            </li>
            <li>
                <a href="#">Contact</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Adres & route</a></li> 
                    <li><a href="#" class="suba">Werken bij</a></li>
                </ul>
            </li>
        </ul>
    </div>

The javascript:
Code:

<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
	if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav > ul > li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
	   $('a').each(function () {
		var currentURL = document.location.href;
		var thisURL = $(this).attr('href');
		if (currentURL = thisURL) {
			$(this).parents('ul.submenu').css('display', 'block');	
		}
	//	else {
		//	$(this).parents('ul.submenu').css('display', 'none');	
	//	}
	   }); 
});
</script>

And the css:
Code:

#topnav ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}
#topnav ul li 
{
	float: left;
	margin: 0;
	padding: 0;
}
#topnav ul li a
{
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
}
#topnav ul li a:link
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:visited
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:hover
{
	color: #FFF;
	text-decoration: underline;
}
#topnav ul li a.active
{
	text-decoration: underline;
	color: #FFF;
}
/*#topnav ul li:hover .submenu
{
	display:block;
}*/
#topnav ul li ul.submenu
{
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
}
#topnav ul li ul.submenu a
{
	display: inline;
	color: #00537F;
	padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
	border-right-width: 1px; 
	border-right-style: solid;
	border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
	border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
	color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
	color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu li.active
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu a.active
{
	text-decoration: underline;
	color: #00537F;
}

Hope I explained it clear.

Thanks for any help.

Greetings,

In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual.

At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu.

I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send.


As far as I can tell the name of the arrow being used to expand menu can be seen in this html...

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

<td class="wbtTdArrow" style="padding: 2px; border: 0px none;">
<a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)">
<img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;">
</a>
</td>


Here's the html containing the name of the item I'd like to use in addition to the arrow...

<td class="wbtTdSelected">
<img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item">
</td>

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text..
now what i need is a way to change all of these fields with a fetch button.
i can get the value for the fields from the perl script on my server side.

the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted .
i am struggling with the simplist of codes to set the value of the fields from a javascript variable
any ideas please.

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

Apologies for the confusing title.

I have a scipt

Code:

....style: google.maps.NavigationControlStyle.SMALL
 }
 });
 <?
 $query = mysql_query("SELECT * FROM `family_support` WHERE 1");

 while ($row = mysql_fetch_array($query)){    
 $org_name=$row['org_name'];
 $lat=$row['lat'];
 $long=$row['long'];
 $org_address=$row['org_address'];
 echo ("addMarker($lat, $long,'<b>$org_name</b><br/>$org_address');\n");
 }
 ?>
 center = bounds.getCenter();
 map.fitBounds(bounds);

 }
 </script>

I want the $query to be the same as another query set up further down the page;
Code:

$sql_result= "SELECT * FROM family_support WHERE org_name LIKE '%$org_name%'";

if ($area != 'All') {
$sql_result .=" AND area LIKE '%$area%'";
}
if ($services != 'All') {
$sql_result .=" AND services LIKE '%$services%'";
}
if ($hardiker != 'All') {
$sql_result .=" AND hardiker = '$hardiker'";
}

My php is dire and help with putting these together would help me display markers on a map for all results from a search form rather than display all records within the db as is happening at present....

Also would I need to move the script from the head tag?

Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it...

is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors?

Heya peeps
So I'm in the process of building a website where audio can be purchased and downloaded.
I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle.
Is there a way of doing it?
All I want is a basic play/pause/stop button. To control a piece of sound.
Thanks

I've got this JavaScript code that I'm using to play audio on my site made specifically for iPhones, iPods, and whatnot. However, my only problem is, that I can only pick one audio file to play from, no matter what. Can someone tell me what I'm doing wrong? I really need this specific code cause it allows me to play audio without going into the Media Player on the iPhone and iPod.

Here's what I have in the head section:
Code:

<script type="text/javascript">
        function play_single_sound() {
                        document.getElementById('audiotag').play();
        }
</script>

And the body:
Code:

<div id="audio">
        <audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio>
</div>

And now to actually play the audio:
Code:

<a href="javascript:play_single_sound();">Play audio</a>

I can play audio fine, but I'm only limited to one audio file per page. Is there anyway around this??