We Keep Coding

Problem with a JS code that delays generating elements/divs

I have a problem with JS code that suppose to delay showing certain elements on the website that im currently designing.
Link to website: https://parlourplaces.de
JS Code:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function () {
// Hide the div
$(".header_desktop").hide();
// Show the div after 5s
$(".header_desktop").delay(3500).fadeIn(1000);
});
$(document).ready(function () {
// Hide the div
$(".slider_main").hide();
// Show the div after 5s
$(".slider_main").delay(6000).fadeIn(2000);
});
</script>
Main menu and slider should fade in after specific time. Function works properly.
Problem is that one line is breaking lots of stuff on my website. For example mobile menu is not showing up after click, or modals also doesent want to work.
Problematic line:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
Is there any other way to correct the code or change it to diffirent one so the problematic line wont be included? Without it, fade in function with delay is not working at all, and if I include it, then some functionality of Oxygen Builder doesn't work.
Thanks for all help in advance! Cheers!

Javascript conflict in Wordpress between Theme and Gallery Javascript

I have been working on a specific justified gallery for more time than I care to admit, but I have finally managed to get the gallery looking how I need and all the javascript working.
I did all my testing in Dreamweaver but when it finally came to moving what I had into my Wordpress website there seems to be a conflict with some of the javascript already on the site and the javascript I need to make my gallery work.
I have included all my custom javascript into the footer as follows:
JAVASCRIPT
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/libs/jquery/jquery.min.js"></script>
<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js"></script>
<link rel="stylesheet" href="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css" type="text/css" media="all">
<script>
jQuery(document).ready(function($) {
$('.x-nav > li.current-menu-item').removeClass("current-menu-item");
});
</script>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
jQuery(".back").toggleClass('flip');
});
});
jQuery( document ).ready(function() {
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
jQuery(".back2").toggleClass('flip2');
});
});
</script>
<script>
$('#liveDemo').justifiedGallery({
rowHeight : 190,
sizeRangeSuffixes: {
'lt100':'_t',
'lt240':'_m',
'lt320':'_n',
'lt500':'',
'lt640':'_z',
'lt1024':'_b'
}
}).on('jg.complete', function () {
$(this).find('a').colorbox(colorboxConf);
});
</script>
I have figured out What is causing the conflict is the jquery.min.js It is stoping Revolution Slider from working and also causing a problem with a testimonial slider (it shows all the slides at once), and my fixed nav-bar is no longer fixed.
Is there a way to find out what is causing the conflict?
Website in question is www.dangoodeofficial.co.uk
Thank you,
Dan

You shouldn't include Javascript libraries like jquery.justifiedGallery.min.js and jQuery in the footer by a link; you need to correctly enqueue Javascript in WordPress in the theme's functions.php file. See https://codex.wordpress.org/Function_Reference/wp_enqueue_script
As a result, you have two copies of the main jQuery library being loaded.
The jQuery document ready functions can be added in the header or footer with <script type="text/javascript">**</script> tags.
You've got lots of Javascript errors in the console. Use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see what javascript is loading on your site and the errors.

The cause of the conflict could be the inclusion of the jquery.js file. You don't need to include jquery separately in your plugin. By default, WordPress is shipped with a jquery file and it is available for use off the shelf.

kwicks slider loading but mouse hover not working

I have added kwicks javascript , css , jquery but the slider is not working
I tested the website in firebug and it's not showing any error or undefined variable
http://demo2.inheritedarts.com/george/
can some one help me finding a bug ? is it in my code or something i am doing wrong

try adding this script in your <head></head> tag
<script type='text/javascript'>
$(document).ready(function() {
$('.kwicks').kwicks({
maxSize : 250,
behavior: 'menu'
});
});
</script>
i think you forgot to initialize your ul element with kwicks API

Loads style and/or animation before show the page

I need some advice about my problem.
I'm using a JQ Multiselect and JQ Uniform to make more of the pages hotties.
The problem is.... The JQ are applied after the page has already loaded and it happens that you see the page without the "effects" (for about 1 second) and then start the effects / styles.
And this thing is horrible and frustrating.
Before writing here I took a tour on StackOverflow and on the internet but I can not find the solution to my problem.
Note: obviously, in the head tag I have the src of single js and othe tags before and after my "Javascript problem".
I tried with
<head>
<script>
$(document).ready(function(){
$(window).load(function(){
$('#SomeID').multiselect({});
});
});
</script>
</head>
and with
<head>
<script>
$(window).load(function(){
$('#SomeID').multiselect({});
});
</script>
</head>
but is the same thing!!!
You think there's a solution?

Do CSS display: none on the body or all the main sections of your page, so that when the entire page is loaded all the contents of it are hidden. You can then use whatever JavaScript effects you want to change the display property.

jQuery Mobile + Flexslider2

I'm having huge troubles getting jQuery Mobile to work with other Javascript libraries - in my case Flexslider 2 (http://flex.madebymufffin.com/examples/basic.html).
I have a couple of pages where I want to use the flexslider in addition to jQM. Unfortunately, the slider doesn't work / isn't loaded when I click on links on my site.
I know this is because of the way jQM loads pages - by loading them with AJAX and adding them do the DOM.
I've been looking around for hours now to find out how to use events like "pageshow" and "mobileinit" etc but I just can't get it to work, so any help is really appreciated.
Heres what I'm doing now:
In each < head > part of my pages:
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="js/jquery.flexslider2.js"></script>
<script type="text/javascript">
$('#flexslider').bind('pageshow', function(){
$('.flexslider').flexslider({
animation: "slide",
});
});
</script>
This works when I reload the page manually, however it doesn't work when I visit the page through a link on my site.

You can add rel="external" or data-ajax="false" to the link of FlexSlider page, which can disable the Ajax loading of page. You can refer to the document here

Try putting it inside a callback of pageinit. Like so...
$(document).bind('pageinit', function(){ $('.flexslider').flexslider({ animation: 'slide' ); });
I'm sure someone more knowledgable can chime in as to why this is necessary, but I'm 99% sure it's the way to go.
Enjoy!

I had this same problem. Flexslider on the index page of a Jquery Mobile site would work when first navigated to, but not if returned to through the menu or back button.
I used the 'pageshow' event rather than the ''pageinit' event and it worked perfectly:
$(document).bind('pageshow', function() {
$('.flexslider').flexslider({
animation: "slide",
});
});