Develop Reference

Trigger .click() on a link on mobile view only

So I'm currently working on a WordPress website with a Table of Contents plugin. All the plugin do is just detect headings and add them to its contents.
What I am trying to achieve on my current website (https://staging.vladesplana.com/planning-center-vlad-test) is that when the Window is at <= 768px, it should simulate a "click" event on the [ Collapse ] anchor link so that the Contents will be hidden on mobile load and only be Expanded when on Desktop pixels (1280px, etc) load
function tocToggle2() {
if (window.innerWidth <= 768) {
document.getElementsByClassName('lwptoc_toggle_label').click();
}
}
window.onload = tocToggle2;
May I know your thoughts or the proper code for this? I mainly just build websites on Elementor and know only basic Javascript.
Tried a few things as well from my searches and on Stack to no avail.
I use Custom CSS & JS plugin to insert CSS and JS codes into my WordPress website so please, no JQueries
EDIT: Corrected some of the codes.

Oh I think I got it.
I just added [0] on this line:
document.getElementsByClassName('lwptoc_toggle_label')[0].click();
Source:
https://www.geeksforgeeks.org/click-method-not-working-and-console-returns-an-error-message-in-javascript/#:~:text=click%20is%20not%20a%20function,you%20have%20written%20a%20document.
Since it says there:
If you spelled it correctly then probably this error arises because you are not aware that document.getElementsByClassName returns an array of elements, not a single element. In order to avoid the error, you need to access a single element and then perform a click().
I checked in the console as well to check if the function is working as intended but it throws an error there.
final code:
function tocToggle2() {
if (window.innerWidth <= 768) {
document.getElementsByClassName('lwptoc_toggle_label')[0].click();
}
}

Instead of using getElementsByClassName, which will give you a list with every matching element, use querySelector, which will return the first one it finds.
The reason your code isn’t working is because you can’t trigger a click on a list of nodes.

Replacing paragraph tag contents with a random word from javascript

When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.

The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").

The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.

Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});

Dynamically creating jQuery Dialog box & append it to DIV . Dialog is created but not within the DIV

$('.image').draggable({
revert:'invalid',
helper:'clone',
});
$('#content').droppable({
accept:'.image',
drop:function(event , ui{
$('<div>').appendTo('#content').dialog();
}
});
Dialog gets created but not within the CONTENT div. It gets created under the body !
why it doesn't append under CONTENT ?

I believe this Blog post may help explain it better than I can
http://blog.pengoworks.com/index.cfm/2007/10/26/jQuery-Understanding-the-chain
jQuery always references the first element in the chain, unless you
use a command that explicitly changes the chain.
If anyone has a reference to the above quote on the jquery site please post it as I would also like to refresh my knowledge on that one ..
UPDATE:
Actually the above may not be your problem (left in as its still valid) it seems that Dialog itself has some issues as to where it actually gets added see here: http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
These seem to have been resolved, so it does depend on your version of jquery UI see here:
http://api.jqueryui.com/dialog/#option-appendTo
$('.image').draggable({
revert:'invalid',
helper:'clone',
});
$('#content').droppable({
accept:'.image',
drop:function(event , ui{
$('#content').dialog({ appendTo: "#content" });
}
});

The dialog()-function moves it out of the #content div. Created a small fiddle, where just a regular (non dlg) div is inserted into #content -> works. Then i inserted another div in the html (non-javascript) and made that a dialog -> moved out of #content

firefox offsetWidth not reporting anything.

I'm trying to do some dynamic resizing using javascript. For part of this I need to report the current size of a container. I wrote a function to do this (below) and it works great in chrome... however in firefox the width does not get reported. I have had a read on the offsetWidth method and in theory it should work in firefox.
function currentBoxW() {
return document.getElementById("wrapper").offsetWidth;
}
All this reports is "NaN".
There is more in that function in the actual page, but all the additional code has been commented out for testing... this is the actual line that does the reporting.
Have I missed something or is there a smarter way to report width using JS and the DOM? Is there another way to get the width of a div?
Thanks.

You can have two problems:
Make sure you have explicity set the width of the element (wrapper) through CSS
Make sure javascript code is executing after document is ready.
window.onload() or something similar if you are using any other javascript libaries
If you can use jquery instead
you can easily get it using
$(document).ready(function(){
function currentBoxW() {
return $('#wrapper').width();
or
return $('#wrapper').innerWidth(); //depending on the requirement.
}
});

expanding section on a HTML

There's this website http://www.phpvideotutorials.com/ I basically wanted to get some insights on how each right and left columns expands dynamically when these respective columns are clicked and contracts from expanded state when clicked again.
I'm new to web development, at least dynamic website development using jQuery and stuff.

You can check out the source code. The (simplified) operative part is here:
var dm = $('#developermonkey');
dm.bind('click', function(e) {
dm.animate({'right' : 400 });
});
So it's binding a click event to a function, which animates the element's right CSS property.

It's done with a javascript library called jQuery http://jquery.com you can read more about it there and see examples of how it works.

This can be found from view source. Please refer this code,
HTML
<div id="left">text
<a id="lefta">click</a>
</div>
JavaScript ​
$('#lefta').bind('click', function(e) {
$('#left').css({'width' : 200 });
$('#left').animate({'left' : 150 }, 400);
});
​
Here in example I am increasing width of div also so as to explain you how jQuery css function works so that you can use to set additional css style while moving your div. Please refer following fiddle.
http://jsfiddle.net/TqCmB/