We Keep Coding

Positioning a div to fixed on scroll to parent div

I have a div scroll-content that contains another div fixme which I want to fix only when the scroll-content div is at the top of the screen. If user scrolls past the scroll-content div, the fixme should disappear. I am using the code below but it doesn't seem to work:
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({
position: 'fixed',
top: '50%',
left: '50%',
display: 'block'
});
} else {
$('.fixme').css({
display: 'none'
});
}
});
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
background: black;
height: 1000px;
}
.fixme {
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>

This here is an example that uses position sticky to keep the .fixme element inside of the .scroll-content element. It probably didn't work before in your own attempt because of jQuery overwriting the position property with fixed.
I hope that this is the desired effect.
Otherwise let us know so we can help you figure out another solution.
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
position: relative;
background: black;
height: 1000px;
}
.fixme {
position: sticky;
top: calc(50% - 50px);
left: 50%;
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
transform: translate(-50%, 0%);
}
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>

Unwanted HTML element flickering

I was working on a quick pen for a project when I ran into flickering issues when dragging an element across an image I'm using. Not really sure whats going on here, the problem doesn't seem to occur when you initially load the pen and pan over it the first time, but after that it starts bugging out.
Link to Pen.
Snippet Demo:
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagger').show();
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
$('.tagger').hide();
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});
.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagger .name {
display: none;
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagger .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
.tagging {
position: absolute;
z-index: 3;
}
.tagging .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagging .name {
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagging .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png" height="600">
</div>
<div class="tagger">
<div class="frame"></div>
<div class="name">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Fork</li>
<li>Fyve</li>
</ul>
</div>
</div>
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagger').show();
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
$('.tagger').hide();
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});

