Chrome Extension JavaScript Error

Chrome Extension JavaScript Error - javascript

I am trying to deploy a html+jss+css project of a pattern password as a chrome extension. On my local machine the code works as expected. However when I test it as a chrome extension, the box in which the pattern is to be entered is not displayed.
Code Below :
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=320; user-scalable=no; initial-scale=1.0; maximum-scale=1.0" />
<title>Pattern Lock Welcome Page</title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin:150px auto 20px auto; text-align:center; color:#fff">Pattern Lock</h1>
<div class="maincontainer">
<h2 id="heading" class="heading">Please set your password</h2>
<div id="patterncontainer" class="patterncontainer">
</div>
</div>
</body>
<script src="js/script.js"></script>
</html>
welcome.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=320; user-scalable=no; initial-scale=1.0; maximum-scale=1.0" />
<title>Pattern Lock</title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css"/>
</head>
<body>
<div class="maincontainer">
<h2 id="heading" class="heading">Homescreen</h2>
<button id="lockScreen" class="button-lockscreen" onclick="window.location= './index.html';">Lock Screen</a><br /><br />
<button id="resetPassword" class="button-reset" onclick="resetPassword()">Reset Password</a>
</div>
</body>
<script type="text/javascript" src="js/homepage.js"></script>
</html>
homepage.js
function resetPassword() {
console.log("sdfsdf");
if (localStorage.getItem("password")) {
alert("Pattern : "+localStorage.getItem("password"));
localStorage.removeItem("password");
successmessage("resetSuccess");
} else {
emptyPassword();
}
};
(function checkPassword(){
if (!localStorage.getItem("password")) {
emptyPassword();
}
}());
function successmessage(successcode) {
if (successcode == "resetSuccess") {
alert("Pattern Reset Success!");
}
location.reload();
};
function emptyPassword() {
document.getElementById("resetPassword").style.display = "none";
document.getElementById("lockScreen").innerHTML = "Set Password";
};
script.js
$(document).ready(function(){
var errorraised = false;
var passwordset = false;
var getClickStarted = false;
var autosubmit = true;
var password;
var centerX1;
var centerY1;
var curX = 0;
var curY = 0;
var getClickStarted = false;
var htmlLine;
var startpointnumber=0;
var endpointnumber=0;
(function checkIfPasswordIsSet() {
if (localStorage.getItem("password")) {
document.getElementById("heading").innerHTML = "Enter pattern to unlock screen";
passwordset = true;
}
else {
document.getElementById("heading").innerHTML = "Please set your pattern";
}
}());
(function generatebuttons(){
var patterncontainer = document.getElementById("patterncontainer");
for (var i = 1; i <=9; i++) {
var button = document.createElement("div");
button.className = "button";
button.id = "button" + i;
patterncontainer.appendChild(button);
startposition = document.getElementById("button" + i);
}
}());
(function main(){
if(!window.navigator.msPointerEnabled) {
$(".button").on("mousedown", function (event){
if(!getClickStarted){
getClickStarted = true;
var offset1 = $("#" + event.target.id).position();
centerX1 = offset1.left + $("#" + event.target.id).innerWidth()/2 + 20.5; //22.5 is the margin of the button class
centerY1 = offset1.top + $("#" + event.target.id).innerHeight()/2 + 20.5;
//console.log("centerX1 " + centerX1);
//console.log("centerY1 " + centerY1);
if (event && event.preventDefault){
event.preventDefault();
}
$("#" + event.target.id).removeClass("button").addClass("activebutton");
password = event.target.id.split("button").join("");
startpointnumber = event.target.id.split("button").join("");
//console.log("startpointnumber " + startpointnumber);
addline(startpointnumber, centerX1, centerY1); //initiating a moving line
}
});
$(document).bind("mousemove", function(event) {
if (getClickStarted){ //to avoid mousemove triggering before click
if (event && event.preventDefault){
event.preventDefault();
}
curX = event.clientX - $("#patterncontainer").offset().left;
curY = event.clientY - $("#patterncontainer").offset().top;
var width = Math.sqrt(Math.pow(curX - centerX1, 2) + Math.pow(curY - centerY1, 2)); //varying width and slope
var slope = Math.atan2(curY - centerY1, curX - centerX1)*180/3.14;
//setting varying width and slope to line
$("#line" + startpointnumber).css({"width": + width +"px", "height": "4px", "transform": "rotate(" + slope + "deg)", "-webkit-transform": "rotate(" + slope + "deg)", "-moz-transform": "rotate(" + slope + "deg)"});
//if button is found on the path
$(".button").bind("mouseover", function(e) {
endpointnumber = e.target.id.split("button").join("");
if (startpointnumber != endpointnumber) {
if (e && e.preventDefault){
e.preventDefault();
}
if (e.target.className == "button") {
$("#" + e.target.id).removeClass("button").addClass("activebutton");
} else {
$("#" + e.target.id).removeClass("activebutton").addClass("duplicatebutton");
}
password += e.target.id.split("button").join("");
// endpointnumber = e.target.id.split("button").join("");
$("#line" + startpointnumber).attr("id", "line" + startpointnumber + endpointnumber);
var offset2 = $("#" + e.target.id).position();
var centerX2 = offset2.left + $("#" + e.target.id).innerWidth()/2 + 20.5; //20.5 is the margin of activebutton class
var centerY2 = offset2.top + $("#" + e.target.id).innerHeight()/2 + 20.5;
var linewidth = Math.sqrt(Math.pow(centerX2 - centerX1, 2) + Math.pow(centerY2 - centerY1, 2));
var lineslope = Math.atan2(centerY2 - centerY1, centerX2 - centerX1)*180/3.14;
$("#line" + startpointnumber + endpointnumber).css({"width": + linewidth +"px", "transform": "rotate(" + lineslope + "deg)", "-webkit-transform": "rotate(" + lineslope + "deg)", "-moz-transform": "rotate(" + lineslope + "deg)"});
startpointnumber = endpointnumber;
centerX1 = centerX2;
centerY1 = centerY2;
addline(startpointnumber, centerX1, centerY1);
}
});
}
$("#patterncontainer").on("mouseup", function (event){
if(getClickStarted) {
if (event && event.preventDefault){
event.preventDefault();
}
$("#line" + startpointnumber).remove();
if (autosubmit) {
formsubmit();
}
}
getClickStarted = false;
});
});
} else {
alert ("INTERNET EXPLORER NOT SUPPORTED!!");
}
}());
function addline(startpointnumber, centerX1, centerY1){
var htmlLine = "<div id='line" + startpointnumber + "' class='line' style='position: absolute; top: " + centerY1 + "px; \
left: " + centerX1 + "px; -webkit-transform-origin: 2px 2px; -moz-transform-origin: 2.5% 50%; background-color: #FFF;'></div>"
$("#patterncontainer").append(htmlLine);
}
function formsubmit(){
var digits = getlength(password);
if(digits<5) {
raiseerror("lengthTooSmall");
}
checkduplicatedigits(password);
if (errorraised == false && passwordset == false) {
localStorage.setItem("password", password);
successmessage("patternStored");
}
else if ( errorraised == false && passwordset == true) {
if (localStorage.getItem("password") == password) {
successmessage("screenUnlocked");
window.location = "./welcome.html";
return false;
}
else {
raiseerror("IncorrectPattern");
}
}
};
function getlength(number) {
return number.toString().length;
};
function checkduplicatedigits(number) {
var digits = getlength(number);
numberstring = number.toString();
var numberarray = numberstring.split("");
var i; var j;
for (i = 0; i < digits-1; i++) {
for (j = i+1; j < digits; j++) {
if(numberarray[i] == numberarray[j]) {
raiseerror("repeatedEntry");
}
}
}
};
function successmessage(successcode) {
if(successcode == "screenUnlocked") {
alert("You have unlocked the screen!");
}
if (successcode == "patternStored") {
alert("Your pattern is stored. Thanks.");
passwordset = true;
}
if (successcode == "Success") {
alert("Pattern Reset Success!");
}
location.reload();
};
function raiseerror(errorcode) {
if(!errorraised){
errorraised = true;
if (errorcode == "lengthTooSmall") {
alert("The pattern is too short. Please try again.");
}
if (errorcode == "repeatedEntry") {
alert("You cannot use the same number twice. Please try again.");
}
if (errorcode == "IncorrectPattern") {
alert("The entered pattern in incorrect. Please try again.");
}
if (errorcode == "emptyPassword") {
alert("You did not set the password to reset it.");
}
location.reload();
}
};
});
and lastly this is my manifest.json :
{
"manifest_version": 2,
"name": "GRAphical Pass",
"description": "THIS IS SPARTA!!!!!!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
},
"permissions": [
"activeTab"
]
}
Any help would be much appreciated. Thanks :)
Expected(this is what I get on my machine)
But deploying it as an extension :
this is what I get

