Persoanl site won't validate because of "name" and "rel"

Hi - I have a personal website  that I built to be "responsive" to the size of the screen.

I had some questions about why the audio clips were not playing on iPhoen but before I asked it I ran this page thru W3C markup validator.  I have a bunch of errors that are about terms used to make the various javascripts work - such as "name" and "rel" attributes being obsolete and not allowed.

Question 1: Could attributes - "name" and "rel" used in the HTML be what's breaking the iPhone from playing the audio clips ?

Question 2: Should I change something in the javascripts simply to "please" the validator? If so - what should I change in the script code?

Thanks in advance for your help.
d2
dzash2000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Barry62Commented:
I just loaded your page into my safari browser on my ipod touch.  I was able to play audio clips.  

I also ran the page through the w3c validator.  You do have some invalid code.  For example, the alt tag is not universally accepted for the anchor tag.  Use title instead.

Also, he name attribute for anchor tags is obsolete and is not recognized in HTML5.  Use id instead, and getElementById() in your javascript.

Not sure about the rel attribute in div.  I've never seen it.
0
dzash2000Author Commented:
Barry62-
thanks for the test.   I'm also using Safari but on iPhone5.  It still won't play and I found something odd.   No clips will play until I click the Play button next to "Clips".  That triggers the first clip "Santa Lucia" without showing it's title.  After that - If I click any other clip title it will play exactly as intended.

I caught those errant Alt tags and uploaded the page again.  The other 7 errors are still there.

I'm not much of a scripter but there are quite a few getElementById() in the js file.  I see the "var name" near the top and I'm going to try changing that to "var id" and going thru the script line-by-line to catch where that name var is used.  Is that what you meant by:  
Use id instead, and getElementById() in your javascript.
?



