We Keep Coding

Adding offset().top amount on scroll

I have a fixed piece of text and I'm trying to add a different class each time the text enters a div on scroll. I've got it working no problem. But if I add an offset amount to the fixed text e.g.
top: 400px
I need to counter this offset in the JS. But I can't seem to figure it out. I've tried using:
.offset().top 400);
But it's not working. Here's a code i'm currently using:
HTML
<p class="text">TEXT HERE</p>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
JS
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
$('.text').toggleClass('blue',
scroll >= $('.section1').offset().top
);
$('.text').toggleClass('magenta',
scroll >= $('.section2').offset().top
);
$('.text').toggleClass('green',
scroll >= $('.section3').offset().top
);
$('.text').toggleClass('orange',
scroll >= $('.section4').offset().top
);
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed
The text needs to add class as soon as it enters the relevant div.
Here's a working fiddle: http://jsfiddle.net/6PrQW/334/

So you did most everything right, but I think where you went wrong is here: var scroll = $(window).scrollTop();
You don't want to calculate using the window offset, rather you want to use the offset of your sticky text. So instead use: var scroll = $('.text').offset().top;
Let me know if that helps.
edit,
and here is your fiddle with the edits.
Note that I edited your line for setting the blue class since you don't want to match the sticky offset against itself.

To find out when something is within your window, you've gotta use something like...
if($(elem).offset().top - $(window).scrollTop < $(window).height()){
//stuff
}
That should trigger as soon as elem is visible on the page! You can check it against $(window).height()/2, for example, if you want it to trigger in the center of the page instead. Hope this helps!

Image positioned below to be visible on mouse hover

There are two images placed one below the other, what i want to do is when you hover a mouse over the top image only the portion of the image below should be visible not the entire image to be replaced.Is this possible using jquery ?.
I am stuck on where to start. I tried changing the div background on hover but i couldn't get anywhere near what i need.Thanks.
html
<div style="background-image: url("image1.jpg")></div>
<div style="background-image: url("image2.jpg")></div>

Try this?
$(document).ready(function() {
var $hover = $("#hover");
var $foreground = $("#foreground");
$hover.hide();
$foreground.mousemove(function(event) {
var top = event.pageY - $hover.height() / 2;
var left = event.pageX - $hover.width() / 2;
$hover.css("top", top);
$hover.css("left", left);
});
$foreground.mouseover(function() {
$hover.show();
});
$foreground.mouseleave(function() {
$hover.hide();
});
});
http://jsfiddle.net/WV8jX/685/
EDIT: Updated to hide before mouse entering
http://jsfiddle.net/WV8jX/686/
EDIT:
It doesn't really solve your problem tho if you need the background to be shown as according to your description.

Since you have tagged jQuery, use the jQuery .hover().
Example:
$("selector").hover(
function() {
show your hidden image functionality here
}
);
https://api.jquery.com/hover/

I think there is no need of using Javascript/Jquery. CSS can do the job as below
HTML
<div class="bgdemo"></div>
CSS
.bgdemo{
background-image: url("image1.jpg");
}
.bgdemo:hover{
background-image: url("image2.jpg");
}
and there is a typo in your HTML, style tag is not ending properly.
edit
Check this jsfiddle, Position the background according to your requirement.
edit
Here I found good article seems bit complicated but worth reading..

Position returning 0 on div position static

I am trying to use jQuery's position method to obtain the position of a div. The div has default property for the position property. For some reason it returns Object {top: 0, left: 0}
The HTML for the particular div is shown below:
<div class="col-xs-3" id="increased-width">
<div id="standards">
<label><strong>My Energy Standards</strong></label>
<a class="btn" data-toggle="modal" data-target="#energyStandardModal"><span class="glyphicon glyphicon-info-sign"></span></a>
<br />
</div>
<div id="years">
<h5><strong>My Study Periods (in years)</strong></h5>
<div id="col-1" class="altStudyPeriod"></div>
<div id="col-2" class="altStudyPeriod"></div>
<div id="col-3" class="altStudyPeriod"></div>
<div id="col-4" class="altStudyPeriod"></div>
</div>
</div>
The jQuery code is also shown here:
$(document).ready(function () {
standardDiv = $("#standards").position();
console.log(standardDiv);
});
I also tried using the offset() method but it returns the same values. However, this particular is not located at the origin of the webpage (0,0)

