How To Detect A Specific CSS Class With JavaScript On Scrolling? - javascript

I have a fixed sidebar navigation menu on my WordPress website. The navigation menu contains custom made icons. One set of icons are black and golden in color and another set of the same icons are golden and white in color.
As per the website requirements, I have to use these two sets of icons simultaneously because I have dark images in the header, footer and in the content section of some pages and those golden and black color of icons are difficult to observe. For this reason, I want to use the other set of icons i.e. white and golden color so users can easily observe them on those dark images.
I can code in JavaScript to calculate sections having dark images. I can then switch between icons i.e. to use white & golden color icons instead of black & golden icons. However, this is not the required approach because I have approximately 8 pages on my website with the same header and footer but every page has different content and those dark images appear on different positions on each page.
Until now, I have used the following code and this is helping me in calculating the height of sections.
$(window).scroll(function() {
var element1height = $( "#element1" ).height();
var element2height = $( "#element2" ).height();
var total = element1height + element2height;
var st = $(this).scrollTop();
if( st > element1height ) {
$("nav").addClass("active");
}
else {
$("nav").removeClass("active");
}
if( st > total ) {
$("nav").removeClass("active");
}
});
I need some help in CSS Class detection with JavaScript so I can switch between icons sets and use the white & golden icons when the required CSS class is detected, i.e. when the CSS class of the block where I have used the image is detected. Once I will detect that class, I will then be able to code in JavaScript to use the white & golden color set of my icons only on those images.
Any help will highly be appreciated.

So this is mostly theory but here's how I would attack it...
Label all the dark areas say class black, then loop through each black class
$( ".black" ).each(function( index ) {
console.log("found dark area");
});
and find it's distance from the top
var start = $(this).offset().top
and it's height. The gives you it's start and end
var end = start + $(this).height();
Then find your icons start position and height. Then just check.
if(iconStart > start && iconEnd < end) {
//My icon exists in a dark section change to light and break from .each loop
else {
//Change to dark
}

Related

Adding a class to a div when over a certain area / section

I am trying to change my navigation colour when it is over a dark header. I have managed to do this, but the page does not load in that state.
You can see it here, the navigation top left changes from white to black in respect of if it is over the dark top bar header or not.
http://www.pagedev.co.uk/clients/lotuslaser/
Here is my Jquery.
<script>
var header = $('#nav_list'),
blueSection = $('.full-header'),
// Calculate when to change the color.
offset = blueSection.offset().top + blueSection.height() - header.height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// Remove Class "dark" after scrolling over the dark section
if (scroll >= offset) {
header.removeClass('white-nav');
} else {
header.addClass('white-nav');
}
// Remove Class "no-shadows" whenever not on the top of the page.
if (scroll >= 1) {
header.removeClass('no-shadow');
} else {
header.addClass('no-shadow');
}
});
</script>
Any help would be great!
Another questions on the same matter... how do I also add another container into the mix, so that it can also change to white when it rolls over the black strip at the base of the page.
Thank you in advance.
Lee
i think the best way is to use Midnight.js Plugin

How to add one class at a time if two divs are ovelapped in the same position

