This value already takes into account any scroll bar, so no further code is required. It returns the height of the browser window, bearing in mind any scroll bars. In Figure the height of the usable area of this browser has been determined by this plug-in to be pixels. About the Plug-in This plug-in takes no arguments and returns the available height of the current window, taking any scroll bars into account. Please refer to GetWindowWidth for further details. About the Plug-in This plug-in locates one or more objects at one of the four edges of the browser window.
This is managed by the initial if section, which determines whether id is an array using the instanceof operator. If it is, then each element of the array is recursively passed to the same function, along with the values of where and percent. Once all have been processed, the function then returns.
After this the three local variables width, height, and amount are assigned values representing the amount of width and height remaining in the browser window after the width and height of the object are taken into account. For example, if percent has a value of 40, then dividing it by assigns it the value of 0. In this case, the multiplier determines how far along an edge the object should appear. A break command ends each subsection of the switch statement except for the final one, where it is not required because program flow will continue on the next line down anyway.
Depending on which of the four values has been passed in where, the local variables x and y are set to align the object in id right up against the edge specified. The object is also displayed at a position between 0 and percent along or down , according to the value in percent. Finally, a call to GoTo is made to move the object to the new location. There are many uses for this plug-in; one in particular is a dock bar, similar to the one used at the bottom of the screen on the Apple OS X operating system, with a row or column of expanding and collapsing icons.
Plug-in 66, DockBar provides exactly this functionality, for any web page. This means they will stay where they are put, even if the browser page scrolls. Finally, each image is attached to a different edge using four different calls to GoToEdge. The top one is 50 percent in, the bottom 10 percent in, the left 33 percent down, and the right 66 percent down.
By using the browser width and object width it moves an object horizontally to exactly the center of the browser. Figure shows a div that has been centered horizontally using this plug-in. About the Plug-in This plug-in centers an object or objects on a horizontal axis. It does this by using the instanceof operator to tell whether id is an array and, if it is, it iterates through the array using the local variable j as an index, recursively calling itself with the single element values.
Plug-In PHP: 100 Power Solutions
Upon completion, the if section of code returns. This value is then divided by 2. For example, if the window is pixels wide and the object is and there is no scroll bar , the value is determined by subtracting from , which equals ; and this number is divided by 2 to get a final result of Therefore, an offset of pixels from the left will exactly center an object of pixels width in a pixel wide browser.
The Math. If the browser has not scrolled, this is all the calculation that is needed. However, because the horizontal offset is from the left edge of the document not the window , if there has been a horizontal scroll the object will be displayed left of center by the amount of the scrolling. It also locates the div at the position 20, The Resize call then turns the div into a by pixel square. Then, in this example, rather than using colors to make the div easy to see, the div has been given a solid border with a call to S.
Finally, a call is made to CenterX and the div is centered horizontally. Figure shows a div that has been centered using this plug-in. About the Plug-in This plug-in centers an object or objects on a vertical axis. See the section on CenterX for more details.
- Ghosts of Poughkeepsie: The Haunted Locations of Poughkeepsie, New York;
- Confessions of an Internet Marketer: Lessons I Learned Over 5 Years at Two Top Internet Marketing Agencies.
- Loch Lomond;
It also moves the object to location 20, The div is then resized using Resize to a width and height of After that it is given a single-pixel border to make it stand out and then, on the final line, the CenterY plug-in is called to center it vertically. About the Plug-in This plug-in centers an object or objects on both its vertical and horizontal axes.
For example, a smooth fade from one image to another is often far more beautiful than other wipe or dissolve transformations. Likewise, instantly revealing or hiding an object, when done well, is clean and easy on the eye. This chapter focuses on these types of effects, ranging from setting the visibility or invisibility of an object to fading objects in and out, fading between objects, and so on.
The plug-ins in this chapter also provide the basic functionality required by many later plug-ins—most particularly the menu and navigation plug-ins in Chapter 8. The first one is Invisible , which makes an object disappear from a web page while the space it occupies remains, as opposed to hiding an object, which collapses and causes elements around it to assume its space see Plug-in 40, Hide for that effect.
An alert window has been raised to let you see these elements before the call to Invisible is made. Figure shows what happens after clicking the alert: the shaded text in the span is invisible, but the other text snippet remains in place, demonstrating that the span is still there, just not visible.
- La tabla de Flandes (Spanish Edition)?
- Redeeming a Nation (Timeless Teaching Book 12).
- Applied Multivariate Statistics in Geohydrology and Related Sciences?
- Les déboires de Habib Fall (French Edition).
How To Use It To use this plug-in, pass it the object or objects to make invisible. Next, an alert is raised to give you the chance to see the initial display before the call to the Invisible plug-in is made. After clicking the alert OK button, the call is made, and the contents of the span becomes invisible.
It makes a previously invisible object visible. Figure expands the example in the previous plug-in. About the Plug-in This plug-in makes an object visible after it has been made invisible. Then the style. If it is visible it becomes invisible, or if it is invisible it becomes visible. In Figure , each time the button is clicked, the text to the right toggles between being visible and invisible. It does this using the instanceof operator to test whether id is an array.
- More titles to consider?
- Building Memorials.
- Un coeur simple (French Edition);
- A Subheading?
- Shopping Cart;
- Blog & Events!
Figure shows three buttons displayed using the default opacity of percent.
Plug-In CSS 100 Power Solutions
In Figure each button has been clicked to change its value to 25 percent, 50 percent, or 75 percent, respectively. About the Plug-in This plug-in applies the opacity setting supplied to the object or objects it is passed. Fortunately, none of the methods clash with each other, so a lot of if…then…else code is not necessary.
Of course, if id is an array, all its elements will have that property updated. However, Mozilla-based browsers such as Firefox have their own property for this function, so the following line of code performs the equivalent for them by changing the style. MozOpacity property. Likewise, the third line is for Safari browsers that use the old rendering engine before Webkit was introduced and therefore require the style.
Notice that none of these HTML elements have been assigned IDs because the keyword this has been passed to the Opacity plug-in, thus taking advantage of the fact that this plug-in like most of them will accept either an object ID or an object. The this keyword directly passes the calling object to the function, which is why no ID name is required. In Figure , two images have had their IDs attached to mouse events so that they will fade in and out. About the Plug-in This plug-in fades an object from one opacity value to another either increasing or decreasing it over a set number of milliseconds.
Its value is simply a string variable containing the name of the function to call. Because it is not generally a user passable value, I will no longer mention CB in the list of arguments, unless it is being used in a different manner. This function works by using interrupts to call a function at regular intervals to change the opacity of an object by a small amount each time which is how all the transition and animation plug-ins in this book work.