Develop Reference

Position sub-menu item relative to main menu item, but in an outside div

I'm trying to change the sub-menu behavior of a site. The original sub-menu appears as a drop-down, and instead I'd like it to appear in a separate full horizontal div.
So far I've done this:
jQuery(document).ready(function( $ ){
$(".header").append("<div class='subber'><div class='sub-menu'></div></div>");
$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
var a = $(this).find(".sub-menu").html();
$(".subber .sub-menu").html(a);
});
});
... with some css, and it works well. the original sub-menu HTML is copied to the subber sub-menu.
I'd like each subber sub-menu to be positioned relatively to the original menu item, even though they occur in separate areas of the HTML. Can I somehow bind the two?
My HTML code:
<div class="header">
<div id="navigation">
<div class="site-navigation">
<nav class="main-navigation">
<ul class="menu-main-menu">
<li class="menu-item">
some text
</li>
<li class="menu-item menu-item-has-children">
some text
<ul class="sub-menu">
<li class="menu=item">
sub item text
</li>
</ul>
</li>
<li class="menu-item">
some text
</li>
</ul>
</nav>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
</div>

Since there's no actual parent-child relationship in the HTML structure, there's no CSS-way of positioning your new sub-menu relative to a top-level menu item.
Instead, you'll have to manually position the new sub-menu with JS, using the coordinates of the original menu item.
Keep in mind this basic positioning won't create a "stickyness" between the two, so if your main menu moves (e.g. a sliding menu bar with up/down toggle states), you'll have to trigger an update to the sub-menu positioning using a listener and function.
Codepen
$("#menuItem1").mouseover( function() {
/* get original menu */
var origMenu = $(this);
/* grab content out of original sub-menu */
var myContent = origMenu.find(".sub-menu").html();
/* copy content over to new sub-menu outside of navigation */
$(".subber .sub-menu").html(myContent);
/* get the coordinates of the original menu item */
var subberLeftOffset = origMenu.offset().left;
var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
/* re-position the new sub-menu so it appears below the original menu */
$(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
});
#origNavigation .sub-menu {
visibility: hidden;
height: 0px;
}
#menuItem1 {
margin-top: 8em;
margin-left: 8em;
padding: 1em;
width: 200px;
border: 1px solid black;
}
<div id="origNavigation">
<div id="menuItem1">
Hello
<div class="sub-menu">Sub-menu</div>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>

Scroll to top of a specific class within a scrollable div - on each click of up/down button

I have an RSS blog feed (hidden overflow) with buttons on the top and bottom of the div which will smoothly scroll through-out the feed. I'm looking for a way so that on each button click, it will scroll to the top of the next 'rss-item' (class). The div looks like this:
So what I'm trying to achieve is so each time you click the down arrow (or up) the scroll will stop when each 'rss-item' is at the top of the div.
I explored many similar questions but couldn't quite achieve what I wanted.
Here is the function used to smooth scroll within the div:
$(document).ready(function() {
var scrollTime = 900;
$('#upClick').click(function() {
$('#homeBlogs').animate({
scrollTop: $('#homeBlogs').scrollTop() + 200
}, scrollTime);
});
$('#downClick').click(function() {
$('#homeBlogs').animate({
scrollTop: $('#homeBlogs').scrollTop() - 200
}, scrollTime);
});
});
Here is a screen grab of the generated source html:

Ok, so I re-created this as best I could in a jsfiddle. Here is the HTML structure. I've tried to build this according to the screenshot so they should be similar. Note: I've added a CSS class of "active" to the first "rss-item". This should only be applied in HTML to the first item and needs to stay here in order for the Javascript portion to function correctly.
<div id="blogSection">
<div class="row" id="scrollUp">
<button class="scrollButton" id="upClick">Scroll Up</button>
</div>
<div id="homeBlogs">
<div class="rss-box">
<p class="rss-title"></p>
<ul class="rss-items">
<li class="rss-item active">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
</ul>
</div>
</div>
<div id="scrollDown" class="row">
<button class="scrollButton" id="downClick">Scroll Down</button>
</div>
</div>
Next, here is the CSS I used. This is purely to support the demo. I set it up so whichever "rss-item" has the "active" class will be highlighted in red. This should hopefully provide a visual cue as to what's going on when a button is clicked.
button {
display: block;
width: 100%;
background-color: black;
color: white;
height: 50px;
cursor: pointer;
}
#scrollUp {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#scrollDown {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.active {
color: red;
}
Finally, here is the Javascript I used in order to get things done. I've changed it a lot to help make things more efficient and to correct some errors.
$(document).ready(function() {})
//we can use one single event and modify the behavior based on the direction that was clicked
.on('click', '.scrollButton', function() {
var scrollTime = 900,
direction = $(this).attr('id'),
$currentItem = $('.rss-item.active'),
$newItem;
switch (direction) {
case 'upClick':
$newItem = $currentItem.prev('.rss-item');
break;
case 'downClick':
$newItem = $currentItem.next('.rss-item');
break;
}
//if we aren't at the top or bottom of the list already
if ($newItem.length > 0) {
//since we know we can now change the active item, we need to remove this class so we can apply it to the new item
$('.rss-item').removeClass('active');
$newItem.addClass('active');
}
//Now that the logic is out of the way, we can run the scroll animation
//Also, I think you will want to use 'html, body' as a selector so the page itself moves
$('html, body').animate({
scrollTop: $('.rss-item.active').offset().top - 200 //this will keep content positioned correctly, but you shouldn't need both a '+ 200' and '- 200' here. Adjust this value as needed.
}, scrollTime);
});
Finally, here is the jsfiddle: https://jsfiddle.net/sm1215/sebgbnr4/

