Archive

Archive for August, 2009

JavaScript – line

August 8, 2009 Leave a comment

Lines in HTML? Yes how about 45 degree or 97 degree angle? Do we have it? The answer is no, but yes with backslash, hmm!…

123

<!-- Javascript includes -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

<div id="box" style="position:absolute; width:600px;height:300px;
	background-color:black;">
		<div id="_a" style="position:absolute;width:50px;height:50px;
		background-color:white; top:80px;left:90px;">
		</div>

</div>

<script>
	$(document).ready(function() {
		// Line draw formula....
		// (x-x0)/(x1-x0) = (y-y0)/(y1-y0)
		//------------------------------------
		// This for Y to fix
		_xfix = (function(y,x0,x1,y0,y1){
			return ((y-y0)*(x1-x0)/(y1-y0))+x0;
		});
		// This for X to fix
		_yfix = (function(x,x0,x1,y0,y1){
			return ((x-x0)*(y1-y0)/(x1-x0))+y0;
		});

		_aa = (function (dv) {
			x0= 0; x1 = $(dv).width();
			y0= 0; y1 = $(dv).height();

			var x; var y;
			if ( Math.abs(x0-x1) > Math.abs(y0+y1) ) {
				// x
				x = Math.min(x0,x1);
				while(x<x1){
					y = _yfix(x,x0,x1,y0,y1);
					_drawpoint (x,y);
					x++;
				}

			}else{
				// y
				y = Math.min(y0,y1);
				while (y<y1){
					x = _xfix(y,x0,x1,y0,y1);
					_drawpoint (x,y);
					y++;
				}				

			}

		});

		// Draw the points
		_drawpoint = (function(x,y){
			$('#_a').append('<div id="px' + x + y +
			'" style="position:absolute;background-color:GREEN"></div>');
			$('#px' + x + y ).css({
				'width':'1px',
				'height':'1px',
				'top':y,
				'left':x
			});
		});

		_aa('#_a');
	});
</script>

Download:
http://dpaste.de/CqgR/
Categories: JavaScript

JavaScript – weather

August 6, 2009 Leave a comment
weather
// weather plugin
(function($){
    // Briefcase of variable
    var _css;
    var _html;
    var _tmp;
    var _tmp0;
    var _tags;

    // Ajax Query
    $.fn.shweather = function( param ){
        _root = $(this);
        /*
         * we could have done this in js the file weather.php is just doing this
         * header( "content-type: text/xml" );
         * $html = file_get_contents( 'http://www.google.com/ig/api?weather=Huizingen,Belgium&hell=?' );
         * echo $html;
         *
         */
        $.ajax ({
            type: 'GET',
            url:  'weather.php',
            data: 'q=' + param.caption,
            success: function( msg ){
                // current details
                $(msg).find( 'current_conditions' ).children().each( function(i,v) {
                    //alert ( source );
                    _tags = ( $(v).get(0).tagName ) ;
                    switch(_tags){
                        case 'icon':
                                var source = $(v).attr( 'data' );
                                source = source.replace( '/ig/images/weather/' , 'images/'  );
                                _tmp += '<div><img src="' +  source + '" width="100%" height="100%" /></div>';
                        break;
                        case 'temp_c':
                                var source = $(v).attr( 'data' );
                                //source = source.replace( '/ig/images/weather/' , 'images/'  );
                                _tmp = '<div>' + source  +'&deg;</div>';

                        break;
                    }
                });

                // next day
                $(msg).find( 'forecast_conditions' ).next( 'forecast_conditions' ).children().each( function( i,v ){
                    // var source = $(v).attr( 'data' );
                    // source = source.replace( '/ig/images/weather/' , 'images/'  );
                    // alert the source > replace the text in, to text out
                    // alert ( source );
                    _tags = ( $(v).get(0).tagName ) ;
                    switch(_tags){
                        case 'icon':
                            var source = $(v).attr( 'data' );
                            source = source.replace( '/ig/images/weather/' , 'images/'  );
                            _tmp0 += '<div><img src="' +  source + '" width="100%" height="100%" /></div>';
                        break;
                        case 'day_of_week':
                            var source = $(v).attr( 'data' );
                            //source = source.replace( '/ig/images/weather/' , 'images/'  );
                            _tmp0 = '<div>Morgen</div>';
                        break;
                    }
                });

                // pain the view
                _css  = '<style> .icon { width:60px; height:55px; padding:3px;border:solid 1px #aaaaaa; }  .tempc {color:#5a5a5a; font-weight:bold;  }  </style>';
                _html = '<table width="100%"><tbody><tr><td>' + _tmp +  '</td>\
                         <td>' + _tmp0 + '</td></tr></tbody> <tbody><tr> <td colspan=2 align="center"> <input style="border:solid 1px #cccccc;font-size:10px;width:100%;" name="caption"  /> </td> </tr></tbody> </table>';
                // alert ( _html );
                _root.empty().append( _css + _html );
                _root.find('[name="caption"]').val( param.caption );
                _root.find('[name="caption"]').dblclick( function(){_root.shweather({caption: $(this).val() });  });

            }
        });
    }
})(jQuery);

$('#weather').shweather({caption:'Huizingen,Belgium '});

Download:
http://dpaste.de/gOXE/
Categories: JavaScript Tags: