Develop Reference

How to Stick elements on page scroll

I have a one page, scrolling site with 5 main sections that have title bars that span across the top of each respective section. I want each title bar to stick at the top (well, relative top-underneath the top sticky header) as you scroll down the section. I can get one to stick, but I am having trouble making it so that one sticks and then it goes away once the next section's title bar gets to the sticky point.
I can't figure out another way to bind the HTML or CSS with the jQuery if else statement to make this work. I was thinking I could try to make it work within each sections' id but I don't think there's like a "withinId" jQuery selector.
I'm posting the latest jQuery I attempted (with just 2 out of the 5 variables I will need to make work here). I know it's wrong but I'm seriously stuck. Any ideas here? Thanks a million.
(abbreviated) HTML:
<div id="welcome">
<div class="title-bar">
<p>WELCOME</p>
</div>
</div>
<div id="global">
<div class="title-bar">
<p>GLOBAL ENGAGEMENT</p>
</div>
</div>
<div id="community">
<div class="title-bar">
<p>COMMUNITY</p>
</div>
</div>
<div id="resources">
<div class="title-bar">
<p>RESOURCES</p>
</div>
</div>
<div id="horizon">
<div class="title-bar">
<p>ON THE HORIZON</p>
</div>
</div>
CSS:
.title-bar {
padding: 5px;
position: relative;
}
.title-bar.sticky {
position: fixed;
top: 111px;
width: 100%;
z-index: 1040;
}
jQuery:
$(document).ready(function() {
var welcomeTitle = $('#welcome .title-bar');
var globalTitle = $('#global .title-bar');
var communityTitle = $('#community .title-bar');
var resourcesTitle = $('#resources .title-bar');
var horizonTitle = $('#horizon .title-bar');
var stickyOffset = $('#header').offset().top;
if ($w.scrollTop() > stickyOffset + 225) {
welcomeTitle.addClass('sticky');
globalTitle.addClass('sticky');
} else {
welcomeTitle.removeClass('sticky');
globalTitle.addClass('sticky');
}
if (welcomeTitle.hasClass('sticky') && globalTitle.hasClass('sticky')) {
welcomeTitle.removeClass('sticky');
} else {
//
}
});

