How am I able to do thissss? |
 Apr 25 2010, 09:56 AM
Post
#1
|
|
 Senior Member  Group: Member Posts: 164 Joined: May 2008 Member No: 647,219  |
Okay, So I realized I have a lot of content on my website.
So I asked a suggestion, and They told me to have it hidden, and pretty much people click on it to Bring the rest up, instead of going to a new page to get it all, it can just appear, and disappear by View more, or Hide the rest, etc. http://ego-box.com/ - Their Content bar, the View more, How do you do that? |
|
|
|
 |
Replies
|
Apr 26 2010, 03:50 PM
Post
#2
|
|
 Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
I'd probably use jQuery for this. It makes the Javascript a lot more easier, and effects can be done smoother.
First of all, go to the jQuery website and download it. When you download it, use your FTP (File Transfer Protocol, or just any way to transfer files) to upload the .JS file to your website. Next, in the <head></head> tags of your HTML document, place this bit of code: CODE <script type="text/javascript" language="Javascript" src="/js/jquery.js"></script> The part where it says /js/jquery.js is where you'll put the URL or path to the jQuery .JS file you uploaded to your website.Now, you're going to need to do a bit of code. Thankfully, though, it's easier and cleaner to do since we're using jQuery. What you want is the toggle() function of jQuery to get the showing and hiding effect. And while we're at it, we're going to give it a little smooth animation. Here's a basic idea of what you want: CODE <script type="text/javascript" language="Javascript"> $(document).ready(function() { // hides the content as soon as the DOM is ready // (a little sooner than page load) $('#content').hide(); // toggles the content on clicking the noted link $('a#toggle').click(function() { $('#content').toggle(400); return false; }); }); </script> I added a few comments just to help explain the code a bit. A few things you need for this to work though are the ID's involved (or you could use classes, if you're more comfortable with that). By the way, the code above goes in between the <head></head> tags of your HTML document. Okay, so, in the code you will notice two ID's (you can change these into classes if you'd like). The first one, #content, is where you'll place the content to be shown or hidden. A DIV would probably be a good container to place that content, so: CODE <div id="content"> Content to be shown/hidden is placed here. </div> Now, you will need a link or something of that sort to toggle the content on and off. In this case, we have an anchor link with an ID. Like so: CODE <a id="toggle" href="#">Toggle</a> That will go before the DIV container where you placed the content to be shown/hidden. That's basically it. Just save your page and try it out. Here's an example document just to show you the full code: CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb"> <head> <script type="text/javascript" language="Javascript" src="/js/jquery.js"></script> <script type="text/javascript" language="Javascript"> $(document).ready(function() { // hides the content as soon as the DOM is ready // (a little sooner than page load) $('#content').hide(); // toggles the content on clicking the noted link $('a#toggle').click(function() { $('#content').toggle(400); return false; }); }); </script> </head> <body> <a id="toggle" href="#">Toggle</a><br /> <div id="content"> Content will be toggled on and off (shown/hidden) with a smooth transition effect. </div> </body> </html> And here's a live example page you can take a look at. Afterward, all you really need to do is mess with your CSS to edit the content to your liking (height, width, position, etc.). |
|
|
|
Posts in this topic
Gippersnap How am I able to do thissss? Apr 25 2010, 09:56 AM
999Murderdoll666 CODE<script language=javascript type='text... Apr 25 2010, 10:54 AM Gippersnap Am I able to get ALITTLE bit more detail on where ... Apr 25 2010, 02:42 PM 999Murderdoll666 If im understanding correctly,you want to use the ... Apr 25 2010, 07:30 PM Gippersnap I have them Seperated Left and right, instead of C... Apr 25 2010, 08:05 PM Uso I would contact mike, He prolly knows what to do Apr 25 2010, 09:29 PM Gippersnap I didddd, but no response :( Apr 26 2010, 03:16 PM fixtatik If you want to go the jQuery route, might I make a... Apr 26 2010, 05:24 PM Gippersnap I went to the Website link you gave me, and it bro... Apr 26 2010, 06:56 PM Mikeplyts Try clicking it again.
Or, click this. Apr 26 2010, 07:05 PM fixtatik Google has jQuery hosted on its developer API. Usi... Apr 26 2010, 07:17 PM
Mike Try this? Or choose from other methods here. Apr 27 2010, 05:35 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: