Implementing jQuery on SVG for the WordPress Header Logo

[bmoneruiux]

I was able to create an awesome layered SVG with jQuery animations and CSS. However now implementing it into my soon-to-be WordPress site…I have no idea how to actually implement it. i’ve been searching the web and while I’ve found ways to display the svg…my animations and color changes are still waiting in the mist somewhere.

Here’s my CodePen where the technique works flawlessly.

Here’s the beginnings of my Website that’s just…static.

I’m using the Responsive theme, and have implemented it into the header.php of my child theme like this:

<div id="logo">
    <a href="<?php echo home_url( '/' ); ?>"><object type="image/svg+xml" data="<?php echo get_bloginfo( 'stylesheet_directory' ) ?>/core/images/bm-logo.svg"></object></a>
</div><!-- end of #logo -->

I’ve implemented the CSS into my child theme’s css file, and the script…well I’m not sure WHERE to put that currently although I’ve tried a number of places already.

What am I missing? Any help will be appreciated.

[bmoneruiux]

…and for some reason I can’t click on it anymore either…hmmm

[Paulie_D]

Is using <object> the optimum method here?

[shaneisme]

Yeah – try just dumping the SVG code right in.

[bmoneruiux]

Ok I’ll try that. Last time I did that, nothing wanted to show up. Am I supposed to be adding the <doctype> tag that’s in it also?

[shaneisme]

No, doctype should only be declared at the top of your document. You want everything from <svg> to </svg>.

[bmoneruiux]

Ok! Yay! I can finally click on it again!

Now how do you suggest I implement the jQuery script I have? Just slap it between some script tags, or is there a more elegant solution?

FYI – I’m new to using SVG’s in an actual web design, and am still learning jQuery.

[shaneisme]

Most people use Google’s hosted version:

https://developers.google.com/speed/libraries/devguide#jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

[bmoneruiux]

No that’s not my problem. I always use Google versions of everything when I can. I definitely have jQuery in the site.

My problem is that I’ve placed the link to the js file right below the closing div of the footer:

<script src="<?php echo get_bloginfo( 'stylesheet_directory' ) ?>/core/js/logo-animation.min.js"></script>

Yet the logo still isn’t performing the .hover animation like in my CodePen.

Am I missing some crucial step somewhere?

[chrisburton]

@TheDoc Why was @shaneisme’s comment listed as inappropriate?

[bmoneruiux]

I didn’t even notice that. For the record, wasn’t me lol.

[chrisburton]

@ctvonline @psionicsin Check your console errors. There seems to be a conflict. Instead of using $, swap that with the word jQuery.

So it should look like this:

jQuery('.bm-logo').hover(
    function ($) {
      $('.logo-square, .logo-bg').attr('fill', '#b565a7 ');
      $('.logo-square').css({
        '-webkit-transform': 'scale(0.6)',
        '-moz-transform': 'scale(0.6)',
        '-o-transform': 'scale(0.6)'
      });
    }, function ($) {
      $('.logo-square, .logo-bg').attr('fill', '#404040 ');
      $('.logo-square').css({
        '-webkit-transform': 'scale(1)',
        '-moz-transform': 'scale(1)',
        '-o-transform': 'scale(1)'
      });
    }
  );

[chrisburton]

Also, your code is very messy. You have divs in your head section along with style tags between script tags. Style tags should come before script tags. And divs do not belong inside the head section, it belongs in the body.

[bmoneruiux]

I tried your recommendation, and it’s still not working.

And it’s not my code, but the themes code. They apparently have a single DIV in there for a fluid width background video wrapper. I can ask the theme creators on why that’s in there though, they usually get back ASAP. I’ll agree that’s an unusual spot for it.

But back to the topic, changed $ to jQuery and still getting the same result but with a newer error in the console log.

Uncaught TypeError: undefined is not a function logo-animation.min.js:1
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
4
Uncaught TypeError: undefined is not a function

[chrisburton]

@psionicsin What about this:

jQuery('.bm-logo').hover(
  function () {
    jQuery('.logo-square, .logo-bg').attr('fill', '#b565a7 ');
    jQuery('.logo-square').css({
      '-webkit-transform': 'scale(0.6)',
      '-moz-transform': 'scale(0.6)',
      '-o-transform': 'scale(0.6)'
    });
  }, function () {
    jQuery('.logo-square, .logo-bg').attr('fill', '#404040 ');
    jQuery('.logo-square').css({
      '-webkit-transform': 'scale(1)',
      '-moz-transform': 'scale(1)',
      '-o-transform': 'scale(1)'
    });
  }
);

[Author]

Posts