jsBin demo
Give your "pages" a class="page" and listen for their positions using JS's Element.getBoundingClientRect on: DOM Ready, window Load, window Scroll
$(function() { // DOM ready
var $win = $(window),
$page = $(".page").each(function(){
// Memorize their titles elements (performance boost)
this._bar = $(this).find(".title-bar");
});
function fixpos() {
$page.each(function(){
var br = this.getBoundingClientRect();
$(this._bar).toggleClass("sticky", br.top<0 && br.bottom>0);
});
}
fixpos(); // on DOM ready
$win.on("load scroll", fixpos); // and load + scroll
});
*{box-sizing: border-box;}
html, body{height:100%;}
body{margin:0;font:16px/1 sans-serif; color:#777;}
.page{
position:relative;
min-height:100vh;
}
.title-bar {
position: absolute;
top:0;
width: 100%;
background:#fff;
box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
.title-bar.sticky {
position: fixed;
}
#welcome {background:#5fc;}
#global {background:#f5c;}
#community{background:#cf5;}
#resources{background:#fc5;}
#horizon {background:#5cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome" class="page">
<div class="title-bar">
<h2>WELCOME</h2>
</div>
</div>
<div id="global" class="page">
<div class="title-bar">
<h2>GLOBAL ENGAGEMENT</h2>
</div>
</div>
<div id="community" class="page">
<div class="title-bar">
<h2>COMMUNITY</h2>
</div>
</div>
<div id="resources" class="page">
<div class="title-bar">
<h2>RESOURCES</h2>
</div>
</div>
<div id="horizon" class="page">
<div class="title-bar">
<h2>ON THE HORIZON</h2>
</div>
</div>
Design-wise > add a padding-top to the first container element (inside your .page) to prevent content going underneath the title element (since it toggles from absolute/fixed positions).

Have a look at the Waypoints plugin.

You can probably make it a little easier on yourself by assigning each section a class and then add and remove the class from each section with jquery each function.
Try something like the following:
$(window).on( "scroll", function() {
$( ".section" ).each(function() {
if ( $(window).scrollTop() >= $(this).offset().top - 50 ) {
$( this ).addClass("sticky");
}else{
$( this ).removeClass("sticky");
}
});
});
Then your css
.section{
height: 200px;
background: #333;
border:1px solid #222;
position:relative;
}
.section .title-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:50px;
}
.section.sticky .title-bar {
position:fixed;
}
And html
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>
<div class="section">
<div class="title-bar"></div>
</div>

Table column slider alternation

I want to create a table with 4 columns, but only show 3 columns. So I would ideally have a div that spans the 3 columns and apply overflow: hidden. On a click of the button, I want column 3 (company 2) to slide left, and be replaced with column 4 (company 3), so that company 3 gets compared against company 1. If the button is clicked again, company 3 should slide left again, but company 2 should slide from the right and return to its original position as it was originally. The reason for doing this is because in mobile view we can't fit in all the columns.
Fiddle can be found here:
https://jsfiddle.net/smks/U7JHM/197/
HTML
<div class="div-table">
<div class="div-table-row header-row">
<div class="div-table-col header-row"> </div>
<div class="div-table-col header-row">company 1</div>
<div class="div-table-col header-row">company 2</div>
<div class="div-table-col header-row">company 3</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Comparison 1</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">yyy</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Comparison 2</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
<div class="div-table-col">yyy</div>
</div>
<div class="divRow">
<div class="div-table-col">Comparison 3</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
<div class="div-table-col">yyy</div>
</div>
</div>
<br>
<button>Compare Next</button>
CSS
.div-table{
display:table;
width:auto;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
padding: 0;
text-align: center;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
padding: 5px;
}
.div-table-col{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
border:1px solid #666666;
padding: 5px;
}
.header-row {
height: 50px;
}

Here is a quick and dirty way - first I applied classes to the third and forth cols, and then animated the 4th one to hidden with a duration of 1 so it happens instantly. Then I toggle columns 3 and 4 each time the button is pressed.
$(document).ready(function () {
$(".c4").animate({
width: 'toggle',
opacity: 'toggle'
}, 1);
$("button").click(function (event) {
event.preventDefault();
$(".c3, .c4").animate({
width: 'toggle',
opacity: 'toggle'
});
});
});
Updated fiddle: https://jsfiddle.net/U7JHM/202/

How to make multiple divs slidetoggle with changing arrow

I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed.
From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.
Any help will be greatly appreciated.
Following is the CSS:
#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}
#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }
.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
}
Here's the attempted javascript and jQuery:
function chngimg() {
var img = document.getElementById('expand_arrow').src;
if (img.indexOf('expand-arrow.png')!=-1) {
document.getElementById('expand_arrow').src = 'images/collapse-arrow.png';
}
else {
document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
}
}
$(document).ready(function(){
$("#header_background").click(function(){
$("#section").slideToggle("slow");
});
});
And here's the HTML
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>

