Solved

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

Posted on 2013-01-23
10
173 Views
Last Modified: 2013-01-29
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
0
Comment
Question by:dzash2000
  • 5
  • 3
  • 2
10 Comments
 
LVL 8

Expert Comment

by:Barry62
Comment Utility
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
 

Author Comment

by:dzash2000
Comment Utility
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
Comment Utility
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
 
LVL 8

Expert Comment

by:Barry62
Comment Utility
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
 

Author Comment

by:dzash2000
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 8

Assisted Solution

by:Barry62
Barry62 earned 200 total points
Comment Utility
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
 

Author Comment

by:dzash2000
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Form elements should continue to use name.  Other elements should use Id.

Cd&
0
 

Accepted Solution

by:
dzash2000 earned 0 total points
Comment Utility
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
 

Author Closing Comment

by:dzash2000
Comment Utility
I came up with an excellent solution.  Can I award myself points??
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now