Recent Notes
Displaying keyword search results 81 - 90
Created by Dr. Xi on August 31, 2008 20:43:44
Last update: January 22, 2011 12:48:08
It's probably more useful to make the JavaScript executor a bookmarklet. That way it gains access to the page on which it is invoked. Therefore, more helpful while debugging. Here's the code:
<html>
<body>
<a href="javascript:(funct...
Or, you can add this link to your bookmarks, name it "JS Executor". For a full featured JavaScript console, you may need Jash
Created by James on September 06, 2010 03:09:35
Last update: January 11, 2011 21:24:36
With the following code, the body occupies the whole height (100%) of the browser window:
<html>
<head>
<title>100% body height</title...
However, when you add <!doctype html> to the top of the file, the browser renders the page in Full Standards Mode instead of Quirks Mode :
<!doctype html>
<html>
<head>
<title>100%...
In Full Standards Mode , the body no longer occupies the whole browser height. Why? Because body 's parent is html and the browser does not know the height of html ! Adding a height to html fixes the problem:
html {
height: 100%;
}
Created by James on March 28, 2010 22:09:34
Last update: January 11, 2011 21:23:03
This CSS behavior looks weird to me and I don't know if it's by the spec. It doesn't make sense to me at all.
Using this markup:
<!doctype html>
<html>
<body style="width:25...
the page is rendered like this:
i.e., the text of the non-floating div wraps around the floating div.
However, by simply adding an overflow property to the non-floating div (doesn't matter what the value is, anything except inherit ), the text no longer wraps!
HTML:
<!doctype html>
<html>
<body style="width:25...
Page:
Created by James on July 04, 2009 16:30:40
Last update: January 11, 2011 21:21:59
If you are looking for a solution for a progress bar, I direct you to the following resources: Bare Naked App provides a simple and elegant solution based on pure CSS with two images. You control the percentage of completion through the background-position attribute of the CSS. HTML:
<img src="/images/percentImage.png" alt="... CSS: img.percentImage { background: white url(/imag... Images: (percentImage.png) (percentImage_back.png) WebAppers extended the above solution with JavaScript. They also added several colored images: JQuery UI has a built-in progress bar widget. However, if you want to get to understand some of the foobar needed to get CSS to work (in general) through this example, stay with me for the rest of this note. Initially I was thinking, a progress bar should be easy: just make...
Created by James on October 11, 2010 19:01:28
Last update: January 11, 2011 20:38:56
Test page (click the "new window" icon to see the transition):
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Created by James on October 11, 2010 18:14:41
Last update: January 11, 2011 20:36:01
Test page:
<!DOCTYPE html>
<html>
<head>
<title>jQu...
Documentation:
UI/Effects - jQuery JavaScript Library
Effects - jQueryAPI
Created by James on September 28, 2010 18:57:58
Last update: January 11, 2011 20:35:02
Test page to demo that preventDefault works perfectly for a text input but fails for select , even though the event is cancelable:
<!DOCTYPE html>
<html>
<head>
<title>Pre...
Created by James on September 07, 2010 03:11:39
Last update: January 11, 2011 20:28:33
I didn't know how hard it was to vertically align something to the middle until I had to do it. An excellent writeup about the various techniques (or should I say hacks?) to achieve this is here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ Here I present a technique with the help of jQuery. To make it simple, what I'm doing is to display a single line of text in the middle of the page instead of at the top. The markup is made simple because the logic is moved to JavaScript. There are two requirements to make this work: The parent container uses relative positioning jQuery code added to re-position the content with absolute positioning
<!doctype html> <html> <head> <title>Vert... For some reason, the following code did not work although...
Created by James on June 22, 2010 18:46:31
Last update: January 11, 2011 20:24:42
This is the page:
<!DOCTYPE html>
<html>
<head>
<title>jQu...
It renders like this in IE 7:
However, when you try to scroll to the bottom of the dialog, IE takes long time to respond, the it messes up the title bar:
Everything works fine if you take away the relative position in CSS:
<style type="text/css">
#dialog .input {
...
Created by James on September 03, 2010 15:52:12
Last update: January 11, 2011 20:22:40
Use the siblings function to find all siblings of the current jQuery object:
$(this).siblings()
which is equivalent to:
$(this).parent().children().not(this)
Or, use an optional selector to further limit the selection of siblings:
$(this).siblings('li .hilighted')
Test page:
<!DOCTYPE html>
<html>
<head>
<title>jQu...
