Archive

Posts Tagged ‘JavaScript’

JavaScript – iframe inline, iframe freehand, iframe src freedom

December 20, 2009 Leave a comment

IFRAME , you want to use, and it doesnt work, using .src?  It works how you want it to work, check following.

case ‘Duplicates’:{

// [ Putting ] — Headings
$( ‘a.databaseB’ ).html( ‘(Duplicates)’ );
// [ load and progress bar show ] – xhtml/css
myAjax(‘include/add_edit_del.php?model=ajax_loginput’, ‘oper=search&about=Duplicates’);
// [ load a largest 40,000 lines of tables ] – xhtml/css and SQL database
var db = myAjaxReturn(‘include/add_edit_del.php?model=ajax_duplicates’, ‘oper=search&about=Databases’);
// [ Also i want some ajax events attached ] – pure javascript my class and libraries.
_html = ”;

/**
* The meat of IFRAME
*/
// [ { This is what you are looking for } ] — IE5 till IE8 and FF,Chrome,Opera works for me
var frame = ‘<iframe frameborder=”1″ width=”100%” height=”400px” id=”companiesframe” name=”companiesframe” src=”javascript: \’\’;” > ‘;
// [ Place where i want to put the iframe visible] — I use iframe for performance and dealing largest displays.
$(‘#database_b’).empty().append( frame) ;

// [ Now it doesnt work! ] – so i confirm the element initialized mannually
$(‘#companiesframe’).load(function(){
try {
// [ Now plain xhtml/css/js simply copy and past] — done!
$(this).contents().find(‘body’).html( db );
}catch(e){
// if anything happens. Lets rock here…
}
});
// End of the Meat.

// — Thanks
// — Shamun
// — follow me: https://shamuntoha.wordpress.com

}break;

Advertisements
Categories: HTML, JavaScript, PHP Tags:

JavaScript – go back, go back detection, ajax go back

December 11, 2009 Leave a comment

Completely bogus when something was saying back you cant, Here how i did, using 100% ajax boot methods.

Difficulties was:

a) visitors comes to localhost/index.php

b) visitors is routed to localhost/index.php?g=1

c) visitors is now completely ajax module, onclick menus he gets contents.

d) visitors need to go back, when apply go back it goes to point A). localhost/index.php

Note: This is not the common ajax we use, b is itself a ajax for whole index.php?g=1 , c is the sub ajax sections

Solved as:

folder tree:

= shamun
– js/jquery.history.js
– js/global.js
– include/home.php
– include/menu_button_3_contents.php

– index.php

1. This plugin is used, i didn’t write it, because of time limitation, many thanks to mikage sawatari. (i will modify on this plugin for my own uses).

Download: http://dpaste.de/hSgZ/

2. A fix ajax binding function, where you can load ajax sub pages. In my case it was two route, so i splited the href link to two different location. in other case it may contain only one:

