CSS Clash breaks JavaScript?

JavaScript
1

Hello Sitepoint friends. I have a site we are building that has the problem where adding two CSS files to the head breaks my JavaScript functionality. If I eliminate one, I get the expected result for what it handles. If I eliminate the other, I get the expected result for what it handles. One is necessary for JavaScript to function. The other handles practically all of the styling for the page. I already tried to combine them into one CSS file. However, that is doing the same as both of them in the head. I would like to know how to scan for conflicts in CSS files. If anybody can suggest an online tool or something for this, that would be great. But for now, I think I need more experienced eyes to see what is happening. Could someone take a look and suggest something? Thanks
code.zip (148.5 KB)

2

It would be better if you could put the relevant code in a codepen as many here will not wish to download an unknown zip. :slight_smile: Also a hint on what is supposed to happen would be helpful.

As an aside the css file also looks to be about 800k which is massive.

I don’t really have the resources here (as I am away on holiday) but your js looks malformed also for the vidthumb.js.

You have this:

$(function() { // Shorthand for $(document).ready(function() {
          $('.video_area').hover(function() {
                $(this).find('.overlay_thumb').toggleClass('hidden');
				$(this).find('.thumb1').toggle();
          });
		  

		  
		  $(document).ready(function() {
			$('.video_area .overlay_thumb span').hover(function() {
			$(this).parent().find('img').addClass('noshow').eq($(this).index()-5).removeClass('noshow');
			});
		  });

				
				
		});
});

I don’t believe you can nest document ready calls.

I think it should be this but hopefully the JS experts here will pass by and take a look.

$(function () {
  // Shorthand for $(document).ready(function() {
  $(".video_area").hover(function () {
    $(this).find(".overlay_thumb").toggleClass("hidden");
    $(this).find(".thumb1").toggle();
  });

  $(".video_area .overlay_thumb span").hover(function () {
    $(this)
      .parent()
      .find("img")
      .addClass("noshow")
      .eq($(this).index() - 5)
      .removeClass("noshow");
  });
});

In your index3.html code you reference main.css but I didn’t see a main.css in the zip.

2 Likes
3

I mean, you can. The inner one wont work because its missed its trigger, but its legal syntax ;p

1 Like
4

Why do we have empty divs and images and hovering over empty divs to do something with the images and then trying to do math about… oh lort.

What are you trying to do with your javascript? What’s breaking (other than my brain)?

2 Likes
5

I am trying to fathom out what it does. I can’t help but feel vanilla JS might be a better option. That said, does this work?

vidthumb.js

$(function() {
    $('.video_area')
        .hover(function() {
            $(this).find('.overlay_thumb').toggleClass('hidden');
		    $(this).find('.thumb1').toggle();
        });

    $('.video_area .overlay_thumb span')
        .hover(function() {
            $(this)
                .parent()
                .find('img')
                .addClass('noshow')
                .eq($(this).index()-5)
                .removeClass('noshow');
        });
});

edit: Sorry, just realised that I have come up with the same code as Paul :slight_smile:

1 Like
6

there’s a css rule to hide .overlay_thumb, but a javascript function to add the class “hidden” on hover (and then not remove it on mouseout… so… yaknow… reasons). This i’m fairly sure could be subsumed by CSS entirely (.video_area:hover .overlay_thumb { display: block; })

Then you’ve got this odd mismash of spans and imgs that could probably be done similarly by rearranging the html…

7

Just playing with it at the moment, but I think the first bit of jquery could actually be replaced with something like this.

.video_area > * {
    display: none;
}

.video_area:hover > * {
    display: block;
}

Having a class called hidden like this

.hidden {
  display: block; 
}

Seems back to front to me.

8

As far as I can tell the jquery equates to this CSS.

.video_area {
    /* hide all direct children */
    > * {
        display: none;
    }

    /* on hover show all direct children */
    &:hover > * {
        display: block;
    }

     /* on hovering over a span hide all sibling images excluding the first image */
    .overlay_thumb span:hover ~ img:not(:first-child) {
        display: none;
    }
}

Just guesswork here :slight_smile:

9

I think the idea is that its meant to be a manual… carousel? I dont know if thats the appropriate word anymore… the Nth span should display the Nth image, and keep it there until another span is hovered.

1 Like
10

So something a bit like this?

https://codepen.io/rpg2019/pen/XJJzYvy
Can we please have codepen previews back?

Just a few notes.

Instead of absolute positioning I am using a grid area which is shared by all the images in that grid. On hovering a .show class is added to the selected image which brings that image to the front (z-index) and fades in it’s opacity. The .show class is also removed from the other images.

Instead of floats for the markers, I am using display flex, with a justify-content of space around. The markers are added dynamically depending on the number of images.

Edit:

I believe I have posted this before, but this functionality is being added to CSS.

2 Likes
11

PaulOB, m_hutley, and rpg_digital you so much for your generous and prompt responses. I travel the world singing the praises of the SitePoint forum, always emphasizing the exceptional expertise found here. Now, I’ll also highlight how kind and helpful its members are.
Please bear with me—this is 10-year-old code, and I’m definitely feeling rusty and outdated. However, I’ll follow PaulOB’s advice and create a CodePen to provide a real example, making it easier for you wonderful people to assist me.
Your efforts so far have been incredible. I learn something valuable from every post.
Thank you so much!
—Phil

2 Likes