Help with jQuery FadeIn at Scrolling Page for two items WordPress

• SOLVED

Heres the site:

wordpress.mnda.de

You see the small little white arrows. They appear when the site starts scrolling down. Both! But only the current one aktive should appear. When you click on the other one, the other one should appear scrolling down the page, and disappear when site is totally to the top.

The active one has the class: ".currentCrossLink". The <img> Tag has ".whitearrow". So the whole class to call would be: ".currentCrossLink .whitearrow, .whitearrow".

Here's the jQeury Code:
<script>
jQuery("whitearrow").click(function() {
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop()> 20)
{
jQuery('.currentCrossLink .whitearrow, .whitearrow').fadeIn();
}
else
{
jQuery('.currentCrossLink .whitearrow, .whitearrow').fadeOut();
}
});

jQuery(document).ready(function() { jQuery('.currentCrossLink .whitearrow, .whitearrow').hide() } );
</script>


Here's the HTML:
<div class="content belly">
<div class="first"><h2>Agentur</h2><h3>Wir leisten Perfektion</h3></div>
<div class="second"><h2><a href="#slide-1" class="pure-button" data-liquidslider-ref="mnda-slider-1"><img class="whitearrow" src="http://wordpress.mnda.de/files/themes/mnda/library/images/whitearrow.png">Marketing</a></h2><h3>Strategie und Konzept</h3></div>
<div class="third last"><h2><a href="#slide-2" class="pure-button" data-liquidslider-ref="mnda-slider-1"><img class="whitearrow" src="http://wordpress.mnda.de/files/themes/mnda/library/images/whitearrow.png">Produktion</a></h2><h3>Print, Web & Multimedia</h3></div>
</div>

Hope you can help me!

Best,
Kaischo

Answers (3)

2014-04-08

Bob answers:

I have downloaded you html, css, js and tested it in local.

Notice the line: <strong>jQuery('.currentCrossLink .whitearrow').fadeIn();</strong> here ",.whitearow" is removed
and below code is extra added

jQuery(".pure-button").click(function(){
jQuery('.currentCrossLink .whitearrow, .whitearrow').css("display","none");
jQuery('.currentCrossLink .whitearrow').fadeIn();
});

Here is full code.

<script>
jQuery("whitearrow").click(function() {
jQuery("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop()> 20)
{
jQuery('.currentCrossLink .whitearrow').fadeIn();
}
else
{
jQuery('.currentCrossLink .whitearrow, .whitearrow').fadeOut();
}
});
jQuery(".pure-button").click(function(){
jQuery('.currentCrossLink .whitearrow, .whitearrow').css("display","none");
jQuery('.currentCrossLink .whitearrow').fadeIn();
});
jQuery(document).ready(function() { jQuery('.currentCrossLink .whitearrow, .whitearrow').hide() } );
</script>


2014-04-08

Hariprasad Vijayan answers:

Hi Kaischo,

Not clear what is the issue. Can you explain bit more?

But i think the jquery should be like this


jQuery(".whitearrow").click(function() {

jQuery("html, body").animate({ scrollTop: 0 }, "slow");

return false;

});

2014-04-08

Arnav Joy answers:

as i can see when i select a box the arrow is there to show it is selected , so please let me know what you want. what is the problem.