SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginner needs help implementing Accordion :)

    Hi all,

    Im new to Web design but i'm loving it. Lately i've been playing around with some Javascript accordion and stumbled upon www.scriptocean.com. There I got a program which makes an accordion for me that looks like this one:
    www.scriptocean.com/accordion.html
    So with this program i got an accordion as a .js file.

    So my question is , how would I go about implementing this Accordion into a div tag or basically, how do i control it's positioning on the site. This is probably a question with a simple answer, but i'm a beginner and i'm hoping that someone here could help me out.

    I would appreciate any help I can get

    Cheers

  2. #2
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hey there,
    Ok well I will do my best to give you a good explanation of how to install a plugin like this.

    Firstly, this is quite an unusual one because it uses only javascript to do all of the presentation of the images, borders, caption etc. This would typically be done in the css.

    Usually (but not always) you would have two external files which you would declare in the <head> of the page:

    one for the css (<link rel="STYLESHEET" type="text/css" href="yourstylesheetname.css">)

    And one for the javascript:
    Code:
    <script type="text/javascript" src="js/sliderman.1.1.1.js"></script>
    
    This is usually where the script resides if it is a big script, in an external file, nice and neat although it can also just be placed in the head in its entirety as long as it is inside the <script></script> tags like so:
    
    <script type="text/javascript">
    function displayad()
    {
    var t=document.getElementById("pre_code").value;	
    document.getElementById("code").value=t;
    document.getElementById("adframe").src="/tryitbanner.asp?secid=trycss&rnd=" + Math.random();
    }
    </script>
    Anyway, with your javascript, someone has written a really clever plugin that does all of the css styling, background colors, borders etc for you. This means you have no css file to install so just follow the user interface it provides through til the end and then include the script file in the <head> of your page, making sure that if it in a separate folder, your filepath is correct:

    eg: script.js is the same folder as your webpage
    BUT js/script.js is nested inside a folder called js - sorry if that's obvious, just want to be thorough

    At some point during installation of the plugin, it asks you to specify an images folder, select your default images folder and the script should do the image filepaths for you.

    Also it gives you a short line of js which you must copy to your clipboard and paste in the place in the body tag where you want it to occur so you can make your own div and put that code in here. This short line of js is the trigger to call the bigger script declared in the head.


    Hope this works, if you want to know more about getting cool plugins working check out JQuery at www.jquery.com. It takes a while to get used to installing and running the plugins but its really powerful. I have only been developing for a few months but I learnt how to install JQuery plugins and now I am getting quite good, it has transformed the look and feel of my sites. Heres some examples of of the things it can do:

    http://www.noupe.com/ajax/45-fresh-o...y-plugins.html

    The thing to remember is that it is the same as installing the files, js and css that I mentioned but you also have to install the javascript JQuery master library and very often you have to include an extra script for the plugin itself. I have attached a simple JQuery headline changer, notice that I declare the jquery library, the plugin js and css and then trigger the plugin with a few lines of script in the head. (scripts can be triggered from the head or the body- depends on the requirements of the developer, scripts in the head are executed immediately as this part of the page is parsed before the body.

    JQuery basically condenses code so that a javascript developer can get the same result with one or two lines of Jquery that would require 10 lines of javascript. It is not a different language tho, simply a javascript library.

    THE SITEPOINT book JQueRY From Novice To Ninja is awesome if you want to learn the language. Anyway check it out if you want, and best of luck
    Attached Files Attached Files
    Last edited by molona; Feb 18, 2011 at 01:55. Reason: wanted to attach file


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •