Blog - PonticStar.com » Web Design http://www.ponticstar.com/blog Blog about various aspects of programming and web design Mon, 28 Jun 2010 19:53:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Strange LetsTalk customer care icon metaphor http://www.ponticstar.com/blog/2010/03/11/letstalk-icon-metaphor/ http://www.ponticstar.com/blog/2010/03/11/letstalk-icon-metaphor/#comments Thu, 11 Mar 2010 15:18:12 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=125 While looking to upgrade my phone on LetsTalk.com I was puzzled by their customer care icon. Have no idea what was designer thinking creating it. Maybe you can help?

LetsTalk customer care icon

Another question I am asking myself is there a connection between this and their low rating at ResellerRatings.com.

]]> http://www.ponticstar.com/blog/2010/03/11/letstalk-icon-metaphor/feed/ 0 Hacking the Yahoo! Media Player http://www.ponticstar.com/blog/2009/12/12/hacking-yahoo-media-player/ http://www.ponticstar.com/blog/2009/12/12/hacking-yahoo-media-player/#comments Sat, 12 Dec 2009 06:00:00 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=109
  • About the player
  • How to use
  • Appearance
  • Functionality
  • Links

    • About the player

    The Yahoo! Media Player enhances your web site or blog by creating an embedded player for each audio link. All the links can be played with one click, turning the page into a playlist. This is done by adding just one line of code to your page.

    How to use

    Please visit the Yahoo! Media Player web site (http://mediaplayer.yahoo.com/) for more information.

    How to use a playlist

    Please visit the Yahoo! Media Player public wiki (http://yahoomediaplayer.wikia.com/wiki/How_to_link) for more information.

    Note that you will not be able to test the functionality on your local computer because Yahoo! Media Player uses external service to retrieve and process XSPF files. It was done to avoid cross-domain access limitation for Flash objects and JavaScript code.

    View example

    How to change a skin

    If you want to dramatically change appearance of the player you would need to modify its skin. Default skin image can be download from Yahoo! server (alternative location). There is also another animated image used when player is minimized and playing a song, you can get it from Yahoo! server or alternative location).

    Once you have downloaded the skin image, use your favorite image editing program to customize it. In order to apply the skin you would have to use the code below.

    Instructions: Update path to your image file. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: Change default skin */
#ymp-player .ymp-color-main {
  background-color:transparent !important;
}

.ymp-skin {
  background-image:url(/path/to/your/mediaplayer-skin.png) !important;
}

/* Avoid using animation (and loading additional image)
  when player is minimized */
#ymp-body #ymp-btn-max span.ymp-animarrow {
  background-position:-119px -80px !important;
}

    If you want to use animated image for player in minimized state, instead of the last block above use this one below:

    /* Use animated image for a button
  when the player is minimized and playing a song */
#ymp-body #ymp-btn-max span.ymp-animarrow {
  background:url(/path/to/your/mediaplayer-animarrow.gif) no-repeat scroll 0 0 transparent !important;
}

    View example

    How to adjust background color

    Figure 1: Background color

    Figure 1: Background color

    Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: Set background color */
#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
  background-color:#2F437C !important;
}

    View example

    How to adjust text color

    Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: Set text color */
#ymp-player .ymp-color-text-main {
  color:#000000 !important;
}

    How to update block with relevant information

    You may want to display your own message in the relevant information block instead of the default “learn more about this player” link. To do so you will need link to your media like this:

    a song relevant info for this song

    Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: */
/* Modify contents of the block with relevant information */
#ymp-relevant-info {
  display:block;
  position:absolute;
  left:2px;
  top:10px;
  width:116px;
  font-size:12px;
  font-weight:bold;
  line-height:13px;
  text-align:center;
  z-index:2;
} 

#ymp-relevant-info a {
  color:#3D9AD0;
}

