?
Solved

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

Posted on 2013-01-23
10
Medium Priority
?
197 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
ID: 38810830
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
ID: 38811352
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 800 total points
ID: 38811437
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 8

Expert Comment

by:Barry62
ID: 38811463
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
ID: 38814840
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
 
LVL 8

Assisted Solution

by:Barry62
Barry62 earned 800 total points
ID: 38814966
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
ID: 38816153
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
ID: 38816175
Form elements should continue to use name.  Other elements should use Id.

Cd&
0
 

Accepted Solution

by:
dzash2000 earned 0 total points
ID: 38817030
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
ID: 38830361
I came up with an excellent solution.  Can I award myself points??
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

850 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