$(document).ready(function () {
    var audio = "";
    var myAudio = document.getElementById("myAudio");
    var name = "";
    var audioStr = "";
    var strInterval = '';
    var audioVolume = 1;

    createPlayerBox();

    $(".MainControl").click(function () {

        if (audio.paused) {
            audio.play();
            document.getElementById("Audio_MainControl").className="StopControl";
        }
        else {
            audio.pause();
            document.getElementById("Audio_MainControl").className="MainControl";

        }
    });

	//Start to play
    $(".song_play").click(function () {
        audio.currentTime = 0;
        initAudio();
		var songName = this.name;
        name = this.name;
        document.getElementById("My_SongName").innerHTML = this.title;

        audio = document.getElementById(name+"myMusic");

        audio.play();
        audio.volume = audioVolume;

        if(strInterval != ""){
            clearInterval(strInterval);
        }
		TimeSpan();
    });

    $(".VoiceControl").click(function () {
        var CusVoice = document.getElementById("Audio_CusVoice");
        if(CusVoice.className == "VoiceControl Voice0"){
            CusVoice.className = "VoiceControl Voice33";
            audio.volume = 0.33;
        }else if(CusVoice.className == "VoiceControl Voice33"){
            CusVoice.className = "VoiceControl Voice66";
            audio.volume = 0.66;
        }else if(CusVoice.className == "VoiceControl Voice66"){
            CusVoice.className = "VoiceControl Voice100";
            audio.volume = 1.0;
        }else if(CusVoice.className == "VoiceControl Voice100"){
            CusVoice.className = "VoiceControl Voice0";
            audio.volume = 0;
        }

    });

    $(".Process").click(function (e) {

        var process = "#Audio_Process";
        var processYes = "#Audio_ProcessYet";

        var Process = $(process).offset();
        var ProcessStart = Process.left-5;
        var ProcessLength = $(process).width();

        var CurrentProces =139 +44  - e.clientX;
        DurationProcessRange((139-CurrentProces) / 139);

        $(processYes).css("width", 139);
        $(process).css("width", CurrentProces);
    });

    $(".ProcessYet").click(function (e) {
        var process = "#Audio_Process";
        var processYes = "#Audio_ProcessYet";

        var Process = $(process).offset();
        var ProcessStart = Process.left-5;
        var ProcessLength = $(process).width();

        var CurrentProces =139 +44  - e.clientX;
        DurationProcessRange((139-CurrentProces) / 139);

        $(processYes).css("width", 139);
        $(process).css("width", CurrentProces);
    });

    function TimeSpan() {
        var songTime = "#Audio_SongTime";
        var totalSongTime = "#Audio_TotalSongTime";
        var process = "#Audio_Process";
        var ProcessYet = 0;
        strInterval = setInterval(function () {
            var ProcessYet = 139-(audio.currentTime / audio.duration) * 139;
            $(process).css("width", ProcessYet);
            var currentTime = timeDispose(audio.currentTime);
            var timeAll = timeDispose(TimeAll());
            $(songTime).html(currentTime);
            $(totalSongTime).html(timeAll);
        }, 1000);

    }

    function createPlayerBox(){
        var divs = document.getElementsByClassName("AudioBox");
        for(var i=1; i<=divs.length; i++){
            var div = document.getElementById("Audio");
            var link = $("#Audio").html();
            var obj = $("#Audio").find("a");
            var audioName = obj[0].name;

            var str = '<div class="MusicBox" >'+
            '<div id="Audio_MainControl" class="MainControl" ></div>'+
            '<div id="My_SongName" class="SongName">Clips</div>'+
            '<div class="ProcessControl">'+
            '       <div class="SongTime" id="Audio_SongTime">0:00</div>'+
            '       <div class="Process " id="Audio_Process" ></div>'+
            '       <div class="ProcessYet " id="Audio_ProcessYet"></div>'+
            '       <div class="TotalSongTime " id="Audio_TotalSongTime">0:00</div>'+
            '   </div>'+
            '   <div id="Audio_CusVoice" class="VoiceControl Voice100"></div>'+
            '</div>' + link;
            $("#Audio").html(str);

        }
        var obj = $("#Audio").find("a");
        for(var i=0; i<obj.length; i++){
            var audioName = obj[i].name;
            audioStr +='  <audio id="' + audioName + 'myMusic" ><source src="_audio/' + audioName + '.ogg" type="audio/ogg">' +
                '<source src="_audio/' + audioName + '.mp3" type="audio/mpeg"></audio> ';
        }

        myAudio.innerHTML = audioStr;
        audio = document.getElementById(obj[0].name+"myMusic");
    }



    function DurationProcessRange(rangeVal) {
        var audio = document.getElementById(name+"myMusic");
        audio.currentTime = rangeVal * audio.duration;
        audio.play();
    }
    function timeDispose(number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    }
    function TimeAll() {
        var audio = document.getElementById(name+"myMusic");
        return audio.duration;
    }

    function initAudio(){

        var audios = document.getElementsByTagName("audio");
        for(var i=0; i<audios.length; i++){
            if(audios[i].played){
                audios[i].pause();
                document.getElementById("Audio"+"_MainControl").className="StopControl";
            }
        }
        var CusVoice = document.getElementById("Audio_CusVoice");
        if(CusVoice.className == "VoiceControl Voice0"){
            audio.volume = 0;
        }else if(CusVoice.className == "VoiceControl Voice33"){
            audio.volume = 0.33;
        }else if(CusVoice.className == "VoiceControl Voice66"){
            audio.volume = 0.66;
        }else if(CusVoice.className == "VoiceControl Voice100"){
            audio.volume = 1;
        }
        audioVolume = audio.volume;
    }


});

Open in new window

0
COBOLdinosaurCommented:
If the scripting is referencing the value of the rel attribute, then it is using an old discredited hack to store data.  In moder HTML5 there ia a data- attribute for that

Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Barry62Commented:
Yes, that's how I got the clips to play as well.  I assume that's just the way Safari acts.  I don't use it that often.  And yes, that is what I meant by using id and getElementById().
0
dzash2000Author Commented:
I cobbled together this solution to some of the "rel" issues:
  <script>
  $(function(){
    $(".title_div").click(function () {
      var div = $(this).attr('data-rel');
      $(".hidden_div").slideUp("slow");
      if($("#"+div).is(":hidden")) {
        $("#"+div).slideDown("slow");
      } else {
        $("#"+div).slideUp("slow");
      }
    });
  });
  </script>

