CODEWITHSUNDEEP
javascriptphpjqueryhtmlget
PowerUser
PowerUser

Reputation: 812

Run a JS function on page load

I know that this question has been asked multiple times, but my case is different. So I have an external JavaScript file which contains the code for my accordion menus (you know, the user clicks on a title and it expands). Now I want to get a # (hash sign) from the url and according to it to open a specific "accordion" onload. So here's what I've tried:

<body onload="runAccordion(index);"> <!-- In the example bellow, index should be equal to 1 -->

But it never worked (as desired), because I don't know how to "read" the url's # (element's id)... Here's the markup for an accordion:

<div id="AccordionContainer" class="AccordionContainer">

    <div onclick="runAccordion(1);">
        <div class="AccordionTitle" id="AccordionTitle1">
            <p>Title</p>
        </div>
    </div>
    <div id="Accordion1Content" class="AccordionContent">
        <p>
<!-- Content -->
        </p>
    </div>

Or maybe I should use PHP $_GET???

JS file contents:

var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index) {
    var nID = "Accordion" + index + "Content";
    if (openAccordion == nID)
        nID = '';

    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

    openAccordion = nID;
}

function animate(lastTick, timeLeft, closingId, openingId) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var opening = (openingId == '') ? null : document.getElementById(openingId);
    var closing = (closingId == '') ? null : document.getElementById(closingId);

    if (timeLeft <= elapsedTicks) {
        if (opening != null)
            opening.style.height = ContentHeight + 'px';

        if (closing != null) {
            closing.style.display = 'none';
            closing.style.height = '0px';
        }
        return;
    }

    timeLeft -= elapsedTicks;
    var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);

    if (opening != null) {
        if (opening.style.display != 'block')
            opening.style.display = 'block';
        opening.style.height = (ContentHeight - newClosedHeight) + 'px';
    }

    if (closing != null)
        closing.style.height = newClosedHeight + 'px';

    setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
}

Upvotes: 0

Views: 121

Answers (2)

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

Give the following a try:

$(document).ready(function() {
    var hash = window.location.hash;
    hash = hash.length > 0 ? hash.substring(1);
    if (hash.length) {
        runAccordion(window.location.hash);
    }
});

The above will grab your hash index out of the URL. To add a hash to the URL, try the following:

window.location.hash = 1; //or whatever your index is

Upvotes: 2

Ankit Gupta
Ankit Gupta

Reputation: 189

# You can use: #

window.onload = function() {
    runAccordion(window.location.hash);
}

Upvotes: 0

Related Questions