Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Support
  • Code University
  • Some questions.
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:

Username:   Password:
Locked Topic
Some questions.
Tweet Topic Started: May 23 2009, 11:24 PM (128 Views)
Flavius May 23 2009, 11:24 PM Post #1
Member Avatar


Posts:
283
Group:
Member
Member
#360
Joined:
Jul 29, 2008
Coding language
HTML/CSS
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?
Posted Image
Offline Profile Goto Top
 
Reid May 24 2009, 11:12 AM Post #2
Member Avatar
What? The land of the free? Whoever told you that was your enemy.

Posts:
1,790
Group:
Distinguished Coder
Member
#148
Joined:
Jul 20, 2008
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...
Code:
 
$('select your ID here').hover(function(){
// make the links pop out
}, function(){
// make the links go away; make sure this is a timeout so they don't disappear instantly
})
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:
Code:
 
$('#top_info a:eq(0)').animate({'opacity':'0.5','height':'10px'},2000,function(){alert('it finished the animation! gasp')})
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:
Code:
 
$("#theLinkYouWant").hover(function(){
// what to do when we mouseover that part
$("a.leftSide").animate({ // class of leftSide for everything on the left side I guess
'opacity':'1', // stop our element from hiding
'right':'10px', //move everything 10px in the right direction
'font-size':'120%' // only for educational purposes, but make the text bigger
}, 1000) // end the animation
}, //end the first part of the hover
function(){ //begin what to do when they mouseout
// ... do some stuff ...
})
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. :P
The Resource Board
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Fully Featured & Customizable Free Forums
Learn More · Sign-up Now
« Previous Topic · Code University · Next Topic »
Locked Topic

Track Topic · E-mail Topic Time: 7:47 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy