Reputation: 5353

My markup works in jsfiddle but not in any browser

I asked a similar question before but wasn't able to get an answer. Now its been verified that the the html works in jsfiddle. But when I run the .html file it doesn't work. I am very confused, I have never faced this problem before. If anyone sees anything please let me know. Thanks

<!DOCTYPE html>
    <html>
        <head>
            <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

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

        <style type="text/css">
        #container{width:978px;}
        .content {
            display: none;
            padding-left: 5px;
            left: 0px;
            width: 100%;
            top: 30px;
            background: yellow;
        }
        ul{width: 100%;}
        li{
            float: left;
            padding: 5px;
            background: #e5e5e5;}

        #div{
            background: #9e9e9e;
            height: 20px;
            width: 978px;
        }
        br{
            clear: left;
        }
        </style>

        <script type="text/javascript">
            $(function() {
            $('.action').click(function() {          
                var name = $(this).attr("name");
                var content = $('.content[name=' + name + ']');
                $('.content').not(content).hide('fast');
                content.slideToggle('fast');
            });
        });

        </script>
         </head>
        <body>

        <div id="container"><ul>
            <li>
                <a href="#" class="action" name="summer">summer</a>
            </li>
            <li>
                <a href="#" class="action" name="winter">winter</a>
            </li>
            <li>
                <a href="#" class="action" name="weather">weather</a>
            </li>
            </ul></div><br>
            <div class="content" name="summer">
                <a href="link">june</a>
                <a href="link">july</a>
            </div>
            <div class="content" name="winter">
                    <a href="link">november</a>
                    <a href="link">december</a>
                </div>
            <div class="content" name="weather">
                    <a href="link">rain</a>
                    <a href="link">sun</a>
            </div>

            <div id="div"></div>


        </body>
        </html>

Upvotes: 0

Answers (3)

scessor

Reputation: 16115

jsfiddle adds the normalize.css. After removing the invisible chars , I've added following line into the head.

<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">

I've tested your code. With following line it works.

=== UPDATE ===

Here the tested code:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

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

<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<!-- link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css" -->

    <style type="text/css">
    #container{width:978px;}
    .content {
        display: none;
        padding-left: 5px;
        left: 0px;
        width: 100%;
        top: 30px;
        background: yellow;
    }
    ul{width: 100%;}
    li{
        float: left;
        padding: 5px;
        background: #e5e5e5;}

    #div{
        background: #9e9e9e;
        height: 20px;
        width: 978px;
    }
    br{
        clear: left;
    }
    </style>

    <script type="text/javascript">
        $(function() {
        $('.action').click(function() {          
            var name = $(this).attr("name");
            var content = $('.content[name=' + name + ']');
                            $('.content').not(content).hide('fast');
            content.slideToggle('fast');
        });
    });

    </script>
     </head>
    <body>

    <div id="container"><ul>
        <li>
            <a href="#" class="action" name="summer">summer</a>
        </li>
        <li>
            <a href="#" class="action" name="winter">winter</a>
        </li>
        <li>
            <a href="#" class="action" name="weather">weather</a>
        </li>
        </ul></div><br>
        <div class="content" name="summer">
            <a href="link">june</a>
            <a href="link">july</a>
        </div>
        <div class="content" name="winter">
                <a href="link">november</a>
                <a href="link">december</a>
            </div>
        <div class="content" name="weather">
                <a href="link">rain</a>
                <a href="link">sun</a>
        </div>

        <div id="div"></div>


    </body>
    </html>

Works with firefox and IE8.

Upvotes: 2

Denys Séguret

Reputation: 382150

You have an invisible invalid character just before the </script>. Remove it and it's OK.

Upvotes: 6

Charlie

Reputation: 11787

Your JS code in the page needs to be

$(document).ready(function() {
    $('.action').click(function() {          
        var name = $(this).attr("name");
        var content = $('.content[name=' + name + ']');
        $('.content').not(content).hide('fast');
        content.slideToggle('fast');
    });
});

And add http: to the jQuery url:

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

Upvotes: 0

My markup works in jsfiddle but not in any browser

Answers (3)

Related Questions