function myAjaxReturn(url,_datastr){
return $.ajax({
type    : “POST”,
url     : url,
data    : _datastr,
async : false,
success : function(msg){
// this is the sub page url, “include/page33.php”;
url = url.split(“/”);
if ( url[1]==’main.php’){
$save  = $(‘#jQuery_history’);  // to avoid error
$(document.body).empty().prepend($save).append(msg);
}else{
$(‘#alltable’).empty().append(msg);
}
}
}).responseText;
}

3. Now you apply on click buttons or div or td or anything:

// 1. Basic ajax would be like this but to have history, we will not use those methods.

// $(‘#alltable’).html(”).load(‘include/link_mijnaccount.php’);

$(“#home”).click ( function () {

// So this is the ajax method that basically we use, without history management

$.historyLoad(‘include/home.php’);

// just to avoid wrong window.location.href return false; });

// 1. Basic ajax would be like this but to have history, we will not use those methods.

// $(‘#alltable’).html(”).load(‘include/link_mijnaccount.php’);

$(“#menu_button_3”).click ( function () {

// So this is the ajax method that basically we use, without history management

$.historyLoad(‘include/menu_button_3_contents.php’);

// just to avoid wrong window.location.href

return false;

});


Categories: Ajax, JavaScript Tags:

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:

JavaScript – Tab

July 24, 2009 Leave a comment
<script src="http://dpaste.de/QuaL/raw/" ></script>

<body>
    <!-- Main tab holder -->
    <div id ="try" style="position:absolute; top : 50px;left: 50px; width:800px;"></div>

    <!-- page 2 anything... -->
    <div id="page0" style="display:none;">
        Page 1
    </div>
    <!-- page 2 anything... -->
    <div id="page1" style="display:none;">
        Page 2
    </div>	

</body>

<script>

// make tab.
(function($){
    // briefcase
    var _opt = '';
    var _html = '';
    var _css = '';
    var _tmp = '';
    // inside the container put a tab.
    $.fn.shtab  = function (param){
        // keep the original father
        var _root = $(this);
        // prepare the objects
        _opt = $.extend( {} , param, $.fn.shtab.defaults);
        // fire - menus array towards page array and check ajax load or local load
        $.each(_opt.menus, function (i,v){
            // keep in memory total tab indexes
            _opt.howmanytab = i;
            // How many menu to draw plane it
            _tmp = _tmp +  '<li class=' + i + '  ><img src="images/application.png"  /><a>' + v  + '</a> </li>';
        });
        // embed css
        _css  = '\
            <style>\
            .sh-maintab {  }\
            .sh-maintab ul {padding:0;}\
            .sh-maintab li {cursor:pointer; background-color:#EEF2FB;         border:1px solid #AFC1E2;     font-size:11px; text-align:center;     display:block;  float:right;   margin:-25px 10px 0 0;        padding:5px 13px 5px 15px; }\
            .sh-maintab ul li img {         width:20px; height:20px; position:relative;float:left;margin:-10px 0 0 -10px;     }\
            .sh-maintab ul li a { cursor:pointer; color:#000000;}\
			.sh-maintab ul li:hover { background-color:red;}\
            .sh-contents { border-top: solid 1px #AFC1E2; padding-top: 20px; }\
            </style>\
        ';
        // embed html
        _html = '\
            <!-- main tab to multiple tabs -->\
            <div >\
                <!-- main tab main buttons -->\
                <div>\
                    <ul>' + _tmp +
                    '</ul>\
                </div>\
                <!-- selected tab items..... -->\
                <div></div>\
            </div>\
        ';
        // paint it
        $(this).empty().append(_css + _html);

        // Now on click, load contents to viewport
        _root.find('.sh-maintab li').click(function(){
            _tmp = $(this).attr('class');
            _tmp = _opt.page [_tmp];
            //console.log ( _tmp );

            // check which viewmode is on.
            switch (_opt.ajaxpage){
                case true:
                    // apply the page to get via ajax path
                    $.ajax({
                        data:'',
                        url:'',
                        dataType:'',
                        success:function(msg){

                        }
                    })
                    break;

                case false:
                    // take the div or class id and append it.
                    //$(_tmp).append( _root.find('.sh-contents').empty() );
					_root.find('.sh-contents').empty().append( $(_tmp).html() );
					switch(_opt.cache){
						case true:
							// spaar
							_root.find('.sh-contents').change(function(){
								alert( $(this).html() );
								$(_tmp).html( $(this).html() );
							});
							break;

						case false:
							// nee spaar
							break;
					}

                    break;
                case 'both':
                    break;
            }// end of the switch and case, break;
        });

    }

    // Outside to inside execute
    $.fn.shtab.defaults = {
        howmanytab: 0,
        callmeback: function() { }
    };
})(jQuery);

// tiren / roepen.
$('#try').shtab({
    // Tab0, Tab1, Tab2
    menus: ['Home','About us','Test drive'],
    //load contents: false, true for ajax, both for auto sence
    ajaxpage: false,
    //#divid or .classname or folder/page.php
    page: ['#page0','#page1','#page2'],
	// true or false, to changes made
	cache: true
});

</script>

download:
http://dpaste.de/bobx/

Categories: JavaScript Tags:

JavaScript – Container

July 18, 2009 Leave a comment

Method 1:

blog

// A window of vb form
(function($){
    var opt;	// all parameters
	var _html;	// html values
	var _css;	// css values
	var _root;	// keep the value of $this

	// Plugin for container
	$.fn.container = function (param){
		// to reuse the $(this), we keep in memory.
		_root  = $(this);
		// Extend class
		opt = $.extend ( { } , param );
		// Style sheet
		_css = '<style>\
			.sh-container { padding:4px; border:solid 1px #aaaaaa; background-color:white; width:' +  opt.width + '; height: ' + opt.height + '}\
			.sh-container-head { border:solid 1px #aaaaaa; background-color:#DDDDDD; height:35px; cursor:move;}\
			.sh-container-left { float:left;padding:5px;cursor:pointer;}\
			.sh-container-right { float:right; padding:5px;cursor:pointer;}\
			.sh-container-body {padding-top:2px; }\
			.ui-resizable { position: relative;}\
			.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}\
			.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }\
			.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }\
			.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }\
			.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }\
			.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }\
			.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }\
			.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }\
			.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }\
			.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}\
		</style>';

		// Markups
		_html = '\
			<div>\
				<div>\
					<div>' + opt.caption + '</div>\
					<div>X</div>\
				</div>\
				<div></div>\
			</div>\
		';
		// Write the container now.
		$(this).empty().append( _css + _html );

		// Anything to insert on it
		var subitems = '#' + opt.ids;
        $(subitems).appendTo ( '.sh-container-body' ) ;

		// Hide/Show the container
		$(this).find('.sh-container-head').click(function(){
			_root.find('.sh-container-body').toggle();
		});
		// This > container > this resize
		if (opt.modal) {
			$(this).find('.sh-container').draggable().resizable();
		}

		return _root;

	}//end of container

})(jQuery);

// How to use it:
$('#subbody').container( {
        ids: 'abc',
		width: '60%', caption: 'Wndow', modal: true
});
Download:
http://dpaste.de/Creu/

Method 2:

123

    (function($){
        var opt;
        var _css = '\
           <style>\
            #sh-window{\
				border:solid 1px #99BBE8;\
				border-left:none;\
				border-right:none;\
                background-color:#D0DEF0;}\
            #sh-window-header{\
                border-bottom:solid 2px #99BBE8;\
				border-left:solid 1px #ffffff;\
                border-top:solid 1px #ffffff;\
				border-right:solid 2px #99BBE8;\
                background-color:#ffffff;\
                overflow:auto;height:30px;\
                padding:5px;cursor:move;\
                }\
            #sh-window-leftpane{\
                float:left;cursor:pointer;\
                }\
            #sh-window-rightpane{\
                float:right;cursor:pointer;\
                }\
            #sh-window-content{background-color:#B1C7E1; overflow:scroll; height:200px;}\
            #sh-window-footer{\
                border-top: solid 2px #99BBE8;\
                }\
			#sh-window-content table { width:100%}\
			#sh-window-content table td{cursor:pointer;border-bottom:dotted 1px #dddddd}\
			#sh-window-load {padding:5px; background-color:red;display:none;}\
            </style>';

        // temporary functions
        function ajaxevent(){
            // on click return to that item
            $('#sh-window-content table').find('tr').click(function(){
                //alert ('table tr');
                $(opt.clickeditem).val(
                    $(this).find('td:nth-child(1)').html()
                );
            });
        }

        // Window frame
        $.fn._window = function(param1){
			var _root = $(this);

            opt = $.extend( {}, param1 , $.fn._window.ajaxevent);

            // Create the structure
            $(this).empty().append( _css + '<div id="sh-window">' +
                    '<div id="sh-window-load">Wachten aub.....</div><div id="sh-window-header">' +
                            '<div id="sh-window-leftpane">' +
                            opt.caption +
                            '</div>' +
                            '<div id="sh-window-rightpane">X'   +
                            '</div>' +
                        '</div>' +
                    '<div id="sh-window-content">' +
                    '</div>' +
                    '<div id="sh-window-footer">' +
                    opt.footer +
                    '</div>' +
                '</div>' ).show('slow');

            // Get the content values;
            $.ajax({
               type: "POST",
               url: opt.url,
               data: opt.data,
			   beforeSend: function(){  $('#sh-window-load').show(); },
			   complete: function() { 	$('#sh-window-load').hide(); },
               success: function(msg){
                    $('#sh-window-content').append(msg);
                    ajaxevent();
                }
            });            

        } //end of _window

    })( jQuery );
Download:
http://dpaste.de/TYPc/
Categories: JavaScript Tags: