We Keep Coding

jquery .hover() outFunction flashing bug

I am making a website with my friends for a class assignment but, for some reason, the outFunction part of my hover function is acting very strangely. When the mouse enters the element, this grey, div square fades in .fadeIn() in the background but then immediately fades out .fadeOut() even though that part is only supposed to come after the person is not hovering over the element anymore. And then, it starts to fade in again and then out, and so on.
$(document).ready(function() {
$("#hover").hide()
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
$(".topics").hover(function() {
var x = $(this).position();
$("#hover").css({
"left": x.left,
"width": $(this).outerWidth(true),
"height": $(this).outerHeight(true)
});
$("#hover").fadeIn();
}, function() {
$("#hover").fadeOut();
});
});
#hover {
position: absolute;
background: grey;
opacity: 0.25;
left: 10px;
height: 100px;
width: 100px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>
What's wrong, because I read up on the .hover() function of jQuery and I'm pretty sure that it isn't supposed to work like this.

Your hover div has an index greater than your h6 or topics. Which is why when your hover div appears on the top, you're not hovering the .topic anymore because it's under the hover div. You need to set the z-index for hover div to something below the index of the .topics, in this case -1.
The .topics also use margin which isn't counted as hover. You could use padding instead.
I prepared 2 snippets;
$(document).ready(function() {
$("#hover").hide()
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
$(".topics").hover(function() {
var x = $(this).position();
$("#hover").css({
"top": x.top,
"bottom": x.bottom,
"left": x.left,
"width": $(this).outerWidth(true),
"height": $(this).outerHeight(true)
});
$("#hover").fadeIn();
}, function() {
$("#hover").fadeOut();
});
});
#hover {
position: absolute;
background: grey;
opacity: 0.25;
left: 10px;
height: 100px;
width: 100px;
z-index: -1;
}
h6 {
padding: 20px 0px 20px 0px;
margin-block-start: 0px;
margin-block-end: 0px;
margin:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>
Alternatively, you could just use CSS if you really just want to highlight the element. Modify the element's css transition property for the fade effect.
$(document).ready(function() {
$("#hover").hide()
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
});
h6:hover {
background-color: rgba(0, 0, 0, 0.2);
}
h6 {
transition: 0.4s;
margin: 0px;
padding: 20px 0px 20px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>

Why not use a pure css solution? or do you have to use javascript?
Pure CSS solution
#hover:hover {
background: grey;
}
#hover {
position: absolute;
left: 10px;
height: 50px;
z-index: 2;
transition: background 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id = "header">
<div id = "hover">
<h6>WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?"</h6>
</div>
</header>

You can do it using css and applying styles of topics class
$(document).ready(function() {
var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
for (var i in topic_list) {
var element = document.createElement("h6");
var node = document.createTextNode(topic_list[i]);
$(element).append(node);
$(header).append(element);
element.className = "topics";
element.id = topic_list_id[i];
}
});
.topics {
padding: 20px;
}
.topics:hover {
background: grey;
opacity: 0.25;
transition: 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="hover">
</div>
</header>

Stick a div underneath thumbnails + limit the width

Alright. This might sound a little bit complicated. I've got a script which fetches thumbnails from a JSON. It fetches 9 thumbnails and onclick of the #load it fetches 9 more. How can I set the Load more button underneath the thumbnails and how to make it stick to the bottom of them each time you click it? ( I do not want it like it's now, on the side, but right in the middle and underneath them ).
+BONUS question: How can I fixate the thumbnails so they always show up 3 in a row. Since now, when I resize the window they change ( as you can see in the fiddle, there's only 2 per row now ).
jsfiddle.net/z6ge55ky/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="twitch">
<script src="js/main.js"></script>
<div id="load">
<img class="hvr-pulse" src="http://i.imgur.com/KHIYHFz.png?1">
</div>
</div>
$(function() {
var i=0;
var twitchApi = "https://api.twitch.tv/kraken/streams";
var twitchData;
$.getJSON(twitchApi, function(json) {
twitchData = json.streams;
setData()
});
function setData(){
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length;
for (; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
$('#twitch').append(img);
img.click(function(){
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
#twitch {
width: 60%;
position: absolute;
left: 20%;
text-align: center;
}
#twitch img {
border: 5px solid rgba(0,0,0,0);
margin: 0 auto;
cursor: pointer;
}
#load {
bottom: 0;
position: absolute;
}

You have declared the width for #twitch 60% remove that and for #load use top:100%
DEMO on jsfiddle

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/

jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

JQuery Masonry -- expand div's over other div's

I'm making something similar to an iphone layout (a bunch of tiles with pictures/numbers that you can click on to get more information). After the layout has been set, I'd like a click-event to expand one of the tiles to be full screen. Right now, it moves the tiles so that the layout is re-adjusted. Is it possible to get masonry to stop rendering so that one tile get's enlarged over the other tiles?
The following is what I've tried (but unsuccessfully). Note: It uses d3.js to generate the div's for masonry to use.
function drawGrid(divname,orders)
{
var mydiv = d3.select(divname);
$(divname).masonry({
itemSelector: '.g1',
isAnimated: true,
//isResizable: true
});
var myd = mydiv.selectAll("div");
var mygs = myd.data(orders,function(d){ return d.orderid;})
.enter().append("div")
.attr("class","g1")
.append("g");
var x1 = mygs.append("div")
.attr("class","tickerdiv")
.text(function(d){ return d.ticker; });
var ActiveOrder = "1";
$(divname+' .g1').click(function() {
//$(this).show('maximised');
console.log("clicked")
$(this).animate({"display":"none","position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"z-index": 1000 }, 1000);
});
var x = [];
x.redraw = function(o)
{
x1.text(function(d){ return d.ticker; });
}
return x;
}
and from the css file:
.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}

EDIT Ok, my first answer was not useful here - absolute positioning won't work in case of masonry's/Isotope's relatively positioned container with absolute positioned elemens contained therein; the solution is rather to take the content of a masonry/Isotope element out of the DOM on click and append it temporarily to the body. You can see the basic idea in my dirty swedish sandbox
<!-- masonry/Isotope item large -->
<div class="item large">
<div class="header">
<p>Click here</p>
</div>
<div class="minimised">
<p>Preview</p>
</div>
<div class="maximised">
<p>Content</p>
<button id="screen-overlay-on">Screen overlay on</button>
<div id="screen-overlay-background"></div>
<div id="screen-overlay-content">
<p>Content</p>
<button id="screen-overlay-off">Screen overlay off</button>
</div>​
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#screen-overlay-on').click(function(){
var sob = $('#screen-overlay-background').detach();
var soc = $('#screen-overlay-content').detach();
sob.appendTo('body');
soc.appendTo('body');
$('#screen-overlay-background').toggleClass("active");
$('#screen-overlay-content').toggleClass("active");
});
$('#screen-overlay-background, #screen-overlay-off').click(function(){
$('#screen-overlay-background').toggleClass("active");
$('#screen-overlay-content').toggleClass("active");
});
});
</script>
With CSS like
#screen-overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}
#screen-overlay-content {
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 320px;
margin: -120px 0 0 -160px;
background-color: #FFF;
z-index: 1000;
}
#screen-overlay-background.active, #screen-overlay-content.active {
display: block;
}

