Convert JQuery to JavaScript

JavaScript
1

Hi,
I am trying to get a JQuery code converted into JavaScript, as JQuery is not available.
Would anybody be able to help me please?

This is the code:
$(document).ready(function(){ $('#login-trigger').click(function(){ $(this).next('#login-content').slideToggle(); $(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('▲') else $(this).find('span').html('▼') }) });
Thanks

2

Can you link to the online google developers site instead. Just to see if you can avoid the pain?

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
3

Doesn’t work, it will only take pure JavaScript.

4

What are you having trouble with, specifically?

What will?

1 Like
5

I am trying to create a drop down log-in box for my wordpress site, but the theme only has a section to insert custom JS, but the code is JQuery, how can I get it to work with JS?

6

The only time JQuery is unavailable is when JavaScript is unavailable as JQuery is just a few functions written in JavaScript.

7

But I have the JQuery code, there’s an area to insert JavaScript but no JQuery, so I need the JQuery code converted to JS so I can put it in.

8

Does the area you refer to actively reject jQuery code references?

9

Yes

10

jQuery is JavaScript—nothing else—so you could just insert the jQuery there.

11

Sounds like a jQuery setup issue to me on WP.

But I know nothing about WP, so I don’t know what he should do to fix it or make sure he has it included.

@ikz

You actually have a lot going on in your code. If you want to convert it you can use this as a reference to see what each part is doing…

It’ll be easier to get jQuery included into your oikext though.

12

It would help if we knew a little more about this particular instance of WP. Is it a site hosted at wordpress.com, or is it a personally installed one? Is there access to cpanel? What’s the theme being used?

It maybe that there are other ways to ‘place’ the code, rather than trying to enter it via, what appears to be, a back-office text box.

13

It’s a personally installed one, I have access to the cpanel. There are some files in the JS folder such as jquery.js, would I just put the code in there? I have no knowledge of JQuery or JS.

14

I’ve managed to get it to work on all the pages besides the homepage. Don’t know why.
This is the full code for the buttons in the header:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'>$(document).ready(function(){ $('#login-trigger').click(function(){ $(this).next('#login-content').slideToggle(); $(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('▲') else $(this).find('span').html('▼') }) });</script><nav> <ul2> <li id='login'> <a id='login-trigger' href='#'> Login <span>▼</span> </a> <div id='login-content'> <form> <fieldset id='inputs'> <input id='username' type='email' name='Email' placeholder='Your email address' required> <input id='password' type='password' name='Password' placeholder='Password' required> </fieldset> <fieldset id='actions'> <input type='submit' id='submit' value='Log in'> <label><input type='checkbox' checked='checked'> Keep me signed in</label> </fieldset> </form> </div> </li> <li id='signup'> <a href=''>Sign Up</a> </li> </ul2> </nav>

15

How many browsers did you test that in? according to the specification you can either reference a script or having script content.

1 Like
16

Here’s your problem. These need to be separate script tags.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script>
    $(document).ready(function(){ $('#login-trigger').click(function(){ 
     // blah blah blah
    });
</script>
17

Still doesn’t work on the homepage. On every other page it works fine, I’ve tried in different browsers too.

18

Have you tried noconflic?
https://api.jquery.com/jquery.noconflict/

19

Also if it is wp:
is the jquery actually enqueued in the functions.php?
Because i know from experience it is not always. And is your script enqueued there as well?
And are they enqueued as true of false?
Just how much access do you have to your theme?
D

20

For example this is how i call the libraries in my functions.php

wp_enqueue_script( 'agileart-query', get_template_directory_uri() . '/js/jquery-1.11.3.min.js', array(), '20151028', true );
wp_enqueue_script( 'agileart-queryui', get_template_directory_uri() . '/js/jquery-ui.min.js', array(), '20151028', true );