Menu drawer toggle (slide up/down)

I have a simple menu and from it, i am using jQuery to toggle visibility of few DIV's.
Code is pretty straightforward, like bellow, and if i am not asking too much, i could use some help with additional functionalities.
<div id="one" class="navLinks"> content 1 </div>
<div id="two" class="navLinks"> content 2 </div>
<div id="three" class="navLinks"> content 3 </div>
<div class="nav">
<nav>
1
2
3
Normal Link
</nav>
</div>
$('nav a').click(function() {
$('.navLinks').hide();
$(this.getAttribute('href')).slideToggle('slow')
});
So, currently, if the user click on the link, a div will slide from the top, but except that, i would need 2 more things.
If user opens, lets say link no.2, and after that, he wants to close it by clicking on the same link, div should slide up (instead of down like it currently does).
Similiar to this, if the user opens link no2, and after that wants to open link no1, after the click, that div would need to slide up and be shown.
I know i am asking too much, but any help would be greately appreciated.
FIDDLE http://jsfiddle.net/4rfYB/38/

I suggest using jQuery's not() to exclude the requested element from those being hidden.
That way, you can hide all content areas that are not the requested one.
I've also used slideUp('slow') instead of hide(), purely for stylistic reasons.
$('nav a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.navLinks').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
.navLinks {
display: none;
color: white;
}
div#one {
background: red;
height: 100px;
}
div#two {
background: blue;
height: 80px;
}
div#three {
background: black;
height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<nav>
1
2
3
</nav>
</div>
<div id="one" class="navLinks">content 1</div>
<div id="two" class="navLinks">content 2</div>
<div id="three" class="navLinks">content 3</div>

You can do something like this:
$('nav a').click(function() {
$(this.getAttribute('href')).toggleClass('open').slideToggle('slow',function() {
$(this).siblings('.open').slideToggle('slow').toggleClass('open');
});
});
http://jsfiddle.net/4rfYB/39/

JQuery show and hide div on mouse click (animate)

This is my HTML code:
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
</div>
And I want to show .menu on click on #showmenu sliding from left to right (with animate). On click again on #showmenu or anywhere in site page, .menu will hide (slide back to left).
I use JQuery 2.0.3
I've tried this, but it doesn't do what I want.
$(document).ready(function() {
$('#showmenu').toggle(
function() {
$('.menu').slideDown("fast");
},
function() {
$('.menu').slideUp("fast");
}
);
});

That .toggle() method was removed from jQuery in version 1.9. You can do this instead:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
Demo: http://jsfiddle.net/APA2S/1/
...but as with the code in your question that would slide up or down. To slide left or right you can do the following:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').toggle("slide");
});
});
Demo: http://jsfiddle.net/APA2S/2/
Noting that this requires jQuery-UI's slide effect, but you added that tag to your question so I assume that is OK.

Of course slideDown and slideUp don't do what you want, you said you want it to be left/right, not top/down.
If your edit to your question adding the jquery-ui tag means you're using jQuery UI, I'd go with nnnnnn's solution, using jQuery UI's slide effect.
If not:
Assuming the menu starts out visible (edit: oops, I see that isn't a valid assumption; see note below), if you want it to slide out to the left and then later slide back in from the left, you could do this: Live Example | Live Source
$(document).ready(function() {
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().animate({left: 0});
}
});
});
You'll need to put position: relative on the menu element.
Note that I replaced your toggle with click, because that form of toggle was removed from jQuery.
If you want the menu to start out hidden, you can adjust the above. You want to know the element's width, basically, when putting it off-page.
This version doesn't care whether the menu is initially-visible or not: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
<script>
$(document).ready(function() {
var first = true;
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
}
});
});
</script>
</body>
</html>

I would do something like this
DEMO in JsBin: http://jsbin.com/ofiqur/1/
Click Here
<div class="menu">
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
</div>
and in jQuery as simple as
var min = "-100px", // remember to set in css the same value
max = "0px";
$(function() {
$("#showmenu").click(function() {
if($(".menu").css("marginLeft") == min) // is it left?
$(".menu").animate({ marginLeft: max }); // move right
else
$(".menu").animate({ marginLeft: min }); // move left
});
});