.relevant-info {
  display:none;
}

    Instructions: Insert the code below right after the line that embeds the player into your page.

    <script type="text/javascript">
   function apiReadyHandler(){
      YAHOO.ympyui.util.Event.onDOMReady(UpdateRelevantInfo);
      YAHOO.MediaPlayer.onTrackStart.subscribe(UpdateRelevantInfo);
   }

   /*
      Written by Jonathan Snook, http://www.snook.ca/jonathan
      Add-ons by Robert Nyman, http://www.robertnyman.com

http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

   */
   function getElementsByClassName(className, tag, elm){
      var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var tag = tag || "*";
      var elm = elm || document;
      var elements = (tag == "*" && elm.all)
                        ? elm.all
                        : elm.getElementsByTagName(tag);
      var returnElements = [];
      var current;
      var length = elements.length;
      for(var i=0; i<length; i++){
         current = elements[i];
         if(testClass.test(current.className)){
            returnElements.push(current);
         }
      }
      return returnElements;
   }

   function UpdateRelevantInfo() {
      // Default text
      var info = 'Visit ponticstar.com for more information';

      // Retrieve information about the track
      var meta = YAHOO.MediaPlayer.getMetaData();

      // If element with class "relevant-info" is available
      // inside the anchor, use its content instead
      if(meta && meta.anchor){
         var el = meta.anchor;
         var a = (el.getElementsByClassName)
                    ? el.getElementsByClassName("relevant-info")
                    : getElementsByClassName("relevant-info", null, el);
         if(a.length > 0){ info = a[0].innerHTML; }
      }

      document.getElementById('ymp-relevance').innerHTML = '

    ' + info + '
    

';
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

    View example

    How to remove block with relevant information

    Figure 2: Relevant information block is removed

    Figure 2: Relevant information block is removed

    Player displays “Learn more about this player” link along with lyrics or related videos. If you are trying to minimize size of the player, use the code below.

    Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: */
/* Remove block with relevant information */
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base  { width:560px !important; }

    View example

    How to hide various buttons

    Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Hide 'close window' button */
#ymp-btn-close { display:none !important; }

/* Hide 'pop-up window' button */
#ymp-btn-pop { display:none !important; }

    View example

    How to change playlist colors

    Figure 3: Playlist colors

    Figure 3: Playlist colors

    Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: Playlist colors */
/* Default color for playlist entries */
#ymp-tray .ymp-tray-track {
  color:#FFCE0C !important;
}

/* Highlighted track */
#ymp-tray .ymp-tray-track:hover {
  color:#FFFFFF !important;
  background-color:transparent !important;
}

/* Currently playing track */
#ymp-tray .ymp-tray-track.playing,
#ymp-tray .ymp-tray-track.playing:hover {
  color:#FFFFFF !important;
  background-color:#777777 !important;
}

    How to display album art

    Figure 4: Album art

    Figure 4: Album art

    You can set the image which is displayed in the player during a song. To do this, put an img element within the playable link.

    For example:

    <a href="example.mp3"><img src="example.png" alt="" />my song</a>

    The dimensions of the image should be square, not rectangular. If you don’t want the image to show up directly in the main web page, add style="display:none" to your img tag:

    <a href="example.mp3"><img src="example.png" alt="" style="display:none" />my song</a>

    Source: http://yahoomediaplayer.wikia.com/wiki/How_to_link#Album_Art

    View example

    How to change default album art image

    Insert the code below just before the line that embeds the player into your page.

    
<script type="text/javascript">
var YMPParams =
{
   defaultalbumart:'http://somedomain.com/path/someimage.gif'
};
</script>

    Source: http://mediaplayer.yahoo.com/api/#param_defaultalbumart

    How to hide album art

    Figure 5: Hidden album art

    Figure 5: Hidden album art

    /* Yahoo! Media Player: Hide album art */
