Develop Reference

Jquery Window scroll .... if else

I face some issues in window scroll function in if...else
It only go in through SCROLL END 1.
Anyone can tell me where I'm doing wrong or suggest me to make it better. Thanks a lot
$(window).scroll(function () {
var scrollend = 1250;
var second_scrollend = 4500;
if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
} else if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
} else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}
});

change your variable value
var scrollend = 4500;
var second_scrollend = 1250;
Why we change the value
Your first codition always true because if $(window).scrollTop() + $(window).height() is greater than 1250 it is always true
Other Way change the sequence of condition
if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
}
else if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
}
else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}

How to create a slide in tab

I'm having problem figuring out how to code the support tab (on the right) of this page - http://test88.fccbet.com/. It currently slides out on click.
This is where I got the the current tab slide out effect: http://www.building58.com/examples/tabSlideOut.html
What I want is that both the main tab and side tab will appear when the page loads (refer to IMAGE1). But when the side tab image is clicked, the main image will hide itself leaving only the tab image (refer to IMAGE2).
(IMAGE1)This is how it currently looks like when the page loads:
echosantos dot com/tabslideout/tab-current-outcome.jpg
(IMAGE2)This is how I want it to look like when the page loads (basically I don't want to click the side tab first to see the rest of the tab) :
echosantos dot com/tabslideout/tab-desired-outcome.jpg
This is my first Stackoverflow question, I hope I gave you enough details for your answer. Thanks in advance for the help!
Cheers!
html:
<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
Fccbet
<a class="handle" href="#"></a><div id="close-bottom"><img src="#routes.Assets.at("images/close-chat.jpg")"/>
</div>
css:
.slide-out-div {
width: 125px;
height:392px;
background: url(../images/support-tab.png); }
#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px;
height:396px;}
javascript:
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: '#routes.Assets.at("images/support-tab-side.png")', //path to the image for the tab (optionaly can be set using css)
imageHeight: '284px', //height of tab image
imageWidth: '43px', //width of tab image
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: true //options: true makes it stick(fixed position) on scroll
});
});
</script>
<script>
$(document).ready(function(){
$("#close-bottom").click(function(){
$("#bannerLeft").remove();
});
});
</script>

