Apr 14, 2011
UI Elements: Searchbox with filters
In upcoming practices for UI, designers consider adding filters within search-boxes i.e. when you click in the search box a filter menu pops up showing a choice of search you want to do.
This search box reveals a drop down menu after the user clicks into the input field. The menu is meant to act as a filter with several checkbox options that allow the user to select specific categories for his search. When the user hovers out of the input or the filter box, the drop down will disappear.
Anything Slider with different content in panels
Features
- Panels are HTML Content (can be anything).
- Multiple AnythingSliders allowable per-page.
- Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide).
- Optionally resize each panel (specified per panel in css).
- Optional Next / Previous Panel Arrows.
- Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
- Link to specific slides or go forward or back one slide from static text links - go to Slide 4 (Quote #2) in second example.
- Each panel has a hashtag (can link directly to specific panels).
- Optional custom function for formatting navigation text.
- Auto-playing slideshow (optional feature, can start playing or stopped)
- Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).
- Pauses slideshow on hover (optional).
- Optionally play the slideshow once through, stopping on the last page.
Usage
Getting current slide number:
var current = $('#slider1').data('AnythingSlider').currentPage; // returns page #
Setting current slide (external link example):
<a href="#" id="slide-jump">Slide 4</a>
$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
});
External Slideshow Control:
$('#slider1').data('AnythingSlider').startStop(true); // start the slideshow
$('#slider2').data('AnythingSlider').startStop(false); // stops the slideshow
$('#slider1').data('AnythingSlider').goForward(); // go forward one slide
$('#slider1').data('AnythingSlider').goBack(); // go back one slide
Formatting Navigation Text:
index = integer index (1 based);
panel = jQuery wrapped LI item this tab references.
Function must return a string of HTML/Text.
Here is a sample formatter (view this page source for another example):
$('#slider').anythingSlider({
navigationFormatter : function(index, panel){
return " Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
}
})
Apr 8, 2011
Use cross browser compatible custom fonts on your site using javascript
Now you can just use simple JavaScript to use custom font on your site. Just upload your font-file to this link, download the embed font file also download the typeface.js and then use following HTML format to apply the font to the page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
Here are a few things to keep in mind:
<html>
<head>
<!-- load any external stylesheets first -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- then load the typeface.js library and typeface.js fonts -->
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- go ahead and specify typeface.js fonts with CSS -->
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
Here are a few things to keep in mind:
| • | By default typeface.js will render text for heading elements (h1, h2, etc.) when those elements' styles reference typeface.js fonts. Remember that heading styles are bold by default, so you'll either need to add font-weight: normal to you heading styles, or load the bold version of the font if that's what you're after. |
| • | Any other HTML element referencing a typeface.js font needs to have typeface-js in its list of class names. If you have an element that already has a class name, for example, |
| • | You'll have to load external stylesheets before loading typeface.js. Otherwise, Firefox 3 might not have applied the styles when typeface.js tries to draw the text. |
| • | Unfortunately, specifying the font-stretch property will only work with inline CSS and not from any stylesheet. |
| • | In some circumstances in IE7 you may see a couple of milliseconds' delay before the browser shows typeface.js text after the page is rendered, producing a "flicker" effect. One way to get around this is to manually put a call to _typeface_js.initialize() just before your closing</body> tag. |
| • | If you're willing to forego selectable text, you can get a performance boost by disabling this functionality. After loading typeface.js, you can set a configuration option to disable selectable text like this:<script>_typeface_js.configure({ disableSelection: true })</script> |
Subscribe to:
Posts (Atom)