Pages

Thursday, April 28, 2011

Create tool-tips using CSS


It's real fun for me to do this without using JavaScript. Of course this would mean that extra markup is in the code. If you want clean markup you can use JavaScript to generate markup on the fly, but CSS will stay the almost the same. So here is the HTML

<html>
<head>
<tilte>Tool Tips</title>
<link type="text/css" href="tooltips.css" rel="stylesheet" />
</head>
<body>
<h1>Example</h1>
<div><a href='#' class='tooltip'>tooltip<span ">this is the awsome
tool tip! this gives me great pleasure</br></span></a>
</div>
</body>
</html>

nothing fancy about this. Content inside the <span> is used as the tool-tip. I told u , extra markup!!.

The trick in the CSS which enabled me to throw javascript away was the :hover psudo class. Postioning property is set to absolute and margin-left to a large minus value this will remove the content of the span out of the window. When mouse is hovering over the <a> element we change the property to bring them back to the screen. Daily hacks with -webkit and -moz is used to provide cross browser support.
Here is the CSS


a{
display: box;
font-size: 20;
padding: 2px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image:-moz-linear-gradient(top,green,yellow);
background: -webkit-gradient(linear,left center,right center,
from(green),to(yellow));
outline: none;
cursor: select;
text-decoration: none;
position: relative;
}

a span {
font-size: 12px;
margin-left: -999em;
position: absolute;
}

a:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow:5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family:sans-serif;
color:white;
position: absolute;
left: 3em;
top: 3em;
margin-left: 0;
width: 200px;
background: #B22222;
border: 1px solid #FF8C00;
}


border-radius and box-shadow are just to make it little fancy. First CSS block is to give the <a> element a button like appearance. Left and top properties are set to slightly adjust the positioning of the <span> relative to its containing <a> element. In simple terms to move it little left and down.
Here are some other related post
http://jayaprabath.blogspot.com/2011/04/how-to-style-html-elements-to-give-them.html
http://jayaprabath.blogspot.com/2011/04/how-to-create-drop-down-menu-only-using.html
http://jayaprabath.blogspot.com/2011/04/css-background-property-reference.html
http://jayaprabath.blogspot.com/2011/04/how-to-provide-cross-browser-support.html
at

Monday, April 18, 2011

How to Style HTML Elements to Give Them a Button Like Appearance


 This can easily be done using basic css properties. Here I'm going to style a div element. Here is the code.

<html>
<head>
<style type="text/css" rel="stylesheet">
.button-div{
/*set geometric properties of the div*/
width: 100px;
height: 20px;
padding: 3px;
border: 2px solid #ccc;
-webkit-border-radius: 12px;

/*style the text*/
text-align:center;
font-family:Helvetica, sans-serif;
font-weight:bold;
color: white;

/*style the div*/
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(105, 105, 105, 0.8)), to(rgba(128, 0, 0, .9)));
border-color:brown;
}
</style>
</head>
<body>
<div class="button-div">
Button
</div>
</body>
<html>

This work really nicely on Chrome. You might must make any necessary modifications in order to get the same appearance in other browsers such as firefox. I'm not sure weather firefox support gradient but you can certainly get the rounded corners using -moz-border-radius . Hope this will help some one out there.


at

Monday, April 11, 2011

How to provide cross browser support for the border-radius CSS property


The border-radius property is not well supported by mayn browsers. However we can use proprietary properties provided by Firefox an Webkit. But there naming is inconsistent. Following shows border-radius equivalence for CSS, Firefox and Webkit.
IF you are looking for IE hacks look hrere
http://jayaprabath.blogspot.com/2011/11/rounded-corners-for-ie-using-htc-files.html


CSS3 Firefox Webkit
border-radius -moz-border-radius -webkit-border-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-
top-left-radius
border-top-right-radius -moz-border-
radius-topright 		-webkit-border-
top-right-radius
border- bottom-right-radius -moz-border-
radius-bottomright 		-webkit-border-
bottom-right-radius
border- bottom-left-radius -moz-border-
radius-bottomleft 		-webkit-border-
bottom-left-radius
at