#ymp-meta-image { display:none !important; }
#ymp-body #ymp-meta-top,
#ymp-body #ymp-meta-bottom {
  left:8px !important;
  width:330px !important;
}

    View example

    How to start player in a new window

    The code below tries to launch player in a new window automatically which allows user to navigate your site without interrupting the player. However my code for displaying pop-under window doesn’t work as expected for all browsers which results in pop-up window instead.

    Instructions: Insert the code below right after the line that embeds the player into your page.

    <script type="text/javascript">
    var ymp_pop_num_tries = 0;
    var ymp_pop_max_num_tries = 20;
    function ympPopPlayer(){
       var ymp = YAHOO.mediaplayer;
       if(ymp_pop_num_tries > ymp_pop_max_num_tries){ return; }
       if(ymp.Controller && ymp.Controller.view){
          // Create a pop-under window
          // works in IE, doesn't work in Firefox 3.5.x
          var ymp_pop = window.open("", "ymediaplayer");
          if(ymp_pop){ ymp_pop.blur(); }
          window.focus();

          ymp.Controller.view.popPlayer({});
       } else {
         ymp_pop_num_tries++;
         setTimeout(ympPopPlayer, 1000);
       }
    }

    function apiReadyHandler(){
       ympPopPlayer();
    }

    YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

    View example

    How to disable Yahoo! search links

    Instructions: Insert the code below right after the line that embeds the player into your page.

    <script type="text/javascript">
   // Disable Yahoo! Media Player search links
   function apiReadyHandler(){
      YAHOO.MediaPlayer.onMediaUpdate.subscribe(DisableYahooLinks);
      YAHOO.MediaPlayer.onTrackStart.subscribe(DisableYahooLinks);
      setTimeout(DisableYahooLinks, 2000);
   }

   function DisableYahooLinks(){
      DisableLink(document.getElementById('ymp-meta-track-title'));
      DisableLink(document.getElementById('ymp-meta-artist-title'));
      DisableLink(document.getElementById('ymp-meta-image'));
      DisableLink(document.getElementById('ymp-meta-album-title'));
   }

   function DisableLink(el){
      if(el){
         el.href = 'javascript:void(0)';
         el.onclick = function(){ return false; };
      }
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

    View example

    How to change default settings

    See http://mediaplayer.yahoo.com/api for more information.

    How to hide the player

    Sometimes you may want to display only small play button next to MP3 links. To hide the player use the code below.

    Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: Hide player */
#ymp-player,
#ymp-tray,
#ymp-error-bubble,
#ymp-secret-bubble {
  display:none !important;
}

    There is another way to do it using parameter displaystate which is described at http://mediaplayer.yahoo.com/api/#param_displaystate

    View example

    How to hide MP3 links

    Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

    /* Yahoo! Media Player: Hide MP3 links */
.ymp-btn-page-play,
.ymp-btn-page-pause {
  display:none;
}

    Links

    ]]>     http://www.ponticstar.com/blog/2009/12/12/hacking-yahoo-media-player/feed/ 65     Compressed Nifty Corners http://www.ponticstar.com/blog/2009/01/16/compressed-niftycorners/ http://www.ponticstar.com/blog/2009/01/16/compressed-niftycorners/#comments Sat, 17 Jan 2009 00:08:38 +0000 Michael Ryvkin http://www.ponticstar.com/blog/?p=26 Recently I was experimenting with different techniques and libraries that implement rounded corners with no images. Nifty Corners Cube by Alessandro Fulciniti was among them.

    I liked the fact that the library detected background color and padding of the target element. This allows the technique to degrade gracefully if JavaScript is disabled.

    As a rule of thumb I usually compress the libraries I use with JavaScript packer written by Dean Edwards and Rob Seiler. However niftycube.js had to be corrected before since there is a semicolon missing on line 24.

    niftycube.js:
    String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}; // Missing semicolon

    Download Nifty Corners Cube (compressed), 4.66 KB.

    ]]>     http://www.ponticstar.com/blog/2009/01/16/compressed-niftycorners/feed/ 1