The hover effect consider the cursor and actually your are moving an element with the cursor so what's happening is this:
You start inside the .tagger element and everything is ok as the cursor is on the .tagger element. No event on the #crowd as the cursor never touched/hovered the #crowd until now.
Once you click or you do something that bring the cursor on #crowd you trigger the hover effect which mean that if you leave you will trigger the mouseleave!
So you hover again on the element .tagger and you trigger the mouseleave as expected.
The element disappear (because of what written in the handler of mouseleave) and the cursor is now on #crowd and you trigger again the hover!
The element .tagger appear again, the cursor is on it and you trigger the mouseleave of #croud and so on ...
The flicker is the infinite sequence (4) (5) (4) (5) (4) ...
To fix this you may change the logic as follow. No need to apply the hide/show function, you can simply wrap the image and .tagger element inside the same wrapper and apply overflow:hidden then keep only the click events.
Here is the full code (I made the image smaller so we can see it in the reduced snippet)
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});
.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagger .name {
display: none;
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagger .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
.tagging {
position: absolute;
z-index: 3;
}
.tagging .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagging .name {
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagging .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
.container {
overflow:hidden;
position:relative;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png" width='400' height="300">
<div class="tagger">
<div class="frame"></div>
<div class="name">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Fork</li>
<li>Fyve</li>
</ul>
</div>
</div>
</div>

You are assuming .tagger is JUST the border you've drawn. In actuality, there is an invisible box there. The invisible box is on top of #crowd. When .tagger loads, you are no longer hovering over #crowd, you are hovering over .tagger, which is hovering over #crowd.
To fix it, you may change .tagger from one large box around the mouse, to 4 skinny boxes, so that there is nothing directly below the mouse.

You continuously hide() and show() .tagger repeatedly. mouseleave hides and :hover shows.
there are two ways to fix this:
move the mouseover effect inside the #crowd .hover()
this makes the movement a bit shuddery
see this Pen enter link description here
delete the .delete() call within the .mouseleave handler
Also, a note: The jQuery .hover() method takes two callbacks:
1. for the mouseenter
2. for the mouseleave
So the code could be changed a bit in that regard too.

Mouseover Mouseout with overlapping content

When I mouseover the div with class=background (the little green square in the demo) I fade in the div with class=hover (displaying the grey and blue divs in the demo).
The grey partially overlaps the .background and I can move the mouse around inside it without triggering the mouseout on .background.
But..
If I move the mouse outside the grey div (to hover over the blue for example) then the mouseout on .background gets triggered.
How can I prevent this from happening so that as long as I am hovering over the newly displayed .hover div the mouseout on '.background' will not be triggered?
$('.AddDiv').on('click', function() {
var html = '<div class="container"><div class="background"></div><div class="hover"></div></div>';
$('.Wrap').prepend(html);
});
$(".Wrap").on("mouseover", ".background", function() {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function() {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.content {
width: 170px;
height: 120px;
background-color: grey;
position: relative;
left: 15px;
top: 15px;
}
.navigation {
width: 190px;
height: 40px;
background-color: blue;
position: relative;
top: 30px;
left: 5px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background"></div>
<div class="hover">
<div class="content"></div>
<div class="navigation"></div>
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

Use mouseleave instead of mouseout:
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseleave", ".hover", function () {
$(this).fadeOut(200);
});

how to start transition with onclick on div?

I am developing a widget, for this i am using addClass and removeClass method of jquery but some how it is not working please help me with this.
Here is the code:
$('#test').click(function() {
$(this).addClass('second');
console.log("hello");
}, function() {
$(this).removeClass('second');
});
#test {
transition: all 0.5s ease;
}
.first {
width: 150px;
height: 30px;
position: fixed;
bottom: 0px;
right: 25px;
}
#prop {
width: 150px;
height: 30px;
position: fixed;
bottom: 0px;
right: 25px;
background-color: #abc322;
color: white;
text-align: center;
}
.second {
width: 150px;
height: 300px;
position: fixed;
bottom: 0px;
right: 25px;
box-shadow: 3px 4px 40px grey;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="test" class="first">
<div id="prop">
freight Calculator
</div>
<p>
welcome to freight calculator
</p>
</div>
when i click on the div it should change its class and start transition but it is not working. please identify the mistake that i have done.
Thank you for your time.

jQuery .click() takes one function as event listener. You can use .toggleClass() instead.
$('#prop').click(function(e) {
e.preventDefault();
$('#test').toggleClass('second');
});
#test {
transition : all 0.5s ease;
}
.first {
width: 150px;
height: 30px;
position: fixed;
bottom: 0px;
right: 25px;
}
#prop {
cursor: pointer;
width: 150px;
height: 30px;
position: fixed;
bottom: 0px;
right: 25px;
background-color: #abc322;
color: white;
text-align: center;
}
.second {
width: 150px;
height: 300px;
position: fixed;
bottom: 0px;
right: 25px;
box-shadow: 3px 4px 40px grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test" class="first">
<div id="prop">
freight Calculator
</div>
<p>
welcome to freight calculator
</p>
</div>

The click method only takes one callback function: the one that should fire on click. You provided two callbacks (one that adds the class and one that removes it). jQuery doesn't know what to do with that, it assumes the first callback is an eventData object and takes the second function as the action to perform on click. This means that on click, all it does is remove the class.
Refer to https://api.jquery.com/click/ to read more about how to use the click() method.
If you provide only one callback it works fine: https://jsfiddle.net/uqmupq3h/

The .click() method only takes one callback function so you should use .toggleClass() instead of .addClass() and .removeClass().
$('#test').click(function(){
$(this).toggleClass('second');
})
https://jsfiddle.net/knj0ec6n/

Hover over text jQuery

I'm running into a problem, and I'm not quite sure how to solve it.
Currently, when one hovers over this particular picture, the opacity drops down (revealing a background color) and type appears. The problem, is that I want it to continue to act as if it is hovered over, even when they hover over the type.
Should I try changing the z-index? For some reason that didn't work...
JSFIDDLE http://jsfiddle.net/4jrUp/
HTML
<a class="bg" href="">
<h1 class="first_title">FrameMonkey</h1>
<img class="portfolio-item" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg">
<h3 class="first_description">A project that I've been working on since June - check back soon to see it in my portfolio!</h3>
</a>
CSS
.portfolio-item:hover {
overflow: hidden;
z-index: 1;
opacity:0.1;
}
.portfolio-item, .bg {
height: 200px;
width: 200px;
left: 0px;
border-radius:25px;
position:absolute;
}
.bg {
background-color: rgba(48, 48, 48, 0.9);
top: 100px;
display:inline-block;
}
.first_title {
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
Javascript
$(".portfolio-item").hover(function () {
$(".first_description").css("opacity", "1");
$(".first_title").css("opacity", "1");
}, function () {
$(".first_description").css("opacity", "0");
$(".first_title").css("opacity", "0");
});
Thanks!

You actually don't need jQuery for this.
UPDATED EXAMPLE HERE - ( I added an optional transition in there too.. )
Make the parent element, .bg, block level, and set the border-radius and dimensions on it. The important part is that it's relatively positioned so that the children elements are absolutely positioned, relative to the parent.
.bg {
background-color: rgba(48, 48, 48, 0.9);
position:relative;
height:200px;
width:200px;
display:block;
border-radius:25px;
overflow:hidden;
}
The :hover part is quite simple actually, all you do is change the opacity.
.bg:hover .first_title, .bg:hover .first_description {
opacity:1;
}
.bg:hover .portfolio-item {
opacity:.1;
}
And the rest of the CSS:
.portfolio-item {
height: 200px;
width: 200px;
position: absolute;
}
.first_title, .first_description {
position: absolute;
color: white;
padding: 10px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index: 1;
opacity: 0;
}
.first_title {
font-size: 15pt;
}
.first_description {
top: 50px;
font-size: 12pt;
}

Try adding the hover event to the .bg instead of .portfolio item, that way you can remove the z-index.
The jQuery change
$(".bg").hover(function () {
$(this).children(".first_description").css("opacity", "1");
$(this).children(".first_title").css("opacity", "1");
}, function () {
$(this).children(".first_description").css("opacity", "0");
$(this).children(".first_title").css("opacity", "0");
});
And the CSS change
.first_title {
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
See this fiddle