It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:
$(document).ready(function() {
$('.header_background').click(function(e) {
$(this).next('.section').slideToggle('slow');
var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
if (img.src.indexOf('expand-arrow.png') != -1) {
img.src = 'images/collapse-arrow.png';
}
else {
img.src = 'images/expand-arrow.png';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
text 1
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
text 2
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
text 3
</div>

Look for your next section of the header clicked like so. And change your id for class because ID need to be unique
$(".header_background").click(function(){
$(this).nextAll(".section:first").slideToggle("slow");
});

disable dragging in specific element (Item) in “Owl carousel” - jquery

I use "OWL Carousel" jQuery plugin (http://www.owlgraphic.com/owlcarousel/) for in my small project.
I create small script that draggable via this plugin. now i want to disable dragging in specific element (Item)... but i don't know how to do that.
HTML:
<div class="wrap">
<div id="carousel">
<div class="part">
<div class="item">Item-1.1</div>
<div class="item">Item-1.2 NOT Draggble</div>
<div class="item">Item-1.3</div>
</div>
<div class="part">
<div class="item">Item-2.1</div>
<div class="item">Item-2.2 NOT Draggble</div>
<div class="item">Item-2.3</div>
</div>
<div class="part">
<div class="item">Item-3.1</div>
<div class="item">Item-3.2 NOT Draggble<div>
<div class="item">Item-3.3</div>
</div>
</div>
</div>
CSS:
div.wrap {
width: 990px;
min-height: 360px;
padding: 5px;
border: 2px solid #666;
margin: 10px auto;
}
div.item {
float: left;
border: 1px solid #ddd;
width: 324px;
margin: 1px;
min-height: 360px;
}
JS:
$(document).ready(function() {
$("#carousel").owlCarousel({
singleItem: true,
startPosition : -1,
autoPlayDirection : "rtl",
});
});
I know I should use to mouseDrag (http://www.owlgraphic.com/owlcarousel/#customizing) in a callback function , but i don't now how ... :(

I had the same problem and just figured it out:
Add a class to the items you want to disable (i.e. "disable-owl-swipe") and stop event propagation on touchstart and mousedown, so the parents (the owl carousel wrappers) don't receive the event and therefore don't swipe.
HTML:
<div class="wrap">
<div id="carousel">
<div class="part">
<div class="item">Item-1.1</div>
<div class="item disable-owl-swipe">Item-1.2 NOT Draggble</div>
<div class="item">Item-1.3</div>
</div>
<div class="part">
<div class="item">Item-2.1</div>
<div class="item disable-owl-swipe">Item-2.2 NOT Draggble</div>
<div class="item">Item-2.3</div>
</div>
<div class="part">
<div class="item">Item-3.1</div>
<div class="item disable-owl-swipe">Item-3.2 NOT Draggble<div>
<div class="item">Item-3.3</div>
</div>
</div>
</div>
JS:
$(".disable-owl-swipe").on("touchstart mousedown", function(e) {
// Prevent carousel swipe
e.stopPropagation();
})
Hope that helps!

I have the solution!
Just add the elements you want to exclude in "NDElement"
$( NDElement ).mousedown(function() {
$(".owl-wrapper").attr("class","dontdragg");
});
$( document ).mouseup(function() {
$(".dontdragg").attr("class","owl-wrapper");
});

jquery show and trigger element

I'm trying to create a notification system for my website, but am having problem for some unknown reason. I have a link when a user clicks it, it fire off a JavaScript function, then checks if a div is hidden, if it is hidden, it show it and load a PHP script within that div.
I probably overlooked something
my JavaScript code:
// show notifications
$(".noti_bubble").click(function () {
// check the visibility of the element
if($(".show-note").is(":hidden")) {
$(".show-note").show();
alert('noti_bubble has been perform');
$(".show-note").load("scripts/notifications.php");
}else{
$(".show-note").hide();
}
});
my html code:
<div style="width:900px; margin:0 auto;">
<div style="width:250px; float:right;">
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>
<div class="notif_barline"></div>
<div id="notifyContent">
<div class="show-note"></div>
</div>
</div>
</div>
</div>
</div>
the .show-note has a css of display:none; as well.
the clickable link:
(0)

Add the complete callback to .load():
$(".show-note").load("scripts/notifications.php", function(response, status, xhr) {
alert(status);
});

http://jsfiddle.net/9M396/
html
<div style="width:500px; margin:0 auto;">
<div style="width:250px; float:right;">
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>
<div class="notif_barline"></div>
<div id="notifyContent">
<div class="show-note"></div>
</div>
</div>
</div>
</div>
</div>
(0)
js:
// show notifications
$(".noti_bubble").click(function () {
var div = $(".show-note");
if(div.is(":hidden")) {
div.show();
div.load("/echo/json/?json={}");
}else{
div.hide();
}
return false;
});
css:
div
{
border: 1px solid black;
}
.show-note
{
min-height: 100px;
display:none;
}