Solved

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

Posted on 2013-01-23
10
179 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 200 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
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 
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 200 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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

832 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