I suggest removing : $(document).ready(function(){
from your scripts and adding
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["homepage.js","script.js"]
}
],
to your manifest along with the following CSP :
"content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'"

Related

No output in console.log. Beginner Question

I'm reading Head 1st JavaScript book and try to learn the language as much as i can. Wanted to to all the problems from the book. After i did so for one of the problems, and wrote the code as i thought, and checked the solution, i changed it to reflect the solution in the book even thou it worked for me. The thing is, when i want to "print" in the console now, nothing shows up and idk why... i don't see nor have a problem...
Any idea why the console.log will not output anything? Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Coffee(roast, ounces) {
this.roast = roast;
this.ounces = ounces;
this.getSize = function() {
if (this.ounces === 8) {
return "small";
} else if (this.ounces === 12) {
return "medium";
} else (this.ounces === 16); {
return "large";
}
};
this.toString = function() {
return "You have ordered a " + this.getSize() + " " + this.roast + " coffee.";
};
}
var csmall = new Coffee ("House Blend", "8");
var cmedium = new Coffee ("House Blend", "12");
var clarge = new Coffee ("Dark Roast", "16");
var coffees = [csmall, cmedium, clarge];
for (var i = 0; i < coffees.length; i++) {
coffees[i].toString();
}
</script>
</head>
<body>
</body>
</html>
This is the way i wrote the code and worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function Coffee(roast, size, ounces) {
this.roast = roast;
this.size = size;
this.ounces = ounces;
this.getSize = function() {
if (this.ounces === 8) {
console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
} else if (this.ounces === 12) {
console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
} else (this.ounces === 16); {
console.log("You have ordered a " + this.size + " " + this.roast + " coffee.");
}
};
}
var csmall = new Coffee ("House Blend", "small", "8");
var cmedium = new Coffee ("House Blend", "medium", "12");
var clarge = new Coffee ("Dark Roast", "large", "16");
var coffees = [csmall, cmedium, clarge];
for (var i = 0; i < coffees.length; i++) {
coffees[i].getSize();
}
</script>
</head>
<body>
</body>
</html>

