We Keep Coding

How can I set elements in the same line vertically?

Here is my code:
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
left = self.position().left;
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: left + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>
As you see, that popup is far away than hovered element. While I expect they be in the same line (vertically) on the right side.
How can I do that?

Change this
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.position().right; // Update this
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
Update your left variable with the example code
It was left = self.position().left; Update that to right = self.position().right;
and also this variable too
$(".tag_info").css({top: top + "px", right: left + "px"}).fadeIn(200);
to
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
rightside = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: rightside + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
body{
padding: 20px;
direction: rtl;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>long-length-tag</a>
<a>tag</a>
EDIT
Add this new function
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
And Update this Line
right = self.position().right;
to
right = self.right();
Hope it will helps you.

change left = self.position().left; to right = self.position().right;
change "left" into "right " in css.
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);

Reverse specific part of array

I'm trying to achieve a little dot animation whenever you reach a specific part in a section however, I got some trouble with the order within the array of element I'm animating see this fiddle or below. As you can see the order is off, when I remove middle.reverse(); the order is correct theoretically, but I need to reverse the middle part otherwise the animation doesn't make much sense:
console.log($);
$(document).ready(function() {
var table = $('<table class="steps"></table>');
var stepWrapper = $('<div class="steps-wrapper"></div>');
for (var i = 0; i < 7; i++) {
var tr = $('<tr></tr>');
for (var j = 0; j < Math.round($(window).width() / 2 / 40) - 1; j++) {
var td = $('<td></td>');
if (i == 3) {
td.addClass('active middle');
}
if (j == Math.round($(window).width() / 2 / 40) - 2 && i < 3) {
td.addClass('active first');
}
if (j == 0 && i > 3) {
td.addClass('active last');
}
tr.append(td);
}
table.append(tr);
}
stepWrapper.append(table);
$('section').each(function() {
var clone = stepWrapper.clone();
$(this).append(clone);
});
$(window).scroll(function() {
$('section .steps-wrapper').each(function() {
if ($(window).scrollTop() > $(this).offset().top - $(window).height() / 2 && !$(this).hasClass('active')) {
$(this).addClass('active');
var first = [],
middle = [],
last = [];
$(this).find('td.active').each(function() {
if ($(this).hasClass('first')) {
first.push($(this));
} else if ('middle') {
middle.push($(this));
} else if ('last') {
last.push($(this));
}
});
middle.reverse();
var combined = first.concat(middle, last);
TweenMax.staggerTo(combined, 0.5, {
autoAlpha: 1,
ease: Back.easeIn
}, 0.2);
}
});
});
});
section {
height: 100vh;
width: 100vw;
position: relative;
}
.steps-wrapper {
position: absolute;
width: 100%;
bottom: -150px;
}
table {
margin: 0 auto;
}
tr {} td {
width: 40px;
height: 40px;
opacity: 0;
visibility: hidden;
}
tr:nth-child(4) td:before,
tr:nth-child(1) td:last-child:before,
tr:nth-child(2) td:last-child:before,
tr:nth-child(3) td:last-child:before,
tr:nth-child(5) td:first-child:before,
tr:nth-child(6) td:first-child:before,
tr:nth-child(7) td:first-child:before {
content: '';
width: 5px;
height: 5px;
display: block;
margin: 15px auto;
background: black;
border-radius(50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<section></section>
<section></section>
<section></section>
Any tips?

iFrame popup on thumbnail click

I've got this script which fetches thumbnails from the Twitch API, and onclick of the thumbnail it opens up an iFrame with the actual stream. How can I make the iFrame popup in the middle of the screen and everything else becomes darker?
$('.games > div').click((e) => {
var gameDiv = $(this);
$('#twitch').children().fadeOut(500).promise().then(function() {
$('#twitch').empty();
var gameName = $(e.target).text().replace(' ', '%20');
console.log(gameName);
var twitchApi = "https://api.twitch.tv/kraken/streams?game=" +gameName;
$.getJSON(twitchApi, function(json) {
setData(json.streams)
});
function setData(twitchData) {
var i = 0;
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= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
});

This code works for me
<div class="overlay">
<iframe src="iframe-src-url"></iframe>
</div>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.74); /* semi-transparent background */
text-align: center;
display: none; /* hide this by default */
}
.overlay iframe {
margin: 30px auto;
}
</style>
Javascript code
function setData(twitchData) {
var i = 0;
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()
// append it to the overlay then show
$('.overlay').append( '<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>').show();
});
}
}
Hope this works for you
$('h1').click(function() {
$('.overlay').append('<iframe src="iframe-src-url"></iframe>').show();
});
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.74); /* semi-transparent background */
text-align: center;
display: none; /* hide the overlay by default */
}
.overlay iframe {
margin: 30px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Sample text</h1>
<div class="overlay"></div>

Why is append() not attaching itself to a div but it is appending to the heading h2

In the below code, why aren't the values in the array appending to the div element but I am able to append it to the heading? I am storing semicolon separated values in a local storage, then splitting each item and appending it to the div.
<!DOCTYPE html>
<html>
<head>
<title>To do</title>
<style type="text/css">
html {
overflow-y: scroll;
}
body {
padding: 0px;
margin: 0px;
font-family: Verdana, Geneva, sans-serif
}
h2 {
color: black;
text-align: center
}
#omnibox {
margin-left: 400px;
height: 30px;
width: 500px;
font-size: 14px;
padding: 10px;
position: center;
}
#searchWrapper {
margin-left: 500px
}
/*#omnibox,#listWrapper{margin:20px;position:center}*/
.searchable {
color: white;
display: block;
padding: 10px;
font-size: 16px;
background: #4298E8;
width: 300px;
margin-bottom: 10px
}
.searchable:hover {
background-color: #E8C420;
}
.delete {
display: block;
float: right;
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 10px;
background-color: black;
color: white;
text-align: center;
font-size: 1em;
transform: rotate(-45deg);
}
.delete:hover {
background-color: #D8FFF1;
color: red;
cursor: pointer;
}
.comments {
margin-left: -10px;
margin-top: 10px;
width: 310px;
display: inline-block
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
console.log('ready');
$(function() {
// body...
$('#omnibox').focus();
if (window.localStorage) {
localStorage.setItem(1,"how do;you do");
localStorage.setItem(2,"ok;got it");
myList();
function myList() {
var list = "";
console.log('Items in Local Storage = ' + localStorage.length);
document.querySelector('h2').innerHTML = "To do - " + localStorage.length;
for (var i = localStorage.length - 1; i >= 0; i--) {
var itemKey = localStorage.key(i);
var values = new Array();
values = localStorage.getItem(itemKey);
values = values.split(";");
console.log("Array - " + values + " Items - " + values.length);
list += "<div class='searchable' id='" + itemKey + "'><span class='note'>" + itemKey + " " + values[0] + " </span><input type='text' class='comments' placeholder='Comments.'><br/></div>";
var myComments = ""
for (var j = values.length - 1; j >= 0; j--) {
console.log("Element - " + values[j] + " parentNode is " + itemKey);
myComments += '<span>' + ' ' + values[j] + ' ' + '</span>';
};
//Why doesn't this work?
$("#itemKey").append(myComments);
//This works though.
$("h2").append(myComments);
}
$("#listWrapper").html(list);
}
var todo = document.querySelector('#omnibox');
$('#omnibox').keyup(function(e) {
document.querySelector('.errorMessage').innerHTML = "";
if (e.keyCode == 13) {
var todoVal = document.querySelector('#omnibox').value;
if (!todoVal.match(/\S/)) {
console.log('Empty value entered.');
document.querySelector('.errorMessage').innerHTML = "Enter something!";
return false;
} else {
console.log("Some value entered.");
$(this).trigger("enterKey");
var remember = new Array();
myNote = document.querySelector('#omnibox').value;
$('#omnibox').val("");
document.location.reload(true);
return true;
}
}
});
}
});
</script>
</head>
<body>
<h2></h2>
<div id='searchWrapper'>
<div id="listAddWrapper">
<div id="empty"></div>
</div>
<div id="listWrapper">
</div>
</div>
</body>
</html>

You can't use a selector to find an element before you've added it to the DOM. Even if you could, your selector is wrong — it should be "#" + itemKey. But that doesn't matter because it won't work anyway; the element it would match is still just part of that list string you're building.
Looking at your code, I think the best thing to do is to add the comments to the text while you're building it.
list += "<div class='searchable' id='" + itemKey + "'><span class='note'>" + itemKey + " " + values[0] + " </span><input type='text' class='comments' placeholder='Comments.'><br/>";
var myComments = ""
for (var j = values.length - 1; j >= 0; j--) {
console.log("Element - " + values[j] + " parentNode is " + itemKey);
myComments += '<span>' + ' ' + values[j] + ' ' + '</span>';
};
list += myComments + "</div>";

CSS3 transormation doesn't work on DIV elements

I want to perform "Flip card" effect on div elemenets (card). To to that I am using code below (i applied onclick event but I didn't iclude it here). Does someone knows where is the problem ? I want to flip "Card" Div element. To to that I am using "OpenCard()" JavaScript function that I included below.
EDIT 1: Added jsFiddle
http://jsfiddle.net/9CvYd/1/
JavaScript:
function OpenCard() {
var id = $(this).attr("id");
if ($("#" + id + " img").is(":hidden")) {
var img = document.querySelector("#" + id + " img");
img.classList.toggle("flip");
if (ImgOpened == "") {
BoxOpened = id;
ImgOpened = $("#" + id + " img").attr("src");
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 300);
} else {
CurrentOpened = $("#" + id + " img").attr("src");
if (ImgOpened != CurrentOpened) {
setTimeout(function() {
document.querySelector("#" + id + " img").classList.toggle("flip");
document.querySelector("#" + BoxOpened + " img").classList.toggle("flip");
BoxOpened = "";
ImgOpened = "";
}, 400);
Counter-=10;
wrong.play();
} else {
$("#" + id + " img").parent().css("disabled", "disabled");
$("#" + BoxOpened + " img").parent().css("disabled", "disabled");
ImgFound++;
BoxOpened = "";
ImgOpened = "";
Counter+=100;
correct.play();
}
setTimeout(function() {
$(Source + " div").bind("click", OpenCard)
}, 400);
}
$("#counter").html("" + Counter);
if (ImgFound == ImgSource.length) {
clearInterval(timer);
alert ("Game over! You result is: "+Counter);
}
}
}
CSS:
#picbox {
margin: 0px auto;
width: auto;
}
#boxcard {
z-index: 1;
display: table;
margin: 0px auto;
width: auto;
}
#boxcard div{
float: left;
width: 100;
height: 120;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
background: #B1B1B1;
z-index: 2;
}
#boxcard > div:nth-child(6n+1) {
clear: both;
}
#boxcard div img {
/*display: none;*/
border-radius: 10px;
z-index: 3;
}
#boxcard div img.flip{
transform: rotateY(180deg);
display:inline-block;
}
HTML:
<div id="boxcard" align="center">
<div id="card10" style="visibility: visible;"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png" class=""></div>
<div id="card11" style="visibility: visible;"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png" class=""></div>
<div id="card12" style="visibility: visible;"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>

The problem is your if statement condition is not matching.
Click a card here: http://jsfiddle.net/YffE5/1/
if ($("#" + id + " img").is(":hidden")) // Image is visible, thus code inside this will not execute.