I am working on an IFrame browser with an omnibox (id="address") and a "GO" button (id="submit"), and I would like to detect when the user presses enter and execute a JavaScript function. I have tried using the <form> tag and the W3Schools How TO - Trigger Button Click on Enter, but the form broke my application, and the button click on enter didn't do anything.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="https://docs.google.com/drawings/d/e/2PACX-1vSqg7iNwpB8zKiJqvtbSf0-YrM_hiRkPs_aHG0RLVvXX1YnHfRfpnqSbN6DwEqpdaOWN1wZttTA3MI3/pub?w=30&h=30" type="image/x-icon" name="favicon"/>
<title>Lokean Web Browser</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap');
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 25px; padding:13px; padding-right: 0px; font-family: 'Noto Sans'; sans-serif; background-color:#202124; color:white; position:fixed; z-index: 4;}
.second-row {position: absolute; top: 46px; left: 0; right: 0; bottom: 0;}
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
.form {
float: right;
}
#logo {
}
body {
background-color: #202124;
color: white;
font-family: Noto Sans;
}
}
.noSelect {
}
#address {
border-radius: 11px;
border-style: none;
border-width: 1px;
width: 300px;
padding: 3px;
color: black;
background-color: white;
font-size: 11px;
}
#address:focus {
border-style: solid;
border-color: white;
outline: none;
}
#submit {
border-radius: 11px;
border-color: #FFC107;
border-style: solid;
border-width: 1px;
padding: 3px;
background-color: #FFC107;
color: black;
font-size: 11px;
margin-left: 6px;
margin-right: 13px;
}
input[type=submit] {
width: 2em; height: 2em;
}
#submit:hover {
cursor: pointer;
animation-name: fill-hover;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
#submit:focus {
outline: none;
}
#submit:active {
animation-name: border-active;
animation-duration: 0.25s;
animation-fill-mode: forwards;
}
#keyframes border-active {
from {}
to {border-color: #9A7E24; border-width: 3px; margin-left: 4px; margin-right: 11px;}
}
#keyframes fill-hover {
from {}
to {border-color: #E0A800; background-color: #E0A800;}
}
a {
color: white;
}
#url {
}
.title {
float: left;
font-size: 19px;
color: white;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript" charset="utf-8">
var url;
function view() {
url = document.getElementById("address").value;
var checkColon = url.includes(":");
var youtube = url.includes("youtube.com/");
var youtubeShort = url.includes("youtu.be/");
var noSearch = url.includes(".") || url.includes(":");;
var newUrl;
var n;
var s;
if (noSearch !== true){
url = "https://en.wikipedia.org/w/index.php?search=" + url + "&title=Special%3ASearch";
}
if (checkColon !== true && noSearch == true){
url = "http://" + url;
}
if (youtube == true) {
n = url.indexOf('&');
if (n !== -1) {
url = url.substring(0, n);
}
newUrl = url.replace("/watch?v=", "/embed/");
url = newUrl;
}
if (youtubeShort == true) {
newUrl = url.replace("youtu.be/", "youtube.com/embed/");
url = newUrl;
}
document.getElementById("url").src = url;
document.getElementById("address").value = url;
return false;
}
function iLoad() {
url = document.getElementById("url").src;
document.getElementById("address").value = url;
}
</script>
</head>
<body>
<div class="first-row">
<span class="title" id="title">
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ6gkadBIbBAYR28QDvj8FQRnJ51SL9qIFYJQMPtkMiiyRb9ezklHjM5qTY3jCblh6wCw6hTkDJWLQl/pub?w=72&h=72" id="logo">
</span>
<span class="form">
<input onClick="this.setSelectionRange(0, this.value.length)" type="url" name="address bar" id="address" class="noSelect" value="" placeholder="Enter URL or search"/>
<input type="submit" value="+" id="submit" onclick="view();">
</span>
</div>
<div class="second-row">
<iframe id="url" title="Lokean Web" src="https://wikipedia.org" onLoad="iLoad();" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowpaymentrequest="true" allowfullscreen sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" ></iframe>
<div class="center">
<br>
Lokean Web Browser unblocks Youtube and all GoGuardian-blocked websites, and uses Wikipedia for search purposes.
<br>
However, some websites refuse to connect because this is an iFrame browser.
</div>
</div>
</body>
</html>
Thank you for your time and any help! :)
you can do something like:
const inputEl = document.getElementById("enter-input");
inputEl.addEventListener("keyup", manageEnter);
function manageEnter(evt) {
evt.preventDefault();
if (evt.keyCode === 13) {
console.log("hello");
}
}
<form onsubmit="event.preventDefault();" action="">
<input id="enter-input" type="string" />
</form>
To test, do click in the input and press enter to see a console.log, if you press any other key, the console.log doesn't will be trigger.
Related
<!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>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
How to open iframe only on when the button is clicked without using jquery <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>
here when we open a website the iframe should not load it should load only when the button is clicked
My present code :
<!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>Preview Testing</title>
</head>
<body>
<style>
.buttonDownload {
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #1d71ff;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
margin: 2px;
border-radius: 12px;
align-items: center;
}
.down-button{
width: 100%;
text-align: center;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 15px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0px;
height: 0px;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
animation-play-state: running;
}
.milkparagraph{
color: #FF4500;
font-size: 19px;
margin: 15px;
}
.milkdownbox{
border: 2px solid #365194;
padding: 0px 5% 7px 2%;
border-radius: 12px;
margin: 17px 0% 20px;
width: fit-content;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
</style>
<div class="syltp">
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="https://drive.google.com/file/d/1GEsC2NXwLjvV4N2JCPqAqAxqMEt3uro0/preview" width="700" height="400" style="border: 1px solid black;"></iframe>');
}
});
});
</script>
<h4> <span style="font-family: 'Open Sans';"><i aria-hidden="true" class="fa fa-sticky-note"></i>Preview without jquery</span></h4>
<div class="down-button" id="button"><b class="buttonDownload">PREVIEW</b></div>
<br />
<div id="iframeHolder"></div>
</div>
</body>
</html>
it is my present code if I add the above-mentioned jquery its works fine but here I removed it now it's not working
so I want to work it without jquery
That sticky sidebar should auto-scroll with the main content but when I used to frame the sidebar not scrolling down. It also block my comment frame
Check this, Is this what do you need?
const btn = document.querySelector("button.openIframe");
const frame = document.getElementById("frame");
btn.addEventListener("click", toggleIframe);
function toggleIframe(){
var src = "https://www.jqueryscript.net/";
frame.classList.toggle("d-none");
btn.classList.toggle("opened");
if(btn.classList.contains("opened")){
btn.innerHTML = "Close IFrame";
src = prompt("Enter a Source :", "https://www.jqueryscript.net/");
}
else{
btn.innerHTML = "Open IFrame";
}
frame.src = src;
}
.d-none{ display:none; }
<button class="openIframe">Open IFrame</button>
<iframe id=frame class="d-none" width="100%" height="60%">
</iframe>
Or Same in a Better Way ( Update )
const btn = document.querySelector("#load");
const src = document.querySelector("#src");
const frame = document.querySelector("#frame");
btn.addEventListener("click", toggleFrame);
function toggleFrame(){
frame.src = "about:blank";
if(src.value !== null){
src.classList.toggle("d-none");
btn.classList.toggle("opened");
frame.src = src.value;
frame.classList.toggle("d-none");
if(btn.classList.contains("opened"))
btn.innerHTML = "Close";
else
btn.innerHTML = "Load";
}
}
.d-none{ display:none; }
<input id=src placeholder="Enter a SRC" value="https://www.jqueryscript.net/"><button id=load>Load</button>
<iframe id=frame class=d-none width="100%"></iframe>
iFrame
I'm working on a form validation for a uni project and I can't seem to get it right.
I'm using if statements inside a function and I get no reaction from the first-name input.
I also tried to change the 'href'-link of the form element and no reaction, thank you in advance!
JsFiddle : https://jsfiddle.net/gcdb2nj3/2/
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventtDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
e.preventDefault();
} else {
warning.style.display="none"
e.preventDefault();
}
});
};
You have to pass the event object to your preventDefault function to prevent the default action. Note that the code you provided should work fine as you are calling event.preventDefault if the form validation does not pass whereas in your JSFiddle you are calling the preventDefault function without any arguments.
// Burger Menu Section
var mySideNav = document.getElementById('mySidenav');
var burgerLines = document.querySelector('.burger-lines');
var closeBtn = document.querySelector('.closebtn');
var logo = document.querySelector('.logo');
var what = $('.what');
$(burgerLines).on('click', function openNav() {
mySideNav.style.width="100%";
mySideNav.style.opacity="1";
burgerLines.style.opacity="0"
closeBtn.style.color="white"
closeBtn.style.fontSize="66px"
closeBtn.style.top="-29px"
});
$(closeBtn).on('click', function closeNav() {
mySideNav.style.width="0";
mySideNav.style.opacity = ".00775";
burgerLines.style.opacity="1"
});
// Form validation begins here
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
preventDefault(e);
} else {
warning.style.display="none"
preventDefault(e);
}
});
};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #FCFCFC;
}
.sidenav {
font-family: 'Cormorant Garamond';
font-weight: bold;
width: 0px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
overflow-x: hidden;
padding-top: 65px;
margin-left: 0px;
text-align: center;
transition: .7s;
}
.sidenav a {
padding: 45px 8px 20px 32px;
text-decoration: none;
font-size: 28px;
color: white;
display: block;
transition: 0.7s;
}
.sidenav a:hover {
color: rgb(155, 155, 155);
}
.burger-lines {
font-size:30px;
cursor:pointer;
position: fixed;
top: 44px;
right: 70px;
}
.logo {
font-family: 'Oswald', sans-serif;
padding: 40px 0px 0px 40px;
text-decoration: none;
font-size: 26px;
color: black;
display: block;
position: fixed;
z-index: 1;
top: 5px;
}
.sidenav .closebtn {
color: black;
cursor:pointer;
position: absolute;
top: -5px;
right: 60px;
font-size: 46px;
}
.headline-2 {
text-transform: uppercase;
text-align: center;
position: relative;
top: 9.5rem;
right: 15rem;
font-size: 18px;
}
.form-wrap {
text-align: center;
margin-top: 10rem;
}
.form-wrap > input {
font-family: 'Cormorant Garamond';
margin-top: 20px;
padding: 5px;
font-size: 16px;
border: 1px solid lightgray;
background: #FCFCFC;
}
#first-name, #last-name, #e-mail, #phone-number {
width: 350px;
height: 40px;
}
#custom-text-area {
font-family: 'Cormorant Garamond';
padding: 10px;
margin-top: 1rem;
width: 707px;
height: 230px;
font-size: 16px;
background: #FCFCFC;
border: 1px solid lightgray;
}
#submit {
background: black;
border: 1px solid black;
font-size: 19px;
text-align: left;
color: white;
width: 120px;
height: 45px;
margin-right: 29.3rem;
margin-top: 25px;
}
#submit:hover {
background: rgb(53, 53, 53);
transition: .5s;
}
/*input:hover, #custom-text-area:hover {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}*/
.input-invalid {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}
.warning {
font-family: 'Cormorant Garamond';
color: red;
position: relative;
top: -36px;
left: -3rem;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Styx Somnus || Contact</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<a class="logo" href="index.html">STYX SOMNUS</a>
<div class="sidenav" id="mySidenav">
<a href="javascript:void(0)" class="closebtn" >×</a>
Home
About
Projects
Contact
</div>
<span class="burger-lines">☰</span>
</nav>
</header>
<main>
<p class="headline-2">Contact Form</p>
<form action="#" class="form-wrap">
<input type="text" id="first-name" placeholder="First Name*">
<input type="text" id="last-name" placeholder="Last Name*"><br>
<input type="email" id="e-mail" placeholder="Your E-Mail*">
<input type="text" id="phone-number" placeholder="Phone Number"><br>
<textarea id="custom-text-area" cols="40" rows="7" placeholder="Your Message..."></textarea><br>
<input type="submit" id="submit" value="Submit →">
<p class="warning">All fields with * must be filled in.</p>
</form>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should call preventDefault immediately upon submission, run your validation, then if validation passes, continue on with submission: https://jsfiddle.net/gcdb2nj3/4/
function formularValidierung() {
form.addEventListener('submit', function(e) {
e.preventDefault();
if (firstName.value === "") {
warning.style.display = "block"
firstName.classList.add('input-invalid')
} else {
warning.style.display = "none"
// submit form here
}
});
};
formularValidierung();
I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
var count = 50;
var i = 0;
var tag = '';
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" value="Title...">
<span class="submit_box" onclick="write()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
function write() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
</script>
</body>
write will refer to the global function document.write, which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
var count = 50;
var i = 0;
var tag = '';
function addTodo() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" placeholder="Title...">
<span class="submit_box" onclick="addTodo()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
</script>
</body>
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button>
<button onclick="console.log(write('hi'))">Hi</button>
Hello I am making a flash gallery website and my javascript works when I put it inside a <script></script> tag within my html but when I try to move it to an external .js file it stops from working.
HTML
<!doctype html>
<html lang="en" onLoad="flashy()">
<head>
<meta charset="utf-8">
<title>Flash Test</title>
<meta name="description" content="Flash stuff">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="styles/style.css">
<script src="js/scripts.js"></script>
</head>
<body>
<div id="siteText">
<h1>Anon Curb</h1>
</div>
<div id="flashmovie">
<object type="application/x-shockwave-flash" data="swfs/2cats.swf">'+
<param name="movie" value="swfs/2cats.swf">
</object>
</div>
<!-- end #container -->
<div id="buttoncon">
<button id="rand">Random</button>
<div id="buttons">
<button id="next">next</button>
<button id="back">Back</button>
<div id="title">2cats</div>
</div>
</div>
<!-- end #wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</body>
</html>
CSS
body {
background-color: black;
margin: 0;
font-family: verdana, arial, hevetica, sans-serif;
}
#siteText {
font-size: 24px;
text-align: center;
color: white;
width: 100%;
margin-top: -10px;
}
#flashmovie {
width: 100%;
height: 80%;
margin-top: -1%;
float: center;
position: absolute;
margin-left: auto;
margin-right: auto;
}
#flashmovie object {
width: 100%;
height: 100%;
background-color: black;
}
button {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
width: 80px;
height: 30px;
}
#buttons {
width: 50%;
height: 50px;
position: relative;
left: 25%;
text-align: center;
background-color: black;
}
#buttoncon {
top: 90%;
width: 100%;
background-color: black;
position: absolute;
}
#back,
#next {
float: left;
cursor: pointer;
border: none;
}
#next {
float: right;
}
#title {
width: 60%;
margin: auto;
font-size: 22px;
color: #600;
text-align: center;
color: white;
}
#rand {
color: black;
position: relative;
left: 48%;
background-color: white;
border: none;
cursor: pointer;
z-index: 1;
margin-bottom: .5%;
margin-top: .5%;
}
JAVASCRIPT
$(document).ready ( function(){
var links = [
'swfs/CP.swf',
'swfs/2cats.swf', /* there is no limit to the array length */
'swfs/4ChanBrightside.swf',
'swfs/4chancity.swf',
'swfs/2spooky4u.swf',
'swfs/4channer.swf',
'swfs/5_mile_walk.swf' /* no trailing comma after final item */
];
var displaytext = [
'CP',
'2cats',
'f4ChanBrightside',
'4chancity',
'2spooky4u',
'4channer',
'5_mile_walk' /* no trailing comma after final item */
];
var c = 0
var flashmovie, test, temp;
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = links.length;
}
c--
displayFiles();
}
document.getElementById('next').onclick = function () {
if (c == links.length - 1) {
c = -1;
}
c++;
displayFiles();
}
document.getElementById('rand').onclick = function () {
temp = c;
while (c == temp) {
c = Math.floor(Math.random() * links.length);
}
displayFiles();
}
}
function displayFiles() {
test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
document.getElementById('title').innerHTML = displaytext[c];
flashmovie.innerHTML =
'<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
'<param name="movie" value="' + links[c] + '">' +
'<\/object>';
}
window.addEventListener ?
window.addEventListener('load', init, false) :
window.attachEvent('onload', init);
});
So to recap the code works I think I've just messed up the way it's triggered like the JQuery $(document).ready thing or maybe I shouldn't use that to begin with? I'm new to javascript so any suggestions you have will help
The following is the code I have so far. Currently the sign-up and join links are on the top left. I want these to be in a drop down menu. So on the top left I want to have a drop down menu, that when I hover over the menu these two links appear there and when I click them the same pop up appears in the middle of the screen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clipmarks - Online Bookmark Application</title>
<meta name="description" content="An online collection of all your bookmarks.">
<meta name="author" content="Tonye Bezalel Brown">
<link rel="icon"
type="image/png"
href="images/clipmarks-favicon.png">
<style type="text/css">
body {
margin:0;
font-family: Arial, sans-serif;
font-size: 11pt;
}
a:link, a:visited {
font-family: Arial, sans-serif, verdana;
text-decoration: none;
letter-spacing:1px;
font-weight: bold;
color: #686777;
font-size: 11pt;
}
a:hover {
color: #006cff;
}
.content {
margin: 0 auto;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.header {
height: 49px;
margin: 0 auto;
padding: 50px 50px 30px;
max-width: 900px;
}
#header-img-wrap {
min-width:42px;
margin: auto auto 2px -30px;
}
#header-img-wrap a span {
font-size: 14pt;
font-family: Arial;
font-weight: 650;
position: absolute;
padding: 7px;
margin-top: -3px;
vertical-align: inherit;
}
.header a img {
width: 29px;
height: auto;
}
.header-links {
text-align: right;
margin-top: -28px;
margin-right: -50px;
width: 116px;
float: right;
}
.header li {
display: inline-block;
list-style-type: none;
padding-right: 8px;
}
#box {
width: 99.9%;
border: 1px #000 solid;
position: absolute;
height: 60%;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#box:hover {
background:rgba(0, 108, 255, 0.42);
}
#boximg {
width: 630px;
height: 140px;
position: absolute;
right: 200px;
}
.footer {
width: 100%;
text-align: center;
position: absolute;
bottom: 35px;
}
#overlay {
display: none;
position:absolute;
top:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.63);
z-index:15;
}
#login, #signup {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 199px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: white;
}
#recoverPassword {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 149px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: white;
}
form input {
display: block;
border: 0 solid black;
width: 100%;
height: 32px;
margin: 0 auto;
margin-bottom: -14px;
background: aliceblue;
}
form p {
margin-top: 0;
}
form a{
display: block;
float: left;
position: relative;
vertical-align: bottom;
width: 112px;
font-size: 12px !important;
word-break: break-word;
}
#formButton {
background: transparent;
margin-right: -7px;
display: inline;
width: 61px;
float: right;
margin-top: -8px;
word-break: break-word;
font-weight: bold;
color: #7A7A7A;
}
#formButton:hover {
color:#000;
}
</style>
</head>
<body onload="move()">
<div id="overlay" onclick="closeOverlay()">
</div>
<div id="login">
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="username" autofocus><br /><p>Username (or email address)</p>
<input type="password" name="password"><br /><p>Password</p>
<br /><br /><br />
Forgot Password
<input id="formButton" type="submit" value="Sign In">
</form>
</div>
<div id="signup">
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="username" autofocus><br /><p>Your email address</p>
<input type="password" name="password"><br /><p>Password</p>
<br /><br /><br />
<input id="formButton" type="submit" value="Join">
</form>
</div>
<div id="recoverPassword">
<form action="index.html" method="get">
<input type="text" name="username" autofocus><br /><p>Username (or email address)</p>
<br /><br /><br /><br />
<input id="formButton" type="submit">
</form>
</div>
<div class="content">
<div class="header">
<div id="header-img-wrap">
<img src="images/clipmarks-favicon.png" height="" alt="" title="" /><span>ClipMarks<span>
</div>
<div class="header-links">
<li>Sign In</li>
<li>Join</li>
</div>
</div>
<div id="box">
<img id="boximg" src="images/box-image.jpg" width="" height="" alt="" title="" />
</div>
<div class="footer">
About Us
</div>
</div>
<script>
window.onload = function move() { //makes the box move in relation to the box div
var d = document.getElementById('boximg');
var boxh = document.getElementById('box').clientHeight - 120; //keeps the image in the box by subtracting height
var boxw = document.getElementById('box').clientWidth - 600; //keeps the image in the box by subtracting the width
document.onmousemove = function calc(e) {
var x = e.clientX ;
var y = e.clientY;
if (x < boxw) {
d.style.right = x +'px';
}
if (y < boxh) {
d.style.bottom = y +'px';
}
};
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('overlay');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
evt = evt || window.event;
if (evt.keyCode == 27) {
closeOverlay();
}
};
function signin() { //displays the sign in form
var lg = document.getElementById('login');
var ov = document.getElementById('overlay');
ov.style.display = 'block';
lg.style.display = 'block';
};
function recoverPassword() { //displays the recoverPassword form for the user to recover password
closeOverlay();
var ov = document.getElementById('overlay');
ov.style.display = 'block';
var rp = document.getElementById('recoverPassword');
rp.style.display = 'block';
};
function join() { //calls the join form for users to register
var lg = document.getElementById('signup');
var ov = document.getElementById('overlay');
ov.style.display = 'block';
lg.style.display = 'block';
};
</script>
</body>
</html>
That should be fairly easy to do.
replace the code in your header-links div with this one.
HTML:
<ul>
<li>Dropdown
<ul>
<li>Sign In</li>
<li>Join</li>
</ul>
</li>
</ul>
and add this to your css classes
CSS:
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
I also recommend you remove the negative margins in your .header-links class and add float:left to your #header-img-wrap.
Hope that helps.