2

Trying to add some prepend code to a SlickNav menu and while basic HTML works, once I add things like img's and href's, the code fails. I know this is incorrect, but I'm wondering what would work here:

jQuery('.slicknav_menu').prepend('<div class=\"logo\"><a href=\"https://example.com/\" rel=\"home\"><img src=\"https://example.com/images/logo-round.svg\" alt=\"My Site\" onerror=\"this.onerror=null; this.src='https://example.com/images/logo-round.png'\"></a></div>');

I know this will work:

jQuery('.slicknav_menu').prepend('<div class=\"logo\">LOGO</div>');

But the other is more advanced. So how can I make that work so it displays the svg (or png) image?

VMAtm
  • 27,943
  • 17
  • 79
  • 125
Adam Bell
  • 1,049
  • 1
  • 16
  • 50
  • 2
    look at the syntax highlighting... you are escaping the wrong quotes and not escaping the single quotes that need escaping – charlietfl Oct 04 '15 at 23:06

3 Answers3

1

After a lot of trial and error, I finally found the code that seems to work. This displays everything and the link is correct:

jQuery('.slicknav_menu').prepend(\"<div class=\\\"site-title\\\"><a href=\\\"https://thecleverroot.com/\\\" rel=\\\"home\\\"><img src=\\\"https://thecleverroot.com/wp-content/themes/clever-root/images/logo.svg\\\" alt=\\\"The Clever Root\\\" onerror=\'this.onerror=null; this.src=\\\"https://thecleverroot.com/themes/clever-root/images/logo-round.png\\\"\'></a></div>\");
Adam Bell
  • 1,049
  • 1
  • 16
  • 50
0

I think the correct way would be

jQuery('.slicknav_menu').prepend('<div class="logo"><a href="https://example.com/" rel="home"><img src="https://example.com/images/logo-round.svg" alt="My Site" onerror="this.onerror=null; this.src=\'https://example.com/images/logo-round.png\'"></a></div>');

If you start with the simple quote, then you need to escape the simple quote.

for example:

$('.slicknav_menu').prepend('<div class="logo" id=\'id_exemple\'>Teste</div>');
subdigit
  • 431
  • 4
  • 9
Phelipe Rocha
  • 186
  • 4
  • 15
  • Your method doesn't work. I get syntax errors trying the method above. The double quotes are the issue. And you need them for a href and img src attributes. – Adam Bell Oct 05 '15 at 06:09
  • I think the problem is I'm making a direct call to https://example.com/ and it's those slashes that are causing things to get messed up. – Adam Bell Oct 05 '15 at 06:14
0

Just to echo the comment left by @charlietfl, syntax highlighters are a good friend. Always hard to do manually, but just be sure to keep track of single quote and double quote escaping.

subdigit
  • 431
  • 4
  • 9