I am stuck in one problem and tried a lot but couldn't get the solution.
What happens is, there is an mp3 player and below that player there is a strip what holds pictures (comments from users) based on the mp3 progress.
When ever the progress bar of the player reach the start of the image it ads "active" class to the image so people can see that at this time this user commented.
Now the problem I am facing is that at 01:46 there are two images that overlap each other and due to this overlap the javascript is adding active class to both images which I don't want, I want if the progress bar reach the start of the first image it will make it active but as soon as the second image starts (which is overlapped) the second image gets active so that there would be only 1 active at a time. same as soundcloud comments.
No matter if the first image duration will be less but this is what i wanted to achieve, as these images will be dynamic and user can choose where ever they want to comment i can not give the specific class to overlapped images so something needs to be done through javascript which i am stuck badly.
Because now there are two overlapped but in future it can be three four or how many overlapped so i want a effect that when we move the mouse from left to right on these images how the hover effect makes pictures active and as the second picture gets in focus that become active, i want it to be that way.
Can any expert help me with this?
I am using this function to get the left position of the progress bar meets the image to add "active" class and when the width of the image end it will remove the active class
$(document).ready(function() {
function highlightImg(progress){
progress = parseFloat(parseFloat(''+progress).toFixed(1));
var imgs = $('img.comment');
imgs.map(function (i, im)
{
var img = $(im);
var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1));
var currentImgRightPos = $(this).width() / $(this).parent().width() * 100;
console.log(progress);
console.log('left' ,currentImgLeftPos);
img.removeClass('active'); // remove active from other images
if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos ) {
$('#imgwidimg').text('this'+currentImgRightPos);
img.addClass('active'); // add the class when needed
}
}
);
}
And with this function i am making the jplayer progress update
$('#jquery_jplayer_2').on($.jPlayer.event.timeupdate, function(e){
var progress = document.querySelector('.jp-play-bar').style.width;
highlightImg(progress);
});
Here's a fiddle demonstrating the problem.
Please try with this.
if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + currentImgRightPos ) {
$('#imgwidimg').text('this'+currentImgRightPos);
imgs.removeClass("active"); //add this line to your code
img.addClass('active'); // add the class when needed
}

Scale and change an element from an image to a word, depending on scroll position.

I have seen some scrolling effects for example on Google SketchUp's site, their banner is initially "built into the page" and then it seems to pop out and remain stuck at the top after a certain position down (scrolling).
Google Plus seems to have some special effects as well, like changing the banner entirely once the scrolling has reached a certain position.
Attached is what I am trying to accomplish. A square logo is on the right, and then when the page is scrolled down, the logo starts to scale to the same height as the banner/header / fade and then becomes a word rather than the image.
What am I looking at here? jQuery or javascript? How do I track the scrolling and connect the two?
Is it what you want to achieve?
http://jsfiddle.net/agdbd8x6/15/
If so, it is quite easy. If you use jQuery, attach 'scroll' event handler and check current scroll position. Show the image only with zero scroll position:
var img = $('#image');
var txt = $('#text');
$(".container").scroll(function(){
txt.text('Scroll position = ' + $(this).scrollTop());
var showImage = $(this).scrollTop() == 0;
if (showImage){
img.css('display', 'inline');
txt.hide();
}
else{
img.hide();
txt.css('display', 'inline-block');
}
});

Hide only one element in fixed div when scrolling down

I have this big photo which takes 100%x100% of screen size and above it there is fixed slider.
I want to fadeout (hide) this green logo when you scroll down from this big header photo leaving navigation bar without it.
How can I do that?
http://i.stack.imgur.com/BiUfE.jpg here is photo
If you want the logo to scroll with the page, just put it outside of the menu bar in your HTML and use position absolute (JS Fiddle).
If you want it to fade out once it leaves the slider, you can use jQuery, here is an example:
//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();
//On every scroll
$(window).scroll(function(){
// if we're past the slider and the logo is still visible
if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
logo.stop().fadeOut(300);
}
// if not
else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
logo.stop().fadeIn(300);
}
});
JS Fiddle Demo

Modify Sidenavigation Which Highlights Which Part of Page is Viewed

I currently have a sidenavigation bar which continually checks the users scroll position and if it is greater than a specified .slide height, it adds a class .current to a certain div on a sidebar making it turn orange and thus indicates which part of a page the user is on. Right now, the code only works for one specific height of .slide but I would like to modify it so that each slide (i.e. slide red, slide green, slide blue which are the divs with the colored background) can be of different heights since my content for each section will vary in length.
The fiddle can be found here
JavaScript:
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('+newSlide+')').addClass('current');
}
if($(window).scrollTop() < $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('-newSlide-')').addClass('current');
}
});
I was trying to help you with your code and then i realize how hard it is, so I know it is probably not what you really want, but I recommend you a great jQuery plugin, which will solve your problem very fast: http://imakewebthings.com/jquery-waypoints/

Categories