Solved

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

Posted on 2013-01-23
10
185 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

691 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