CODEWITHSUNDEEP
javascriptjquerydreamweaverjsfiddle
user2406993
user2406993

Reputation: 257

code fails to work outside a jsFiddle in dreamweaver

I aim to make a web page with interactive videos, and while searching here I came across a link pointing to a jsFiddle that suits my needs.

As the code worked perfectly fine on the jsFiddle, it broke down when i tried to copy it into DreamWeaver (it seems the JavaScript had stopped working).

I had put it all together as such:

<html>
<head>

<style>
div.tab-headers>a
{
    display: inline-block;
    width: 50px;
    background-color: #eee;
    padding: 10px;
    border: 1px solid #666;
}

div.tab
{
    height: 400px;
    width: 100%;
    border: 1px solid #666;
    background-color: #ddd;
    padding: 10px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$("div.tab-headers>a").click(function () {
    // Grab the href of the header
    var _href = $(this).attr("href");

    // Remove the first character (i.e. the "#")
    _href = _href.substring(1);

    // show this tab
    tabify(_href);
});

function tabify(_tab) {
    // Hide all the tabs
    $(".tab").hide();

    // If valid show tab, otherwise show the first one
    if (_tab) {
        $(".tab a[name=" + _tab + "]").parent().show();
    } else {
        $(".tab").first().show();
    }
}

// On page load...
$(document).ready(function () {
    // Show our "default" tab.
    // You may wish to grab the current hash value from the URL and display the appropriate one
    tabify();
});
</script>
</head>

<body>

<div class="tab-headers">
    <a href="#tab1">T1</a>
    <a href="#tab2">T2</a>
    <a href="#tab3">T3</a>
<div>


<div class="tab">
    <a name="tab1">tab 1</a>
    Tab contents
</div>
<div class="tab">
    <a name="tab2">tab 2</a>
    Tab contents
</div>
<div class="tab">
    <a name="tab3">tab 3</a>
    Tab contents
</div>
</body>
</html>

Upvotes: 1

Views: 326

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need to move click handler code in your document ready handler -

$(document).ready(function () {
    $("div.tab-headers>a").click(function () {
        // Grab the href of the header
        var _href = $(this).attr("href");

        // Remove the first character (i.e. the "#")
        _href = _href.substring(1);

        // show this tab
        tabify(_href);
    });
    tabify();
});

The reason, it works on fiddle is that, jsFiddle automatically wraps your code in ready handler - their is select box on left to choose though

Upvotes: 1

Related Questions