CrazyWebDeveloper CrazyWebDeveloper - 2 months ago 5
HTML Question

Div tag centering isn't working with jQuery

I found a way to center div tags using jQuery and it works for everything but this. The function jQuery.fn.center (first function in file) in this file

http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.1.js
is how I center div tags but it doesn't work with this file for some reason. I'm trying to center the div with the id
current_playlist
in the js snippet below but it centers the top left corner of the div instead.

Don't know why but the snippet wasn't working properly. This is the website I'm having problems with http://miilikesyoshi.gigaboywebdesigns.com/ just click one of the pictures and you'll see the centering problem I have.



$(document).ready(function() {

var top = Math.max($(window).height() / 2 - this.offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - this.offsetWidth / 2, 0);
$(".bg_fader").click(function() {
$(".bg_fader").css("display", "none");
$("#current_playlist").remove();
$("iframe").remove();
enableScroll();
$("body").css("overflow-y", "scroll");
});

var playlist_note = "<p><b>NOTE:</b> Click navigation button on top left corner to view other episodes in playlist.</p>";

$("#playlist1").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/1oyqANxWF00?list=PL1L8ZIWcaEsJpzvQgmZwrPJgoyCHTorz8&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Mario Kart Wii let's play playlist.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist2").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsKdkpuaxAgUl1_SjJ73R4Zy&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my let's play for Custom Track Grand Prix (CTGP) a hack for Mario Kart Wii.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist3").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsIB__j4jeRx8f9YBswNYWLc&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my playlist for the time trials mode in Mario Kart Wii.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist4").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsLFTcJIUH-3eaMgvjDtrotR&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is the New Super Mario Bros Wii playlist.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist5").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsI0YyycljxC7QitO-cPiOXl&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is the Super Smash Bros Brawl Project M Free-For-All (F4A) playlist.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist6").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsLWe_L32jDRU9eaa5equmeg&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> Music from Mario Kart Wii that is 30 minutes long.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist7").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsK8lu8V0_bf-P_r4THCWzsG&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my Boom Beach playlist.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist8").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsJUtU7E7FYpgnJsBGscMb0V&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my musical instruments playlist where I play Nintendo music.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist9").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsIDU1d1IV2xnxTnB04xDGHq&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my blue-shell dodges playlist.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

$("#playlist10").click(function() {
jQuery("<div/>", {
id: "current_playlist",
}).appendTo("body");

$("#current_playlist").center();

$("#current_playlist").html(
"<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/videoseries?list=PL1L8ZIWcaEsKheiHBR3SxeyEi4SaDsF_A&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
+ "<p><b>Description:</b> This is my playlist for Star Warfare 1 and 2 gameplay.</p>"
+ playlist_note
);

$(".bg_fader").css("display", "block");
disableScroll();
$("body").css("overflow-y", "hidden");
});

});

.pause_bttn {
display: none;
}

.bttn {
color: #00ACED;
cursor: pointer;
}

.contact_me_wrapper {
margin: 50px auto;
width: 45%;
background-color: white;
box-shadow: black 0px 2px 7px;
padding: 15px 10px;
}

legend {
font-size: 30px;
font-family: Digital;
background-color: white;
border-top: 2px solid lightgrey;
border-right: 2px solid lightgrey;
border-left: 2px solid lightgrey;
border-radius: 3px;
}

.bg_fader {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 200%;
opacity: 0.7;
display: none;
}

.playlist_link {
margin: 0px 15px;
float: left;
}

#current_playlist {
background-color: white;
border: 2px solid lightgrey;
border-radius: 5px;
box-shadow: black 0px 2px 7px;
}

#current_playlist > iframe {
margin: 10px;
border: 2px solid black;
border-radius: 3px;
}

#current_playlist > p {
padding: 5px 10px;
width: 550px;
}

<!DOCTYPE HTML>
<HTML lang = "EN-US">
<head>
<meta charset = "UTF-8">
<meta name = "title" content = "MiiLikesYoshi">
<meta name = "description" content = "This is the official website for MiiLikesYoshi on YouTube.">
<meta name = "author" content = "Adam S. Oates">
<title> Playlists </title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" href = "main.css">
<script type = "text/javascript" language = "javascript" src = "http://code.jquery.com/jquery-3.1.0.js"></script>
<script type = "text/javascript" language = "javascript" src = "http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.1.js"></script>
<script type = "text/javascript" language = "javascript" src = "main.js"></script>
<script type = "text/javascript" language = "javascript" src = "playlists.js"></script>
<audio id = "fancyMusic" loop>
<source src = "audio/music.mp3" type = "audio/mp3">
</audio>
</head>
<body>
<header>
<div class = "facebook_icon icon">
<a href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwjR1PDI9Y7PAhUg0IMKHfDjBVkQFggeMAE&url=https%3A%2F%2Fwww.facebook.com%2FMiiLikesYoshi%2F&usg=AFQjCNELIMTOxlZJ6Tztl1xLMJF79DKqQg&sig2=VD_lUAGE_CgypA7OW2Y49Q&bvm=bv.132479545,d.amc">f</a>
</div>

