Develop Reference

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/

I'm trying to get my navigation menu to slide left and push body with it

I'm completely new to jQuery, and I'm trying to write a script that will push my navigation menu out from the right hand side of the screen towards the left, and push the rest of the body with it.
I have been following this tutorial: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
I'm not really sure what I'm doing, or exactly which CSS classes I should be using in the javascript, as all of the different menu options/examples have the codes mixed together which isn't really helpful if you're not particularly experienced with coding.
I know exactly what I want the code to do, but I'm way out of my depth applying it to my own Wordpress theme – could anyone give me pointers as to what I'm doing wrong?
So far I have the following CSS:
#media only screen
and (min-width : 0px)
and (max-width : 1080px) {
body {
overflow-x: hidden;
left: 0;
}
body-push {left: -240px;}
img.standard.logo {
height: 38px;
width: 342px;
}
/* RESPONSIVE NAVIGATION MENU */
img.menu.button {
position:relative;
display:block;
width:25px;
height:25px;
background-size: 100%;
}
nav.header-nav {
right:-240px;
z-index:10;
position:fixed;
top:0;
width:250px;
height:100%;
float:right;
margin:0;
padding:0;
background-color:#1D1D1F;
list-style:none;
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
}
nav.header-nav nav.header-nav-open {
right:0px;
}
}
I have taken / adapted the following javascript:
img.menu.button.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'body-push' );
classie.toggle( menuRight, 'nav.header-nav-open' );
disableOther( 'showRightPush' );
};
My site header:
<header class="header">
<!-- LOGOS -->
<a href="#">
<img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
<img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
<!-- LOGOS -->
<img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
<!-- HEADER NAVIGATION MENU -->
<nav class="header-nav">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-463">
WORK
<ul class="sub-menu">
<li id="menu-item-584">LANDSCAPES</li>
<li id="menu-item-473">SEASCAPES</li>
<li id="menu-item-478">MACRO</li>
<li id="menu-item-477">CITIES</li>
<li id="menu-item-475">LONG EXPOSURE</li>
<li id="menu-item-480">MISCELLANEOUS</li>
</ul>
</li>
<li id="menu-item-10">ABOUT</li>
<li id="menu-item-464">SHOP</li>
<li id="menu-item-923">
SOCIAL
<ul class="sub-menu">
<li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
<li id="menu-item-924">INSTAGRAM</li>
<li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
</ul>
</li>
<li id="menu-item-14">CONTACT</li>
</ul>
</div>
</nav>
</header>

There is an error in your JavaScript code. img will be undefined and the method of writing a JavaScript function is also incorrect.
Add id attribute to your menu img
<img id="menuLeft" class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
Create a JavaScript object for menu
var menuLeft = document.getElementById( 'menuLeft' );
Access the object menuLeft to trigger sliding effect
menuLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'body-push' );
classie.toggle( menuRight, 'nav.header-nav-open' );
disableOther( 'showRightPush' );
};
Update
Since its a third party plugin, you need to include css (http://tympanus.net/Blueprints/SlidePushMenus/css/default.css) and js (http://tympanus.net/Blueprints/SlidePushMenus/js/classie.js) files for sliding menu.

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.

Having a html element stay in the same position without using position: fixed

To show what I want to do, here is a url. http://octopuscreative.com .
I want something that when I scroll down the height, the cyan div disappears like the website above.
I currently have the scrolling working in my code, however, I cannot see the rest of my HTML that is below my #main div. I don't know if this has anything to do with my new #slideshow div (with a fixed position).
I thought since the #slideshow div had its height reduced to 0, I would be able to see the HTML underneath the #main div, but all I see below is white.
var header = $('#slideshow'),
headerH = header.height();
$(window).scroll(function() {
if (header.height() >= 0) {
header.css({
height: -($(this).scrollTop() - headerH), position: 'absolute'
});
}
else if (header.height() < 0 ) {
header.css('height', 0);
header.css('position', 'absolute');
}
});
</script>
</head>
<body>
<div id="top">
<div id="stallion">
<img id="stallionpic" src="stallion1.png" />
<h1 class="h1">Stallion Stride</h1>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="slideshow">
<div id="leftbutton"></div>
<div id="rightbutton"></div>
<div id="slideshownav">
<ul>
<li><a class="active"></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<div id="slideshow_inner">
<li id="pic1"><a><img src="pic2.jpg" /></a></li>
<li id="pic2"><a><img src="pic1.jpg" /></a></li>
<li id="pic3"><a><img src="pic3.jpg" /></a></li>
<li id="pic4"><a><img src="pic4.jpg" /></a></li>
</div>
<p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
</div>
<div id="mainContent">
<p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
</div>
</div>
<div id="footer">
</div>
</body>

I'm the lead dev at Octopus. Here's the bare minimum amount of code to make something like that header effect work (it does use fixed position).
HTML
<div id="hero">
<h2>I am the hero</h2>
</div>
<div id="main-content">
<h3>I am the main content</h3>
</div>
CSS
* {
margin: 0;
}
div#hero {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #3D6AA2;
height: 300px;
}
div#main-content {
height: 1500px;
background: #fff;
margin-top: 300px;
position: relative;
z-index: 1;
}
I also threw together a jsFiddle that demonstrates it, along with the bit of parallax stuff the site does: http://jsfiddle.net/paulstraw/FW4FF/
Hope that helps!

position: fixed; positions the element based on viewable screen coordinates, so when you scroll, the position will update to reflect the 'new' top/left boundaries. position: absolute; is more like what you are describing, it will keep the element in the same place, regardless of the content around it, or the browser's scroll position. However, this will take the element out of the 'flow' of the page, and other elements will act like it is not there (and might overlap it). In which case, you will likely have more luck just floating your header left: float: left;.
If you do this, you will probably need to clear the floats in your main div by adding the css style: clear: both;. This will push the main div below any floated content above.