I've got a sticky sidebar going on with this code. But I only want it to affect the .fake-sidebar div when at 768px or below. Could anyone explain how to add media queries to my javascript?
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('.fake-sidebar').offset();
sticky_offset = original_position_offset.top;
$('.fake-sidebar').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('.fake-sidebar').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('.fake-sidebar').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('.fake-sidebar').css('position', 'fixed');
}
});
Any help is appreciated. Thanks in advance!
You can add the event on window resize, or on document ready, depending of what you want:
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$('.fake-sidebar').css('position', 'relative');
}
else {
$('.fake-sidebar').css('position', 'fixed');
}
});
Related
Here is the Jsfiddle i am working on
https://jsfiddle.net/farooqshad/jbdczk10/10/
Basically i want to add a class on scroll to specific div and then remove that class .
Here is my javascript
var YourDiv = $(".mainwrapper");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= YourDiv.offset().top - 10) {
YourDiv.addClass('fixed');
console.log("fixed");
} else {
YourDiv.removeClass('fixed');
console.log("Not Fixed");
}
});
farooq try this solution
var YourDiv = $(".mainwrapper");
var foo=$(".footer1")
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= YourDiv.offset().top - 10 && scroll<=foo.offset().top - 10) {
YourDiv.addClass('fixed');
}
else
{
YourDiv.removeClass('fixed');
}
});
and let me know if don't works
this is fiddle
This is the page I am working on http://bigislandnaturetours.com/tour/
The issue is I am trying to extend the height of the right column to automatically adjust the height of the left column. I use the following JS below which I have tested and works on other sites but not on this one. What might be wrong?
function doResize() {
if ($(window).width() > 981) {
setTimeout(function() {
$(".leftpane").css("height", "auto");
$(".midpanel").css("height", "auto");
var heightLeft = $(".rightpane").height();
var heightMiddle = $(".midpanel").height();
var heightRight = $(".leftpane").height();
if (heightRight > heightMiddle) {
$('.midpanel').css('min-height', heightRight + 2)
} else {
$('.leftpane').css('min-height', heightMiddle + 2)
}
heightMiddle = $(".midpanel").height();
heightRight = $(".leftpane").height();
if (heightLeft >= heightRight) {
$(".leftpane").css("height", heightLeft - 10);
$(".midpanel").css("height", heightLeft - 10);
}
}, 1000);
}
}
$(document).ready(function() {
doResize();
});
$(window).resize(function() {
doResize();
if ($(window).width() < 561) {
$(".leftpane").css("min-height", "auto");
$(".midpanel").css("min-height", "auto");
}
$('.main-nav li').unbind("click");
if ($('.rightpane').css('display') == 'none') {
$('.main-nav li').bind("click", function() {
$(this).addClass('im-curent');
$("ul", this).toggle(100);
});
}
});
The simplest answer is to use flex-box CSS (HTML5 / CSS3) or, for older browsers, a table used in 'presentation' mode.
Both should automatically keep column height in sync.
I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}
This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})
From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)
First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');
if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.
hi guys so i have this code ive done which when scrolling the sidebar moves up from bottom to top but im stuck with how to stop the scrolling once the sidebar hits the top of the main conatiner - can someone maybe help me with this?
code is:
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-sidebar').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
I have a fiddle example here: http://jsfiddle.net/06qwtgt6/1/
Many thanks!
$(document).ready(function () {
/********************************************************************************/
/* Parallax Scrolling */
// Cache the Window object
var $window = $(window);
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('div[data-type="background"]').each(function () {
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
$(window).bind('scroll', function () {
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / $self.data('speed'));
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
var coords = '50% ' + yPos + 'px';
$self.css({ backgroundPosition: coords });
};
});
});
// For each element that has a data-type attribute
$('div[data-type="content"]').each(function () {
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-content').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
});
});
CSS
.fixed {position:fixed; top:0;}
DEMO
I really need some help with this, I dont know javascript well at all to be honest, a friend of mine put some of this together a few months ago ive just added $contentContainer and added these variables but I just need one more thing added to if for it to suite my needs...
<script type="text/javascript">
// DOM Container Resize Handler
var adjustStyle = function() {
var winWidth = $(window).width(),
width = parseInt(winWidth),
container = $('body .fixed');
contentContainer = $('body .content');
if (width >= 1454) {
container.css('width','1454px');
contentContainer.css('width','1210px');
} else if ((width < 1454) & (width >= 1212)) {
container.css('width','1212px');
contentContainer.css('width','968px');
} else {
container.css('width','970px');
contentContainer.css('width','726px');
}
};
$(function() {
var filterWrap = $("#filterWrap"),
offset = filterWrap.offset(),
topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
filterWrap.stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
filterWrap.stop().animate({
marginTop: 0
});
};
});
// DOM Container Resize Handler - Initialization
$(window).resize(function() {
adjustStyle();
});
adjustStyle();
});
</script>
I need to modify this script to search through the document and IF document DOES NOT contain ('body .asideContent') to add 252px to the object contentContainer.css method
Don't worry about the fileerWrap function this works fine :)
I really appreciate the help
Should be something like this :)
if($("body.asideContent").length === 0){
var width = contentContainer.css('width');
contentContainer.css('width',width + 252 + "px");
}