Dialogue boxes

Developer
Jaflo
Size
3,897 Kb
Views
32,384
  1. Dialogue boxes Previews
  2. Dialogue boxes HTML Codes
  3. Dialogue boxes CSS Codes
  4. Dialogue boxes JS Codes

How do I make an dialogue boxes?

Inspired by a old game.... What is a dialogue boxes? How do you make a dialogue boxes? This script and codes were developed by Jaflo on 07 September 2022, Wednesday.

Dialogue boxes Previews
IQ Test

Dialogue boxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dialogue boxes</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Press+Start+2P'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { height: 100%;
}
#screen { background-image: url("http://vctokyostory.files.wordpress.com/2010/01/day_care.jpg"); background-size: cover; width: 270px; height: 243px; margin: 0 auto; margin-bottom: -48px;
}
/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face { font-family: "Pokemon GB"; src: url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.eot?") format("eot"), url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.woff") format("woff"), url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.ttf") format("truetype"), url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.svg#PokemonGB") format("svg"); font-weight: normal; font-style: normal;
}
.box { font-size: 8px; font-family: "Pokemon GB", Arial, sans-serif; border-radius: 2px; padding: 8px; width: 250px; height: 28px; line-height: 16px; margin: auto; background: white; border: 1px solid white; box-shadow: 0 1px 0 1px black, inset 0 1px 0 1px black, 0 0 0 1px black, inset 0 0 0 1px black;
}
.box.hide { transition: all .3s; opacity: 0; /*margin-top: 200px;*/
}
.box > i { width: 0; height: 0; border: 5px solid transparent; border-top-color: black; margin-top: 23px; animation: bounce 0.5s ease-in-out 0 infinite alternate; float: right;
}
@keyframes bounce { from { margin-top: 20px; } to { margin-top: 23px; }
}
#restart { background: tomato; color: white; display: block; margin: 50px auto; width: 80px; padding: 10px; text-align: center; border-radius: 10px; font-family: sans-serif;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="screen"></div>
<div class="box"> You need javasccript for this!
</div>
<span id="restart">Restart</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dialogue boxes - Script Codes CSS Codes

body { height: 100%;
}
#screen { background-image: url("http://vctokyostory.files.wordpress.com/2010/01/day_care.jpg"); background-size: cover; width: 270px; height: 243px; margin: 0 auto; margin-bottom: -48px;
}
/* @font-face kit by Fonts2u (http://www.fonts2u.com) */
@font-face { font-family: "Pokemon GB"; src: url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.eot?") format("eot"), url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.woff") format("woff"), url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.ttf") format("truetype"), url("https://dl.dropboxusercontent.com/u/10822923/Pokemon_GB/Pokemon_GB.svg#PokemonGB") format("svg"); font-weight: normal; font-style: normal;
}
.box { font-size: 8px; font-family: "Pokemon GB", Arial, sans-serif; border-radius: 2px; padding: 8px; width: 250px; height: 28px; line-height: 16px; margin: auto; background: white; border: 1px solid white; box-shadow: 0 1px 0 1px black, inset 0 1px 0 1px black, 0 0 0 1px black, inset 0 0 0 1px black;
}
.box.hide { transition: all .3s; opacity: 0; /*margin-top: 200px;*/
}
.box > i { width: 0; height: 0; border: 5px solid transparent; border-top-color: black; margin-top: 23px; animation: bounce 0.5s ease-in-out 0 infinite alternate; float: right;
}
@keyframes bounce { from { margin-top: 20px; } to { margin-top: 23px; }
}
#restart { background: tomato; color: white; display: block; margin: 50px auto; width: 80px; padding: 10px; text-align: center; border-radius: 10px; font-family: sans-serif;
}

Dialogue boxes - Script Codes JS Codes

var texts = new Array(["Use the A button or click\nthe box to continue"], ["This is a test\nYou like it?"], ["Oh god...\nThis brings up nostalgic"], ["memories, eh? :)"], ["The font used is called\nPokemon GB found on fonts2u"], ["Pretty cool, huh?"]);
/*var texts = new Array(["Use the A button or click\nthe box to continue."], ["Hello there! Welcome to\nthe world of Pokémon!"], ["My name is Oak! People call\nme the Pokémon Prof!"], ["This world is inhabited by\ncreatures called Pokémon!"], ["For some people, Pokémon are\npets. Other use them for"], ["fights."], ["Myself... I study Pokémon as a profession."], ["Your own very Pokémon legend\n is about to unfold!"], ["A world of dreams and\nadventures with Pokémon"], ["awaits!\nLet's go!"]);*/
var i = 0, speed = 60, pressed = false, keydowned = false, running = false;
type(texts[i]+"");
$("#restart").click(function(){ i = 0, speed = 60, pressed = false, keydowned = false; type(texts[i]+""); $(".box").removeClass("hide");
});
$(document).keydown(function(e) { if (e.which==65) { speed = 20; if (pressed) { pressed = false; keydowned = false; if (i<texts.length) { type(texts[i]+""); } else { $(".box").addClass("hide"); } } else { keydowned = true; } }
}).keyup(function(e) { if (e.which==65) { speed = 60; if (keydowned) { pressed = true; } }
});
$(".box").click(function(e) { if (i<texts.length) { type(texts[i]+""); } else { $(".box").addClass("hide"); }
});
function type(txt) { if (!running) { running = true; i++; var timeOut, txtLen = txt.length, char = 0; $(".box").text(""); (function typeIt() { timeOut = setTimeout(function() { char++; var type = txt.substring(0, char); $(".box").html(type.replace("\n","<br />")); typeIt(); if (char == txtLen) { clearTimeout(timeOut); running = false; if (i<texts.length) { $(".box").prepend("<i></i>"); } } }, speed); }());
}}
Dialogue boxes - Script Codes
Dialogue boxes - Script Codes
Home Page Home
Developer Jaflo
Username jaflo
Uploaded September 07, 2022
Rating 3.5
Size 3,897 Kb
Views 32,384
Do you need developer help for Dialogue boxes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jaflo (jaflo) Script Codes
Name
Share button for images
Styled calendar
SimpleGroove bookmarklet
Wobble menu change animation
D3 animation
A Pen by jaflo
Moving picture header
Shopping cart
A note
File save gif in CSS
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!