We Keep Coding

jQuery - Resetting the height of an element not working

What I am trying to do is grab the height of the dropdown menu from the off-canvas menu and set it to the UL so it covers the height from where the menu is currently sitting. So If the dropdown menu is long in height, the div it's in should expand and the border-bottom should always be visible.
If you click on Corporate a few times, then click on SME and then back to Corporate, the corporate dropdown menu is sitting on top and of the DIV and the height is not being reset. I'm quite bad when it comes to explaining stuff, so take a look at the site here: Site URL
Here is the jQuery
// SLIDE OUT MENU
$(".menu-blue-bar button").on("click", function(e) {
$(".menu-blue-bar").toggleClass("menu-slide");
$(".menu-blue-bar button").toggleClass("is-active");
$(".menu-blue-bar .fade-in-menu .row").toggleClass("in-view");
e.preventDefault();
});
jQuery(
"<li class='back-button'><i class='icon icon-carousel-left-arrow'></i></li>"
).insertBefore(
".menu-blue-bar .main-menu-links .dropdown-menu li:first-child"
);
jQuery("li.back-button").on("click", function() {
jQuery(".menu-blue-bar ul.dropdown-menu").removeClass("show");
jQuery("ul.navbar-nav").css("height", "");
console.log("clicked back arrow");
});
jQuery(".menu-blue-bar .navbar-nav > li.dropdown").on("click", function() {
if (!$(".menu-blue-bar ul.dropdown-menu").hasClass("show")) {
$(".main-menu-links ul.navbar-nav").css({
height:
$(this)
.find("ul.dropdown-menu")
.height() + "px"
});
}
});
Screenshot: screenshot link

You're not providing a value when you "reset" the height
jQuery("ul.navbar-nav").css("height", "");
Isn't a valid unit size in CSS.
Instead, try either setting the height to 0 or initial
jQuery("ul.navbar-nav").css("height", "initial");
Also the word height should be a string (add quote marks).
This
$(".main-menu-links ul.navbar-nav").css({
height:
$(this)
.find("ul.dropdown-menu")
.height() + "px"
});
Should be
$(".main-menu-links ul.navbar-nav").css({
"height":
$(this)
.find("ul.dropdown-menu")
.height() + "px"
});
There might be more but start with that.

Unable to find code that hides left menu on smaller screens

I've been asked to make an update to the left side nav menu on our website whesearchreporting.com (you can enter anything for the username & password, if you'd like to access the site. Site's still in test mode). Currently, the nav menu is visible on full width screens, but if you reduce your screen width to around 900px), the menu disappears but can be expanded via a menu toggle icon in the top left. They would now however, like to change this logic to the following, which I'm having problems figuring out how to fix:
On a full screen, there is no menu toggle button visible in the top left. The menu always stays open
On a small or mobile screen, the menu toggle button becomes visible.
So basically, I need to find the code that handles making the left nav menu disappear when the screen size is reduced to around 950px & apply that same logic to the top left menu toggle icon. Is this something handled in bootstrap?
If it helps, here's some of the code that handles making my nav menu smaller or larger (although I don't think it has much to do with making the menu disappear on smaller screens):
$(function () {
$('#sidebar-menu li ul').slideUp();
$('#sidebar-menu li').removeClass('active');
$('#sidebar-menu li').on('click touchstart', function() {
var link = $('a', this).attr('href');
if(link) {
window.location.href = link;
} else {
if ($(this).is('.active')) {
$(this).removeClass('active');
$('ul', this).slideUp();
} else {
$('#sidebar-menu li').removeClass('active');
$('#sidebar-menu li ul').slideUp();
$(this).addClass('active');
$('ul', this).slideDown();
}
}
});
$('#menu_toggle').click(function () {
if ($('body').hasClass('nav-md')) {
$('body').removeClass('nav-md').addClass('nav-sm');
$('.left_col').removeClass('scroll-view').removeAttr('style');
$('.sidebar-footer').hide();
if ($('#sidebar-menu li').hasClass('active')) {
$('#sidebar-menu li.active').addClass('active-sm').removeClass('active');
}
} else {
$('body').removeClass('nav-sm').addClass('nav-md');
$('.sidebar-footer').show();
if ($('#sidebar-menu li').hasClass('active-sm')) {
$('#sidebar-menu li.active-sm').addClass('active').removeClass('active-sm');
}
}
});
});
And here's the html for that code section:
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
Any idea where I should be looking to find the code that handles making that menu disappear on smaller screens?
Thanks