In above code console log has not been used so this is why you haven't seen any thing in the console
for (var i = 0; i < coffees.length; i++) {
coffees[i].toString();
console.log(String(coffees[i])); // <-- add here
}
Still it would give incorrect result becuase it used === in the function which means the type of the value supplied will also match with type in the function
It used integers in function but supplied value in string see the code below
if (this.ounces === 8) { // used === to match type as well here it is integer
return "small";
} else if (this.ounces === 12) {
return "medium";
} else (this.ounces === 16); {
return "large";
}
};
this.toString = function() {
return "You have ordered a " + this.getSize() + " " + this.roast + " coffee.";
};
}
var csmall = new Coffee ("House Blend", "8"); // passing it as string "8" it should be just 8
var cmedium = new Coffee ("House Blend", "12");
var clarge = new Coffee ("Dark Roast", "16");
Correct Code should be like this
<script>
function Coffee(roast, ounces) {
this.roast = roast;
this.ounces = ounces;
this.getSize = function() {
if (this.ounces === 8) {
return "small";
} else if (this.ounces === 12) {
return "medium";
} else (this.ounces === 16); {
return "large";
}
};
this.toString = function() {
return "You have ordered a " + this.getSize() + " " + this.roast + " coffee.";
};
}
var csmall = new Coffee ("House Blend", 8);
var cmedium = new Coffee ("House Blend", 12);
var clarge = new Coffee ("Dark Roast", 16);
var coffees = [csmall, cmedium, clarge];
for (var i = 0; i < coffees.length; i++) {
coffees[i].toString();
console.log(String(coffees[i]));
}
</script>
But in the secon code which is done by you...
I beleive the real problem was to use logic and convert ounces into size by getsize function where as you directly used sizes in your solution

Iframe is not working on my website while working on local

