We Keep Coding

Update CSS Variable with Javascript On page load without causing a flicker or glitch

I am using one HTML file as the template for many pages and want to show different coloured buttons and links on some pages. I am trying to use CSS VARIABLES so that I can update them with javascript. But it all happens once the JS is loaded which causes a glitch.
Can anyone suggest a better solution or any alternative approach?
Project uses Jquery, Bootstrap and a Laravel backend.

Wordpress, Meta Slider navigation control don't appear

I'm developing a theme for an online store from scratch, I used underscores and Bootstrap and now I want insert a slider with the MetaSlider Plugin.
The problem is that I have no controls, and also the slider is not working, get stuck in the first image.
The curious thing is that in the admin page when I click on "save and previsualize" it works perfectly.
I inspected the code and I realized that the <ul> element that contains the controls is not there, so is not a css problem.

Check if there is no any conflict with another plugin. It may cause if there is another version of jQuery library that embedded in the page.

3rd Party Script Breaking my JS

I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)

Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!

The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.

Editing Source Code in Wordpress

The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.

If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging

In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org

JS is not loading correctly, where is the fault?

I have a website where I want to use MagicZoom.
Everything would be fine since it is easy to implement, but there seems to be an error when loading the js file.
I will send you the website which is currently under construction.
MagicZoom should be implemented there, where you chose your fabric, for a close-up.
I think, but of course this is only my opinion and I'm not an expert, that the problem occurs because the div container with the picture is created dynamically from another PHP file and not present onload. Therefore the JavaScript does not work properly.
You will see that in the second step the zoom does not load although the class is set correctly.

Your error says "prettyPhoto is not a function". This tells me that some script is trying to use the "prettyPhoto" object before that script has been included on the page.
Looking at your HTML header, I see that is among the last of the <script> tags. Try moving the <script> tag where you include that library in your HTML header up a couple of lines, above some of the other includes. Be aware - you can't move it above the includes for jQuery!
Try that out, let us know.