jquery tools : Scroller issue

I was using scrollable plugin of jquery tools for a project.

The issue I was facing was when I make it circular by the following code, I used to have a an empty element right after the last element. This makes a weird transition on the scroller i.e it doesn’t look like it’s circular.

$(document).ready(function(){
 $("#scrollable").scrollable({circular: true});
});

I came up with a quick fix since I didn’t have much time to spend on this.
I copied the second element of the list and appended at the last.
Couldn’t think of anything other than this. If you have a better solution feel free to comment.

$('.items').append('<li>'+$('.items li').eq(2).html()+'</li>')
Advertisements

Switching Between Flowplayer And Youtube video player

In my current project, I had to play videos on a page. The decision was to play those videos on Flowplayer. The issue was that few videos were hosted on youtube. And I think YouTube does not permit to play youtube videos directly with another player. So the only solution was to have two players [ youtube and flowplayer in this case] and switch between them.

UPDATE: You can see this live here

Requirement: I had few thumbnails [ video snapshots ]  in a gallery which when clicked should load the respective video.

I did the following to get the result.


<div id="video-wrap">

   <div id="video"> </div>

</div>

Created an empty div with id ‘video’ for the player.


  // fgdata --> XML DOM Object

  $('gallery > item', fgData).each(function(){

     var thumbUrl = $('>thumbnail', $(this)).text();

     var videoType = $('>videotype',$(this)).text();

     var videoUrl = $('>videoUrl', $(this)).text()

     // creating thumbnail elements for the gallery

     $('#gallery ul').append('<li>'

       + '<img src="'+ thumbUrl +'" alt=""/>'

       + '<p id="videotype_'+ i +'">'+ videoType +'</p>'

       + '<p id="video_'+ i +'">'+ videoUrl+'</p>'

       + '</li>');

   });

I parse a XML document for the video urls and the thumbnail urls and I get the video type too .


  $('#gallery ul li').children('img:eq(0)').bind('click', function(){

      switchVideos(videoType, videoUrl);
  });