<div class = "google_plus_icon icon">
<a href = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&sqi=2&ved=0ahUKEwja3Z-Q9o7PAhWU8oMKHTYlC1YQFgg-MAY&url=https%3A%2F%2Fplus.google.com%2F%2BGigaboyWebDesigns&usg=AFQjCNHKXSjVOBodSa8OuVj8s950ke0OWw&sig2=KH2I_ahP5bLWwNT7BxG5Mg&bvm=bv.132479545,d.amc">G+</a>
</div>

<!-- Remove "style = 'desplay:none;'" when you get twitter for GWD. -->
<div class = "twitter_icon icon" style = "display:none;">
<a href = "http://www.twitter.com/"><img src = "images/bird.png" class = "twitter_img"></a>
</div>

<div class = "upcoming_events">
<span class = "upcoming_title_wrapper">Upcoming Livestreams: </span>
<span class = "time_wrapper">
<span id = "days_countdown">00</span> Days
<span id = "hours_countdown">00</span> Hours
<span id = "minutes_countdown">00</span> Minutes
<span id = "seconds_countdown">00</span> Seconds
</span><br>
<span class = "event_wrapper">No upcoming livestreams.</span>
</div>
</header>

<div class = "logo_wrapper">
<span class = "logo_text">Mii Likes<br>&nbsp;&nbsp;&nbsp;&nbsp;Yoshi</span>
</div>

<div class = "links_wrapper">
<a href = "index.html">Home</a> |
<a href = "videos.php">Videos</a> |
<a href = "playlists.php" class = "current_link">Playlists</a> |
<a href = "contact-me.php">Contact Me</a>
</div>

<section class = "main_section_wrapper">
<figure>
<span class = "pointer_cursor playlist_link" id = "playlist1">
Mario Kart Wii Let's Play || #1<br>
<img src = "https://i.ytimg.com/vi/F4j2RovjbVE/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=3WpUrFrz70HB3qrKeL4-k9GHExk" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist2">
Custom Track Grand Prixs || #2<br>
<img src = "https://i.ytimg.com/vi/8VhN6PuKJQQ/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=qfCgzBads5L8HEjnMvcG5meB2Yo" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist3">
Mario Kart Wii Time Trials || #3<br>
<img src = "https://i.ytimg.com/vi/BPU_JjC0sRs/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=bGEUMrcSPUiXAOPXjq3RHYJYcPU" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist4">
New Super Mario Bros Wii 2-Player || #4<br>
<img src = "https://i.ytimg.com/vi/cvdToX0qpJA/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Q_9f0HZBMdr1cuXFRbOluDgcLtY" class = "playlist_img">
</span><br>

<span class = "pointer_cursor playlist_link" id = "playlist5">
Super Smash Bros Project M F4A<br>
<img src = "https://i.ytimg.com/vi/z1FRzJSREb4/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ckT3SNVenuFD-H_gGACvumuxRgY" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist6">
Mario Kart Wii Music<br>
<img src = "https://i.ytimg.com/vi/NoyHiTp4qyc/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=0x99nrbswzRSsBt3sm91dvXwWKw" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist7">
Boom Beach<br>
<img src = "https://i.ytimg.com/vi/8a3M97olSZ8/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=36S0Fax5iggJUsTen5Ca64Lzago" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist8">
Playing Instruments<br>
<img src = "https://i.ytimg.com/vi/_Z-usnvpr5Y/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=ZlsOY5CyHfOExuly9G_gT_mSrEc" class = "playlist_img">
</span><br>

<span class = "pointer_cursor playlist_link" id = "playlist9">
Blue Shell Dodges<br>
<img src = "https://i.ytimg.com/vi/iqR2ZsUYepY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=4LYLGke9o_DZ3Rfr8EPcIy_Xjwc" class = "playlist_img">
</span>

<span class = "pointer_cursor playlist_link" id = "playlist10">
Star Warfare<br>
<img src = "https://i.ytimg.com/vi/uKXm-9qzn1s/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=yBStUpT8xpNyHbTirSz1h1bLgF0" class = "playlist_img">
</span>
</figure>
</section>
<div class = "bg_fader">&nbsp;</div>
</body>
</HTML>




Answer

You should call center method after content was embedded

$("#playlist1").click(function() {
    jQuery("<div/>", {
        id: "current_playlist",
    }).appendTo("body");

    $("#current_playlist").html(
        "<iframe width = '560' height = '315' src = 'https://www.youtube.com/embed/1oyqANxWF00?list=PL1L8ZIWcaEsJpzvQgmZwrPJgoyCHTorz8&autoplay=1' frameborder = '0' allowfullscreen></iframe>"
        + "<p><b>Description:</b> This is my Mario Kart Wii let's play playlist.</p>"
        + playlist_note
    );

    $(".bg_fader").css("display", "block");
    disableScroll();
    $("body").css("overflow-y", "hidden");

    $("#current_playlist").center();
});
Comments