0

I have some troubles with rotating an image when it's clicked.

I've got a menu item with a submenu, but the submenu only shows when the menu item is clicked. Now I have added an image (an arrow) to the menu item to show wether the submenu is opened or closed, so I would like to turn the image upside down if the submenu is opened.

The strange thing is that the following code is the exact code I use in my website, but here it works and on my website the whole dropdown div disappears as soon as I inserted the jQuery code in my file...

$("#arrowed").toggle(function() {
    $(".dropdown-content").slideDown(200);
    $("#dropdown-image").css({
        "-webkit-transform": "rotate(180deg)",
        "-moz-transform": "rotate(180deg)",
        "transform": "rotate(180deg)"
    });
}, function() {
    $(".dropdown-content").slideUp(200);
    $("#dropdown-image").css({
        "-webkit-transform": "rotate(0deg)",
        "-moz-transform": "rotate(0deg)",
        "transform": "rotate(0deg)"
    });
});
* {
 margin: 0px;
 padding: 0px;
 line-height: 100%;
 box-sizing: border-box;
 border: 0px solid black;
 font-family: georgia;
}

.menu {
 float: left;
 height: 70px;
 color: rgba(0,0,0,1.0);
 font-size: 20px;
 padding: 30px;
 text-decoration: none;
}

.header p:hover {
 cursor: pointer;
}

.menu:hover, .dropdown:hover .menu {
 border-bottom: 5px solid rgba(0,0,0,1.0);
 cursor: pointer;
}

#dropdown-image {
 width: 70px;
 height: 70px;
 padding: 15px;
 float: right;
 position: relative;
 top: -30px;
}

#arrowed {
 padding-right: 0px;
}

.dropdown {
 position: relative;
    display: inline-block;
    float: left;
}

.dropdown-content {
 display: none;
 position: absolute;
 top: 70px;
 width: 150%;
}

.dropdown-inner:link, .dropdown-inner:visited {
 display: block;
 font-size: 18px;
 padding: 16px 20px;
 color: rgba(0,0,0,1.0);
 background-color: rgba(0,100,0,0.8);
 text-decoration: none;
}

.dropdown-inner:hover, .dropdown-inner:active {
 display: block;
 font-size: 18px;
 padding: 16px 20px;
 color: rgba(0,0,0,1.0);
 background-color: rgba(100,100,100,1.0);
 text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="dropdown">
  <a class="menu" id="arrowed" href="">Home 
    <img src="https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-512.png" id="dropdown-image" />
  </a>
  <div class="dropdown-content">
    <a class="dropdown-inner" href="homepage.php">Homepage</a>
    <a class="dropdown-inner" href="item1.php">Item 1</a>
    <a class="dropdown-inner" href="item2.php">Item 2</a>
    <a class="dropdown-inner" href="item3.php">Item 3</a>
    <a class="dropdown-inner" href="item4.php">Item 4</a>
    <a class="dropdown-inner" href="item5.php">Item 5</a>
  </div>
</div>

So I don't believe the problem is about the jquery, but I can't find the real problem...

Edit: No this is not a duplicate, because in my case, in my js-file the code waits until the page is loaded, I only didn't copy that part of the code, because I didn't think it was relevant.

Update:

So I've gotten closer to an answer, now I use this jQuery code:

$(document).ready(function(){
    $("#arrowed").click(function(){
        $(".dropdown-content").slideToggle(200);
        $("#dropdown-image").css({
           "-webkit-transform": "rotate(180deg)",
             "-moz-transform": "rotate(180deg)",
            "transform": "rotate(180deg)"
        });
    });
});

The arrow turns upside-down when I open the dropdown, can anyone explain how to turn it back when I close the dropdown? Thanks already!

  • You need to wrap your code in `$(function() {...});` - the jQuery cannot attach event handlers to objects that is not available in the DOM when you run the code – mplungjan Feb 04 '17 at 16:23
  • You are missing a comma (`,`) after `"-moz-transform": "rotate(180deg)"`, which is causing a syntax error in your code. – Scott Marcus Feb 04 '17 at 16:31

1 Answers1

0

Wrap this in document ready so that we know the element is accessible when the script is loaded. Do you have a link to your website?

$(document).ready(function(){

    $("#arrowed").toggle(function() {
        $(".dropdown-content").slideDown(200);
        $("#dropdown-image").css({
            "-webkit-transform": "rotate(180deg)",
            "-moz-transform": "rotate(180deg)",
            "transform": "rotate(180deg)"
        });
    }, function() {
        $(".dropdown-content").slideUp(200);
        $("#dropdown-image").css({
            "-webkit-transform": "rotate(0deg)",
            "-moz-transform": "rotate(0deg)",
            "transform": "rotate(0deg)"
        });
    });

});


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dropdown</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            line-height: 100%;
            box-sizing: border-box;
            border: 0px solid black;
            font-family: georgia;
        }

        .menu {
            float: left;
            height: 70px;
            color: rgba(0, 0, 0, 1.0);
            font-size: 20px;
            padding: 30px;
            text-decoration: none;
        }

        .header p:hover {
            cursor: pointer;
        }

        .menu:hover,
        .dropdown:hover .menu {
            border-bottom: 5px solid rgba(0, 0, 0, 1.0);
            cursor: pointer;
        }

        #dropdown-image {
            width: 70px;
            height: 70px;
            padding: 15px;
            float: right;
            position: relative;
            top: -30px;
        }

        #arrowed {
            padding-right: 0px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            float: left;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 70px;
            width: 150%;
        }

        .dropdown-inner:link,
        .dropdown-inner:visited {
            display: block;
            font-size: 18px;
            padding: 16px 20px;
            color: rgba(0, 0, 0, 1.0);
            background-color: rgba(0, 100, 0, 0.8);
            text-decoration: none;
        }

        .dropdown-inner:hover,
        .dropdown-inner:active {
            display: block;
            font-size: 18px;
            padding: 16px 20px;
            color: rgba(0, 0, 0, 1.0);
            background-color: rgba(100, 100, 100, 1.0);
            text-decoration: none;
        }
        </style>