You can add a :hover to the element in css and change the z-index. You could easily change this on click with a class as well...
.item {
z-index:1
}
.item:hover{
z-index:2500;
}

How to move a carousel item to the middle when it's clicked in jquery

How can I make the carousel center the item I've clicked to the middle? I've looked everywhere for an answer but they're not straight answers... Can someone help me in this, please?
This is what I've done so far: http://jsfiddle.net/sp9Jv/
HTML:
<div id="wrapper">
<div id="carousel">
prev
next
<div class="viewport">
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
<li>Six</li>
<li>Sept</li>
<li>Huit</li>
</ul>
</div>
<!-- viewport -->
</div>
<!-- carousel -->
</div>
<!-- wrapper -->
JavaScript:
var carousel = $('#carousel'),
prev = carousel.find('.prev'),
next = carousel.find('.next'),
viewport = carousel.find('.viewport'),
item = viewport.find('li'),
itemWidth = item.outerWidth(true),
itemNum = item.length,
itemList = viewport.find('ul');
itemList.width(itemWidth * itemNum);
var moveCarousel = function(dir) {
itemList.animate({ left: '-=' + (itemWidth * dir) + 'px' }, 400);
};
//prev
prev.on('click', function(e) {
e.preventDefault();
moveCarousel(-1);
});
//next
next.on('click', function(e) {
e.preventDefault();
moveCarousel(1);
});
//carousel item
item.on('click', 'a', function(e) {
var self = $(this),
selfIndex = self.index(),
distance = itemList.width() / 2,
selfPos = self.position(),
selfPosLeft = selfPos.left,
viewportPosLeft = viewport.position().left;
e.preventDefault();
//move item to middle, but it doesn't work...
if (selfPosLeft > Math.floor(viewport.width())/3) {
itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
}
if (selfPosLeft < Math.floor(viewport.width())/3) {
itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
}
});
CSS:
#wrapper {
width: 500px;
margin: 20px auto;
}
#carousel {
position: relative;
}
.viewport {
width: 260px;
border: 1px solid #6e6e6e;
height: 80px;
overflow: hidden;
position: relative;
margin-left: 100px;
}
.prev, .next {
position: absolute;
}
.prev {
top: 20px;
left: 0;
}
.next {
top: 20px;
right: 0;
}
.viewport ul {
position: absolute;
}
.viewport li {
float: left;
margin-right: 10px;
}
.viewport li a {
display: block;
width: 80px;
height: 80px;
background: #ddd;
}

While you have prepared all the information needed about all items, you can calculate the value of the left based on the clicked item.
Here is my modification:
and I've bound the click action of carousel items with this function and passed the clicked item using the self keyword.
var itemClicked=function(item){
var itemIndex=$(item).index(),
newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
$(itemList).animate({left:newLeft+"px"},400);
};
You can check it working on this url: http://jsfiddle.net/rUZHg/3/
I assume that this should work despite of the number of viewed elements while it calculates the padding between the left 0 and the left of the center element.

Alright, it's ugly, I hope it gives you some ideas.
I created a global currentItem that tracks what's in the center. Every time the carousel moves this is updated.
The very useful variable I found was selfPosLeft which told me what was being clicked. I should add that 90 was the multiple I got from clicking around. Must be linked to your CSS and I don't know how to find this number dynamically.
Please try it :) http://jsfiddle.net/sp9Jv/4/
Well, I'm picturing that when you have more than 3 items you can change the code to compute the difference between the current item and the selfPosLeft of the clicked one, I'll leave that to you :) Like this, seems to work. http://jsfiddle.net/sp9Jv/5/