Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ![]() Interested in joining? Click here. If you are already a member of ZBCode, feel free to login right here: |
| Some questions. | |
|---|---|
| Tweet Topic Started: May 23 2009, 11:24 PM (128 Views) | |
| Flavius | May 23 2009, 11:24 PM Post #1 |
![]()
|
So, I am designing the school website for my school and will be coding it but I not sure how to code the following: 1. Hover over sidebar image results in a box, like a dropdown, but out to right, popping out and having text like news and stuff which is edited by hand. I need this to work for multiple hover images on the left (one for each image). I someone can help me I would much appreciate it. Also, does anyone know how to reduce the time it takes to load a page? |
| |
![]() |
|
| Reid | May 24 2009, 11:12 AM Post #2 |
![]()
What? The land of the free? Whoever told you that was your enemy.
![]()
|
Well, for the first, skinning is not my specialty, but I would suggest first using the jQuery library on the site. You can find more info and how to download here. Past that, you would bind a hover event to the link you wanted. Something like so... So that's the basis of our code. Now making them pop out is the interesting part. Here is the page on the jQuery website concerning effects. There are several nice ones - my favorites are the 'slide' animations - but the one we're looking for is probably animate(). Animate is a cool, epic function. Now I'm assuming since you're coding your own school's website, you're going to have a basic knowledge of positioning elements. If not, you may want to get that before you start. What I mean is using position:absolute and forcing the elements to lay over the image you want using a combination of up, right, left, down, padding, and margins. As soon as you can do that, you'll be set for the animation part. Basically, we would create a custom animation. Try this: Try that on any ZB page and look at your name in the top_info (have to be logged in else it will do something to the log in link probably.) Now that animation will look horrible for two reasons: 1) it will be changing the display type to 'block' which is never fun, 2) it's a very long animation for a very short effect. But you get the basic syntax. So you could update your code to do something like this: Rather lengthy until you shorten it down. As for shortening the time for loading a page, I would suggest, in jQuery, wrapping any javascript you have with $(function(){ and }) so it loads when the DOM is ready to be edited. If the DOM part makes no sense, don't worry about it. Also, you want to cut down on your amount of images, flash, etc, probably - as well as externally host some files so the cache can take over.
|
| The Resource Board | |
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Code University · Next Topic » |

















7:47 PM Jul 10