Killersites.com Homepage Welcome Guest   |   Register  |  Login
Login Name Password
  Search  
  Index  | Recent Threads  | Unanswered Threads  | Who's Online  | User List  | Help


  Killersites.com Forum
  Category: General Web Design
  Forum: Beginners to web design.
  Thread: sliding header!!

Quick Go »

No member browsing this thread
Thread Status: Active
Total posts in this thread: 11
Posts: 11   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 4637 times and has 10 replies Next Thread
Male sparrow
Advanced Member




Joined: Sep 21, 2005
Post Count: 221
Status: Offline
Reply to this Post  Reply with Quote 
sliding header!!
I have come across an awesome website with sliding header
see this

http://www.techitez.com.au/computer-repairs-support.html

how do you create a sliding header when you click each link?
Do you require Flash to do this?
[Dec 15, 2008 5:08:54 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male falkencreative
Advanced Member
Member's Avatar

USA
Joined: Aug 14, 2007
Post Count: 1129
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
It's done with Javascript. I know jQuery has a couple useful plugins that do similar things... I'll see if I can dig up some links for you.
----------------------------------------
Benjamin Falk | student : designer : developer
Twitter: falkencreative
[Dec 15, 2008 5:38:15 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male sparrow
Advanced Member




Joined: Sep 21, 2005
Post Count: 221
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
oh right, ok do you have the links for me to look at?
Thanks
[Dec 16, 2008 1:00:22 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male falkencreative
Advanced Member
Member's Avatar

USA
Joined: Aug 14, 2007
Post Count: 1129
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
This is an article / screencast that explains the steps involved:

http://jqueryfordesigners.com/coda-slider-effect/

and the demo:

http://jqueryfordesigners.com/demo/coda-slider.html
----------------------------------------
Benjamin Falk | student : designer : developer
Twitter: falkencreative
[Dec 16, 2008 7:26:16 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male sparrow
Advanced Member




Joined: Sep 21, 2005
Post Count: 221
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
will this work on old browsers espcially IE6 or older versions? What is the disadvantage of using the sliding header if any?
[Dec 17, 2008 2:21:59 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male falkencreative
Advanced Member
Member's Avatar

USA
Joined: Aug 14, 2007
Post Count: 1129
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
It should work on IE6. I'm not sure about browsers older than that... I personally don't support anything older than 6.

Disadvantages? No major ones I can think of... It does require Javascript, obviously. If you disable javascript though, the content is still accessible through a scrolling div (use the Web Development Toolbar for Firefox if you want to see this). I'm not sure if there are any accessibility issues, though if it works without javascript, I would hope that it would be OK.
----------------------------------------
Benjamin Falk | student : designer : developer
Twitter: falkencreative
[Dec 17, 2008 2:28:06 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male sparrow
Advanced Member




Joined: Sep 21, 2005
Post Count: 221
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
I notice the sliding header is all image (PNG image) no text on header as Google will not see text at all, is that a disadvantage to Google search ?
[Dec 17, 2008 3:31:22 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male falkencreative
Advanced Member
Member's Avatar

USA
Joined: Aug 14, 2007
Post Count: 1129
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
I notice the sliding header is all image (PNG image) no text on header as Google will not see text at all, is that a disadvantage to Google search ?


I'm not sure where you are getting that from... the background may be a PNG, but the actual content isn't.

(looking at this example: http://jqueryfordesigners.com/demo/coda-slider.html)
----------------------------------------
Benjamin Falk | student : designer : developer
Twitter: falkencreative
[Dec 17, 2008 3:33:12 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Male sparrow
Advanced Member




Joined: Sep 21, 2005
Post Count: 221
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
see this link

http://www.techitez.com.au/computer-repairs-support.html

this is what I mean, no text on image?
[Dec 17, 2008 4:34:58 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Male falkencreative
Advanced Member
Member's Avatar

USA
Joined: Aug 14, 2007
Post Count: 1129
Status: Offline
Reply to this Post  Reply with Quote 
Re: sliding header!!
You mean the text in the tabs? In that case, Techitiz used an image... you could use plain text or a combination of background image/text if you so choose. The jqueryfordesigners demo used text in the tabs.
----------------------------------------
Benjamin Falk | student : designer : developer
Twitter: falkencreative
[Dec 17, 2008 4:56:15 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 11   Pages: 2   [ 1 2 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

RSS feeds Current timezone is GMT
Mar 22, 2010 1:36:16 AM

Powered by mvnForum 1.2.1 GA (Build: 20 November 2008)
Copyright © 2002-2008 by MyVietnam.net