Try this:
<script type="text/javascript">
$.fn.toggleFuncs = function() {
var functions = Array.prototype.slice.call(arguments),
_this = this.click(function(){
var i = _this.data('func_count') || 0;
functions[i%functions.length]();
_this.data('func_count', i+1);
});
}
$('$showmenu').toggleFuncs(
function() {
$( ".menu" ).toggle( "drop" );
},
function() {
$( ".menu" ).toggle( "drop" );
}
);
</script>
First fuction is an alternative to JQuery deprecated toggle :) . Works good with JQuery 2.0.3 and JQuery UI 1.10.3

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click-header").click(function(){
$(this).next(".hidden-content").slideToggle("slow");
$(this).toggleClass("expanded-header");
});
});
</script>
.demo-container {
margin:0 auto;
width: 600px;
text-align:center;
}
.click-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-down.png) no-repeat 50% 50%;
}
.expanded-header {
padding: 5px 10px 5px 60px;
background: url(images/arrow-up.png) no-repeat 50% 50%;
}
.hidden-content {
display:none;
border: 1px solid #d7dbd8;
padding: 20px;
text-align: center;
}
<div class="demo-container">
<div class="click-header"> </div>
<div class="hidden-content">Lorem Ipsum.</div>
</div>

Use slideToggle(500) function with a duration in milliseconds for getting a better effect.
Sample Html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
In your js file, if you need child propagation for the animation then remove the second click event function and its codes.
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
//for stoping child to manipulate the animation
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});

jQuery - mouseOver change div

I have a menu that on each item's mouseover event an image loaded into a second div should change, and onMouseout it should replace with the original content.
At this point I am saving the original content into a var and creating a onMouseover & onMouseOut event each for each menu item.
Jquery:
$(document).ready(function(){
var heroSwap= $('#swapspace').html();
$('#menu1').mouseover(function(){
$('#swapspace').html('<img src="img/1.JPG"></img>');
});
$('#menu1').mouseout(function(){
$('#swapspace').html(heroSwap);
});
.... ..*ETC There are 7 More of these identical except for id*.. ....
});
Question:
Is there any way to create a generic function that can process a parameter from the menu tag?
Would it be easier.. instead of swapping the innerHTML img tags to create hidden divs that are displayed/hidden by the onMouseover/onMouseout events?
Full Sample:
Sample Site

You can create a generic function easily. You can add on the #menu1 tag an attribute with the url of your image and a class name like that :
<li class='menu' data-src='img/1.JPG'></li>
And then create the function like that :
$('.menu').mouseover(function(){
$('#swapspace').html('<img src="'+$(this).data('src')+'"></img>');
});
$('.menu').mouseout(function(){
$('#swapspace').html(heroSwap);
});
As for your second question, i would simply swap the src of you img instead of changing the entire HTML.
$('#swapspace').find('img').attr('src', $(this).data('src')); //on hover
$('#swapspace').find('img').attr('src', ''); //on out

It is better that you store the image src in the data-src attribute. So that you need not use multiple variables for each image.
Then you would not need to change the html, just changing the src attribute would do the trick.
Firstly replace your li to use class instead of id's
HTML
<ul class="nav nav-stacked nav-pills">
<li class="menu" data-src="img/1.JPG"> Web Development </li>
<li class="menu" data-src="img/2.JPG"> Software Development</li>
<li class="menu" data-src="img/3.JPG"> System Support</li>
<li class="menu" data-src="img/4.JPG"> SEO</li>
<li class="menu" data-src="img/5.JPG"> Social Media Marketing </li>
<li class="menu" data-src="img/6.JPG"> Project Management</li>
</ul>
Javascript
$(document).ready(function () {
var $swapImg = $('img', '#swapspace'),
defaultImage = 'default.jpg';
$('.menu').on({
mouseover: function () {
$swapImg.attr('src', $(this).data('src'));
},
mouseout: function () {
$swapImg.attr('src', defaultImage);
}
})
});
This way you would have only one event handler for all the li's , instead of a separate handler for each menu item.

It's actually better to use css for this. It's easier too.
The background can be anything in css, url, color etc.
<div id="menu1" class="menu-item"><div class="img"></div></div>
<div id="menu2" class="menu-item"><div class="img"></div></div>
cont'd.
Simple js hover uses mouseenter and mouseleave http://api.jquery.com/hover/
$(function() {
$(".menu-item").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
Then markup your images with css:
.menu-item {
margin: 0 0 5px 0;
}
.img {
display: block;
width: 200px;
height: 30px;
background: #ddd;
}
.menu-item.hover .img {
background: #000;
}
#menu2.hover .img {
background: url("http://placehold.it/200x30") no-repeat;
}
#menu4.hover .img {
background: url("http://placehold.it/200x30") no-repeat;
}
You can preload the images as well by using sprite sheets instead of javascript loading images in the background.
http://jsfiddle.net/E6xtq/1/