Develop Reference

Issues with Bootstrap NavBar Submenu changing position on click

I've created a navigation bar with sub menus, using Bootstrap v4.2.1. Hovering OnClick are implemented through Javascript. Problem is whenever I load the page and hover over a submenu item, the menu opens up but appears right below the item. When I click the menu, it disappears and reappears on the right side of the submenu. Ideally, I'd want to have the submenu appear at the right side of the dropdown menu, not appear at the bottom upon initial hover. I'm suspecting that there might be something I might've missed in my Javascript but I could be wrong. Any help/advice would be greatly appreciated.
Here's my fiddle: https://jsfiddle.net/fzev07tb/
//Script to toggle navbar dropdown
$(document).ready(function() {
$('.navbar .dropdown-item').on('click', function(e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({
"top": -999,
"left": -999
});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function() {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
//Script for OnHover OnClick NavBar Item -->
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
});

Add a click functionality to sidebar without affecting its toggle feature

I have a sidebar and I have a button which toggles the sidebar on click. I have a jQuery function which does that. I have a new functionality now, where, if the sidebar is open and the user clicks any of the list items in the sidebar, it toggles back and some function will be excecuted.
The Problem:
When I click the li inside the sidebar, the toggle button is waiting for it's second click (my guess). So if I add toggle on clicking sidebar li, the main toggle button functionality breaks. How do I keep both without affecting each other. I hope I have made myself clear. Here is the code.
JS
// code for sidebar toggle in jQuery
$.fn.toggleClick = function () {
var methods = arguments,
count = methods.length;
return this.each(function (i, item) {
var index = 0;
$(item).on('click', function () {
return methods[index++ % count].apply(this, arguments);
});
});
};
//for opening sidebar
function openSidebar() {
$('#sg-evm-sidebar').animate({
left: 0
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 300
}, 300)
$('.content-overlay').delay(300).show();
}
//closing sidebar
function closeSidebar() {
$('#sg-evm-sidebar').animate({
left: -300
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 0
}, 300)
$('.content-overlay').delay(300).hide();
}
//$(".empName").on("click", function () {
// closeSidebar();
//});
// calling toggleclick here
$('.toggle-box').toggleClick(openSidebar, closeSidebar);
Here is a JS FIDDLE. I created it from my huge website. So please ignore broken images.

I've updated your fiddle: http://jsfiddle.net/qvksx30g/4/
I've added some basic logic
var sidebarOpen = false;
function toggleSidebar()
{
if (sidebarOpen)
closeSidebar();
else
openSidebar();
}
And then inside openSidebar and closeSidebar I set sidebarOpen.
I also no longer use toggleClick. Instead I'm using:
$(document).on('click', '.toggle-box', toggleSidebar)
.on('click', '.list li', closeSidebar);

You could keep track of the sidebar state (open or close) using a class on the sidebar wrapper ("close" or "open"), and then use this class to determine in your click listener if you have to call closeSidebar or openSidebar.

Scroll bar not scrolling after active div is closed

I have a fixed menu system that slides out and covers 100% of the screen once it is pressed. When it is active the the main scrollbar you will have the ability to scroll through the menu in the active div. Once you close the menu the scrollbar will not allow me to scroll the whole site anymore, it will only scroll the length of the div the slides out.
How can I fix this issue? I need the scrollbar to control the menu once it is active, then have the ability to scroll the whole site once the menu is not active.
Here is my JS and the full code http://jsfiddle.net/8P9kh/8/
$(function(){
window.status=0;
$('#menu').click(function(){
if(window.status==0){
$('#slidingMenu').stop().animate({left:'0px'},500);
window.status=1;
$('body, html').css('overflow','hidden');
}
else{
$('#slidingMenu').stop().animate({left:'-100%'},500);
window.status=0;
$('body, html').css('overflow-y','scroll');
}
});
})
//Close menu when you click Footer
$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('').is('.open')) {
$('')
.removeClass('open')
.animate({
'bottom': "-=200"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('footer').slideUp(400);
}
});
$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=200"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#dropFooter').slideToggle(400);
}
}
});

Right now, you're setting the CSS overflow property to hidden when the menu shows up, but then setting overflow-x property to scroll, leaving the overflow property at hidden. Reset the overflow property back to auto:
$('body, html').css('overflow', 'auto');

How to use .hover and .click on same element

The idea is to move a div downwards slightly when hovered and when clicked to move further down to reveal content. The problem is that when you have clicked the div and it moves down you are no longer hovering on it so it performs the 'close when not hovered function.
$(function () {
$('.more').hover(function () { //Open on hover
$('#pull_down_content').animate({
'top': '-360px'
}, 1000);
}, function () { //Close when not hovered
$('#pull_down_content').animate({
'top': '-380px'
}, 1000);
});
});
$('.more').click(function () { //Move down when clicked
$('#pull_down_content').animate({
'top': '0px'
}, 1000);
});