<iframe class="metaframe rptss" src="//fileru.net/iframe.php?v=089d20963d577068d193e23819b04652" frameborder="0" scrolling="no" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
Hello people,
I really need help. So the iframe code you see above is working perfectly on my localhost server and i can watch it without problem but when i use this same embed link on my real server it doesn't work, it just shows a black screen instead of playing button. I am trying to figure it out for days but i couldn't find a solution. I got the embed link from this website(https://720p-izle.com/izle/altyazi/modo-aviao.html) and it works there perfectly as well but it doesn't work when i add it to my own website while working on localhost.
NOTE: You might see "this video is removed because of copyright(in Turkish)", when you open the embed link. It is because this embed link just opening it in certain IP(Turkish IP) as i guess. So this embed links is working for me but only problem is that i can see video when i click, when i add my localhost or when i go to the website where i took the link from but it doesn't work when i added it to my own website.
I was trying and searching so many things but i couldn't figure it out. So i also add #document as well and it gives some clue about the solution when i look but i don't have enough knowledge to understand it and fix the problem.
Another thing is that i also use some tools like(https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default) to see if problem is just because of my hosting and video is also not working on this tool as well.
I tried small things as well such as adding https://fileru...... or similar things and change iframe code but still it doesn't work. As i say before i saw some information about video working on documentation but i don't have enough coding knowledge to understand it.
Please help me because i am searching for the solution for days and i couldn't find anything.
<!DOCTYPE html><html lang="tr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Video Player</title>
<meta name="referrer" content="no-referrer"> <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script>
function checkScreen() {
if (window.outerHeight > 1 && window.outerWidth > 1) {
if (window.outerHeight < 200 && window.outerWidth < 300) {
window.location.href = 'about:blank';
}
} else {
setTimeout(function() {
checkScreen();
}, 2);
}
}
checkScreen();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jwplayer.com/libraries/wr6i4gal.js"></script>
</head>
<body>
<div id="Player"></div>
<div id="icon-forward-desktop" class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-rewind" role="button" tabindex="0" aria-label="10 Saniye İleri Sar">
<svg xmlns="http://www.w3.org/2000/svg" class="jw-svg-icon jw-svg-icon-rewind" viewBox="0 0 240 240" focusable="false">
<path d="M193.14,131.08a21.57,21.57,0,0,0-17.7-10.6,21.58,21.58,0,0,0-17.7,10.6,44.77,44.77,0,0,0,0,46.3,21.63,21.63,0,0,0,17.7,10.6,21.61,21.61,0,0,0,17.7-10.6A44.77,44.77,0,0,0,193.14,131.08Zm-17.7,47.2c-7.8,0-14.4-11-14.4-24.1s6.6-24.1,14.4-24.1,14.4,11,14.4,24.1S183.34,178.28,175.44,178.28ZM132,188V137l-4.8,4.8-6.8-6.8,13-13a4.8,4.8,0,0,1,8.2,3.4v62.7ZM30.89,52.88H161V33.58c0-5.3,3.6-7.2,8-4.3l41.8,27.9a5.8,5.8,0,0,1,2.7,2.7,6,6,0,0,1-2.7,8L169,95.78c-4.4,2.9-8,1-8-4.3V72.18H45.29v96.4h48.2v19.3H30.79a4.88,4.88,0,0,1-4.8-4.8V57.78A5,5,0,0,1,30.89,52.88Z"></path>
</svg>
<div class="jw-reset-text jw-tooltip jw-tooltip-rewind" dir="auto">
<div class="jw-text">10 Saniye İleri Sar</div>
</div>
</div>
<div id="icon-forward-mobile" class="jw-display-icon-container jw-display-icon-rewind jw-reset">
<div class="jw-icon jw-icon-rewind jw-button-color jw-reset" role="button" tabindex="0" aria-label="10 Saniye İleri Sar">
<svg xmlns="http://www.w3.org/2000/svg" class="jw-svg-icon jw-svg-icon-rewind" viewBox="0 0 240 240" focusable="false">
<path d="M193.14,131.08a21.57,21.57,0,0,0-17.7-10.6,21.58,21.58,0,0,0-17.7,10.6,44.77,44.77,0,0,0,0,46.3,21.63,21.63,0,0,0,17.7,10.6,21.61,21.61,0,0,0,17.7-10.6A44.77,44.77,0,0,0,193.14,131.08Zm-17.7,47.2c-7.8,0-14.4-11-14.4-24.1s6.6-24.1,14.4-24.1,14.4,11,14.4,24.1S183.34,178.28,175.44,178.28ZM132,188V137l-4.8,4.8-6.8-6.8,13-13a4.8,4.8,0,0,1,8.2,3.4v62.7ZM30.89,52.88H161V33.58c0-5.3,3.6-7.2,8-4.3l41.8,27.9a5.8,5.8,0,0,1,2.7,2.7,6,6,0,0,1-2.7,8L169,95.78c-4.4,2.9-8,1-8-4.3V72.18H45.29v96.4h48.2v19.3H30.79a4.88,4.88,0,0,1-4.8-4.8V57.78A5,5,0,0,1,30.89,52.88Z"></path>
</svg></div>
</div>
<script type="text/javascript">
var id = '181735092eb53d9ac628d04c735abf67';
var Playlist = false;
var PlayerSettings = {
width: '100%',
primary: 'html5',
autostart: false,
cast: {},
preload: 'auto',
playlist: Playlist,
renderCaptionsNatively: true,
playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
};
if (localStorage['position_' + id] > 30) {
//PlayerSettings.preload = 'none';
}
function inIframe() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
function UpdateQualityText() {
var label = jwplayer().getQualityLevels()[jwplayer().getCurrentQuality()]['label'];
if (label.length > 1) {
$('#QualityText').show().html('Aktif Kalite: <b>' + label.replace('Auto', 'Otomatik') + '</b>');
}
};
function setPlayerEvents(Player) {
var Once = true;
var Played = false;
var Watched = false;
Player.on('seek', function(a) {
Once = false;
});
Player.on('play', function() {
Played = true;
if (Once) {
UpdateQualityText();
if (localStorage['position_' + id] > 30) {
jwplayer().seek(localStorage['position_' + id] - 5);
}
Once = false;
}
});
var sendTime = 0;
Player.on('time', function() {
localStorage.setItem('position_' + id, Player.getPosition())
if (!Once) {
var timestamp = Math.floor(Date.now() / 1000);
if (timestamp > sendTime + 5) {
sendTime = timestamp;
window.parent.postMessage({
timeInfo: {
time: Player.getPosition(),
duration: Player.getDuration()
}
}, '*');
}
}
if (!Watched) {
var RemainTime = Player.getDuration() - Player.getPosition();
if (RemainTime > 1 && RemainTime < 60) {
Watched = true;
window.parent.postMessage('videoWatched', '*');
}
}
});
Player.on('complete', function() {
delete localStorage['position_' + id];
});
Player.on('displayClick', function() {
if ($('#QualityText').length == 0) {
var mo = new MutationObserver(function(m) {
if (!$('.jw-flag-user-inactive').length) {
$('#QualityText').show();
} else {
$('#QualityText').hide();
}
});
mo.observe(document.querySelector('.jwplayer'), {
attributes: true
});
$('.jw-media').prepend(
'<div id="QualityText" style="display:none; width:170px; height:30px; font: normal 16px arial; line-height:30px; text-align:right; color:#fff; background:#0000; position:absolute; top:20px; right:20px; z-index:5;"></div>'
);
}
});
Player.on('ready', function() {
$('#icon-forward-desktop').insertAfter('.jw-icon-rewind:eq(1)');
$('#icon-forward-mobile').insertAfter('.jw-display-icon-display');
$('.jw-display-icon-next').hide();
$('#icon-forward-desktop, #icon-forward-mobile').click(function() {
jwplayer().seek(jwplayer().getPosition() + 10);
});
});
Player.on('pause', function() {
if (!puShown && popURL) {initPu();} });
Player.on('levelsChanged', function(e, a) {
UpdateQualityText();
});
setInterval(function() {
if (Played && Player.getQualityLevels()[Player.getCurrentQuality()]['label'] == 'Auto') {
var label = Player.getQualityLevels()[Player.getVisualQuality().level.index]['label'];
$('#QualityText').html(
'Aktif Kalite: <b>Otomatik <span style="font-weight:normal; font-size:11px; font-weight: 700; top:-3px; margin-left:2px; padding: 3px 5px 3px 5px; border-radius: 5px; background:#35c2ff; color:#000; position:relative;">' +
label + '</span></b>');
}
}, 1000);
Player.addButton(
'https://fileru-net.cdn.ampproject.org/i/s/fileru.net/misc/download.svg?2',
'Videoyu İndir',
function() {
var url =
'/download.php?v=089d20963d577068d193e23819b04652';
var win = window.open(url, '_blank');
win.focus();
},
'download'
);
}
var Trusted = false;
if (inIframe() && !Trusted) {
document.write('Videoyu oynatmaya yetkiniz yok.');
} else {
var prefetchPoster = new Image();
prefetchPoster.src = 'https://image.tmdb.org/t/p/w1280/9OaIWmWI7Ph3jqj235zQIrh5yVd.jpg';
var Expire = false;
$.getJSON('/source.php?h=7715d59a058cef05555c295105624519a77a08c27c664c50d00001a6be526a0e032f03061c37ecd74137f5d6adb024788ef3d365950f81392ad735d723cf83cbba3b94172f8b40f6c030d0eac4bb10b434f7b53733e54a7c02b7810bcc862eca7b3df51f47f3af15e32b0ca86ecf910c6c80fb39b12c69815a85ce7faea88c0182709447c0ba8d1c208f2dc1ca8c4ad5', function(Response) {
PlayerSettings.image = prefetchPoster.src;
PlayerSettings.sources = Response.sources;
PlayerSettings.tracks = [];
Expire = Response.expire;
var Player = jwplayer('Player').setup(PlayerSettings);
setPlayerEvents(Player);
setInterval(function() {
var time = Math.floor(Date.now() / 1000);
if (Expire != false && time > Expire) {
var tmpExpire = Expire;
Expire = false;
$.getJSON('/source.php?h=7715d59a058cef05555c295105624519a77a08c27c664c50d00001a6be526a0e032f03061c37ecd74137f5d6adb024788ef3d365950f81392ad735d723cf83cbba3b94172f8b40f6c030d0eac4bb10b434f7b53733e54a7c02b7810bcc862eca7b3df51f47f3af15e32b0ca86ecf910c6c80fb39b12c69815a85ce7faea88c0182709447c0ba8d1c208f2dc1ca8c4ad5&e=' + tmpExpire, function(Response) {
var LastPosition = Player.getPosition();
var LastState = Player.getState();
Expire = Response.expire;
PlayerSettings.sources = Response.sources;
Player.load(PlayerSettings);
jwplayer().seek(LastPosition);
if (LastState == 'playing') {
Player.play();
} else {
Player.pause();
}
});
}
}, 1000);
});
}
function receiveMessage(event) {
var data = event.data;
if ('playerSeek' in data) {
jwplayer().seek(data['playerSeek']);
}
}
window.addEventListener("message", receiveMessage, false);
</script>Videoyu oynatmaya yetkiniz yok.
<script>
var popURL = "https://720p-izle.com/detay/fast-furious-presents-hobbs-shaww/"; var puShown = false;
function doOpen(url) {
if (puShown == true) {
return true;
}
win = window.open(url, 'yenipencere', 'menubar=0,resizable=1,width=1,height=1');
win.moveTo(150000, 150000);
if (win) {
win.blur();
puShown = true;
}
return win;
}
function setCookie(cname, cvalue, extime) {
var d = new Date();
d.setTime(d.getTime() + extime);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function initPu() {
if (document.attachEvent) {
document.attachEvent('onclick', checkTarget);
} else if (document.addEventListener) {
document.addEventListener('click', checkTarget, false);
}
}
function checkTarget(e) {
if (!getCookie('popunderPause')) {
var e = e || window.event;
var win = doOpen(popURL);
setCookie('popunderPause', 1, 1 * 60 * 60 * 1000);
}
}
</script>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-125574692-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-125574692-2');
</script>
<script>
</script>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000;
}
#Player {
position: fixed;
width: 100%;
height: 100% !important;
left: 0;
top: 0;
z-index: 10
}
.jw-rightclick {
display: none !important
}
.jw-settings-menu {
width: 135px !important;
}
.jw-breakpoint-7 .jw-settings-menu,
.jw-breakpoint-6 .jw-settings-menu,
.jw-breakpoint-5 .jw-settings-menu,
.jw-breakpoint-4 .jw-settings-menu,
.jw-breakpoint-3 .jw-settings-menu {
max-height: 220px !important;
height: 220px !important;
}
.jw-settings-content-item {
font-size: 15px
}
.jw-settings-content-item.jw-settings-item-active {
color: #35c2ff
}
.jw-text-elapsed,
.jw-text-duration {
font-size: 15px
}
.jw-slider-horizontal .jw-slider-container {
height: 10px
}
.jw-knob {
height: 16px;
width: 16px
}
</style>
<link href="https://cdn.jsdelivr.net/npm/normalize.css#8.0.1/normalize.css" rel="stylesheet" type="text/css">
<link href="misc/style.css?3" rel="stylesheet" type="text/css">
</body></html>