Open in new window


and I'm still struggling through the $@*& audio-scott.js to get "id" to act like "name".  Isn't there an easier way?
0
Barry62Commented:
I see in audio-scott.js that you are looking for an id of "My_SongName", but I don't see it in the source of your page.
0
dzash2000Author Commented:
Barry62 - I'm not looking for "My_SongName".  

The W3C is pointing out the use of the "name" attribute and suggests wrapping the element in an "id" instead.  Well - wrapping each audio file in a div with an id - seemed to break the audio-scott script.  

So I thought I could use "id" in the place of "name" in each audio file link and then amend how the script uses "name".  Because (I think) the script looks inside each link with the class "song_play", finds the attribute "name" and  then checks its value to find out the filename of the clip to play.

Did I diagnose that right?

With that thinking I started by changing the "var name="" " to "var id="" ".  And now I'm going thru the script trying to figure out where that variable is defined and used and changing "name" to "id".

Does that sound like the right thing to do?

I'm glad it's not brain surgery but I still wish I knew what I was doing because "name" is all over the place and I don't think all of them should be replaced with "id" - - - such as with "My_SongName".

 Its hit or miss.  
Thanks for the post.
0
COBOLdinosaurCommented:
Form elements should continue to use name.  Other elements should use Id.

Cd&
0
dzash2000Author Commented:
I changed the js replacing "name" as a variable with "id" as a variable. Then - in the html - replaced the "name="" " with "id="" ".

