First of all, awesome theme! Will definitely recommend you :D
Now my question: On one page, I have a div inside another div. The main div has the page content width, but the inside div has a very long horizontal length, so it shows a scrollbar.

It looks like this
—– wrapper div ———-
| [inside div that goes…| ………x (position the user should see)….]
—————————-

Now I want to use jquery to load the inside div scroll at a fixed position, so the user does not have to scroll to right first to main part.

I know I can do that with jquery, and furthermore I want to make the inside div draggable (by jquery again), instead of using the scrollbar.

How do I add the two jquery scripts to a page?
Can I just add the jquery script with wp_enqeue in the page or do I have to add some code to the functions.php?
I also use the https://wordpress.org/extend/plugins/use-google-libraries/.

Sorry for the long text, but I would be super grateful if you could tell me what code to add where to make this work. :)

Thanks!
David

https://api.jquery.com/scrollLeft/

https://jqueryui.com/draggable/

The proper way to include the scripts is ti do it via a child theme in order not to loose the changes when you update to next theme version.

To use a child theme please browse the forum as we have explained it a few times before. Anyway we have provided a starter child theme so just you can use it. To learn more about child themes have a look at https://codex.wordpress.org/Child_Themes.

Now that you know how to use a child theme edit its functions.php file and add the following lines:

‘function krrrks_scripts() {
wp_enqueue_script( ‘script-name’, ‘https://api.jquery.com/scrollLeft/’, array(‘jquery’), null, true );
wp_enqueue_script( ‘jquery-ui-draggable’ );
}
add_action( ‘wp_enqueue_scripts’, ‘krrrks_scripts’ );’

The first “wp_enqueue_script” adds the additional scrollLeft script. You can change the ‘script-name’ handle to what you wish. E.g. ‘scroll-left’. It can be used further in the code.

The second line:

wp_enqueue_script( 'jquery-ui-draggable' );

Loads the draggable script as it is a part of WordPress and there is no need to load it from a third party website.

Please note this will load the scripts on EVERY page. What you could do is add some “if” checks to ensure it is loaded only on the right page.

A second option is to register the first script only by using “wp_register_script” function instead of “wp_enqueue_script” and enqueue both scripts only in the template of the page where your div element is present by loading it using the:

To read more about enqueue and register have a look at this page https://codex.wordpress.org/Function_Reference/wp_enqueue_script

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

However, now I feel stupid, but this is what is in my page editor, how do I add the script to one of these divs?

Thanks again! ^__^

Unfortunately you cannot do it in the content directly as this is PHP functionality.

1. OPTION

You could maybe add a filter for “the_content” and check if the mentioned id is present in the content. If yes, then enqueue the scripts. Something like this:

Not sure if you are allowed to enqueue scripts during the “the_content” filter but if they are registered to be loaded in the footer, and not in header, I guess it should work.

2. OPTION

If not, you could try alternative way and copy the “page.php” to your child theme. Then rename it to “page-THESLUG.php” where THESLUG would be the slug of the page you have created. This way this page will always use the mentioned template. Be careful tough, as if you change the permalink of this page in few months, you will also have to change the template file name. Now just add the PHP enqueues into the code (maybe before the the_content() function call).

Please let us know if and which option worked for you! Thanks

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

I very likely may have done something wrong, but none of both steps worked for me. So I installed the https://wordpress.org/plugins/css-javascript-toolbox/ plugin, which allows me to add PHP/script blocks directly into a page or post.

For others who might be interested, I then just created three block with the following code:

(not sure how I link to the already existing wordpress version for the draggable UI script.)

This is for the outer div, so it jumps to a scroll point.

And this is for the inner div, that has the content, so I can drag it around.

This worked perfectly for me.

Anyway, thank you for your great support and your effort to help me out!! I am probably just too stupid to get it done your way haha

Cheers!
David

Thanks for sharing! This surely can help somebody else as well. The plugin looks very handy. Glad you made it work!

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market