Home/ Questions/Q 6832105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:49:06+00:00

The problem On my page, when a specified <a> is clicked upon, another part

  • 0

The problem

On my page, when a specified <a> is clicked upon, another part of the page is supposed to change. In my case right now I’m trying to fade an image out (in order to show the image behind the first one), but I’ve tried it with different changes (changing z-index (with .css) or the src (using .attr)).

I’m sure the event is not the problem, it’s the trigger. I even got it to work with the following: 

<a onclick='$("img").toggleClass("active")' class="wr-nav-prev">

But since I’m really new to javascript (and jQuery) I don’t want to settle for this way.

Trying to do the same this way: 

$(".wr-nav-next").click(function(){
    $("img").toggleClass("active");
});

won’t work and I cannot find the reason. I changed the selector about a hundred times (the <a> wraps around a span and a div).

I hope you already see the problem and will inform me about my mistake when you are done laughing! 🙂

If not, maybe those parts of my code will help:
In the case that you need to see what it looks like: I was trying to rebuild this page / example called “Circle Navigation Effect with CSS3” by Mary Lou from Codrops

The HTML

A few lines (like the css links) missing. I’m pretty sure they are not important.

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="centeritem.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    CenterItem('#wr');
});
$(window).resize(function() {
    CenterItem('#wr');
});
$(".wr-nav-next").click(function(){
    $("img").toggleClass("active");
});
</script>

</head>
<body>
<div id="wr">
    <div class="wr-nav"> 
        <a onclick='$("img").toggleClass("active")' class="wr-nav-prev"> 
            <span>Previous picture</span>
            <div></div>
        </a>
        <a class="wr-nav-next">
            <span>Next picture</span>
            <div></div>
        </a>
    </div>
    <div>
        <img class="active" src="Images/large/1.jpg">
        <img src="Images/large/2.jpg">
    </div>
</div>
</body>
</html>

The CSS

The css is a bit messy since I’ve been testing stuff with this stylesheet all day and I might have overlooked something while cleaning up.

#wr{
    position: relative;
    width: 820px;
    height: 600px;
    border: 0px solid rgba(153,153,153,1);
    background-color:rgba(0,102,204,0.4);
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.wr-nav{
    position:relative;
    width: 770px;
    height: 120px;
    top: 25px;
    left: 25px;
}

.wr-nav a{
    position:absolute;
    height: 70px;
    width: 70px;
    top: 0px;
}

a.wr-nav-prev{
    left: 0px;
}

a.wr-nav-next{
    right: 0px;
}

.wr-nav a span{
    position: absolute;
    cursor: pointer;
    opacity: 0.9;
    display:block;
    width: 46px;
    height: 46px;
    top: 50%;
    left: 50%;
    margin: -23px 0 0 -23px;
    background-size: 17px 25px;
    text-indent: -9000px;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background-color:rgba(204,204,204,1);
    background-repeat:no-repeat;
    background-position: center center;
}

.wr-nav a.wr-nav-prev span{
    background-image:url(Images/prev.png);
}

.wr-nav a.wr-nav-next span{
    background-image:url(Images/next.png);
}

.wr-nav a div{
    position: absolute;
    cursor: pointer;
    opacity:1;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    background-repeat:no-repeat;
    background--position: center center;
}

.wr-nav a:hover span{
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin: -50px 0 0 -50px;
    background-size: 22px 32px;
    background-color:rgba(0,102,204,1);
}

.wr-nav a:hover div{
    width: 90px;
    height: 90px;
    background-size: 100% 100%;
    margin: -45px 0 0 -45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px;
}

.wr-nav a.wr-nav-prev div{
    background: rgba(255,153,51,1) url(Images/thumbs/1.jpg) no-repeat center center;
}

.wr-nav a.wr-nav-next div{
    background: rgba(153,153,153,1) url(Images/thumbs/2.jpg) no-repeat center center;
}

img{
    position: absolute;
    opacity: 0;
    border-top: 3px solid rgba(153,153,153,0.8);
    border-bottom: 3px solid rgba(153,153,153,0.8);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

img.active{
    opacity: 1;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should be inside your document ready function. Otherwise it tries to initialize the click on all elements before your code, which are none.

    $(function(){
    $(".wr-nav-next").click(function(){
        $("img").toggleClass("active");
    });
});
    • 0