Posts filed under ‘jquery’

Tab: using JQuery and CSS

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Learning Tab Creation</title>
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.1.js”></script&gt;
<script type=”text/javascript”>
$(function(){
var tabcontainers = $(“div#tabber > div”);
tabcontainers.hide().filter(“:first”).show();

$(“ul#tabs a”).click(function(){
tabcontainers.hide();
tabcontainers.filter(this.hash).show();
return false;
}).filter(“:first”).click();
});
</script>
<style type=”text/css”>
.clear {
clear: both;
}
#tabs {
margin: 0;
padding: 0;
font: normal 12px Arial, Helvetica, sans-serif;
list-style-type: none;
clear: both;
width: 100%;
}
#tabs li {
float: left;
margin: 0 5px 0 0;
}
#tabs li a {
text-decoration: none;
color: #CCCCCC;
border: 1px solid #666666;
display: block;
background: #666666;
padding: 2px 5px;
}
#tabs li a:hover {
border: 1px solid #000000;
}
#first, #second, #third {
border: 5px solid #ffffff;
}
.active {
background: #000000;
}
</style>
</head>
<body>
<div id=”tabber”>
<ul id=”tabs”>
<li><a href=”#first”>First Page</a></li>
<li><a href=”#second”>Second Page</a></li>
<li><a href=”#third”>Third Page</a></li>
</ul>
<div id=”first” class=”clear”>
<p> First >>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
<div id=”second” class=”clear”>
<p> Second >>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
<div id=”third” class=”clear”>
<p> Third>>>>>>>>>>>>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus metus lacus, vehicula in, viverra eget, varius vel, sapien. Sed et felis et urna vulputate pretium. Mauris mattis. Duis convallis justo vestibulum est. Nunc dapibus, nisl feugiat tincidunt suscipit, tellus neque porttitor libero, eu feugiat turpis dolor in magna. Quisque interdum lectus quis risus placerat aliquet. Nullam felis. Quisque lacus nulla, malesuada dignissim, ullamcorper sit amet, pellentesque et, nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent ac sem. Integer libero nunc, dignissim quis, dictum quis, tempor in, felis. Phasellus faucibus odio. Proin ultrices facilisis mi. Curabitur erat. Curabitur placerat commodo lorem. Proin hendrerit, est quis luctus condimentum, nisi neque blandit velit, in pharetra sem sapien aliquam lacus. Sed cursus lectus sed nisl. Curabitur consequat nisl sed nibh.</p>
</div>
</div>
</body>
</html>

Advertisements

February 17, 2009 at 2:49 pm Leave a comment

Combobox using Jquery

jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).

A combobox is technically a ‘Select’ HTML element. A combobox is also be known as a drop down list.

This control was written due to the fact that the standard Select element cannot be styled, or is limited in what can be styled.
For instance, in Internet Explorer 6,  the individual items in the list (HTML Options) are very restricted in styling, allowing only the background-color and color and a few other CSS properties.

The other reason for creating this control is the need for a simple way of setting up a control. Other custom comboboxes are not so easily setup, requiring technical knowledge before-hand.

The custom combobox relies on the jquery library, without which, this control would not have been created. The jquery library allows a developer to focus on the problems of your specific requirements rather than focus on technical issues surround cross-browser standards and the like.

note: at the moment the jquery.combobox behaves as a dropdown list and not a full combbox. it does not currently accept text input.

features

  • easy to set up
  • control over style of combobox using CSS
  • supports keyboard navigation
  • cross-browser support with firefox 2, internet explorer 6 and opera 9*
  • different style of animation for dropdown
  • original Select html control is still available for access and control and reflects the user’s selection
  • works the same with forms and server-side form processing, retaining the original control’s ID and updated values

* – partial testing in this beta stage of development

Read more at: http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx

December 4, 2008 at 5:55 pm Leave a comment


Tweets… :)

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

Categories

Feeds

Blog Stats

  • 20,644 hits