How to create an simple slider using jquery(not using plug in)?

<script>
var img = function(){
$("#slider").animate({"left":"-=1775px"},10000,function(){
$("#slider").animate({"left":"0px"},10000);
img();
});
};
img();
</script>
I used animation properties in jquery but i want the loop to display the three image continuously.

I once created a small js plugin that does this, you can see the code here:
$.fn.luckyCarousel = function(options) {
var car = this;
var settings = $.extend( {
'delay' : 8000,
'transition' : 400
}, options);
car.append($('<div>').addClass('nav'));
var nav = $('.nav', car);
var cnt = $("ul", car);
var car_w = car.width();
var carItems = $('li', car);
$(cnt).width((carItems.length * car_w) + car_w);
$(carItems).each(function(i) {
var dot_active = (!i) ? ' active' : '';
$(nav).prepend($('<div>').addClass('dot dot' + i + dot_active).bind('click', function(e) {
slideSel(i);
}));
});
$(carItems).css('visibility', 'visible');
$(cnt).append($(carItems).first().clone());
car.append(nav);
var sel_i = 0;
var spin = setInterval(function() {
slideSel('auto')
}, settings.delay);
function slideSel(i) {
if (i == 'auto') {
sel_i++;
i = sel_i;
} else {
clearInterval(spin)
}
var position = $(cnt).position();
var t = car_w * -i;
var last = false;
var d = t - position.left;
if (Math.abs(t) == cnt.width() - car_w) {
sel_i = i = 0;
}
$(cnt).animate({
left: '+=' + d
}, settings.transition, function() {
$('.dot', car).removeClass('active');
$('.dot' + i, car).addClass('active');
if (!sel_i) {
$(cnt).css('left', '0');
}
});
sel_i = i;
}
}
http://plnkr.co/edit/bObWoQD8sGYTV2TEQ3r9
https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js
The code has been adapted to be used without plugin architecture here:
http://plnkr.co/edit/9dmfzcyEMtukAb4RAYO9
Hope it helps,
g

