JavaScript On First Visit Agree to ToS - javascript

I am trying to make a script that if you've never visited the site before, it will redirect to /agree.htm where if they click okay it wont ask again, but if they don't click it will keep redirecting to the /agree.htm page.
Here's the JavaScript so far:
function doit() {
document.getElementById('uuid').innerHTML = generateUUID();
var yes = getUrlVars()["agreed"];
if (yes == "true") {setCookie('VisitDate',1,365); }
if (yes != "true") {window.location = "/agree.htm";}
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function getCookie(NameOfCookie){
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) {
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}
function setCookie(NameOfCookie, value, expiredays) {
var ExpireDate = new Date();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
function delCookie (NameOfCookie) {
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
function DoTheCookieStuff(LastChangeDate)
{
dt=new Date();
year=dt.getYear(); if (year<=9) {year="0"+year};
month=dt.getMonth()+1; if (month<=9) {month="0"+month};
date=dt.getDate(); if (date<=9) {date="0"+date};
ThisDate=year+month+date;
LastVisitDate=getCookie('VisitDate');
if (LastVisitDate!=null)
{ if (LastVisitDate<LastChangeDate) {}
else {}
setCookie('VisitDate',ThisDate,365)
}
else {window.location = "\agree.htm";}
}
It sets the cookie but will keep redirecting to the /agree.htm page.
AGREE.HTM:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>StratHaxxs Co. ToS Agreement</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.ui-dialog-titlebar-close {
visibility: hidden;
}
.ui-widget.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
.ui-widget-content.success-dialog {
background: #F9F9F9;
border: 1px solid #90d93f;
color: #222222;
}
.ui-dialog.success-dialog {
left: 0;
outline: 0 none;
padding: 0 !important;
position: absolute;
top: 0;
}
.ui-dialog.success-dialog .ui-dialog-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: auto;
position: relative;
padding: 0 !important;
margin: 0;
}
.ui-dialog.success-dialog .ui-widget-header {
background: #b0de78;
border: 0;
color: #fff;
font-weight: normal;
}
.ui-dialog.success-dialog .ui-dialog-titlebar {
padding: 0.1em .5em;
position: relative;
font-size: 1em;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: center;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: none;
}
</style>
<script>
$(function() {
$('#success').dialog({
height: 180,
width: 350,
modal: true,
resizable: false,
dialogClass: 'no-close success-dialog',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
window.location.href = "/?agreed=true";
}
}
});
});
</script>
</head>
<body>
<div id="success" title="Welcome!">
<p>
This is the first time you have visited our site, to continue to the site:
Click 'Ok' if you agree to our <b>ToS</b>: Here<br><br>Otherwise press the back button or close this window.
</p>
</div>
</body>
</html>

Working Demo
It looks like you had all the right functions listed in your Javascript, but they weren't being called.
On page load you want to check if the cookie is present. If not, then you'll want to show the jQuery Dialog modal.
I added a button to remove the cookie so you can test.
Remove the Javascript from your <script> tag and replace it with this:
Javascript
$( document ).ready(function() {
$('#remove-cookie').click(function() {
delCookie('agreeCookie');
$('h1').text('Cookie Removed');
$('#remove-cookie').hide();
});
var cookieStatus = getCookie('agreeCookie');
console.log(cookieStatus);
if (cookieStatus != 'true') {
tryRedirect('agree.htm');
$('#success').show().dialog({
height: 180,
width: 350,
modal: true,
resizable: false,
dialogClass: 'no-close success-dialog',
buttons: {
Ok: function () {
setCookie('agreeCookie', true, 100);
$(this).dialog("close");
window.location.href = "index.html?agreed=true";
}
}
});
}
else {
tryRedirect('index.html');
$('#remove-cookie').show();
}
function tryRedirect(target) {
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/') + 1);
if (filename != target) {
window.location.href = target;
}
}
});
To Test
Open the Demo and click Ok in the dialog (this will add the cookie).
Reload the page. The cookie should be present and you'll be redirected to index.html and shown the Remove cookie button (repeat this step as much as you want and it should still do this).
Press the Remove cookie button and reload again. Now it should redirect to agree.htm and show the dialog again.

Related

Play video at specific interval of time using javascript and post messege