Sunday, April 10, 2011

Jquery Selections Quick Reference


Selecting an DOM element
$('element')
Ex: $('div') – selects <div> elements

Selecting descending elements of an element
$('parent_element_selector').find('child_element_selector')
Ex: $('div').find('p') – selects <p> elements inside <div> elements
$('child_element',$('parent_element'))
Ex: $('p',$('div')) - selects <p> elements inside <div> elements

Selecting an element which has a particular element as its descendent's
$('element:has(descendant_element)')
Ex: $('div:has(h1)') – selects all <div> elements which contains <h1> elements

Selecting the first child of an element
$('element child_element:first')
Ex: $('ul li:first') – selects the first <li> element in each <ul> element

Selecting the last child of an element
$('element_selector child_element:last')
Ex: $('ul li:last') – selects the last <li> element in each <ul> element

Selecting children or immediate descending elements of an element
$('parent_element'_selector).children()
Ex: $('div').children() - selects all direct children of <div> elements

$('parent_element_selector').children('child_element_selector')
Ex: $('div').children('p') – selects set of <p> elements which are direct children of <div> elements

Selecting the parent of an element
$('element_selector').parent()
Ex: $('div').parent() - selects the parent element of each div element

Selecting adjacent siblings of an element
$('element_selector + sibling_element_selector')
Ex: $('h1 + h2') – selects <h2> elements which are adjacent to <h1> elements

Selecting all the siblings of an element
$('element_selector').siblings('sibling_element_selector')
Ex: $('h1').siblings('h2') – selects all the <h2> elements which are siblings of <h1> elements

Selecting all the siblings beyond an element
$('element_selector').nextAll('sibling_element_selector')
Ex: $('div').nextAll('h1') – selects all sibling <h1> elements after each <div> element

Selecting the first sibling beyond an element
$('element_selector').next('sibling_element_selector')
Ex: $('div').next('h1') – selects first <h1> sibling after each <div> element

Selecting the first element which is located before a particular element
$('element_selector').prev('sibling_element_selector')
Ex: $('div').prev('h1') – selects first <h1> element before each <div> element

Selecting all siblings which are located before a particular element
$('element_selector').prevAll('sibling_element_selector')
Ex: $('div').prevAll('h1') – selects all <h1> elements before each <div> element

Selecting elements based on their attributes
$('element_selector[attr_name=”attr_value”]')
Ex: $('a[href=”http://www.example.com”]') - selects all <a> elements with “href=http://www.example.com”

$('div[class*=”test”]') - selects all <div> elements that contains “test” as part of their class attribute value
$('div[class|=”test”]') – selects all <div> elements in which their class attribute is either equal or starts with “test”
$('[class!=”test”]') - selects all elements whose class is not equal to “test”

Selecting Form elements of a particular type
$(':type_name')
Ex: $(':text') – selects all text input element
Ex: $(':radio') – selects all radio button input elements

Selecting elements using CSS selectors
$('#id')
Ex: $('#myid') – selects the element with the id='myid'

$('.classname')
Ex: $('.myclass') -selects the set of elemtns with attribute class='myclass'

Ex:$('div p a') – selects the set of <a> elements which are inside <p> elements and those <p> elements are contained inside <div> elements

Similarly all the other CSS selectors can be used for selection.

Note- Either CSS selectors or DOM element names can be used as selectors. Further Jquery provides filtering capability to filter the selections.
at

Moodle Course Updates: How to make moodle to reflect course updates in course modules


 All the modules added to courses are stored in the “mdl_course_modules” table in the moodle database. You can retrieve all the modules add to a particular course by obtaining all the records that contain the course id of that course. The course ids are stored in “course” column. Then you can obtain module id of those records which is indicated in the “module” column. Id of the instance of the module can be obtained for those records which are indicated in the “instance” column.