var Slider = new function () {
var that = this;
var Recursion = function (n) {
setTimeout(function () {
console.log(n);
$('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
if (n != 0)
Recursion(n - 1);
else
Recursion(5);
}, 3000);
};
var d = Recursion(5);
};
var Slider = new function () {
var that = this;
var Recursion = function (n) {
setTimeout(function () {
console.log(n);
$('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
if (n != 0)
Recursion(n - 1);
else
Recursion(5);
}, 3000);
};
var d = Recursion(5);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/JS/Ajaxcall.js"></script>
<title>Index</title>
</head>
<body>
<div style="background: rgb(255, 106, 0) none repeat scroll 0% 0%; padding: 80px;" id="slider_div">
<div id="sub_div">
<img src="~/Images/0.JPG" style="width: 100%; height: 452px;">
</div>
</div>
</body>
</html>

vertical bar chart with with user input and validation

i need a make a code where the user can add the max points, achieved points and his name. this is my code..most things are already working, i just need a function to change the max points, right now its a static number.
<head>
<title>examAnalysis</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
float: left; margin-right: 10px;
}
div p {
text-align: center;
}
</style>
<script type="text/javascript">
var participant = [];
var maxPoints = 100;
var barWidth = 75;
window.onload = function() { document.getElementsByTagName('input')[0].value = maxPoints; } function setMaxPoints() { maxPoints = document.getElementsByTagName('input')[0].value; }
function gatherData()
{
var name = window.prompt('Please enter the name of the participant:');
name = name.replace(/\s+/g, '');
if ((/[^A-Z\s\-\']/gi.test(name)) || (name == '') || (name == 'undefined'))
{
alert ('You must enter a valid name! ');
return;
}
var points = window.prompt('Please enter the achieved points of the participant:');
points = parseInt(points, 10);
if ((/[^0-9\s\-\']/gi.test(points)) || (points == ''))
{
alert ('You must enter a valid number! ');
return;
}
participant.push({name: name, points: points});
createChart();
};
function createChart ()
{
var i = 0;
var len = participant.length;
var bar = null;
var container = document.getElementById('chart');
container.innerHTML='';
while (i < len)
{
bar = document.createElement('div');
bar.style.width = barWidth + 'px';
bar.style.backgroundColor = getRandomColor();
bar.style.float = 'left';
bar.style.marginRight = '10px';
bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
percent = ((participant[i].points / maxPoints) * 100) + '%';
bar.innerHTML = ['<p style="margin-top: ' + (parseInt(bar.style.height) - 17) + 'px">', percent, '<br />', participant[i].name, '</p>'].join('');
container.appendChild(bar);
i = i + 1;
}
};
function getRandomColor () {
return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
};
</script>
</head>
<body>
<label><input size="5" onkeyup="setMaxPoints()" /> Set Max Points</label><br /><br />
<button onclick="gatherData()">Add Participant</button>
<h4>Chart</h4>
<div id="chart"></div>
</body>

Kentas, here is my entire version of your code with the addition of an input box to get maxPoints:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>examAnalysis</title>
<style type="text/css">
div
{
float: left;
margin-right: 10px;
}
div p
{
text-align: center;
}
</style>
<script type="text/javascript">
var participant = [];
var maxPoints = 200;
var barWidth = 20;
window.onload = function()
{
document.getElementsByTagName('input')[0].value = maxPoints;
}
function setMaxPoints()
{
maxPoints = document.getElementsByTagName('input')[0].value;
}
function gatherData()
{
var name = window.prompt('Please enter the name of the participant:');
name = name.replace(/\s+/g, '');
if ((/[^A-Z\s\-\']/gi.test(name)) || (name == '') || (name == 'undefined'))
{
alert ('You must enter a valid name! ');
return;
}
var points = window.prompt('Please enter the achieved points of the participant:');
points = parseInt(points, 10);
if ((/[^0-9\s\-\']/gi.test(points)) || (points == ''))
{
alert ('You must enter a valid number! ');
return;
}
participant.push({name: name, points: points});
createChart();
};
function createChart ()
{
var i = 0;
var len = participant.length;
var bar = null;
var container = document.getElementById('chart');
container.innerHTML='';
while (i < len)
{
bar = document.createElement('div');
bar.style.width = barWidth + 'px';
bar.style.marginBottom = '5px';
bar.style.backgroundColor = getRandomColor();
bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
percent = ((participant[i].points / maxPoints) * 100) + '%';
bar.innerHTML = ['<p style="margin-top: ' + (parseInt(bar.style.height) - 17) + 'px">', percent, '<br />', participant[i].name, '</p>'].join('');
container.appendChild(bar);
i = i + 1;
}
};
function getRandomColor ()
{
return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
};
</script>
</head>
<body>
<label><input size="5" onkeyup="setMaxPoints()" /> Set Max Points</label><br /><br />
<button onclick="gatherData()">Add Participant</button>
<h4>Chart</h4>
<div id="chart"></div>
</body>

How to start the popup lightbox onLoad?

I want to make a lightbox popup. I want it to pop up when the webpage loads and close it when they click the lightbox popup. How can I do this?
Here is what I have so far but it doesn't work.
HTML FILE:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox 2</title>
<meta name="description" lang="en" content="testing" />
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
<link
href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700'
rel='stylesheet' type='text/css'>
</head>
<body>
<a href="images/examples/image-1.jpg" rel="lightbox">
<img src="images/examples/thumb-1.jpg" alt="" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox"
title="Optional caption."><img src="images/examples/thumb-2.jpg"
alt="" /></a>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
JS FILE:
(function() {
var $, Lightbox, LightboxOptions;
$ = jQuery;
LightboxOptions = (function() {
function LightboxOptions() {
this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
return LightboxOptions;
})();
Lightbox = (function() {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}
Lightbox.prototype.init = function() {
this.enable();
return this.build();
};
Lightbox.prototype.enable = function() {
var _this = this;
return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
_this.start($(e.currentTarget));
return false;
});
};
Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).after($('<div/>', {
id: 'lightbox'
}).append($('<div/>', {
"class": 'lb-outerContainer'
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}), $('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
}))))), $('<div/>', {
"class": 'lb-dataContainer'
}).append($('<div/>', {
"class": 'lb-data'
}).append($('<div/>', {
"class": 'lb-details'
}).append($('<span/>', {
"class": 'lb-caption'
}), $('<span/>', {
"class": 'lb-number'
})), $('<div/>', {
"class": 'lb-closeContainer'
}).append($('<a/>', {
"class": 'lb-close'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))))).appendTo($('body'));
$('#lightboxOverlay').hide().on('click', function(e) {
_this.end();
return false;
});
$lightbox = $('#lightbox');
$lightbox.hide().on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
});
$lightbox.find('.lb-outerContainer').on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
});
$lightbox.find('.lb-prev').on('click', function(e) {
_this.changeImage(_this.currentImageIndex - 1);
return false;
});
$lightbox.find('.lb-next').on('click', function(e) {
_this.changeImage(_this.currentImageIndex + 1);
return false;
});
$lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
_this.end();
return false;
});
};
Lightbox.prototype.start = function($link) {
var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
$(window).on("resize", this.sizeOverlay);
$('select, object, embed').css({
visibility: "hidden"
});
$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
if ($link.attr('rel') === 'lightbox') {
this.album.push({
link: $link.attr('href'),
title: $link.attr('title')
});
} else {
_ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = 0, _len = _ref.length; i < _len; i++) {
a = _ref[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).attr('title')
});
if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
$lightbox = $('#lightbox');
$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
};
Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader,
_this = this;
this.disableKeyboardNav();
$lightbox = $('#lightbox');
$image = $lightbox.find('.lb-image');
this.sizeOverlay();
$('#lightboxOverlay').fadeIn(this.options.fadeDuration);
$('.loader').fadeIn('slow');
$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb- numbers, .lb-caption').hide();
$lightbox.find('.lb-outerContainer').addClass('animating');
preloader = new Image;
preloader.onload = function() {
$image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width, preloader.height);
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
Lightbox.prototype.sizeOverlay = function() {
return $('#lightboxOverlay').width($(document).width()).height($(document).height());
};
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
_this = this;
$lightbox = $('#lightbox');
$outerContainer = $lightbox.find('.lb-outerContainer');
oldWidth = $outerContainer.outerWidth();
oldHeight = $outerContainer.outerHeight();
$container = $lightbox.find('.lb-container');
containerTopPadding = parseInt($container.css('padding-top'), 10);
containerRightPadding = parseInt($container.css('padding-right'), 10);
containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
containerLeftPadding = parseInt($container.css('padding-left'), 10);
newWidth = imageWidth + containerLeftPadding + containerRightPadding;
newHeight = imageHeight + containerTopPadding + containerBottomPadding;
if (newWidth !== oldWidth && newHeight !== oldHeight) {
$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing');
} else if (newWidth !== oldWidth) {
$outerContainer.animate({
width: newWidth
}, this.options.resizeDuration, 'swing');
} else if (newHeight !== oldHeight) {
$outerContainer.animate({
height: newHeight
}, this.options.resizeDuration, 'swing');
}
setTimeout(function() {
$lightbox.find('.lb-dataContainer').width(newWidth);
$lightbox.find('.lb-prevLink').height(newHeight);
$lightbox.find('.lb-nextLink').height(newHeight);
_this.showImage();
}, this.options.resizeDuration);
};
Lightbox.prototype.showImage = function() {
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-loader').hide();
$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
Lightbox.prototype.updateNav = function() {
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-nav').show();
if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
if (this.currentImageIndex < this.album.length - 1) {
$lightbox.find('.lb-next').show();
}
};
Lightbox.prototype.updateDetails = function() {
var $lightbox,
_this = this;
$lightbox = $('#lightbox');
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
}
if (this.album.length > 1) {
$lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast');
} else {
$lightbox.find('.lb-number').hide();
}
$lightbox.find('.lb-outerContainer').removeClass('animating');
$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
return _this.sizeOverlay();
});
};
Lightbox.prototype.preloadNeighboringImages = function() {
var preloadNext, preloadPrev;
if (this.album.length > this.currentImageIndex + 1) {
preloadNext = new Image;
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
preloadPrev = new Image;
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};
Lightbox.prototype.enableKeyboardNav = function() {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function() {
$(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function(event) {
var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
KEYCODE_ESC = 27;
KEYCODE_LEFTARROW = 37;
KEYCODE_RIGHTARROW = 39;
keycode = event.keyCode;
key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
}
}
};
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
$(window).off("resize", this.sizeOverlay);
$('#lightbox').fadeOut(this.options.fadeDuration);
$('#lightboxOverlay').fadeOut(this.options.fadeDuration);
return $('select, object, embed').css({
visibility: "visible"
});
};
return Lightbox;
})();
$(function() {
var lightbox, options;
options = new LightboxOptions;
return lightbox = new Lightbox(options);
});
}).call(this);

if your using jquery you can just create the link element as per the instructions and then use the following:
e.g
HTML:
<a id ="ele_id" href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
JS:
$('document').ready(function(){
$('#ele_id').trigger('click');
});
UPDATE
If you wanted you could use a cookie to check if it's hte users first time on the site and only run the light box if that is the case.
Using jquery cookie plugin: https://github.com/carhartl/jquery-cookie
$('document').ready(function(){
if ($.cookie('has_visited') != TRUE){
$('#ele_id').trigger('click');
$.cookie('has_visited', TRUE, { expires: 1 }); //this will set the cookie to expire after one day but you could make it longer
});

<!DOCTYPE html>
<html>
<head>
<Style>
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 5%;
left: 45%;
width: 640px;
height: 453px;
margin-left: -250px;
margin-top: 100px;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
<script>
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<head>
<body onload="lightbox_open()";>
<div class="light" onClick="lightbox_close();" id="light"><img src="your_img.jpg"></div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Chrome Extension JavaScript Error - javascript

Related

No output in console.log. Beginner Question

Iframe is not working on my website while working on local

How to create an simple slider using jquery(not using plug in)?

vertical bar chart with with user input and validation

How to start the popup lightbox onLoad?

Categories

Resources