Each thumbnail image is attached a click event.

  var flowplayerobj= null;
  function switchVideos(vType, vUrl){

     // Unload the flowplayer before deleting the element

        if(flowplayerobj != null)
           flowplayerobj.unload();

     // removing the element
        $('#video').text(' ');
        $('#video').remove();
     // Creating the element [ #video ] again after removng it.

        $('#video-wrap').append('<div id="video"></div>');

     var vType = vType;

     var vUrl = vUrl;

     if(vType=='youtube')

     {

         $('video').append('<object width="506" height="335"><param name="wmode" value="transparent"></param><param name="movie" value="'+ vUrl +'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+ vUrl +'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="506" height="335"></embed></object>');

     }

     else

     {

         insertFlowPlayer(vUrl);

     }

 }

Every time I remove the div containing the video player since I would be switching the players according to the video type.

Note:  If the element contains the flowplayer, it can’t be removed directly. One needs to unload the flowplayer first and then remove the element.

If the video type [vType] is youtube, I embed the youtube player. If not I insert the flowplayer.


  function insertFlowPlayer(url){

    var vUrl = url;

    flowplayerobj = $f("video", {src: '/flash/flowplayer-3.1.5.swf', wmode: 'transparent'}, {

                  // change the default controlbar to tube
                  plugins: {
                             controls: {
                                          url: '/flash/flowplayer.controls-tube-3.1.5.swf',
                                          borderRadius: '0px',
                                          bufferGradient: 'none',
                                          sliderColor: '#c9c9c9',
                                          timeBgColor: '#d5d5d5',
                                          volumeSliderGradient: 'none',
                                          tooltipTextColor: '#000',
                                          buttonOverColor: '#BA1010',
                                          volumeSliderColor: '#aaaaaa',
                                          progressGradient: 'medium',
                                          progressColor: '#BA1010',
                                          bufferColor: '#c78f8e',
                                          backgroundColor: '#e1e1e1',
                                          timeColor: '#000',
                                          sliderGradient: 'none',
                                          buttonColor: '#000',
                                          durationColor: '#000',
                                          tooltipColor: '#d5d5d5',
                                          height: 25,
                                          opacity: 1.0
                                       }
                          },
                  playlist: [
                              {
                                  url: imgSrc, //screenshot url onload of the player
                                  scaling: 'fit'
                              },
                              {
                                  url: vUrl,
                                  autoPlay: false
                              }
                            ],
                  canvas:
                            {
                                  backgroundColor: '#ffffff'
                            }
       });

}

I have customized the flowplayer so that it looks similar to youtube player when switched.

JQuery – Click event firing more than once

I had to use jQuery for a project.

I attached a click event to an element


$('#test a').click(function()
{
  $(this).children('img').attr("src","images/open.gif");

});

The problem i faced was that the click event was called more than once.

After a long search,got a solution and may this help one of u too.

.unbind did the trick 🙂


$('#test a').unbind("click").click(function()
{
  $(this).children('img').attr("src","images/open.gif");

});

Dojo FadeIn/FadeOut

Showing message status for few milliseconds using Dojo fadeIn and fadeOut.

message
message

	dojo.byId('messageDiv').style.display = 'block';
	dojo.byId('messageDiv').className='message'; /* className='errormessage' for showing error*/
	dojo.byId('messageDiv').innerHTML = "Profile Updated..";
        dojo.fadeOut(
	{
		node:"messageDiv",
		onEnd:function()
		{
			dojo.fadeIn({node:"messageDiv", delay:300}).play();
			dojo.byId('messageDiv').style.display = 'none';
			dojo.byId('messageDiv').className='';
			dojo.byId('messageDiv').innerHTML = '';
		}
	}).play(800);
.message
{ 
    background:#FFFBCC;
    border:1px solid #E6DB55;
    font-size:12px; 
    font-weight:bold;    
    margin:0 auto;
    padding:2px 0px;    
    text-align:center;     
    width:508px;
 }
.errormessage
{
     background:#FFEFEF;
     border:1px solid #EFD1D1;
     color:#FF0000;
     font-size:12px; 
    font-weight:bold;    
    margin:0 auto;
    padding:2px 0px;    
    text-align:center;     
    width:508px;
}

if u r a newbie, start with dojo

Good for me i started using dojo than jquery.Jquery n other toolkits spoonfeeds u.As a designer that helps u in saving time but i feel u learn less,since the toolkits does everything.Dojo doesn’t hav a good documentation on the net compared to others, which made me look into dojo deeply.It’s like learning something new.As a newbie that taught me more.I do use both dojo n jquery depending on the projects.But glad that i started off with dojo.

Carousel using Dojo

For a project i had to make a carousel and i was using Dojo throughout my project. After about two weeks, i hav made one.

UPDATE:
Sorry folks! The site is down for maintenance so i cant post the url here.

The URL that I gave below in one of my comments is now broken. It seems dojo has updated their dojo 1.4.0 to 1.4.3.

Go to this link : http://download.dojotoolkit.org

Choose the the latest release

Then go to  dojox/widget/ and find pager widget.

Final Output :

carousel using dojo

Here is da code :

html code :

<div id="carouselwrap">
<div id="carouselprev" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the previous arrow-->
<div id="carousel"><!--start of the carousel-->
<div id="carouselscroll" ><!--start of the carouselscroll-->
   <em>
<div class="carouselscrollbox"><!--start of the carouselscrollbox block-->
<div class="carouselscrollerimg">
           <img src="Your image here" /><!--this div contains the image path --></div>
<div class="soundsettitle bmrm_text">
            Lorem Ipsum</div>
<div class="artisttitle bmrm_text">
            Lorem Ipsum</div>
<div class="soundsetdesc bmrm_text">
           - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
</em><em><em><!--end of the carouselscrollbox block--></em></em></div>
<div id="carouselnext" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the next arrow--></div>
<!--repeat the div block wid class 'carouselscrollbox'(in a for loop) as many times to get as many records in da carousel.-->

Javascript code: First step : dojo.require("dojo.fx");

var animationMethod = "chain";
var animG, offsetW, offsetH = null;
var newLeft = 0;
var boxMixin = {duration: 1000};
var carouselscroller ;

//attach events on load
dojo.addOnLoad(function() {
       var prev = dojo.byId('carouselprev');
       var next = dojo.byId('carouselnext');
       carouselscroller = dojo.byId('carouselscroll');
       dojo.connect(prev,"onclick",null,"slideLeft");
       dojo.connect(next,"onclick",null,"slideRight");
});

//sliding to the right
function slideRight() {
       var difference = dojo.byId('carousel').offsetWidth-dojo.byId('carouselscroll').offsetWidth;
       if(newLeft>difference){
           newLeft = newLeft - 200;
           var style = carouselscroller.style;
	   var anim1 = dojo.animateProperty({
	   node: carouselscroller,
	   duration: boxMixin.duration/2,
	   properties: {
		left: { end: newLeft, unit:"px" }
		}
	});

	animG = dojo.fx[animationMethod]([anim1]).play();
         }

}

//sliding to the left
function slideLeft() {
        if(newLeft<0)
        {
   	    newLeft = newLeft + 200;
	    var style = carouselscroller.style;
	    var anim1 = dojo.animateProperty({
	    node: carouselscroller,
	    duration: boxMixin.duration/2,
	    properties: {
		//width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
		left: { end: newLeft, unit:"px" }
	     }
	});

   animG = dojo.fx[animationMethod]([anim1]).play();
   }
}
<pre>

CSS Code:


/*soundsets traversal [carousel]*/
#carouselwrap{width:700px;margin:35px 0px}
#carousel{
width: 600px;
height: 230px;
overflow: hidden;
float:left;
position:relative;
}
#carouselscroll{
float:left;
width:2000px !important;
position:absolute;
left:0px;
}
#carouselprev{background:url('/*image left arrow*/') no-repeat;}
#carouselnext{background:url('/*image right arrow*/') no-repeat;}
.traversecontrol{float:left;width:40px;height:45px;margin:70px 0px}
#carouselprev:hover,#carouselnext:hover{cursor:pointer}
.carouselscrollbox{
	float:left;
	border:1px solid #eee;
	margin:9px;
        background:#f6f5f5;
	width:180px;
        text-align:left;
        padding-bottom:10px;
	}

.carouselscrollerimg img{width:140px;height:80px;margin:3px 1px }
<pre>
<pre>

U can change the css accordingly.This is just my way of doing it.