I have a simple app which I have three different videos, I want each video to play at certain time. As example:
First video to play.
between 5:00 AM and 10:00 AM.
Second video to play.
between 10:00 AM and 22:00 PM.
Third video to play.
between 22:00 PM and 5:00 AM.
So assume if a user visited my app around 9:00 AM. It should automatically play the first video. If the user visit around 11: 00 AM, the second video plays, and etc.
I want a function to run function at set interval only at certain time of the day using javascript and the postMessage function,
Here is my solution:
app.js
var welcomeMovie1 = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4";
var welcomeMovie2 = "http://mirrors.standaloneinstaller.com/video-sample/TRA3106.mp4"
var welcomeMovie3 = "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4";
var messageTime;
//function to play a video1 to iframe using post messages
function welcomeMessage1() {
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'playVideo(welcomeMovie1)'
}),
'*'
)
}
//function to play a video2 to iframe using post messages
function welcomeMessage2() {
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'playVideo(welcomeMovie2)'
}),
'*'
)
}
//function to play a video3 to iframe using post messages
function welcomeMessage3() {
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'playVideo(welcomeMovie2)'
}),
'*'
)
}
//function to play a video1 to iframe using post messages at Specific time
setInterval(function() {
var messageTime = new Date().getHours();
if (messageTime >= 5 && messageTime < 10) {
welcomeMessage1();
console.log(welcomeMessage2());
}
}, 1000 * 60);
//function to play a video2 to iframe using post messages at Specific time
setInterval(function() {
var messageTime = new Date().getHours();
console.log(date.toLocaleString('en-GB'));
if (messageTime >= 10 && messageTime < 22) {
welcomeMessage2();
console.log(welcomeMessage2());
}
}, 1000 * 60);
//function to play a video3 to iframe using post messages at Specific time
setInterval(function() {
var messageTime = new Date().getHours();
if (messageTime >= 22 && messageTime < 5) {
welcomeMessage3();
}
}, 1000 * 60);
// promise function to create custom video controls and play functions
function playVideo(src) {
$("#playervideo").attr("src", src);
$("#playervideo")[0].muted = false;
if (autoplay == true) {
var playPromise = $("#playervideo")[0].play();
if (playPromise !== undefined) {
playPromise.then(function() {}).catch(function() {
if (autoplay == true) {
$("#video-unmute-button").addClass("show");
$("#playervideo")[0].muted = true;
var playPromise2 = $("#playervideo")[0].play();
playPromise2.then(function() {
}).catch(function() {
$("#video-start-button").addClass("show");
$("#video-start-button").on("click", function() {
$("#playervideo")[0].muted = false;
$("#playervideo")[0].play();
$("#video-start-button").removeClass("show");
});
});
console.log("pause force");
} else {
}
});
} else {}
} else {
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Frame</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<iframe id="videoframe" src="videoframe.html"></iframe>
<br/>
<!-- <input id="name" type="text"/> -->
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
</html>
Here is plunker for full demo: demo
Unfortunately it's not working,
What do I need to change in my code to get what I want?
<iframe> & <video>
Autoplay
Autoplay ain't what it used to be. There's too many restrictions and various criteria involved in getting a <video> tag to autoplay. Here's what was needed:
<video> tag needs [muted] and [autoplay] attributes
<video ... muted autoplay></video>
<iframe> tag needs [allow="autoplay"] attribute. Full screen is optional
<iframe ... allowfullscreen allow="autoplay; fullscreen"></iframe>
In the demo below loadVideo() is the function that loads a MP4 file to the <video> tag's [src] according to the current time. Autoloading media from an <iframe> is tricky because they are one of the last of the DOM content to load. It's best to run the function from the child page (videoframe.html) in an IIFE (Immediately-invoked Function Expression).
(function() {
loadVideo();
})();
Promises
In order to invoke play() method, you'll need to use the Promise API. This is another instance when something works and engineers want to overcomplicate it.
async function promisePlay() {
try {
await document.querySelector('video').play();
} catch (err) {
...
}
}
postMessage
For cross-domain communication using the postMessage API via <iframe>, the developer must have ownership of both domains. Ownership doesn't necessarily mean full administrative privileges, just enough so that both pages can actually be edited. There are some APIs that'll meet you halfway like YouTube and Vimeo as well.
Basically the parent page (index.html) will send a message:
window.frames[0].postMessage(data, origin);
window.frames[0] will get the first <iframe> and access it's window content, an equivalent to: document.querySelector('iframe').contentWindow;.
data is just a string.
origin is usually the location.protocol and location.hostname or location.origin of the parent page (index.html): https://www.example.com.
The child page (videoframe.html) receives the data (just a typical string) by listening for the message event on it's Window Object:
window.addEventListener("message", callback);
Most examples show how a message is sent and received, and the result of the message being displayed on the child page -- lame 🙄. Here's what a callback would look like if it were actually useful:
function callback(event) {
var string = event.data;
// Optional-------------------------
var from = event.origin;
if (from !== 'https://www.example.com') {
document.querySelector('#displayMsg').textContent = `MESSAGE REJECTED`;
return;
}
//----------------------------------
if (string === "play") {
promisePlay();
} else if (string === "pause") {
document.querySelector('video').pause();
} else if (string === "stop") {
document.querySelector('video').pause();
document.querySelector('video').currentTime = 0;
} else {
document.querySelector('#displayMsg').textContent = `ERROR: ${string} is not a command.`;
}
}
Plunker
Demo
index.html
Note: The following Stack Snippet does not function properly due to SO restriction on <iframe> use. For a fully functional demo go to this Plunker.
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font: 400 16px/1.5 Consolas;
overflow: hidden;
}
main {
width: 100%;
height: auto;
padding: 10px;
}
section {
height: 0;
width: 100%;
position: relative;
padding-bottom: 56.25%;
margin: 15px auto 5px;
}
fieldset {
width: fit-content;
padding: 5px;
}
iframe {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
select,
button {
font: inherit;
padding: 0 3px;
line-height: 1.2;
}
#msg {
position: absolute;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
}
#time,
#rX {
display: block;
float: left;
color: gold;
padding: 0 5px;
width: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Frame</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section>
<iframe src="https://run.plnkr.co/preview/cjpwrvczh00073a5v3m08unmw/videoframe.html" width='100%' height='100%' scrolling='no' frameborder='0' allowfullscreen allow="autoplay; fullscreen"></iframe>
</section>
<form id='control'>
<fieldset>
<select id='tX'>
<option value='Timeslot'>Select</option>
<optgroup label='Command'>
<option>Play</option>
<option>Pause</option>
<option>Stop</option>
</optgroup>
<optgroup label='Load Media'>
<option>Video 1</option>
<option>Video 2</option>
<option>Video 3</option>
</optgroup>
<optgroup label="Test">
<option>Messages</option>
<option>Controls</option>
</optgroup>
</select>
<button>Send</button>
</fieldset>
</form>
</main>
<script>
window.onload = function(e) {
var ctrl = document.forms.control;
var cX = ctrl.elements;
var tX = cX.tX;
ctrl.addEventListener('submit', function(e) {
e.preventDefault();
window.frames[0].postMessage(tX.value, "https://" + location.hostname);
console.log(tX.value);
});
};
</script>
</body>
</html>
videoframe.html
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font: 400 16px/1.5 Consolas;
overflow: hidden;
}
main {
width: 100%;
height: auto;
padding: 10px;
}
section {
height: 0;
width: 100%;
position: relative;
padding-bottom: 56.25%;
margin: 15px auto 5px;
}
fieldset {
width: fit-content;
padding: 5px;
}
iframe {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
select,
button {
font: inherit;
padding: 0 3px;
line-height: 1.2;
}
#msg {
position: absolute;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
}
#time,
#rX {
display: block;
float: left;
color: gold;
padding: 0 5px;
width: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video iframe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<aside id='msg'>
<output id='rX'></output>
<time id='time'></time>
</aside>
<video id='vX' src='about:blank' width='96%' muted autoplay></video>
<script>
var v = document.getElementById('vX');
var vid =
'https://storage04.dropshots.com/photos6000/photos/1381926/20170326/';
var r = document.getElementById('rX');
var t = document.getElementById('time');
(function() {
loadVideo();
})();
window.addEventListener("message", rXMsg);
function rXMsg(e) {
var msg = e.data;
switch (msg) {
case 'Play':
playMedia();
break;
case 'Pause':
v.pause();
break;
case 'Stop':
v.pause();
v.currentTime = 0;
break;
case 'Video 1':
v.src = vid + '005609.mp4';
v.load();
break;
case 'Video 2':
v.src = vid + '005610.mp4';
v.load();
break;
case 'Video 3':
v.src = vid + '005612.mp4';
v.load();
break;
case 'Messages':
toggleAttr('#msg', 'hidden');
break;
case 'Controls':
toggleAttr('#vX', 'controls');
break;
default:
loadVideo();
break;
}
stamp(msg);
}
function loadVideo() {
var hrs = stamp();
// 05:00 - 09:59
if (hrs >= 5 && hrs < 10) {
v.src = vid + '005609.mp4';
v.load();
}
// 10:00 - 21:59
else if (hrs >= 10 && hrs < 22) {
v.src = vid + '005610.mp4';
v.load();
}
// 22:00 - 04:59
else {
v.src = vid + '005612.mp4';
v.load();
}
stamp('Autoload');
}
async function playMedia() {
try {
await v.play();
} catch (err) {
stamp('Promise Rejected');
}
}
function toggleAttr(selector, attr) {
var node = document.querySelector(selector);
var prop = node.getAttribute(attr);
if (!prop) {
node.setAttribute(attr, true);
} else {
node.removeAttribute(attr);
}
}
function stamp(str) {
var now = new Date();
var hrs = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var h = hrs > 9 ? "" + hrs : "0" + hrs;
var m = min > 9 ? "" + min : "0" + min;
var s = sec > 9 ? "" + sec : "0" + sec;
var time = h + ":" + m + ":" + s;
r.textContent = str;
t.textContent = time;
return hrs;
}
</script>
</body>
There is no need to use setInterval; you only need to use an if statement or a switch case.
I removed the setInterval code and made one if statement. In the last condition, you need to change the double ampersand (&&/AND) to || (OR) - the (>22 OR <5)- otherwise it doesn't make sense. I tested the following by adjusting my system clock, it seems to work.
Here's a fiddle
Happy holidays!
var welcomeMovie1 = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4";
var welcomeMovie2 = "http://mirrors.standaloneinstaller.com/video-sample/TRA3106.mp4"
var welcomeMovie3 = "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4";
var messageTime = new Date().getHours();
var welcomeMsg = "";
var vid = " ";
//console.log(messageTime);
if (messageTime >= 5 && messageTime <= 10) {
welcomeMsg = "early bird";
vid = welcomeMovie1;
//console.log(welcomeMessage2);
}
else
if (messageTime >= 10 && messageTime < 22) {
welcomeMsg = "middle of day";
vid = welcomeMovie2;
//console.log(welcomeMessage2());
}
else
if (messageTime >= 22 || messageTime < 5) {
welcomeMsg = "night owl";
vid = welcomeMovie3;
}
////}, 1000 * 60);
playVideo(vid);
console.log("Hello! Your welcome message is " + welcomeMsg + " " + vid)
// promise functionb to create custom video controls and play functions
function playVideo(src) {
console.log("Hello! Your welcome message is " + welcomeMsg + " " + vid)
$("#playervideo").attr("src", src);
$("#playervideo")[0].muted = false;
if (autoplay == true) {
var playPromise = $("#playervideo")[0].play();
if (playPromise !== undefined) {
playPromise.then(function() {}).catch(function() {
if (autoplay == true) {
$("#video-unmute-button").addClass("show");
$("#playervideo")[0].muted = true;
var playPromise2 = $("#playervideo")[0].play();
playPromise2.then(function() {
}).catch(function() {
$("#video-start-button").addClass("show");
$("#video-start-button").on("click", function() {
$("#playervideo")[0].muted = false;
$("#playervideo")[0].play();
$("#video-start-button").removeClass("show");
});
});
console.log("pause force");
} else {
}
});
} else {}
} else {
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id="playervideo" controls src=" ">
</iframe>

Using CSS content attribute vs JavaScript

I'm creating input that shows different notes based on content. First, I tried using content attribute of CSS, but it only works for :before and :after selectors.
So, I created another div element, using :before on it to display the note text. Should I switch to using JavaScript to do this?
JS Fiddle
HTML:
<div class="link-input-container">
<input class="link-input" placeholder="Zalijepi link ovdje..." type="text" class="url_input" name="url_input">
</div>
<div class="link-note no-input">
<div class="link-note-content">
</div>
</div>
CSS:
.link-input-container {
position: relative;
display: inline-block;
}
.link-input-container::after {
display: block;
content: "";
width: 14px;
height: 14px;
background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACT0lEQVRIS8WVS2sTURTHf2N8JMG2iK/WUt+LWpSilFIV9BPoByh059qNghsxtRtBcevCreAHqJ9AQQ0hVIqvitpqk2mrzUOrJK2JuXKGudNk5s60m+DAZTJzz/n/zuOeiUWbL6vN+vxfgE3yUi+VJ1FZbmQTmoE4WjCp4HIYZDM2RoB27Dl/lsXnLzFBPJuxURYfPTbaSOYBgHbsPjfiVWbpRbpFoFmcchlVKuO30c4BwAJJ1T0yHCj7UjrjQNyoJnvGRqFUQhVL64GkMxyg0qJpymDcgtT+4aEA5Fsm67wTcVUsogpFz0b2FNzupTLe7BjWAweyb+hMABI70Y8qFGgsF7y979kpo7ixB9rLJulA9p4ejJzF5VfToeKRANnUkD2Dp4yQwvTrSPENAWIgTd99csAIKL55F2iq3zDyUyHi0tC17FRomUrvZyIhoQAtXrcXqNu2A1CmwQHKHz6GQowALV7L29RyeS/6n58+O7+7jh8LZCR7/hkw9sATz+WpzefWxWfnnIa6Tqmuo0eCkNm5zQ9a5+FDnsDKl68tp0Wfrigb7Rw5aB0H+/g1n+MvTPRRcaLXV45kKga3tI1piv0lEtgWYCuwbYbEzU6sGz9Q9wao3nf72xyQekvi2i6s6yuou/1U7wB1oObeG3Iumh1EfDuwE+gA4s+IX73A6kMg5sLFXpYcKFmNp8SvXGT1gStcBX6764/s+wESfQJIAjvcbES8GaCr5ABAKugsiX4NqAACkucWgC6ZZKKXLpuO3H9yvEzcjASkwXJv/5/+P/1hAyh9doPuAAAAAElFTkSuQmCC') no-repeat;
background-size: contain;
background-position: center;
position: absolute;
top: 50%;
right: -5px;
transform: translateY(-50%) translateX(100%);
}
.link-input-container.valid::after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACHklEQVRIS+2Vv27TQBzHv2fT4PhPUjEg0Y6deACmdiviBViZoM/A2padN6Bdu/EASNnIwBMwdQApiCFVqGM7dl370PfqS8+xm0RU3TjpJzun8+fzu9/v7Ag88BAPzMd/garw2y+7W8LGSBbYPn01/GWW/d4l0vCd5zs4/36ORcm9BCY8yzOkeYrxj3FN8s+CNrguDSUn+0PFbgiW1VMDTHh6larMhbhBES4gjj/tfz1qCFbV02woaz7LZkizFLCgBBc/L2rwmkDDN59tout04Tpuo2lmAsksQZImCiwsgclo0oDXBO8Gu5JwKSVkKeF2XXiuN5eoxTZGzDyOY8RJrMCMy9+XrfCa4GCwdyQhD3tPeyjLUkl8z4fv+0rCQXg0jTCNp/PMo3F0J7zRAy3xnnhKwAiCAEEvUIIwDDENb+HJn2QpvPUUaYnTc+aSfr8PCYlwEt401BLIomwlvFXASS3puB3IQqq+6MGm5lm+FvxOgSmxN2xAQkkIL66LteFLBaaEJZlLjJdonf+SVZ8KcTDYO+TpUjCJDycvh8cLYF2/2zoaC0wB7y0AjwBsVFebc28+v3hfSEucvf720XiWQEZZRQHgGkBeXTkvTQHhHQA+AJ5LpxJRokTVt4vPmHCCGQTPAERVXFG8KGD2XQAugMfGLkyB3oTOXguYfQYgqUT8XRPopjNTHbpsvLb1y9wJ7ynTYtWTVU1e56AsXfMXq50xKBJ0RMMAAAAASUVORK5CYII=')
}
.link-input {
font-family: Courier New;
font-size: 12px;
}
.link-input-container.valid .link-input {
color: green;
}
.link-input-container:not(valid) .link-input {
color: red;
}
.link-note {
font-size: 12px;
}
.link-note.no-input {
color: rgb(193, 162, 0);
}
.link-note.no-input .link-note-content:before {
content: "*Link nije unesen";
}
.link-note.valid {
color: green;
}
.link-note.valid .link-note-content:before {
content: "*Stisni enter da dodas ovaj link";
}
.link-note.invalid {
color: red;
}
.link-note.invalid .link-note-content:before {
content: "*Link nije ispravan";
}
JS:
function toggleClass(elem, class_name, class_on) {
if (class_on) {
elem.classList.add(class_name);
} else {
elem.classList.remove(class_name);
}
}
function switchClass(elem, class_list, on_class) {
for (var i = 0; i < class_list.length; i++) {
elem.classList.remove(class_list[i]);
}
elem.classList.add(on_class);
}
function LinkInput() {
LinkInput = null;
var self = {
container_elem: null,
input_elem: null,
note_elem: null,
init: () => {
var container_elem = self.container_elem = document.querySelector(
'.link-input-container'
);
var input_elem = self.input_elem = document.querySelector(
'.link-input'
);
input_elem.size = 23;
var note_elem = self.note_elem = document.querySelector(
'.link-note'
);
input_elem.addEventListener('input', (ev) => {
var new_val = input_elem.value;
var new_size = new_val.length;
input_elem.size = Math.max(new_size + 2, 23);
if (new_val.length > 5) {
switchClass(note_elem, [
"no-input", "invalid", "valid"
], "valid");
toggleClass(container_elem, "valid", true);
} else {
if (new_val === "") {
switchClass(note_elem, [
"no-input", "invalid", "valid"
], "no-input");
} else {
switchClass(note_elem, [
"no-input", "invalid", "valid"
], "invalid");
}
toggleClass(container_elem, "valid", false);
}
});
input_elem.addEventListener('keyup', (ev) => {
if (ev.keyCode == 13) {
input_elem.value = "";
input_elem.blur();
// Submit
return false;
}
});
},
};
self.init();
return self;
}
var link_input = LinkInput();
It's up to you. I think notifications should be driven by javascript as it's not part of the site at the moment it loads. Im thinking some SEO here, not that the search engines should save notifications like that anyways. Well that's my opinion :)
Cheers!

jQuery: Turn button filters into select menu options?

I'm using Lever's job listing API, but in its current form, it uses buttons to filter the jobs by category. How would I be able to turn the buttons into a complete select menu?
In the Fiddle, the options are "Business Dev", "Customer Success", so those would be examples of options in the select menu I want to create.
Fiddle.
HTML:
<section>
<div class="container" id="jobs-container">
<h1>Open jobs</h1>
<div class="jobs-teams">
</div>
<div class="jobs-list">
</div>
</div>
</section>
JS:
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'
//Functions for checking if the variable is unspecified
function cleanString(string) {
if (string) {
var cleanString = string.replace(/\s+/ig, "");
return cleanString;
}
else {
return "Uncategorized";
}
}
function nullCheck(string) {
if (!string) {
var result = 'Uncategorized'
return result;
}
else {
return string;
}
}
function createJobs(_data) {
for(i = 0; i < _data.length; i++) {
var team = nullCheck(_data[i].title)
var teamCleanString = cleanString(team);
$('#jobs-container .jobs-teams').append(
''+team+''
);
}
for(i = 0; i < _data.length; i++) {
for (j = 0; j < _data[i].postings.length; j ++) {
var posting = _data[i].postings[j]
var title = posting.text
var description = posting.description
//Making each job description shorter than 250 characters
var shortDescription = $.trim(description).substring(0, 250)
.replace('\n', ' ') + "...";
var location = nullCheck(posting.categories.location);
var locationCleanString = cleanString(location);
var commitment = nullCheck(posting.categories.commitment);
var commitmentCleanString = cleanString(commitment);
var team = nullCheck(posting.categories.team);
var teamCleanString = cleanString(team);
var link = posting.hostedUrl;
$('#jobs-container .jobs-list').append(
'<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
'<a class="job-title" href="'+link+'"">'+title+'</a>' +
'<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
'<p class="description">'+shortDescription+'</p>' +
'<a class="btn" href="'+link+'">Learn more</a>' +
'</div>'
);
}
}
}
//Creating filter buttons for sorting your jobs
function activateButtons(_data){
$('.jobs-teams').on("click", "a", function(e) {
e.preventDefault();
for(i = 0; i < _data.length; i++) {
var teamRaw = _data[i].title;
var team = cleanString(teamRaw);
var jobs = $(".jobs-list");if ($(this).hasClass(team)) {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
jobs.find(".job").fadeIn("fast");
}
else {
$(".jobs-teams").find("a").removeClass("active");
$(this).addClass("active");
jobs.find("."+team).fadeIn("fast");
jobs.find(".job").not("."+team).fadeOut("fast");
}
}
}
})
}
//Fetching job postings from Lever's postings API
$.ajax({
dataType: "json",
url: url,
success: function(data){
createJobs(data);
activateButtons(data);
}
});
Updates I made are the following.
Added select tag on jobs-team
On the createJob()
//get select element on the element with jobs-team css class
$('#jobs-container .jobs-teams select').append(
//append option.
'<option value="" class=' + teamCleanString + '>' + team + '</option>'
);}
On the activateButtons()
//get selected option.
if($(this).find(":selected").hasClass(team))
// Replace "leverdemo" with your own company name
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'
//Functions for checking if the variable is unspecified
function cleanString(string) {
if (string) {
var cleanString = string.replace(/\s+/ig, "");
return cleanString;
}
else {
return "Uncategorized";
}
}
function nullCheck(string) {
if (!string) {
var result = 'Uncategorized'
return result;
}
else {
return string;
}
}
function createJobs(_data) {
for(i = 0; i < _data.length; i++) {
var team = nullCheck(_data[i].title)
var teamCleanString = cleanString(team);
$('#jobs-container .jobs-teams select').append(
'<option value="" class=' + teamCleanString + '>' + team + '</option>'
);
}
//''++''
for(i = 0; i < _data.length; i++) {
for (j = 0; j < _data[i].postings.length; j ++) {
var posting = _data[i].postings[j]
var title = posting.text
var description = posting.description
//Making each job description shorter than 250 characters
var shortDescription = $.trim(description).substring(0, 250)
.replace('\n', ' ') + "...";
var location = nullCheck(posting.categories.location);
var locationCleanString = cleanString(location);
var commitment = nullCheck(posting.categories.commitment);
var commitmentCleanString = cleanString(commitment);
var team = nullCheck(posting.categories.team);
var teamCleanString = cleanString(team);
var link = posting.hostedUrl;
$('#jobs-container .jobs-list').append(
'<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
'<a class="job-title" href="'+link+'"">'+title+'</a>' +
'<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
'<p class="description">'+shortDescription+'</p>' +
'<a class="btn" href="'+link+'">Learn more</a>' +
'</div>'
);
}
}
}
//Creating filter buttons for sorting your jobs
function activateButtons(_data){
$('.jobs-teams select').on("change", function(e) {
e.preventDefault();
for(i = 0; i < _data.length; i++) {
var teamRaw = _data[i].title;
var team = cleanString(teamRaw);
var jobs = $(".jobs-list");
if ($(this).find(":selected").hasClass(team)) {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
jobs.find(".job").fadeIn("fast");
}
else {
$(".jobs-teams").find("a").removeClass("active");
$(this).addClass("active");
jobs.find("."+team).fadeIn("fast");
jobs.find(".job").not("."+team).fadeOut("fast");
}
}
}
})
}
//Fetching job postings from Lever's postings API
$.ajax({
dataType: "json",
url: url,
success: function(data){
createJobs(data);
activateButtons(data);
}
});
body {
font-family: 'Lato', sans-serif;
overflow-y: scroll;
}
p {
margin: 0 0 1em 0;
line-height: 1.4em;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
section {
position: relative;
padding: 30px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.job {
display: inline-block;
vertical-align: top;
width: 50%;
padding: 40px 30px;
}
h1 {
font-size: 48px;
color: #454545;
padding: 0 30px;
}
.job-title {
font-size: 24px;
text-decoration: none;
color: #454545;
}
.job-title:hover {
color: #00A0DF;
}
.tags span {
color: #999;
font-size: 12px;
color: grayMediumDark;
}
.tags span:after {
content: ', ';
}
.tags span:last-of-type:after {
content: '';
}
.description {
color: #999;
}
.btn {
display: inline-block;
padding: 7px 15px;
text-decoration: none;
font-weight: normal;
color: #999;
border: 2px solid #ebebeb;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #f9f9f9;
}
.btn:hover {
background: #ebebeb;
color: #555;
}
.btn.active {
background: #454545;
border-color: #454545;
color: #fff;
}
.jobs-teams {
margin-bottom: 40px;
padding: 0 30px
}
.jobs-teams .btn {
margin: 0 8px 8px 0;
}
.jobs-teams .btn:first-of-type {
margin-left: 0;
}
.jobs-teams .btn:last-of-type {
margin-right: 0;
}
<section>
<div class="container" id="jobs-container">
<h1>Open jobs</h1>
<div class="jobs-teams">
<select></select>
</div>
<div class="jobs-list">
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I see you got your answer, but figured I'd throw my 2 cents in and show you how you can, not only consolidate this code (¡A LOT!) but also make a lot better use of some jQuery methods you may not be aware of. No criticism intended, simply hope to show you another way that may help you work with jQuery better in the future.
/** debug()
* Simply for writing console messages as needed for testing.
*/
function debug() {
try {
window['console'] && (console.log(Array(100).join("=")), console.log.apply(console, arguments), console.log(Array(100).join("=")));
} catch (a) {}
};
/** ajaxSuccess(data, status, xhr)
* Easily seperated, and therefor easy to read/write method to use for success callback
*/
function ajaxSuccess(data, status, xhr) {
debug("Success:\t", $([data, status, xhr]));
var sorted = sortData(data);
debug("Sorted Data:\t", sorted);
prepHTMLContainers(); // ensure are HTML space is ready
$.each(sorted, function(title, postings) {
debug("Postings for ["+title+"]:\t", postings);
// add select option for each category
$('<option />', { text: postings[0].category, value: title }).appendTo('#jobsTeams select');
$.each(postings, function(i, post) {
// notice here, i do away with all that silly string building
// jQuery has a lot of nice options for building HTML,
// below is simply one of many ways
var container = $('<div />').addClass('job').data('desc', { short: post.shortDescription, full: post.description }),
aTitle = $('<a />', { href: post.url, text: post.title }).addClass('job-title').appendTo(container),
pLocCom = $('<p />').addClass('tags').appendTo(container),
pDesc = $('<p />', { text: post.shortDescription }).addClass('description').appendTo(container),
aMore = $('<a />', { "class": 'btn', href: post.url, text: 'Learn more' }).appendTo(container)
pLocCom
.append($('<span />', { text: post.location }))
.append($('<span />', { text: post.commitment }))
container
.addClass(post.teamClean.toLowerCase())
.addClass(post.locationClean.toLowerCase())
.addClass(post.commitmentClean.toLowerCase())
$('#jobsList').append(container);
});
});
$('#jobsTeams select').show();
}
/** prepHTMLContainers()
* As stated, clean and clear HTML containers and ready them for new listings of data.
*/
function prepHTMLContainers() { $('#jobsTeams select, #jobsList').empty(); $('#jobsTeams select').hide().append($('<option />', { text: ' - Select a Category - ', value: '' })); }
/** sortData(data)
* Sort data in a manner that makes creating the HTML easier
*/
function sortData(data) {
var ret = {};
$.each(data, function(index, item) {
var catClass = trimString(item.title, true).toLowerCase();
if (!ret[catClass]) ret[catClass] = [];
$.each(item.postings, function(i, post) {
ret[catClass].push({
category: trimString(item.title),
title: trimString(post.text),
description: $(trimString(post.description)),
shortDescription: $(trimString(post.description)).text().substring(0, 250).replace('\n', ' ') + '...',
"location": trimString(post.categories.location),
locationClean: trimString(post.categories.location, true),
commitment: trimString(post.categories.commitment),
commitmentClean: trimString(post.categories.commitment, true),
team: trimString(post.categories.team),
teamClean: trimString(post.categories.team, true),
url: post.hostedUrl
});
});
})
return ret;
}
/** trimString(str, cln)
* Simple and clean cut way to trim each string. Second param provides way to remove space if desired.
*/
function trimString(str, cln) { return !str ? 'Uncategorized' : !cln ? $.trim(str) : $.trim(str).replace(/\s+/ig, ""); }
// The first variable, "myAjax", will be used to ensure there's only ever one call to our ajax'd link
// The second is simply the options we'll use in it
var myAjax, myAjaxOpts = {
data: "group=team&mode=json",
dataType: "json",
url: "https://api.lever.co/v0/postings/leverdemo",
beforeSend: prepHTMLContainers,
success: ajaxSuccess
};
// jQuery shorthand for document.ready
$(function() {
$('#fetchData').on('click', function(e) {
// by doing it like this (there's many ways to go about this,
// you don't have to use a button), we ensure that the
// connection is broken before trying to retrieve the same
// data over and over
if (myAjax) myAjax.abort();
myAjax = $.ajax(myAjaxOpts);
/** my general use of this doesn't rely on a global variable, but rather a local one
* i usually just assign it to the element object itself, such as:
*
* if (this.ajx) this.ajx.abort();
* this.ajx = $.ajax(ajaxOpts);
*
* */
});
// see how quick and easy jQuery can make things?!
// the following line uses a "static parent" to assign an event to a "child"
// by doing it this way, the child can then be "dynamic" (loaded after
// page and js has been loaded) and still use the same event without
// need to "re-asign"
$('#jobsTeams').on('change', 'select', function(e) {
if (!this.value) $(this).children('option:eq(0)').text(' - Select a Category - '), $('#jobsList .job').fadeIn();
else {
var val = this.value;
$(this).children('option:eq(0)').text(' - See All - ');
$('#jobsList .job').fadeOut().filter(function(i) { return $(this).hasClass(val); }).fadeIn();
}
});
// allows us to now toggle full descript
// using .on to a static parent makes this work for all dynamically created children
$('#jobsList').on('click', '.job', function(e) {
var descShort = $(this).data('desc').short,
descFull = $(this).data('desc').full,
pDesc = $(this).find('.description');
pDesc.html() == descShort ? pDesc.html(descFull) : pDesc.html(descShort);
});
// I moved the initial first call to here, as it appears
// the connection to OP's site has slowed up since first
// posting this answer.
// JS is single threaded, but by using
// timers we can "temporarily emulate" multithreading and
// keep the browser from locking up on one piece of code
setTimeout(function() { $('#fetchData').trigger('click'); }, 10);
})
/* Expected data return
[
{
postings: [
additional: String,
applyUrl: String,
categories: {
commitment: Sting,
location: Stirng,
team: String
},
createdAt: timestamp,
description: String(HTML),
descriptionPlain: Sting,
hostedUrl: String,
id: String,
list: [
{
content: Sting(HTML),
text: String
}
],
text: String
],
title: String
}
]
*/
body { font-family: 'Lato', sans-serif; overflow-y: scroll; }
p { margin: 0 0 1em 0; line-height: 1.4em; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
section { position: relative; padding: 30px; }
.container { max-width: 960px; margin: 0 auto; }
.job { display: inline-block; vertical-align: top; width: 50%; padding: 40px 30px; }
h1 { font-size: 48px; color: #454545; padding: 0 30px; }
.job-title { font-size: 24px; text-decoration: none; color: #454545; }
.job-title:hover { color: #00A0DF; }
.tags span { color: #999; font-size: 12px; color: grayMediumDark; }
.tags span:after { content: ', '; }
.tags span:last-of-type:after { content: ''; }
.description { color: #999; cursor: pointer; }
.btn { display: inline-block; padding: 7px 15px; text-decoration: none; font-weight: normal; color: #999; border: 2px solid #ebebeb; -webkit-border-radius: 4px; border-radius: 4px; background: #f9f9f9; }
.btn:hover { background: #ebebeb; color: #555; }
.btn.active { background: #454545; border-color: #454545; color: #fff; }
.jobs-teams { margin-bottom: 40px; padding: 0 30px; }
.jobs-teams select { display: none; }
.jobs-teams .btn { margin: 0 8px 8px 0; }
.jobs-teams .btn:first-of-type { margin-left: 0; }
.jobs-teams .btn:last-of-type { margin-right: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button id="fetchData">Fetch Data</button>
<section>
<div id="jobsContainer" class="container">
<h1>Open jobs</h1>
<div id="jobsTeams" class="jobs-teams"><select></select></div>
<div id="jobsList" class="jobs-list"></div>
</div>
</section>
Enjoy!

Javascript and CSS cause a text box to go away, I want it to stay

So this is either a CSS issue or Javascript but I need your expertise.
I have a site built that has the youtube API on it.
The YouTube API requires that you authorize yourself to start the pull.
Looks like this before authorization: http://d.pr/i/96sB
Once you authorize, the box goes away: http://d.pr/i/4SVx
Here's the associated javascript:
// gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
HTML
<div id="login-container" class="pre-auth back_image">Please click this link to load the playlist. It will pull authorization for the API from your Google account
<img src="Pictures/AuthButtons.jpg" width="1060" height="20">
</div>
CSS
.wrap{
width: 1060px;
margin: auto;
}
.back_image{
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image{
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:40px;
background-color: rgba(0, 0, 0, .3);
width: 1060px;
color: white;
}
iframe{
margin: auto;
}
.background_color{
background-color: #F8F8F8;
}
h1{
}
.paging-button {
visibility: hidden;
}
.video-content {
width: 200px;
height: 200px;
background-position: center;
background-repeat: no-repeat;
float: left;
position: relative;
margin: 5px;
}
.video-title {
width: 100%;
text-align: center;
background-color: rgba(0, 0, 0, .3);
color: white;
top: 50%;
left: 50%;
position: absolute;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.video-content:nth-child(3n+1) {
clear: both;
}
.button-container {
clear: both;
}
#video-container a {
float: left;
}
#video-container{
width: 100%;
}
At the bottom will be the entire page's HTML/Java to paint a complete picture.
I'd like that box to stay so the authorize message stays but once authorize, have it say something to the effect of "click to enjoy any of htese vidoes" or something
Any ideas?
Here's the whole page:
<!DOCTYPE HTML>
<html>
<head>
<title>My Sandbox</title>
<link rel="stylesheet" type="text/css" href="CSS/Style.CSS">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
//This set of scripts asks a first time user for their name and then greets them by name on the page and on their next visit
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var username=getCookie("username");
if (username!=null && username!=""){
alert("Welcome back " + username);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
else{
username=prompt("Please enter your name:","");
if (username!=null && username!=""){
setCookie("username",username,365);
document.getElementById("title_script").innerHTML="Welcome "+username+" to my sandbox";
}
}
}
//This is the script to change the video source
jQuery(function($){
$("#video-container").on('click', '.video_select', function(e){
console.log(e);
var buttonSource = $(this).data('video');
var embededVideo = $('#youTube_video');
embededVideo.attr('src', buttonSource);
return false;
});
});
//This is the Client ID from https://code.google.com/apis/console
var OAUTH2_CLIENT_ID = '367567738093.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
'https://www.googleapis.com/auth/youtube'
];
// This callback is invoked by the Google APIs JS client automatically when it is loaded.
googleApiClientReady = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
}
// I want to get rid of this... If the user hasn't aythorized Google to run the API, the user has to click a button to authoize google to run teh API. Why? It was in the original google example that I took from the Google Dev page. Everything here is dervied and partially rewritten from that.
function checkAuth() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);
}
// gapi.auth.authorize() call.
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
handleAPILoaded();
});
}
var playlistId, nextPageToken, prevPageToken;
// Once the api loads call a function to get the uploads playlist id.
function handleAPILoaded() {
requestUserUploadsPlaylistId();
}
//Retrieve the uploads playlist id.
function requestUserUploadsPlaylistId() {
var request = gapi.client.youtube.channels.list({
id: 'UCziks4y-RixDhWljY_es-tA',
part: 'contentDetails'
});
request.execute(function(response) {
console.log(response);
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve a playist of videos.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 15
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show the page buttons if there's a next or previous page.
console.log (response);
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
// For each result lets show a thumbnail.
jQuery.each(playlistItems, function(index, item) {
createDisplayThumbnail(item.snippet);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
// Create a thumbnail for a video snippet.
function createDisplayThumbnail(videoSnippet) {
console.log(videoSnippet);
var titleEl = $('<h3>');
titleEl.addClass('video-title');
$(titleEl).html(videoSnippet.title);
var thumbnailUrl = videoSnippet.thumbnails.medium.url;
var videoLink=$('<a>');
videoLink.attr('data-video','http://www.youtube.com/embed/'+videoSnippet.resourceId.videoId+'?autoplay=1');
videoLink.append(div)
videoLink.addClass('video_select')
var div = $('<div>');
div.addClass('video-content');
div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
div.append(titleEl);
videoLink.append(div)
$('#video-container').append(videoLink);
}
// Retrieve the next page of videos.
function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}
</script>
</head>
<body onload="checkCookie()" class="background_color">
<div class="wrap">
<div class="back_image">
<img src="Pictures/titlepic.jpg" width="1060" height="200">
<h1 class="text_over_image" id="title_script">Welcome to my Sandbox</h1>
</div>
<div>
<iframe id='youTube_video' width="1060" height="597" src="//www.youtube.com/embed/io78hmjAWHw?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="login-container" class="pre-auth back_image">Please click this link to load the playlist. It will pull authorization for the API from your Google account
<img src="Pictures/AuthButtons.jpg" width="1060" height="20">
</div>
<div id="video-container">
</div>
<div class="button-container back_image">
<img src="Pictures/Footer.jpg" width="1060" height="75">
<button id="prev-button" class="paging-button text_over_image" onclick="previousPage();">Previous Page</button>
<button id="next-button" class="paging-button text_over_image" onclick="nextPage();">Next Page</button>
</div>
</div>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
</body>
</html>
In your function handleAuthResult you have a line $('.pre-auth').hide();. You should change that to set the text you want in stead of hiding it. So something like:
function handleAuthResult(authResult) {
if (authResult) {
$('.pre-auth').html('click to enjoy any of these videos');
loadAPIClientInterfaces();
} else {
$('#login-link').click(function () {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
Found it...
From
function handleAuthResult(authResult) {
if (authResult) {
// $('.pre-auth').hide();
loadAPIClientInterfaces();
} else {
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}
}
The $('.pre-auth').hide(); needed to go away

Flickering issue in chrome when mouseover div

I have written an javascript that generates the dynamic elements based on the jSON data supplied to it.
$(function () {
var list = JSON.parse(#ViewBag.NomineeList);
var counter = 1;
var tr;
$(list).each((function () {
if (counter % 2 != 0) {
tr = CreateElems('tr', null, null);
}
var td = CreateElems('td', null, null);
var div = CreateElems('div', 'dvBorder', null);
div.attr('empID', this.EmpId);
div.attr('nomineeID', this.Id);
RegisterEvents(div);
div.append('<img alt="user" src=' + this.UserImagePath + ' style="padding: 5px;" />');
div.append(CreateElems('span', 'EmpolyeeName', this.FirstName));
div.append(CreateElems('span', 'EmployeeEmail', this.Email));
td.append(div);
tr.append(td);
if (counter % 2 == 0) {
$('#tblEmployee').append(tr);
tr = "";
}
counter++;
}));
});
function CreateElems(type,cssClass,value)
{
var elem = $(document.createElement(type));
if(value != null)
elem.text(value);
if(cssClass!= null)
elem.addClass(cssClass);
return elem;
}
There are three different events that i have registered for the dynamic elements that are created.
function RegisterEvents(crntDiv) {
var url;
$(crntDiv).click(function () {
url = "/home/SaveVote?nomineeId=" + $(crntDiv).attr('nomineeID');
AjaxCall(url, false, crntDiv);
});
$(crntDiv).mouseover(function () {
RemoveToolTip();
url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID');
AjaxCall(url, true, crntDiv);
});
$(crntDiv).mouseout(function () {
$(crntDiv).children('div.RollOverTip').remove();
});
}
when you mouse over the tool tip comes up . On that event I am checking if any previous tool tip is present in dom it should be removed.
function RemoveToolTip() {
$('#tblEmployee').find('div.RollOverTip').remove();
}
But still there are times when there are more than two three tool tips are present on the browser. Also can this be optimized a bit.
Html
<table border="0" cellpadding="5" cellspacing="0" id="tblEmployee">
</table>
css Classes.
.dvBorder
{
background-image: url(/Images/screen2-button.png);
background-repeat: no-repeat;
height: 125px;
width: 400px;
cursor:pointer;
position: relative;
}
.RollOverTip
{
background-image: url("/Images/screen2-rollover-tooltip.png");
background-repeat: no-repeat;
color: #000000;
font-family: Calibri Regular;
font-size: 18pt;
height: 199px;
line-height: 20pt;
margin-left: 385px;
position: absolute;
width: 474px;
z-index: 90000;
padding:34px;
}
What are the optimization possible in the script,also any suggestions to remove the flickering?
Try using mouseenter and mouseleave to stop the flickering
$(crntDiv).mouseenter(function () {
RemoveToolTip();
url = "/home/GetDescription?nomineeId=" + $(crntDiv).attr('nomineeID');
AjaxCall(url, true, crntDiv);
});
$(crntDiv).mouseleave(function () {
$(crntDiv).children('div.RollOverTip').remove();
});
Try to use mouseenter and mouseleave it might fix the problem instead of mouseover and mouseout
EDIT
Try this :
change
$(crntDiv).mouseover(function () {...}
to
$(document).on('mouseenter',$(crntDiv,'#tblEmployee div.RollOverTip'), function () {...}

Categories

Resources