hi can someone help me with my code? it says the loginModule is not defined. can someone explain this to me. why can't define the function when i already call out on my html file?
and nothing reflects to the console but error.
pardon me because i'm a new learner of JavaScript. hope you help me thanks!
<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Support Admin</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Nova+Flat' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css' />
<!-- <link rel="stylesheet" href="bootstrap.css" type="text/css"> -->
<script scr="support-admin\assets\data\admin-data.js"></script>
<script src="support-admin\assets\js\index-admin.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="head">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<a href="index.html">
<img src="assets/img/corelogo.png" class="header-mid" />
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text-center" >
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4><span>Call:</span> +639351957952</h4>
<h4><span>E-mail:</span> michaelpelagio9830#gmail.com</h4>
</div>
</div>
</div>
</div>
<section >
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Admin Login </h3>
<form>
<div class="form-group">
<input id="userName" type="text" class="form-control" required="required" placeholder="Username / Email" />
</div>
<div class="form-group">
<input id="passWord" type="text" class="form-control" required="required" placeholder="Your Password" />
</div>
<div class="form-group">
<i class="btn btn-success" onClick="logInModule()">Click To Login</button>
</div>
Forgot Password ?
</form>
</div>
</div>
</div>
</section>
<!-- Jquery Core Script -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Core Bootstrap Script -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
then this is my javascript index-admin.js
const logInModule = ()=>{
var username = document.getElementById('userName');
var password = document.getElementById('passWord');
console.log(username);
console.log(password);
}
whenever i click the button there's an error in console of my browser it says.
index-admin.html:80 Uncaught ReferenceError: logInModule is not defined
at HTMLElement.onclick (index-admin.html:80)
onclick # index-admin.html:80
I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.
I am doing a project.
I want to have same background color on body, but when i set body color, div with .container-fluid class gets other color.
How can I set same color on both?
Here is my code:
body {
background-color: rgb(0, 223, 26);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="background-color:rgb(0,223,26)">
<div class="row">
<div class="offset-4 col-4 offset-4">
<div class="offset-1">
<h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
</div>
<b><div class="randomquote" style="font-size:20px">
</div></b>
<div class="offset-3">
<button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 offset-1 btn btn-primary">New Quote</button>
</div>
</div>
</div>
</div>
The body style is overridden by the bootstrap CSS , it doesn't take your color:
body {
background-color: rgb(0, 223, 26);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
BODY!
</body>
You may want to add a div directly inside the body:
body > div {
background-color: rgb(0, 223, 26);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div><!-- Added here -->
<div class="container-fluid"><!-- Removed inline CSS here -->
<div class="row">
<div class="offset-4 col-4 offset-4">
<div class="offset-1">
<h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
</div>
<b><div class="randomquote" style="font-size:20px">
</div></b>
<div class="offset-3">
<button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 offset-1 btn btn-primary">New Quote</button>
</div>
</div>
</div>
</div>
</div><!-- Added here -->
<body>
Hope it helps.
Your problem is because of the bootstrap css file you're importing. It overrides your body css.
Your solution is to give your body an id of its own.
<body id="idForOverrides">
Then any css changes you make for that id will override bootstrap's definition.
Learn more here:
best way to override bootstrap css
I have just tested in firefox and realized that problem is only in chrome
heres is the code for it :
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body style="background-color: green">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" >
<div class="row">
<div class="offset-4 col-4 offset-4">
<div class="offset-1">
<h1 style="color:rgb(240,255,0)">Random Einstein's Quote Generator</h1>
</div>
<b><div class="randomquote" style="font-size:20px">
</div></b>
<div class="offset-3">
<button id="quotegenerator" style="font-size:14px" class="offset-1 col-4 offset-1 btn btn-primary">New Quote</button>
</div>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
you can check fiddle:https://jsfiddle.net/nnfoy6pw/
Use background-color: rgb(0,223,26)!important;
It was working fine until a while ago. I did not change anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">11:00 AM</li>
<li role="presentation">4:00 PM</li>
<li role="presentation">9:00 PM</li>
</ul>
</header>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="elevenam">
<div class="row">
<?php include_once 'elevenam.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fourpm">
<div class="row">
<?php include_once 'fourpm.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ninepm">
<div class="row">
<?php include_once 'ninepm.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Is there something wrong with twitter bootstrap??
my js used to be link
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
from their site but it stopped working so i tried the downloaded one and it still doesn't work.
I notice in their demo, it wasn't working either.
because
`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css%22%20integri ty=%22sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7`
is no more public. Upload a file on your server and load the css from there.
My lightbox gallery is working perfectly offline but i've just uploaded it online at it's not working at all, clicking on images just takes you to a new page.
Here is the page ... www.jevonz.co.uk/portfolio.html
The file paths seem to be fine and I've even switched from locally hosting jquery to using the google hosted one but all to no avail. Any help would be much appreciated. Cheers!
Here's the code for the page if that gives any more info.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Jevonz.css" rel="stylesheet" type="text/css">
<link href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"> </script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1" align="center">
<img src="images/JevonzHeader.jpg"/>
</div><!-- end LayoutDiv1 -->
<div id="Navigation" align="center">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
<!-- end Navigation -->
<div id="galleria" align="center">
<img src="images/gallery/Thumbnails/bio_thumb.jpg" width="200" height="200" alt="Bioluminescence" />
<img src="images/gallery/Thumbnails/blueRobot_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/DeepSea_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/DiD_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/EscapeLife_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/GorillaLarge_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/LifeRobot_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/LureDeep_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/TangledFamily_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/WorldBelow_thumb.jpg" width="200" height="200" alt="" />
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</div>
</div>
<!-- end gridContainer -->
</body>
</html>
You are getting 403 Forbidden errors on the lightbox files, I have posted a screenshot of the Net panel in firebug:
http://cl.ly/image/2m461v012M1i
Check the permissions on that folder and make sure that the webserver can read that folder and its contents.