Next step would be to obtain the module name using the id of the module. This can be done by querying “mdl_modules” table. All standard course modules has a table in moodle with this name(mdl_modulename). The particular instances of the module in the modified course can be found in this table. Those can be obtained using instance id obtained earlier. Id field of this table refers to the instance id of the “mdl_course_modules” table. These are the records that you need to modify in order to reflect changes in the course.
The issue in finding the right fields to modify arise here. This is because fields in different modules differ drastically. For example modules that have start date and end date will store those in columns with different names. It is unfortunate that these common attributes doesn't have a standard name. So you have to handle each module differently. What you can do is switch the updating process based on the module name.
The description above describes how your function or the event_handler can perform necessary modification to the database. Below you will see how to call your function or the event hadler.
Moodle provides a standard event handling mechanism, in which you can register a listner and moodle will invoke your listener. Here you would want to listen to the course update event. But unfortunately moodle will pass only the modified record of the course to your event handler. This information is not going to be enough for us to modify field such as start date and end date of modules. This is because we would need to know the amount by which the course date has been shifted. Of course you can add the information to the event data in event_trigger method, but this would affect other event handlers wich are listning to the same event and expecting standard information. Therefore you have to call your function using some other method.
Course editing happens in course/edit.php file. So you need to call the function in this file just after the modification happens. But in order to get the old information you need to obtain a copy of the old record of the course prior to modification.
I could not find any other way to hadle this without modification to the original moodle code. I did this with moodle 2.0. Hope this might help some one.
at

Tuesday, April 5, 2011

How to Create a Drop Down Menu only using CSS – Without JavaScript


How to Create a Drop Down Menu only using CSS – Without JavaScript
Here is the Html Code. If you have ever created a horizontal menu this code should be quite familiar. Only think which may not be know to you is right at the bottom of the post.

<html>
<head>
<link type="text/css" href="test.css" rel="stylesheet" />
</head>
<body>
<div id="navsite">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">Projects</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Here is the CSS code.

a{
text-shadow:0 -1px 0px rgba(0,0,0,.4);
font-weight:bold;
}
#navsite{
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:1.1em;
font-weight:bold;
border-right:1px solid #666;
padding: 0;
margin-bottom:1em;
color:#333;
width:auto;
}
#navsite ul{
list-style: none;
margin:0;
padding:0;
}
#navsite> ul>li{
margin:0;
border-top:1px solid #003;
float:left;
}
#navsite ul li a:link, #navsite ul li a:visited{
display:block;
padding:4px 4px 4px 0.5em;
border-left:10px solid #369;
border-right:1px solid #69c;
border-bottom:1px solid #369;
color:#E5DEAC;
text-decoration:none;
background-color:#495961;
background-position:50%;
}
html>body #navsite ul li a{
width:auto;
}
#navsite ul li a:hover{
border-left:10px solid #036;
border-right:1px solid #69c;
border-bottom:1px solid #369;
background-color:#69f;
color:#fff;
}
#navsite ul ul li a:link, #navsite ul ul li a:visited{
border-left: 10px solid #69c;
border-right: 1px solid #9cF;
border-bottom:1px solid #69c;
background-color:#888;
}
#navsite ul li a:hover, #navsite ul ul li a:hover{
border-left:10px solid #036;
border-right:1px solid #69c;
border-bottom:1px solid #369;
background-color: #69f;
color:#fff;
}
#navsite ul ul{
background0color:white;
margin-left:10px;
}
/*This is the trick that make it a dropdown menu*/
/*initially positioned outside the screen*/
ul li ul{
position:absolute;
left:-999em;
}
/*bring it to the screen*/
#navsite ul li:hover ul{
left:auto;
}

at

CSS background property reference


CSS background property reference
you can use one of the properties seperated by “,” and all the properties in each line.
BACKGROUND
background
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
background-break
Bounding-box ,continuous, each-box
background-color
color
transparent
background-clip
length
%
border-box, padding-box,
content-box , no-clip
background-attachment
scroll ,fixed
background-image
url
none
background-origin
Border-box, padding-box, content-box
background-repeat
repeat , repeat-x , repeat- y, no-repeat
background-size
length
%
auto , cover, contain
background-position
top left , top center , top
right , center left , center center , center right ,
bottom left , bottom center , bottom right
x-% y-%
x-pos y-pos

at
Subscribe to: Posts (Atom)