Here's a FIDDLE that might help explain things.
I've used your code, but added some CSS to clarify things.
Borders have been added so your divs can be seen, and a spacer div above your col-xs-3 div to push everything down.
The col-xs-3 parent/holder div needs to have css position: relative.
Note that using .position() on the #standards div gives its position relative to its container div with position: relative - "0" from top (of container div).
Using .offset() on the #standards div gives its position relative to the window - "59" from top (of the window).
JS
$('.putmehere').html( "#standards position.top using .position(): " + $("#standards").position().top );
$('.putmehere2').html( "#standards position.top using .offset(): " + $("#standards").offset().top );
Edit: If you wish, you can add a .spacerdiv10 above your #standards div and see what happens to the top measurements.

duplicate: jQuery get the location of an element relative to window
basically, position returns the css values ( which are correct ), but you seem to want the offset from window.
Edit: Position property denotes the offset from the closest parent container, which has relative positioning. If offset().top returns 0, try comparing it to window's offset as is done in the previously referenced question:
var eTop = $('element').offset().top; //get the offset top of the element
console.log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

jQuery — how to animate a div using height:auto

I have a div that expands downward when a user presses "more." The div's height is always auto, and expands to fit the content accordingly.
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything.
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! I need to use the slideToggle method on the instead of the Thanks!

jsBin demo <-- Resize the window. Works great.
You can do it simply like:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;)

I don't know exactly how you set up your code, but jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you.
Is that what you are looking for?

You can always:
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
height: naturalHeight}, {
duration: 1000,
completion: function() {
// set height to auto
targetDiv.css({height: 'auto'});
});

You can do this using jQuery. You just need to caluclate the height: auto absolute height.
JSFiddle: http://jsfiddle.net/CS2h9/

Positioning tool tip using .css()

I created a tooltip with CSS and I want to position the arrow just above the icon of each button. I tried using jQuery Mobile but it has not worked for me so the easiest way for me to accomplish this now is to position the tool tip manually :(
Also I was wondering if manually positioning the tooltip would change in anyway if I were to use this page on a mobile app with a different resolution or perhaps shrink the page size?
What I've tried it to use .offset() to get my tool tip class around the relative area of each button id.
var CS_x_pos = $("#CS").offset();
var CS_y_pos = $("#CS").offset();
var GH_x_pos = $("#GH").offset();
var GH_y_pos = $("#GH").offset();
//CS
$(".tooltip").css({
left: CS_x_pos,
top: CS_y_pos
});
//GH
$(".tooltip").css({
left: GH_x_pos,
top: GH_y_pos
});
When I try:
var CS_x_pos = $("#CS").offset().left;
var CS_y_pos = $("#CS").offset().top;
I get this:
I am not sure why the tool tip ends up on the bottom
Here is my jsfiddle:
http://jsfiddle.net/liondancer/rKPfe/
I thought .offset() would position the tooltips around the relative area but it is still pretty far =/
Could someone help me or guide me to manually positioning these tool tips? Much appreciated!

There are lots of plugin related to tooltip. like tipsy or jQuery ui and many more you can find on googling.
If you want it to do completely with css, the best approach is to wrap tooltip and trigger element. like
<div class="holder">
<div class = "tooltip">
<div class = "tooltip_body"> GH is OFF
<div class = "tooltip_arrow"></div>
</div>
</div>
<a class="holder" data-role="button" data-icon="plus"> GH</a>
</div>
Than you can give css of tooltip relative to your trigger element.
like bottom: 60px; right:0;
Note : Give display:inline-block and position:relative; on holder so it not require any extra space and tooltip will absolute to holder
Check fiddle http://jsfiddle.net/rKPfe/3/
Update
If you are not sure about the bottom position you can do with jQuery;
$('.tooltip').each(function(){
var elm=$(this),
holder=elm.closest('.holder');
elm.css('bottom',holder.outerHeight()+'px');
});
Left and right you can give relative(like left:0 or right:0) to holder position( which is not affected by changing window size) . Only in case if you want tooltip to be centered respect to holder yo can write.
$('.tooltip').each(function(){
var elm=$(this),
holder=elm.closest('.holder');
elm.css({
'bottom':holder.height()+'px',
'left':-(elm.outerWidth()-holder.outerWidth())/2+'px'
});
});

Because you are not taking into account the height and width of the tooltip itself.
Calculate its height and width and minus this off of the top and left values.
var width = parseFloat($(".tooltip").css('width'));
var height = parseFloat($(".tooltip").css('height'));
$(".tooltip").css({
left: CS_x_pos - width,
top: CS_y_pos - height
});