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>

How to overlay page partially when fancybox.showloading shows?

I have following code:
html:
<ul>
<li>
1111111111111
</li>
<li>
22222222222222
</li>
<li>
33333333333333
</li>
<li>
44444444444444
</li>
<li>
555555555555555
</li>
<li>
66666666666666
</li>
</ul>
<br>
<br>
<div type="button" class="on">on </div>
<div type="button" class="off">off </div>
js:
$(".on").click(function(){
$.fancybox.showLoading();
});
$(".off").click(function(){
$.fancybox.hideLoading();
});
DEMO
you can click on on or off it leads to showing/hiding animation.
I want that concrete html tag(ul in my exampel) was overlayed when animation shows.
following area:
Please help to correct my example

If I understand you correctly, it should require a few CSS changes, and little bit of math in your click event. DEMO
Start by giving your target element some sort of identifier:
<ul id="target">
<li>
1111111111111
</li>
<li>
22222222222222
</li>
<li>
33333333333333
</li>
<li>
44444444444444
</li>
<li>
555555555555555
</li>
<li>
66666666666666
</li>
</ul>
<div id="overlay"></div>
Then since by default a <ul> is a block object, we should make it inline-block to make it easier to get its width:
#target {
display:inline-block;
border: solid 1px;
}
#overlay {
display:none;
position: absolute;
background: rgba(0,0,0,.5);
}
Finally, in the click event we will obtain the target's width, subtract the width of the popup loader, and divide the remaining width by 2 to center it up. The same with the height:
$(".on").click(function(){
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
});
$(".off").click(function(){
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
});
I hope this helps! Let me know if you have any questions.

Something like this?
var $el = $('ul');
var $cover = $('#dummy');
var coverPos = $el.position();
$cover.css({
position:'absolute',
top: coverPos.top,
left:coverPos.left,
width:$el.width()+'px',
height:$el.height()+'px',
background:'#f00'
}).show();
http://jsfiddle.net/daveSalomon/PudLq/582/
A ul has display:block;. If you only want the block to cover the width of the text, you'll need to calculate the required width of the ul. Here's the same code where the ul has an arbitrary width of 150px.
http://jsfiddle.net/daveSalomon/PudLq/583/
Edit
To also position the 'loading' icon in the center of the element....
$('#fancybox-loading').css({
position:'absolute',
top: coverPos.top + ($el.height()/2),
left:coverPos.left + ($el.width()/2),
});
http://jsfiddle.net/daveSalomon/PudLq/585/

alternative of scrollLeft()

G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>

I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.

creating navigation bar with jquery

I am trying to create a navigation bar following is my code:
html:
This is Navigation baar
<div class="cat-set">
<div class="icon-wrap">
<div class="icons active" id="mobiles"><div class="bgimg mobiles"></div></div>
<div class="icons" id="laptops"><div class="bgimg laptops"></div></div>
</div>
</div>
on hover of each '.icons' class a division will be shown, so there are two boxes to show and hide, this is the code for this:
<div class="cat-demo" id="mobiles">
<p>This is for mobiles, if mouse is on .mobiles then this will be shown</p>
</div>
<div class="cat-demo" id="tablets">
<p>This is for tablets, if mouse is on .mobiles then this will be shown</p>
</div>
this is Jquery code for this:
$('.icons').hover(function(){
$('.icons').each(function(){$(this).removeClass("active");});
$(this).addClass("active");
var position = $(this).position();
$('.cat-demo').css({'left':(position.left-4)+'px'});
var showThis=$(this).attr("id")
$(".cat-demo:visible").hide()
$("'#"+showThis+".cat-demo'").show();
});
So till here everything is working fine, but problem is I want to hide the '.cat-demo'
if mouse pointer is out of out of '.icons' and if pointer is on .cat-demo then it should not hide this. please help me... If you want to change the html layout please go ahead.
this is the fiddle link for this http://jsfiddle.net/ndevJ/

Is it so necessary to use js for such types of menus?
If your menu has simple behavior, then use only CSS for show/hide menu's sub items.
For example:
<ul class="cat-set">
<li>
mobile
<p>
This is for mobiles, if mouse is on .mobiles then this will be shown
</p>
</li>
<li>
laptops
<p>
his is for tablets, if mouse is on .mobiles then this will be shown
</p>
</li>
</ul>
And CSS:
ul.cat-set > li {display: inline-block; margin: 10px;}
ul.cat-set > li p {display: none; position: absolute;}
ul.cat-set > li:hover p {display: block;}

Changing li class on horizontal scroll

I want to know if it's possible to change my "selected" li class based on the movements of the horizontal scroll. So when you start moving the scroll to the right, the selected li class would change to 2, 3, 4 .. and so on.
Any hints or points to start from are appreciated.
My code:
<div id="scroller">
<ul id="ulscroller">
<li value="1" class="selected">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>
<li value="11">11</li>
<li value="12">12</li>
<li value="13">13</li>
<li value="14">14</li>
<li value="15">15</li>
<li value="16">16</li>
<li value="17">17</li>
<li value="18">18</li>
<li value="19">19</li>
<li value="20">20</li>
</ul>
</div>
CSS:
li {float:left; padding:10px; cursor: pointer;}
div#scroller {width:300px; height:70px; overflow-x: scroll;}
ul#ulscroller {list-style: none outside none; margin: 0;
padding: 0; width:655px;}
ul#ulscroller li.selected {border:1px solid #000;}
Fiddle: http://jsfiddle.net/7uCS8/

Basic idea:
var scroller = document.getElementById("scroller"),
lis = scroller.getElementsByTagName("li"),
divisionsWidth = lis[0].offsetWidth - 2,
current = 0,
scroller.onscroll = function(){
var selected = Math.floor(scroller.scrollLeft/divisionsWidth);
if (current!==selected) {
lis[current].className="";
lis[selected].className="selected";
current = selected;
}
};
It can be tweaked to change the selection, but it should be a good starting point.

I'm guessing that maybe, since the li's have a defined width you can get the current scroll in pixels with each scrolling event (easily done with jQuery) and if the scroll position is within any position to change the class name, change it. I'd rather use an id value for each li element to identify it easily with JavaScript and a class for group removing the class. Something like this:
$(document).scroll(function() {
var scrollPosition = $(document).scrollLeft();
if (scrollPosition >= 0 && scrollPosition < 300) {
$("li.scroller_children").removeClass("selected");
$("li#1").addClass("selected");
} elseif (scrollPosition >= 300 && scrollPosition < 900) {
$("li.scroller_children").removeClass("selected");
$("li#2").addClass("selected");
} elseif ....
});
I

Using jQuery you could do something like this.
$(window).scroll(function (scrolledTo) {
$("li:[value=" + scrolledTo).addClass("selected");
$("li.selected").removeClass("selected");
});
Unfortunately I do not know how to get where the window was scrolled to (scrolledTo) from the event and it doesn't appear to be in the jQuery documentation. However, you said you wanted a starting point, so I thought this would at least provide you with that.

You can try this, need some modifications...
$("#scroller").scroll(function () {
$(".selected").removeClass("selected").next().addClass("selected");
});