[How To] Install FireFox4.0 Beta

Pocket

Firefox 3.6.8 and Firefox 4.0b2 are available from ubuntu-mozilla-daily.
Open terminal,

Hit Alt+F2 then type “gnome-terminal” then hit enter.

Then enter these commands one by one

sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
sudo apt-get update
sudo apt-get install firefox
sudo apt-get install firefox-4.0

That’s all now you have Firefox4.0 beta version. Remember to check for udpates regularly.

Firefox New Addons

Firefox4.0 Beta New Addons Manager
Firefox4.0 Beta New Addons Manager

Mozilla Developer Preview Tools Menu Items are Listed Below. As you can see it contains two new Menu Items. Inspect and Heads Up display.

Mozilla Tools Menu Items List
Mozilla Tools Menu Items List

When Inspect is selected, then it works like the firebug inspections, we can debug the elements of our webpage.

Heads Up Display allows us the freedom of selection of particular type of warnings and errors.
When Heads up Display is selected then we can toggle the different buttons and then click on the webpage, then the debug message will be shown in the console, which is at the top section & below the buttons.

Heads Up Display in Firefox Developer Preview Release
Heads Up Display in Firefox Developer Preview Release

Those with the Grayed and blurred are buttons in clicked state and other are in normal state.

[How To] Get/Install PyDev in Eclipse editor.

Pocket

1. Start Eclipse Editor

2. Click in Help > Install New Software

3.Then Click in Add and use the entries as shown below

Name : PyDev Eclipse

Location : http://pydev.org/updates/

Add PyDev Eclipse Repository
Add PyDev Eclipse Repository

Click on Ok.

Then wait for few seconds, the list will be updated and you’ll be presented with two options

PyDev and PyDev Mylyn Integration(optional).

Select the upper one. Then click Next > Finish.

PyDev Eclipse Plugin Select
PyDev Eclipse Plugin Select

When asked to trust the certificate from Aptatna Tick the box next to it, then Eclipse will download the plugin.

Q. How to confirm plugin installation has succeed ?

A. Click File > New > Other

PyDev is also listed, that confirms the installation of PyDev has succced.

PyDev Installation Confirmation
PyDev Installation Confirmation

Have a nice day.

-Asee

Reference: http://marketplace.eclipse.org/content/pydev-python-ide-eclipse

[Tutorial] Create Collapsable and Expandable Fixed jQuery Modal Box

Pocket

Today I am going to write a tutorial on how to write a Jquery enabled Collapsable and Expandable Fixed jQuery Modal Box.

Q. What is jQuery ?

A. jQuery is a new type of Javascript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

reference : http://jquery.com (Official jQuery Homepage)

Here is the quick demo page for you to see our final product, that we are going to create from this tutorial.

First of all download the latest jquery pack from site Downlink Jquery Pack.

I have used the modal box from Simple jQuery Modal Window Tutorial and customized it, so that it becomes collapsable and Expandable Fixed jQuery Modal Box.

Therefore, before completing this tutorial, you might think on completing Simple jQuery Modal Window Tutorial first.

Lets get to the topic again,

Strategy used in this jQuery Modal Box

  1. Search for tag with name=”modal”
  2. Set the mask to fill entire browser
  3. Finally display the dialog box that will lay over this mask.

See the screenshot below for complete reference.

JQuery Fixed Modal Box
JQuery Fixed Modal Box

At first our window is in state 2 i.e. Before Click, when an anchor inside dialog box 1 is clicked then the state changes to state 4, by Sliding Down. Then when again the link is clicked the state changes back to normal state by Sliding UP.

Dialog-Box is fixed at top by the use of CSS. CSS is controlled by the use of jQuery and jQuery click event is handled accordingly.

Save the below code in modalcss.css file. (Same as Simple jQuery Modal Window Tutorial with minor Changes)

Modalcss.css

@CHARSET "UTF-8";

/* Z-index of #mask must lower than #boxes .window */
#mask {
	left: 0;
	top: 0;
	position: absolute;
	z-index: 9000; /**Must be less than z-index of #boxes .window**/
	background: #000;
	display: none;
}
#boxes .window, #boxes #dialog {
	/**-moz-border-radius:10%;**/
	border:3px solid yellow;
	color:#fff;
	background:blue;
	/**background-image:url('../images/background.gif');**/
	background-repeat: no-repeat;

}
#boxes .window {
	left: 0;
	top: 0;
	position: absolute;
	width: 594px;
	height: 384px;
	display: none;
	z-index: 9999;/**Must be greater than z-index of #mask**/
	padding: 20px;
}

/* Customize your modal window here, you can add background image too*/
#boxes #dialog {
	width : 234px;
	height:138px;
	padding: 10px;
}
/** End **/

Continue Next Part

[Tutorial] Collapsable and Expandable jQuery Fixed Modal Box (Continue…)

Pocket

Collapsable and Expandable jQuery Fixed Modal Box (Continue…)

Our Jquery Code that actually does the binding for click events and adjusting the CSS dynamically.

jq-fixed.js

$(document).ready(function() {	

	//Initialize our jquery actions
	initialposition();

	//If user decides to make no action
	$("#mask").click(function(e){
		$(this).hide();
		resetmask();
	});

	function initialposition() {
		//position the navigation bar at top initially
		// when user clicks on that slide down and show other options
		var id = $("a[name=modal]").attr('href');
		var winH = $(window).height();
		var winW = $(window).width();

		//alert(id);
		$('.clickme').css('position','absolute');
		$('.clickme').css('top','780');
		$('.clickme').css('left','7180');
		$('.clickme').css('bottom','450');
		$('.clickme').css('right','1');

		$('.clickme').css('margin-left','390');
		$('.clickme').css('padding','0');

		//alert($('.clickme').html());
		$(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080);
		$(id).css('left',winW/2-$(id).width()/2);
		$(id).html("

Show

"); $(id).show(1000); } $("#fullarticle").click(function(e){ showExpand(e); }); //select all the a tag with name equal to modal function showExpand(e) { //$("a #btnsubmit").html("My Image : "); //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $("a[name=modal]").attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); $(id).css('top',winH/2-winH/2-10-$(id).height()/3*0.060); $(id).css('left',winW/2-$(id).width()/2); $(id).slideDown(1000); $(id).html("

Hide

"); $("#hidearticle").click(function(e){ resetpanels(); }); } function resetmask() { $('#mask').css({'width':'0','height':'0'}); //transition effect $('#mask').fadeOut(1000); //$('#mask').fadeTo("slow",0.8); var id = $("a[name=modal]").attr('href'); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080); $(id).css('left',winW/2-$(id).width()/2); $(id).html("

Show

"); $(id).slideDown(); $("#fullarticle").click(function(e){ showExpand(e); }); } function resetpanels() { var id = $("a[name=modal]").attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); $(id).css('top',winH/2-winH/2-80-$(id).height()/5*0.080); $(id).css('left',winW/2-$(id).width()/2); $(id).html("

Show

"); $(id).slideDown(); $("#fullarticle").click(function(e){ showExpand(e); }); } });

Click Next to Continue