What's happening right now
I've created a single-page horizontal scrolling site that shows a single section at a time. Each section has a different amount of content and different heights. Currently the scroll the vertical scroll bar accommodates for the longest section in the site. Which is totally expected.
What I am trying to do
I want the vertical scroll bars to be relative the current visible section. So there would not be excessive vertical scrolling on a short section. I hope this makes sense, I've seen it before but can't find an example online.
What I've tried, but didn't work
$("ul#nav li a").click(function() {
$("ul#nav li a").removeClass("active");
$(this).addClass("active");
// Get the height of the element and set max-height
var section_id = $(this).attr("href")
section_id = $('div' + section_id).height();
$("body").attr('style', 'height: ' + section_id + 'px !important; max-height: ' + section_id + 'px !important;');
});
I think you'd have to change the css on the elements that are not within the current view frame to be display:none.
edit
Maybe a better choice would be to wrap them in a div that has
overflow-y: scroll
and the height on that div would be your max height. Then when they moved into focus, you could change the CSS properties as needed to display it normally.
This ended up working for me. I'm sure there's a better way, but this got the job done for now! Basically I created an object that stores each sections hash and height then reference those to resize each section to the height of the active section. Of note it seemed that when I reset the height of the sections I also had to set the width again too.
$("ul#nav li a").click(function() {
$("ul#nav li a").removeClass("active");
$(this).addClass("active");
var section_key = $(this).attr("href")
changeSectionH(section_key)
});
var sections = {};
$("div.section").each(function(index) {
var section_id = '#' + $(this).attr("id");
var section_h = $(section_id).height();
sections[section_id] = section_h;
});
function changeSectionH(key){
var windowWidth = $(window).width();
$("div.section").attr('style', 'height: ' + sections[key] + 'px !important; max-height: ' + sections[key] + 'px !important; width: ' + windowWidth + 'px; overflow-y:hidden;');
}
Related
Jquery beginner here.
I'm currently using the below script in order to find an element and then add/remove a class based on the scroll position from said element.
I'm trying to make my fixed navigation icon change colour when over the dark background.
Currently my code says find element 1 and then addClass to element 2 when the user scrolls 1000px after the element is found. It works but isn't ideal as the page is responsive and the sections change height.
You can see here, section 2 is the white section below the top section: http://leebuckle.co.uk/
Id like find the height of section 2 and then add the class once the user scrolls the height of section 2. So it would be +(section_2 height) rather than +1000px
Thanks in advance!
$(document).ready(function(){
var div = $("#section_2");
var pos = div.position();
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
if (windowpos >= (pos.top + 1000)) {
$( "#nav-icon span" ).addClass("black_menu");
}
else {
$( "#nav-icon span" ).removeClass("black_menu");
}
});
});
You can use offset from jQuery to get the position of an element from the top of the document.
So your line that has
if (windowpos >= (pos.top + 1000)) { ...
May look something like:
if (windowpos >= (div.offset().top)) { ...
Use jQuery's .offset() to get the the top position of your section2 + .height(), to get your section2's height dynamically.
if (windowpos >= (div.offset().top + div.height()))
I am trying to make a tooltip which basically shows a table (in my example below I used a large amount of text).
However I've wanted to change the position of the tooltip when you hover on the target element that is nearly at the corner of the screen.
Here is the Fiddle
$("strong").on("mouseover", function(){
var $this = $(this),
strongText = $this.text();
$tooltipContainer.show();
$tooltipContainer.append('<span>'+ strongText + '</span>');
}).on("mousemove", function(mousePos){...
You can change your mousemove code a little to update top position if overlap is there like below. Check demo - Fiddle
on("mousemove", function(mousePos){
var overlap = mousePos.pageY + posSrollY + $tooltipContainer.height() - $(window).height() - $(window).scrollTop();
$tooltipContainer.css({
left: mousePos.pageX,
top: mousePos.pageY + posSrollY - ( overlap > 0 && overlap )
});
})
I've been trying to solve this problem for a week now and it seems basic, so maybe I'm missing something.
I want to have a div centered on the screen (or its container), and then insert a second div to the right of it, so that afterwards the two of them are centered (space on each side is equal).
Inserting the second div is not a problem, but I need the first block to slide over to where its going to be after the new block is inserted.
http://jsfiddle.net/rdbLbnw1/
.container {
width:100%;
text-align:center;
}
.inside {
border:solid 1px black;
width:100px;
height:100px;
display:inline-block;
}
$(document).ready(function() {
$("#add").click(function() {
$(".container").append("<div class='inside'></div>");
});
});
<div class="container">
<div class="inside"></div>
</div>
<input id="add" type="button" value="add"/>
Do I need to explicitly calculate where the original box is going to end up and then animate that, or is there a better way to do it?
I like your question so decide to write this:
$(document).ready(function() {
var isInAction = false;
var intNumOfBoxes = 1;
var intMargin = 10;
$containerWidth = $(".container").width();
$insideWidth = $(".inside").width();
$(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px');
$("#add").click(function() {
if (!isInAction){
isInAction = true;
intNumOfBoxes +=1;
$(".current").removeClass("current");
$(".container").append("<div class='inside current'></div>");
$('.inside').animate({
'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px'
}, 300, function () {
$(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px');
$(".current").fadeIn(500,function(){
isInAction = false;
});
});
}
});
});
Also add this class in CSS:
.current {
display:none;
}
You don't need to change variables in JS code except intMargin. you can change this var to set margin between boxes.
Note: This code works fine on older browsers too and not need to support CSS3 features like transition.
Update: Some bugs like repeated clicks fixed.
Check JSFiddle Demo
First, we can animate only things that have explicit numerical values such as width, left or margin. We can't animate things like alignment (which actually use the same margin property but implicitly, never mind). So if we know width of inserted div let's just add it to our container.
1) Let's centre container itself and add transition to it
.container {
width: 102px; /* set explicit width; 102 - because of borders */
margin: auto; /* set margin to 'auto' - that will centre the div */
transition: width 0.5s;
}
2) Then increase the width when add div
$(".container").width($(".container").width() + 102);
3) But wait! If we add div to too narrow container it will be added to bottom not to right. So we need another container set to appropriate width before.
See final example on JSFiddle.
BTW, remove all line breaks and tabs from your code when you use inline-block, because it will cause spaces between your blocks.
This is my first question. I am having trouble with a image I am trying to stick when it reaches the top of the page after scrolling.
Check out this jfiddle - it is not mine but comes close to representing my question
http://jsfiddle.net/vBy5w/
(I am aware that I can input a set "margin-top" to make this work but when the browser size changes then the image size will respond and will throw off the set margin.)
So far I have achieved this by using the code below to effect the Div Id = Picture1 in my html
<div id="picture1"><img src="img/empty-restaurant.png" alt="Why do your customers not come back?" style="max-width:100%;height:auto;"> </div>
When this picture "sticks" the test below the image will jump up, I fixed this by including the last line of the .js but by stating a fixed "margin-top" it means that there will be a jump if the margin size is not correct depending on browser size.
Is there a way to make this Margin variable or relative to the height of the "stick"-ed item? And if so how?
Thanks guys!
$(document).ready(function() {
var s = $("#picture1");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
//$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
This is the part that needs changing - the first "margin-top" needs to be relative to the size of the "stick"ed item
if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", 60); } else { s.removeClass("stick"); $("body").css("margin-top", 0); }
});
});
As comments,
$("body").css("margin-top", s.height());
Gives a dynamic margin-top css value to the <body> based on the height on the element ( #picture1 ) that is being fixed during window.scroll
As an addition, you mention that the height may change on screen resize ( rwd )
So this may be good to add also ( to keep it in check )
$(window).resize(function() {
var s = $("#picture1");
if(s.hasClass("stick") {
$("body").css("margin-top", s.height());
}
});
I'm trying to achieve this:
When users scroll page, i need a header that will be fixed, but before to stick it, this div should shrink to a certain height, and after that this div become fixed.
This is my attempt
As you can see, there are some strange behavior on shrinking, i think that my approach is not so right.
header.css("height", "-=" + (Math.abs(start - scrollTop)));
spacer.css("height", "-=" + (Math.abs(start - scrollTop)));
So, what is the best way to do it?
UPDATE:
Now i'm at this point, but i need to make it more smooth
jsFiddle
Try this
$(document).ready(function(){
var headerElement = //Select header element here,
scrollTopToLookoutFor = //Put value you want to check for here,
if($("body").scrollTop() > scrollTopToLookoutFor || $("html").scrollTop() > scrollTopToLookoutFor){
headerElement.addClass("fix-header");
}
else{
headerElement.removeClass("fix-header");
}
});
Have a css class here with required styles
.fix-header{
height: 400px;
position: fixed;
top: 0px;
}