$(document).ready(function () {
    var audio = "";
    var myAudio = document.getElementById("myAudio");
    //var name = ""; CHANGE TO VAR ID
    var id = "";
    var audioStr = "";
    var strInterval = '';
    var audioVolume = 1;

    createPlayerBox();

    $(".MainControl").click(function () {

        if (audio.paused) {
            audio.play();
            document.getElementById("Audio_MainControl").className="StopControl";
        }
        else {
            audio.pause();
            document.getElementById("Audio_MainControl").className="MainControl";

        }
    });

	//Start to play
    $(".song_play").click(function () {
        audio.currentTime = 0;
        initAudio();
		//var songName = this.name;
        //name = this.name;
        var songName = this.id;
        id = this.id;
        document.getElementById("My_SongName").innerHTML = this.title;

       // audio = document.getElementById(name+"myMusic");
		audio = document.getElementById(id+"myMusic");
		
        audio.play();
        audio.volume = audioVolume;

        if(strInterval != ""){
            clearInterval(strInterval);
        }
		TimeSpan();
    });

    $(".VoiceControl").click(function () {
        var CusVoice = document.getElementById("Audio_CusVoice");
        if(CusVoice.className == "VoiceControl Voice0"){
            CusVoice.className = "VoiceControl Voice33";
            audio.volume = 0.33;
        }else if(CusVoice.className == "VoiceControl Voice33"){
            CusVoice.className = "VoiceControl Voice66";
            audio.volume = 0.66;
        }else if(CusVoice.className == "VoiceControl Voice66"){
            CusVoice.className = "VoiceControl Voice100";
            audio.volume = 1.0;
        }else if(CusVoice.className == "VoiceControl Voice100"){
            CusVoice.className = "VoiceControl Voice0";
            audio.volume = 0;
        }

    });

    $(".Process").click(function (e) {

        var process = "#Audio_Process";
        var processYes = "#Audio_ProcessYet";

        var Process = $(process).offset();
        var ProcessStart = Process.left-5;
        var ProcessLength = $(process).width();

        var CurrentProces =139 +44  - e.clientX;
        DurationProcessRange((139-CurrentProces) / 139);

        $(processYes).css("width", 139);
        $(process).css("width", CurrentProces);
    });

    $(".ProcessYet").click(function (e) {
        var process = "#Audio_Process";
        var processYes = "#Audio_ProcessYet";

        var Process = $(process).offset();
        var ProcessStart = Process.left-5;
        var ProcessLength = $(process).width();

        var CurrentProces =139 +44  - e.clientX;
        DurationProcessRange((139-CurrentProces) / 139);

        $(processYes).css("width", 139);
        $(process).css("width", CurrentProces);
    });

    function TimeSpan() {
        var songTime = "#Audio_SongTime";
        var totalSongTime = "#Audio_TotalSongTime";
        var process = "#Audio_Process";
        var ProcessYet = 0;
        strInterval = setInterval(function () {
            var ProcessYet = 139-(audio.currentTime / audio.duration) * 139;
            $(process).css("width", ProcessYet);
            var currentTime = timeDispose(audio.currentTime);
            var timeAll = timeDispose(TimeAll());
            $(songTime).html(currentTime);
            $(totalSongTime).html(timeAll);
        }, 1000);

    }

    function createPlayerBox(){
        var divs = document.getElementsByClassName("AudioBox");
        for(var i=1; i<=divs.length; i++){
            var div = document.getElementById("Audio");
            var link = $("#Audio").html();
            var obj = $("#Audio").find("a");
          //  var audioName = obj[0].name;
            var audioName = obj[0].id;
            
            var str = '<div class="MusicBox" >'+
            '<div id="Audio_MainControl" class="MainControl" ></div>'+
            '<div id="My_SongName" class="SongName">Clips</div>'+
            '<div class="ProcessControl">'+
            '       <div class="SongTime" id="Audio_SongTime">0:00</div>'+
            '       <div class="Process " id="Audio_Process" ></div>'+
            '       <div class="ProcessYet " id="Audio_ProcessYet"></div>'+
            '       <div class="TotalSongTime " id="Audio_TotalSongTime">0:00</div>'+
            '   </div>'+
            '   <div id="Audio_CusVoice" class="VoiceControl Voice100"></div>'+
            '</div>' + link;
            $("#Audio").html(str);

        }
        var obj = $("#Audio").find("a");
        for(var i=0; i<obj.length; i++){
            //var audioName = obj[i].name;
            var audioName = obj[i].id;
            
            audioStr +='  <audio id="' + audioName + 'myMusic" ><source src="_audio/' + audioName + '.ogg" type="audio/ogg">' +
                '<source src="_audio/' + audioName + '.mp3" type="audio/mpeg"></audio> ';
        }

        myAudio.innerHTML = audioStr;
        //audio = document.getElementById(obj[0].name+"myMusic");
        audio = document.getElementById(obj[0].id+"myMusic");
    }



    function DurationProcessRange(rangeVal) {
        //var audio = document.getElementById(name+"myMusic");
        var audio = document.getElementById(id+"myMusic");
        audio.currentTime = rangeVal * audio.duration;
        audio.play();
    }
    function timeDispose(number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    }
    function TimeAll() {
      //  var audio = document.getElementById(name+"myMusic");
        var audio = document.getElementById(id+"myMusic");
        return audio.duration;
    }

    function initAudio(){

        var audios = document.getElementsByTagName("audio");
        for(var i=0; i<audios.length; i++){
            if(audios[i].played){
                audios[i].pause();
                document.getElementById("Audio"+"_MainControl").className="StopControl";
            }
        }
        var CusVoice = document.getElementById("Audio_CusVoice");
        if(CusVoice.className == "VoiceControl Voice0"){
            audio.volume = 0;
        }else if(CusVoice.className == "VoiceControl Voice33"){
            audio.volume = 0.33;
        }else if(CusVoice.className == "VoiceControl Voice66"){
            audio.volume = 0.66;
        }else if(CusVoice.className == "VoiceControl Voice100"){
            audio.volume = 1;
        }
        audioVolume = audio.volume;
    }


});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dzash2000Author Commented:
I came up with an excellent solution.  Can I award myself points??
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.