You should search for #media queries in your Content/css/custom.css file

jQuery scrollTop to top of container div

I am using the excellent accordion menu provided by Ian Flynn of RocketMill: http://www.rocketmill.co.uk/create-accordian-boxes-with-a-rotating-arrow-using-css-jquery
This has worked well for me in the past, but I have a new client that leans towards the verbose. This presents a problem when the user attempts to click on their next desired accordion link. The accordion works correctly, but the hyperbolic amount of content shoots off of the page, presenting an obvious usability issue.
What I want to do is to reconcile the top of the active (just clicked on) "menuTitle" div with the top of its parent, the "content" div.
<div id="content">
<div class="menuTitle">
<strong>Title 1…</strong>
</div>
<div class="menuContent"> <!-- Sliding content box -->
<h5>Sub-title 1</h5>
<p>Content</p>
</div> <!-- End of div class="menuContent" -->
<!-- THE ABOVE SEVEN LINES REPEAT FOR EACH FOLD OF THE ACCORDION -->
</div> <!-- End of div id="content" -->
I have been working on this for about three days and have consulted many, many sites, jQuery guides, and whisky. I am not a jQuery expert. Please help!
Oh… I made a jsFiddle. My first: http://jsfiddle.net/Parapluie/CRXX8/

well, if i understand what you want..
http://jsfiddle.net/CRXX8/4/
$(document).ready(function() {
$('#content .menuTitle').on('click',function() {
$('#content .menuTitle').removeClass('on'); // "closes" the closing menu arrow
$('#content .menuContent').slideUp('normal'); // slide-closes the closing div
if($(this).next().is(':hidden') == true) {
$(this).addClass('on'); // "opens" the opening menu arrow
$(this).next().slideDown('normal',function(){
$('html,body').animate({scrollTop:$(this).prev().offset().top}, {queue: false,duration:250, easing: 'swing'}); // on complete slidedown, scroll the clicked .menuTitle to top of page
});// slide-opens the opening div
}
}); // end of click event
}); // end of ready
UPDATE:
As your called elements are wraped in a div called '#focusWide', you dont have to scrollTop html,body, you have to scrollTop the wraper div '#focusWide' and use position().top istead of offset().top. And i add more '11px' (half of wraper div padding).
$('#focusWide').animate({scrollTop:$(this).prev().position().top + 11 + 'px'}, {queue: false,duration:250, easing: 'swing'});
http://jsfiddle.net/CUu7h/2/

I use the function shown below, which works great in most cases. Just make sure the container/wrapper is scrollable (using overflow-y:auto). See fiddle
function scrollIntoView(oElement, sContainer, fnCallback) {
var oContainer, nContainerTop, nContainerBottom, nElemHeight, nElemTop, nElemBottom;
if (!oElement || oElement.length <= 0) {
return;
}
oContainer = (typeof sContainer == "object" ? sContainer : $(sContainer));
nContainerTop = oContainer.scrollTop();
nContainerBottom = nContainerTop + oContainer.height();
nElemHeight = oElement.height() || 25;
nElemTop = oElement[0].offsetTop - 50;
nElemBottom = nElemTop + nElemHeight + 100;
if ((nElemTop < nContainerTop) || (nElemHeight >= $(sContainer).height())) {
oContainer.animate({ scrollTop: nElemTop }, { duration: "fast", complete: fnCallback });
}
else if (nElemBottom > nContainerBottom) {
oContainer.animate({ scrollTop: (nElemBottom - $(sContainer).height()) }, { duration: "fast", complete: fnCallback });
}
else if (fnCallback) {
fnCallback();
}
}

How to change image with onclick while a list is using slideup and slidedown

I would like to change the src of an img when the parent of listed children is clicked. I am using some code I have been working with that I found on StackOverflow because I was having problems with slideup and slidedown.
Next to each uppermost item (parent), to the left will be an arrow icon pointing to the right. Upon clicking the icon, this image should change to an arrow pointing down.
I can get the image to change onClick, but unless you click on the image, the image does not change back. Therefore, I believe I need the change to be pegged to the slideup and slide down functions. The image should also change back if you click on the close link or when clicking on a new Parent.
I can live without the 'only one list can be shown at a time' functionality, which would eliminate the need for the image to also change on clicking a new parent.
For this fiddle, I have only applied what I was trying to do to the first parent of the list: http://jsfiddle.net/9aa5n/51/
HTML:
<li><img src="arrowright.png"></li>
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
Close
</li>
jQuery / Javascript:
$(document).ready(function() {
$('.show_hide').slideUp(0);
$('.edit_this').click(function() {
$('.show_hide').slideUp(300);
var takeID = $(this).attr('id');
$('#' + takeID + 'C').slideDown(300);
});
$('.close').click(function() {
var takeID = $(this).attr('id').replace('Close', '');
$('#' + takeID + 'C').slideUp(300);
});
});
$('#img-tag').on({
'click': function() {
var src = ($(this).attr('src') === 'arrowright.png')
? 'arrowdown.png'
: 'arrowright.png';
$(this).attr('src', src);
}
});

