Return to Support

implementing javascript on 1 page

Home Forums Graphene WordPress theme Support implementing javascript on 1 page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2976
    Manasse
    Member

    Hey again,

    for one page of my WP-site I’m trying to get something done. I want to have a few collapsible DIV’s.. I’ve tested it here: http://twowaysociety.nl/hidden/wp-content/themes/graphene-child/test.html and it works fine there.

    1ST TRY: Unfortunately it doesn’t work when I put the HTML coding in the admins edit page section. It goes totally wrong, displaying the html-input instead of the output… (note: I DO toggle the HTML input tab). The html-coding consists of a lot of tables so maybe that’s the problem. So I tried something else;

    2ND TRY; I’ve set up a template using this code:

    <?php
    /*
    Template Name: bio
    */
    ?>

    <?php
    global $graphene_settings;
    $graphene_settings['column_mode'] = 'one-column';

    include( get_template_directory() . '/page.php' );
    ?>

    /*** here I inserted the HTML code for the HEAD's javascript ***/

    <?php get_header(); ?>

    /*** A lot of html in the <BODY> ***/

    <?php get_footer(); ?>

    So… Does anyone know if and how to do this??? HTML of the code van be found on the test using firebug or sourcecode.. I didn’t want to lengthen this post too much…

    So I’m lost now. Saw something about using the slug or ID

    #22906
    Manasse
    Member

    Actually, I got this one done, putting the javascript in the header.

    <script language="javascript">
    function init()
    {
    var cookie = getCookie('collapse_obj');
    if(cookie)
    {
    var values = cookie.split(',');

    for(var i = 0; i < values.length; i++)
    {
    var itm = getItem(values);

    if(itm)
    itm.style.display = 'none';
    }
    }
    }

    function makeCookie(name, value)
    {
    var cookie = name + '=' + escape(value) + ';';
    document.cookie = cookie;
    }

    function getCookie(name)
    {
    if(document.cookie == '')
    return false;

    var firstPos;
    var lastPos;
    var cookie = document.cookie;

    firstPos = cookie.indexOf(name);

    if(firstPos != -1)
    {
    firstPos += name.length + 1;
    lastPos = cookie.indexOf(';', firstPos);

    if(lastPos == -1)
    lastPos = cookie.length;

    return unescape(cookie.substring(firstPos, lastPos));
    }

    else
    return false;
    }

    function getItem(id)
    {
    var itm = false;
    if(document.getElementById)
    itm = document.getElementById(id);
    else if(document.all)
    itm = document.all[id];
    else if(document.layers)
    itm = document.layers[id];

    return itm;
    }

    function toggleItem(id)
    {
    itm = getItem(id);

    if(!itm)
    return false;

    if(itm.style.display == 'none')
    itm.style.display = '';
    else
    itm.style.display = 'none';

    ////////////////////

    cookie = getCookie('collapse_obj');
    values = new Array();
    newval = new Array();
    add = 1;

    if(cookie)
    {
    values = cookie.split(',');

    for(var i = 0; i < values.length; i++)
    {
    if(values
    == id)
    add = 0;
    else
    newval[newval.length] = values
    ;
    }
    }

    if(add)
    newval[newval.length] = id;

    makeCookie('collapse_obj', newval.join(','));

    return false;
    }
    </script>

    There’s just one thing though. Once you toggle the event the page goes to the top. So the user has to scroll it’s way down to see what happened. I found another code that can prevent this, but I don’t know where about in the above code I should put it…

    $('a.myLink').toggle(function() {
    // run my code
    return false;
    });

    Anyone???

    #22907
    Manasse
    Member

    Resolved it! In the actual html code for the table there are the links that toggle the collapses to happen. It looked like this <a href="#" onclick="toggleItem('unknown')>some text</a>. I had to change it to <span onclick="toggleItem('unknown');return false">Unkown</span>

    Now I’m only looking for a nice way to change the cursor, making it a obvious clickable object…

    Well, no help needed 😉 We’re getting there!

    Cheers

    #22908
    Prasanna SP
    Member
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.