You need to add this line $('.slide-out-div > .handle').click(); to achieve the target that you want. As you defined the click event on your handler tab so need to enforce a click on page load. Just add the following line in your JQuery code and place it after $('.slide-out-div').tabSlideOut({...});
Working JSFiddle Demo
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click(); // Add this line and that's it
});
JSFiddle Snippet
Click on the below Run code snippet button to test it here.
(function($) {
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '50px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings || {});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background': 'url(' + settings.pathToTabImage + ') no-repeat',
'width': settings.imageWidth,
'height': settings.imageHeight
});
}
settings.tabHandle.css({
'display': 'block',
'textIndent': '-99999px',
'outline': 'none',
'position': 'absolute'
});
obj.css({
'line-height': '1',
'position': settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({
'left': settings.leftPos
});
settings.tabHandle.css({
'right': 0
});
}
if (settings.tabLocation === 'top') {
obj.css({
'top': '-' + properties.containerHeight
});
settings.tabHandle.css({
'bottom': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'bottom') {
obj.css({
'bottom': '-' + properties.containerHeight,
'position': 'fixed'
});
settings.tabHandle.css({
'top': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height': properties.containerHeight,
'top': settings.topPos
});
settings.tabHandle.css({
'top': 0
});
}
if (settings.tabLocation === 'left') {
obj.css({
'left': '-' + properties.containerWidth
});
settings.tabHandle.css({
'right': '-' + properties.tabWidth
});
}
if (settings.tabLocation === 'right') {
obj.css({
'right': '-' + properties.containerWidth
});
settings.tabHandle.css({
'left': '-' + properties.tabWidth
});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event) {
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({
top: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({
left: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({
right: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({
bottom: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({
top: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({
left: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({
right: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({
bottom: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
}
settings.onSlideOut
};
var clickScreenToClose = function() {
obj.click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
slideIn();
});
};
var clickAction = function() {
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function() {
obj.hover(
function() {
slideOut();
},
function() {
slideIn();
});
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function() {
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
$(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '50px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click();
});
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>

jQuery, Javascript: Responsive site - execute function below 480px

I have a plugin that hides a menubar. But i only want this to happen below 480px document size (aka, on phones, not on desktop computers).
var wi;
$(window).ready(function() {
wi = $(window).width();
});
$(window).resize(function() {
wi = $(window).width();
});
$(function() {
if(wi<480){
$('nav').scrollUpMenu({
waitTime: 200,
transitionTime: 150,
menuCss: { 'position': 'fixed', 'top': '0'}
});
}
});
The scrollUpMenu() code is from https://github.com/dvdsmpsn/Scroll-Up-Menu
Now when I open the website it works. When I resize the window from desktop to phone size (<480px), it will not hide the menu when scrolling. But if I refresh the page at that size, it will. And vice versa. I thought my $(window).resize function would take care of it, but I guess not. Anyone any ideas?

You'll need to execute the width check in the resize event:
var wi;
$(window).ready(function() {
wi = $(window).width();
checkWidth();
});
$(window).resize(function() {
wi = $(window).width();
checkWidth();
});
function checkWidth() {
if(wi < 480){
$('nav').scrollUpMenu({
waitTime: 200,
transitionTime: 150,
menuCss: { 'position': 'fixed', 'top': '0'}
});
}
}
A cleaner solution would be something like this:
$(window).on('load resize',
function () {
if($(window).width() < 480){
$('nav').scrollUpMenu({
waitTime: 200,
transitionTime: 150,
menuCss: { 'position': 'fixed', 'top': '0'}
});
}
}
);
This way you're binding the event listeners to window in 1 call.

You need to run your handler on the resize event.
But it is best to keep a flag of the state so that you only run your code once per layout change
$(function(){
var breakpoint = 480,
state = 'big';
function handleLayout(){
var width = $(window).width();
if (width < breakpoint && state === 'big') {
state = 'small';
$('nav').scrollUpMenu({
waitTime: 200,
transitionTime: 150,
menuCss: { 'position': 'fixed', 'top': '0'}
});
} else if (width >= breakpoint && state === 'small') {
state = 'big';
// do what you want to revert to normal here..
}
}
$(window).resize(handleLayout).trigger('resize');
});

In the end I went with A. Wolff's matchMedia, and for initial/resize check Cerbrus' function:
$(window).on('load resize',
function () {
var mq = matchMedia('(max-width: 480px)');
if (mq.matches) {
document.title = 'mobile';
}else{
document.title = 'desktop';
}
}
);
Because it has the best device support and performance
http://jsperf.com/matchmedia-vs-resize/3

stick part in a specific range

i have a container that is stick to top after a specific point.
but its not enough for me.
i have a footer in the page and when the screen is small the stick part is hiding under the footer.
i want it to stop moving down in the footer top (to stop be fixed to 0 that point but be fixed to minus number that is the substraction between them).
this is my code.
what should i add for that goal?
and when to call it?
on resize?
on ready?
etc.
thanks a lot
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
if (getBrowserHeight().width > 1284) {
var $div = $("#Container");
if ($(window).scrollTop() > $div.data("top")) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
});

This should get you going.
Don't mind to ask for help if somehting isn't clear.
$(document).ready(function() {
$(window).scroll(function() {
var footerEl = $('footer').offset().top;
var footerTop = (footerEl - $(window).scrollTop());
var containerHeight = $('.container').height();
var footerHeight = $('footer').height();
console.log('footer', footerTop);
$('.container').removeClass('sticky');
if (footerTop <= containerHeight) {
$('.container').addClass('sticky');
$('.container').css('bottom', footerHeight);
}
});
});
body {
height: 1000px;
position: relative;
}
.container {
width: 100%;
min-height: 300px;
position: fixed;
top: 0;
background: red;
}
.sticky {
position: absolute;
top: auto;
}
footer {
width: 100%;
min-height: 500px;
position: absolute;
bottom: 0;
background: black;
}
<html>
<body>
<div class="container"></div>
<footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</html>

I've tried to make as few changes to your code as possible, but there's better ways to get around this ie. using classes, like in #mhx answer. Full JavaScript below (sorry, had to remove your getBrowserHeight() as it wasn't defined):
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
var $div = $("#Container");
var $footer = $("footer");
if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
$("footer").data("top", $("footer").offset().top);
});
Besides adding a top data attribute to your footer and defining $footer in the start of fixDiv(),I've added this to your initial if statement, to make sure that the scroll position, does not exceed the top of the footer minus the height of your div.
&& $(window).scrollTop() < $footer.data("top") - $div.height()
... and I've added this else if statement, in case it does exceed the top of the footer minus the height of your div
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
Here's a fiddle: http://jsfiddle.net/ds5tptay/

making a div stick to the top of the screen but if scrolled back up, return to it's original position?

This will make a div that is position: absolute ( top: 46px ) on a page become fixed to the top of the page ( top: 0px ) when scrolled to a certain point ( the distance from the div to the top of the page )
$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 && $el.css('position') != 'fixed') {
$('#sticky').css({
'position': 'fixed',
'top': '0px'
});
}
});
BUT it doesn't reset the position of the div when you're back at the top of the page, and I want it to. Any suggestions? Also I want to make sure this is the best way to do this — if there's a css only, non-javascript solution I'm all ears.

I would recommend either keeping the sticky content fixed or absolute, but not switching between the two.
Fixed: http://jsfiddle.net/CpM8H/2/
$(window).scroll(function (e) {
$scrollTopDiff = 46 - $(this).scrollTop();
$('#sticky').css({
'top': ( $scrollTopDiff > 0 ? $scrollTopDiff : 0 ) + 'px'
});
});
Absolute: http://jsfiddle.net/CpM8H/3/
$(window).scroll(function (e) {
$scrollTop = $(this).scrollTop();
$('#sticky').css({
'top': ( $scrollTop > 46 ? $scrollTop : 46 ) + 'px'
});
});
If you really need to switch between fixed and absolute, here is my first though on how to do that, but the sticky content may jump around a bit:
$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 ) {
$el.css({
'position': 'fixed',
'top': '0px'
});
} else {
$el.css({
'position': 'absolute',
'top': '46px'
});
}
});