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!

Responsive Multi-level Navigation bug

I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue

I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it

Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

jQuery drop in Social Sharing Buttons at the Bottom if inline buttons are not on screen

I'm looking for an Event which is triggered as soon as an Element (inline sharing buttons) scrolls out of page. I'd like to use this to trigger the drop in of social sharing buttons from the bottom of the page. You may have seen such side behaviour already on buzzfeed.com on mobile devices. If the sharing buttons come back in, the bottom sharing buttons should fade out again.
I'd prefer to only use CSS3 however I think some js (jQuery) may be necessary.
Anyone knows a library or some lines of code doing this?
Thx I really appreciate your expertise!

You could try like this
JS:
$( window ).scroll(function() {
if($( window ).scrollTop() >= socialButton.offset().top + socialButton.outerHeight())
hiddenSocialButton.stop().animate({'bottom': 0}, 100);
else
hiddenSocialButton.stop().animate({'bottom': -hiddenSocialButton.outerHeight()}, 100);
})
jsfiddle demo

Please refer to this question. Used the reference to code this
HTML :
<div class="container">
<div class="social_links">Social Links</div>
<div class="bottom_links">Bottom Links</div>
</div>
JS :
function triggerFunction()
{
if(isScrolledIntoView('.social_links'))
{
$('.bottom_links').fadeOut();
}else{
$('.bottom_links').show();
}
}
DEMO HERE

Jquery sliding div disappearing

I'm doing a jquery site and I have a slide in and out div that I'm using to show share buttons. I'm using the same code on multiple pages. On my first page it works great with no problems but every other page the div will slide out but slide right back in. It doesn't stop. Very confused.
Here I have a fiddle and in the fiddle it works great! But when I use the same code on other pages it's not working correctly. http://jsfiddle.net/4hUzH/
<script>
$(function() {
$('.toggleNotes').click(function() {
$nextArticle = $(this).next('.article');
$nextArticle.is(':visible') ? $nextArticle.slideUp() : $nextArticle.slideDown();
return false;
});
});
</script>
<style>
.article {
display: none;
}
</style>
Click here
<div class="article">
This is where the buttons show up.
</div>
Can anyone explain why it slides out and right back in?

Turns out in my top.php I was also calling the same function. So it was calling the instance twice. It only needs to be called once. Silly mistake.

What is the best way of sliding section of html using javascript?

I have a hidden section in my Html template (Am using Django templates), the hidden section is a login form, i want when a user clicks some login text(link), the html text hidding the form should slide downwards revealing the form.
I have a feeling this can be done in Javascript!
Am using django, please give step by step details of how to include the javascript in my project.
Help
Gath

To continue on Travis' response;
<script type="text/javascript">
$(document).ready(function() {
$("#toggleForm").click(function () {
$("#loginForm").slideToggle("slow");
});
});
</script>
<div id='toggleForm'>Show Login</div>
<div id='loginForm'>
Your form goes here!
<div>
i.e. slideToggle() is your friend.

I don't use Django, but I can tell you that JQuery will do exactly what you want. You will need to include the JQuery library, and then use the slideDown() and slideUp() functions to show your form.
Here's a rough example of what you are after. Check the JQuery documentation for more information
<script>
$("#toggleForm").click(function () {
if ($("#loginForm").is(":hidden")) {
$("#loginForm").slideDown("slow");
} else {
$("#loginForm").slideUp("slow");
}
});
</script>
<div id='toggleForm'>Show Login</div>
<div id='loginForm'>
Your form goes here!
<div>

If you're using jQuery, something like this should do the trick
$('.login-link').bind('click', function(e) { // bind event handler to click of login link
$('#login-panel').slideDown(); // slide down the panel
e.preventDefault(); // stop the link taking you to the js disabled login page
});
Of course, this is only a starting point, as you'd ideally want to be able to slide it up and down on each consecutive click.