</head>
<body>
    <div class="dropdown">
      <a class="menu" id="arrowed" href="">Home
        <img src="https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-512.png" id="dropdown-image" />
      </a>
      <div class="dropdown-content">
        <a class="dropdown-inner" href="homepage.php">Homepage</a>
        <a class="dropdown-inner" href="item1.php">Item 1</a>
        <a class="dropdown-inner" href="item2.php">Item 2</a>
        <a class="dropdown-inner" href="item3.php">Item 3</a>
        <a class="dropdown-inner" href="item4.php">Item 4</a>
        <a class="dropdown-inner" href="item5.php">Item 5</a>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
    <script>

        $(document).ready(function(){

            $("#arrowed").toggle(function() {
                $(".dropdown-content").slideDown(200);
                $("#dropdown-image").css({
                    "-webkit-transform": "rotate(180deg)",
                    "-moz-transform": "rotate(180deg)",
                    "transform": "rotate(180deg)"
                });
            }, function() {
                $(".dropdown-content").slideUp(200);
                $("#dropdown-image").css({
                    "-webkit-transform": "rotate(0deg)",
                    "-moz-transform": "rotate(0deg)",
                    "transform": "rotate(0deg)"
                });
            });

        });

    </script>
</body>
</html>
Win
  • 5,498
  • 2
  • 15
  • 20
  • I already commented that. It is an obvious duplicate – mplungjan Feb 04 '17 at 16:29
  • I'm sorry mplungjan, this is something totally different from the way you see it, I have searched for more than 2 hours on the internet the find an answer, but couldn't find one. So no this is not a duplicate. Meanwhile I have come closer to an answer, I'll add my progress and the resting question to the bottom of my original question. –  Feb 04 '17 at 17:08
  • Sorry, I did not mean to duplicate your answer. Also @WoHe do you have a link anywhere? I would like to assist you. – Win Feb 04 '17 at 17:09
  • The question is updated, you can find the code there, my website is not yet online... –  Feb 04 '17 at 17:13
  • @WoHe check my updated answer. Does this not work? – Win Feb 04 '17 at 17:18
  • That is the code I had from the beginning, yes it works in the snippet, but if I copy paste it into my js-file, the whole home-button disappears... –  Feb 04 '17 at 17:23
  • By js file, do you mean moving the javascript code into its own file? Can you have a screenshot the files? – Win Feb 04 '17 at 17:25
  • by js-file, I mean the file with my Javascript code, I have 3 different files (html, css and js) all linked correctly to each other –  Feb 04 '17 at 17:27
  • Can you please screenshot the files for me? It'll be a lot easier to find the solution. – Win Feb 04 '17 at 17:29
  • I don't think screenshots will help, my actual code is a whole lot bigger, I copied everything out of them that is relevant to my question... –  Feb 04 '17 at 17:34
  • Hmm okay, it is very difficult to find out why it isn't working since we don't have all the other pieces to your sample as the code above clearly works. I'd suggest hosting it somewhere where we can see it. – Win Feb 04 '17 at 17:36
  • Okay, I have found the solution: instead of trying to turn the image, I have made a second image with the arrow turned 180° and I switch between them with this code: $("#arrowed").click(function(){ $(".dropdown-content").slideToggle(200); if ($("#dropdown-image").attr("src") == "logos/arrow-d.png") { $("#dropdown-image").attr("src", "logos/arrow-u.png"); } else { $("#dropdown-image").attr("src", "logos/arrow-d.png"); }; }); –  Feb 04 '17 at 18:28