Put a class on the element to signify that it has been clicked, and do not close it if it has that class:
$(function() {
$('.more').hover(function(){ //Open on hover
$('#pull_down_content').animate({'top':'-360px'},1000);
},
function(){ //Close when not hovered
if (!$('#pull_down_content').hasClass("expanded"))
$('#pull_down_content').animate({'top':'-380px'},1000);
});
});
$('.more').click(function(){ //Move down when clicked
$('#pull_down_content').addClass("expanded").animate({'top':'0px'},1000);
});
Of course you now need another trigger to determine when exactly to undo the hover animation after the item has been clicked; how to do that exactly depends on the effect you want to achieve.

The problem is that when you have clicked the div and it moves down
you are no longer hovering on it so it performs the 'close when not
hovered function.
I'm not sure I get it? You do know that the element with the bound events is not the same as the one that you are animating ?
Anyway, something like this maybe:
$(function() {
$('.more').on('mouseenter mouseleave click', function(e) {
if (!$(this).data('clicked')) {
var Top = e.type==='mouseenter' ? '-360px' : e.type==='click' ? '0px' : '-380px';
$('#pull_down_content').stop().animate({'top': Top}, 1000);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$('#pull_down_content').stop().animate({'top': '-380px'}, 1000);
}
}
});
});
FIDDLE

I've got a problem with a toggling sidebar using jQuery

I'm trying to create a simple toggling sidebar using jquery, where it expands and contracts when a button is pressed. The button also changes to another type of button when pressed. The sidebar will expand, but for some reason, it will not move back to it's original position.
You can see a copy of the javascript and html at http://www.jqueryhelp.com/viewtopic.php?p=4241#4241
Here is the working code, thanks Bendeway! :D
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 100}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});

try instead of right use left with a negative number. in addition I would recommend using preventDefault instead of returning false.
$(".active").click(function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide");
});
Update
Another piece i just noticed is that your attaching a click event to the .active button, when the document is ready, but there is no .active button when the document is ready that comes in after you change it. There are a couple options here.
First is to use the new live feature of jquery 1.3
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
The other option would be to have set the click event on a different modifier (eg. on the id, maybe).
<span>News <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>
then use this to handle the click
$("#sliderButton").click(function(e){
e.preventDefault();
$(this).is('.btn-slide').each(function() {
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
});
$(this).is('.active').each(function() {
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
});
$(this).toggleClass("active").toggleClass('btn-slide');
});
or even more concise
$("#sliderButton").click(function(e){
e.preventDefault();
var animationSettings = {opacity: "show", left: 250};
if ($(this).hasClass('active') )
{
animationSettings = {opacity: "hide", left: -250};
}
$("#sidebar").animate(animationSettings , "slow");
$(this).toggleClass("active").toggleClass('btn-slide');
});
The final option that I can think of would be to set the click events after you change them, but I wouldn't do that so I'm not going to supply a sample.
Lastly, I would put in alert into your active callback and make sure that your active button event is actually firing.

The way your logic is written, I think you need to do a 'toggleClass' on both classes inside your click handlers which will add one and remove the other. For example, when your "active" item is clicked you toggle (add) the btn-slide class, but this will leave the "active" class in place too.
Of course instead of using "toggleClass" you could also use "addClass" and "removeClass" to be more explicit.
I recommend using a tool like Firebug to watch what's happening inside your DOM.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").animate({opacity: "show", left: "250"}, "slow");
$(this).toggleClass("active"); // add class
$(this).toggleClass("btn-slide"); // remove class
return false;
});
});
$(document).ready(function(){
$(".active").click(function(){
$("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
$(this).toggleClass("active"); // remove class
$(this).toggleClass("btn-slide"); // add class
return false;
});
});

This works.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});

$(function() {
var ecswitch = 1;
/* prevent the annoying scroll back up thing */
$("#ec").click(function(e) {
e.preventDefault();
var x = $("#main").width(); // get element width
var y = $("#main").height(); // get element height
if (ecswitch == 1) {
$("#main").animate({
opacity: 0,
hieght: "0",
width: "0"
}, 1300);
ecswitch = 0;
} else {
$("#main").animate({
opacity: 1,
hieght: y,
width: x
}, 1300);
ecswitch = 1;
}
});
});
#main {
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
Expand / Contract
<div id="main">
Watch Me Shrink Or Grow
</div>
</div>
I chose to do this a little differently. this initializes with the height of our experiment being 200px and the width is automatic. When you click the hyperlink the experiment is hidden in 1.3 seconds and a switch is set to 0. when you click again it comes back over a period of 1.3 seconds and the switch gets set back to 1. like a light switch. I used the animate here because a simple fade or hide got me bored...
The reason why I got the widths and heights of the element before zero-ing them was if said width:100%" and height: "100%" in my animate it would set it to 100% of the page's width and height...we don't want that.
NOTE: I am also using the opacity over a time period. quite nice for fading as well :)