I updated your jsfiddle: http://jsfiddle.net/9aa5n/53/
Since you didn't provide absolute paths to images, I added some from the net.
I removed your click event, and replaced it with this, I believe your issue was how you were referencing the elements in jQuery.
$(".edit_button").click(function() {
var img = $(this).find("img").first();
console.log(img.attr("src"));
if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
console.log(img.attr("src"));
} else {
img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
console.log(img.attr("src"));
}
});
This should get you started to finish polishing up the UI,
i.e. closing all .edit_button and then open only the $(this).find("img").first() element ...

jQuery: set 'active' class in menu from secondary link

I have a standard css/jquery menu where I use addClass/removeClass to set whatever li I am on to 'current'. However, the code to do this uses $(this). I want to also do this same set of procedures from links not in the menu. For example, I would like the menu 'active' flag to be in the right place after following a page link that is somewhere buried in the page content and not in the menu itself.
Menu HTML
<ul class="nav2">
<li class="current">Page one</li>
<li>Page two</li>
<li>Page three</li>
<li>Page four</li>
</ul>
Page HTML
<p>Herein you will find a further description of
page two.
Javascript
$('a[rel=panel]').click(function (e) {
$('a[rel=panel]').parent('li').removeClass('current');
$(this).parent().addClass('current');
//$("a [href='" + $(this).attr('href') + "']").parent('li').addClass('current');
});
(The commented out line is my failed attempt to make the "secondary" link act just like the "primary" link in the menu.)
Help? Thanks!

This should work:
$('a[rel=panel]').click
(
function (e)
{
$('.current').removeClass ('current');
var Targ = $(e.target).attr ('href');
if (Targ)
$("ul.nav2 a[href*='" + Targ + "']").parent ().addClass ('current');
}
);
.
See it in action at jsbin.

As the link (a element) inside the content has no list item (li) element as parent (it is p and you don't show further ancestors), it should just be:
$("a [href='" + $(this).attr('href') + "']").addClass('current');
But that assumes that you defined you CSS accordingly and the class current has effects when attached to a link element.

$('a[rel=panel]').click(function (e) {
$('a[rel=panel]').parent('li').removeClass('current');
// $(this).parent("li").addClass('current');
$(".nav2 a[href='" + $(this).attr('href') + "']").parent('li').addClass('current');
});​
this worked fine over at:
http://jsfiddle.net/s2vxe/
let me know if you need more in this one.

Thanks for the help, I see what you guys are doing, but it isn't working for what I need.
# Felix: I need to set 'current' class for the parent (li) not for (a). Also this is all just 1 page. I am using jquery scrollTo to slide things around onClicks.
# Brock: Your example works perfectly, however:
I am trying to use this in conjunction with jquery lavalamp, and even though the 'current' class gets correctly applied to the right (li) I still cannot get the visual current indicator to stick to the right menu item.
More fully, my code in (head) is:
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/scrollto.js"></script>
<script type="text/javascript">
$(function() {
$(".nav2").lavaLamp({fx: "backout", speed: 500, click: function(event, menuItem) {
return true;
} }); });
</script>
where scrollto.js contains
$(document).ready(function() {
//Get the height of the first item
$('#mask').css({'height':$('#tab-1').height()});
//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div.tab').length));
//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div.tab').width($('#mask').width());
//Get all the links with rel as panel
$('a[rel=panel]').click(function (e) {
//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();
//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800);
//Set class for the selected item
//.parent() added for toggling li classes instead of a classes
//$('a[rel=panel]').parent('li').removeClass('current');
$('.current').removeClass ('current');
//$(this).parent().addClass('current');
var Targ = $(e.target).attr ('href');
if (Targ) {
$("ul.nav2 a[href*='" + Targ + "']").parent ().addClass ('current');
}
//Discard the link default behavior
//return false;
e.preventDefault();
});
$('#mask').scrollTo('#tab-1', 400 );
});
Thanks for any further help!