Tag Archives: CSS

Marquee tag in HTML and its attributes

The HTML marquee tag provides a way for browsers to creates a scrolling effect (can be tailored to include any HTML content) vertically or horizontally without having to resort to JavaScript techniques.

 

 

The marquee is non-standard HTML tag but you can enjoy (or possibly suffers from) good browser support.

 

You can change the marquee attributes on MARQUEE tag by following ways.

 

Attributes:

 

BGCOLOR=”#CCCCCC” – Set background color.

LOOP – Determines how many times the text will scroll. -1 is indefinite and will continuously scroll. You can set this to whatever you’d like.

SCROLLAMOUNT – Determines the speed your text will scroll.

WIDTH – Determines the width of your marquee.

HEIGHT – Determines the height of your marquee.

Direction – Determines the direction in which the text should scroll – up or down.

BEHAVIOR=”slide” – Defines the type of scrolling.

SCROLLDELAY=”500″ – Defines how long to delay between each jump.

HSPACE – Specifies horizontal space around the marquee.

VSPACE – Specifies vertical space around the marquee.

 

<marquee
bgcolor="color name or hex value"
loop="value (number of loops)"
align="{ top | middle | bottom }"
direction="{ left | right }"
behavior="{ scroll | slide | alternate }"
height="integer (pixels or %)"
width="number (pixels or %)"
hspace="integer (pixels or %)"
vspace="number (pixels or %)"
scrollamount="number"
scrolldelay="number">
</marquee>

 

Event Attributes:

onclick
Script runs when a mouse click

ondblclick
Script runs when a mouse double-click

onmousedown
Script runs when mouse button is pressed

onmouseup
Script runs when mouse button is released

onmouseover
Script runs when mouse pointer moves over an element

onmousemove
Script runs when mouse pointer moves

onmouseout
Script runs when mouse pointer moves out of an element

onkeypress
Script runs when key is pressed and released

onkeydown
Script runs when key is pressed

onkeyup
Script runs when key is released

 

jQuery datepicker to show month and year only

jquery datepicker to show month year only

 

jQuery has very nice Date Picker library, but it can’t be customized to remove the date part, i.e. to show month and year only.
In some cases, you only need that the user selects the month and year mm/yyyy (month/year) as input without the day (like in credit card expiry date).Below is the code to show only the header of date picker with month and year selects(date will not show any more).

 

If you use this one, you have partially done but it create some confusion to user as it shows date as well and user have to select a date whereas it use only month and date.

 

$("#datepicker").datepicker({dateFormat: "mm/yy" });

For removing this confusion and hiding the date section completely, you can use the below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<script type="text/javascript">
$(function() {
$('#expiryDate').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
minDate:'m', // restrict to show month greater than current month
onClose: function(dateText, inst) {
// set the date accordingly
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>

<style type="text/css">.ui-datepicker-calendar { display: none; }</style>

<label for="expiryDate">Expiry Date:</label>
<input name="cc_expiryDate" id="expiryDate" class="date-picker" /> (mm/yyyy)

It will show calendar likes this.

jQuery datepicker show month and year only

jQuery datepicker show month and year only