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;
}

Advertisements

Dojo InlineEditBox

Tried a hand at dojo InlineEditBox tday. Worked fine 🙂


 <form dojoType="dijit.form.Form" >  
                   
	   <div>
		<span>Name :</span>
		<span id="editname" dojoType="dijit.InlineEditBox" editor="dijit.form.ValidationTextBox"
		   autoSave="false" title="change your name" editorParams="{trim:'true',name:'first_name',required:'true',invalidMessage:'Invalid name (max:25 chars)',maxLength:'25',regExp:'&#91;a-zA-Z&#93;{1,25}'}">
		       <?php echo $this->user_profile['name'] ?>
		</span>
	   </div>
	   <div>
		<span>City :</span>
		<span id="editcity" dojoType="dijit.InlineEditBox" editor="dijit.form.ValidationTextBox"
		   autoSave="false" title="change your city" editorParams="{trim:'true',name:'city',required:'true',invalidMessage:'Invalid city',regExp:'&#91;a-zA-Z\\s&#93;{1,20}',maxLength:'20'}">
		       <?php echo $this->user_profile['city'] ?>
		</span>
	   </div>
	   <div>
		<span>State :</span>
		<span id="editstate" dojoType="dijit.InlineEditBox" editor="dijit.form.ValidationTextBox"
		    autoSave="false" title="change your state" editorParams="{trim:'true',name:'state',required:'true',invalidMessage:'Invalid state',maxLength:'20',regExp:'&#91;sa-zA-Z\\s&#93;{1,20}'}">
		       <?php echo $this->user_profile['state'] ?>
		</span>
	   </div>
	   <span style="display:none" dojoType="dojo.data.ItemFileReadStore" jsId="countryStore" url="<?php echo $this->baseUrl(); ?>/js/countries.json"></span>
	   <div>
		<span>Country:</span>
		<span id="editcountry" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
		   editorParams="{searchAttr: 'name', keyAttr: 'abbr', store: countryStore, autocomplete: true, hasDownArrow: false,name:'country',invalidMessage:'Invalid Country',regExp:'&#91;a-zA-Z&#93;{1,25}'}"
		    width="200px" autoSave="false"> <?php echo $this->user_profile['country'] ?>
		</span>
	   </div>
	    <div>
		<span>Zip :</span>
		<span id="editzip" dojoType="dijit.InlineEditBox" editor="dijit.form.ValidationTextBox"
		   autoSave="false" title="change your zip code" editorParams="{trim:'true',name:'zip',required:'true',invalidMessage:'Invalid Zip',maxLength:'10',regExp:'&#91;0-9&#93;{1,10}'}">
		       <?php echo $this->user_profile['zip'] ?>
		   </span>
	   </div>
	   <div>
		<span>About Me :</span>
		<span id="editaboutme" dojoType="dijit.InlineEditBox" autoSave="true" editor="dijit.form.Textarea" editorParams="{trim:'true',name:'about_me'}">
		  <?php echo $this->user_profile['about_me'] ?>
	       </span>
	   </div>
	   <div>
	       <span>Confirm changes :</span>
	       <span><button dojoType="dijit.form.Button" type="button" onclick="saveProfile()">Ok</button></span>
	   </div>
  </form>

I hav hid the save and cancel button that comes on every edit box, through css.


.classname fieldset span div button{display:none }

As i wanted all values submitted through one button than individually submitting it.

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.

ie6 transparency problem

Recently i faced a problem where my image which was used for the shadow effect,dint display the transparent side.Going thru various fixes on net,got a solution that fixed ma problem.

//Code

I placed a blank.gif wid a height n width of the shadow image.

<div class=”shadow”> <img src=”/img/blank.gif” width=”the width of the image” height=”the width of the image” border=”0″></div>

//css

Den in the css

.shadow{
width:” ” ; //width of the image

height:” ” ; //height of the image

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/img.gif)’, sizingMethod=’scale’); // @src ,giv the path to the shadow (transparent) image

}

before the fix

after the fix

Hav To fix ma code for firefox 3 :(

WE completed a project two months back, here at Raweng.Every features wrked as intended.Now a registration form is not wrking in firefox 3.Now i need to get a fix for it.Hav not seen the xact problem.But it’s wrking in all the browsers but not in Firefox 3.Works in Firefox 2 though.I dont know wat is da reason behind dis.Need to chk out.It wud be very disappointing if each code needs a fix for firefox 3.