This is my first time to ask a question here. I'm working on migration a dojo project from version 1.6.2 to version 1.13. The application is implement on PHP
with Dojo. I have a problem of using the current application profile. There is a
login page which is using a few of dijit widgets as TextBox, ComboBox, etc.
The profile has the layer for login which is generate an optimization javascript as "login.js". When the browser renders the PHP login page it has the following error message as below. it seems it failed to load all dependencies in the right
order if I'm thinking right. Could you please help me to point out what is the
issue? I think my profile is not up to date. I have tried to set different
options in the profile but it didn't work out.
I have posted my application profile and my PHP login page and the error message from the browser below
Thanks,
Loc
dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox'
at Object.<anonymous> (login.js:formatted:87)
at Object.map (dojo.js:51)
at Object._instantiate (login.js:formatted:84)
at login.js:formatted:375
at f (dojo.js:116)
at a.extend.then.then.a.then (dojo.js:118)
at Object.parse (login.js:formatted:374)
at dojo.js:47
at l (dojo.js:52)
at n (dojo.js:52)
(anonymous) # login.js:formatted:379
11:39:39.343 dojo.js:28 TypeError: dijit.byId is not a function
at showDialog ((index):38)
at d (dojo.js:53)
at l (dojo.js:52)
at n (dojo.js:52)
at p (dojo.js:54)
at HTMLDocument.k (dojo.js:54)
The following is my application profile.
dependencies = {
optimize:"closure",
layerOptimize: 'closure',
layers: [
{
name: "login.js",
dependencies: [
"dojo/parser",
"dojo/query",
"dojo/_base.declare",
"dojo/_base.fx",
"dojo._base.lang",
"dijit/form.Button",
"dijit/form.TextBox",
"dijit/form._TextBoxMixin",
"dijit/form._FormValueWidget",
"dijit/form.ValidationTextBox",
"dijit/form.ComboBox"
]
},
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "dojo", "../../dojo"]
]
}
The following is my login PHP page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Application Console</title>
<link rel="stylesheet" type="text/css" href="../../Dojo/dijit/themes/claro/claro.css"/>
<script type="text/javascript">
var dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
isDebug: true,
locale: 'en-us'
};
</script>
<script type="text/javascript" src="../../Dojo/dojo/dojo.js"> </script>
<?php
$login_file='/var/www/xms/Dojo/dojo/login.js';
/* Customized dojo JaveScript for UI optimization */
if (file_exists($login_file)) {
echo '<script type="text/javascript" src="../../Dojo/dojo/login.js"> </script>';
} else {
/* For backward compatibility */
echo '<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>';
}
?>
<script>
dojo.addOnLoad(showDialog);
function showDialog() {
LoginLanding();
dojo.connect( dijit.byId("passwordId"), "onKeyUp", checkForEnterKey );
}
function handleLoginVerifyReply(response, args)
{
document.location.href= "index.php/consoleController";
}
function handleLoginVerifyErrorReply(response, args )
{
var responseText = response.responseText;
var errObj = JSON.parse(responseText);
dojo.byId("msgId").innerHTML = "<b>" + errObj.reason + "</b>";
}
function LoginLanding()
{
dojo.xhrPost({
url: "/index.php/verifyLogin/LoginLanding",
handleAs: "json",
timeout: 6000,
content: {} ,
load : function(response, args) {
if (response.status == 200)
{
handleLoginVerifyReply(response, args);
}
return response;
},
error: function(response,args) {
return response;
}
}
);
}
function verifyLogin() {
var vUsername= dijit.byId("userId").get("value");
var vPassword= dijit.byId("passwordId").get("value");
dojo.xhrPost({
url: "/index.php/verifyLogin/login",
handleAs: "text",
timeout: 60000,
content: { "usernameId" : vUsername, "passwordId" : vPassword } ,
load : function(response, args) {
handleLoginVerifyReply(response, args);
return response;
},
error: function(response,args) {
gUserNameLoggedIn="Unknown";
handleLoginVerifyErrorReply(response, args);
return response;
}
}
);
}
function cancelLogin() {
console.log("calling cancelLogin");
}
function checkForEnterKey(ev)
{
if ( ev.keyCode == dojo.keys.ENTER ) {
verifyLogin();
}
}
</script>
<style type="text/css">
.loginPageIcon {
position: absolute;
left: 0px;
top: 0px;
height: 120px;
width: 100%;
background-color: #ffffff;
}
.loginPageTabContainer {
display:flex;
align-items:center;
justify-content:center;
position: absolute;
left: 0px;
top: 120px;
margin-right: auto ;
background-image: url('/images/slide-bg-3.jpg');
height: 100px;
width: 1920px;
font: normal 20px Open Sans !important;
font-weight: bold;
color: white;
text-align:center;
}
h1.loginH1 {
position: absolute;
margin-left: auto ;
margin-right: auto ;
margin-bottom: auto ;
top: 10px ;
color: black;
}
div.DivLogin {
height: 250px;
width: 400px;
margin-left: auto ;
margin-right: auto ;
margin-top: 150px ;
margin-bottom: auto ;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-color:#679cc7
}
span.loginTitleTxt
{
display: inline-block;
width:100%;
height: 100%;
font: 500 15px Open Sans !important;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-top: 5px ;
}
hr.loginSeperator {
position: relative;
top: 10px;
border-bottom: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}
.loginForm {
position: relative;
display: inline-block;
left: 50%;
top: 20px;
margin-left: -180px;
font: normal 14px Open Sans !important;
width:50%;
}
.loginTable {
display: table;
}
.loginRow {
display: table-row;
}
.loginCellLeft {
display: table-cell;
height: 30px;
padding-right: 40px;
}
.loginCellRight {
display: table-cell;
height: 30px;
width:50px;
}
.loginCellEmpty {
display: table-cell;
height: 10px;
}
.loginMsgLabel {
position: relative;
left: 100%;
margin-left: -200px;
font: normal 14px Open Sans !important;
color: #772222;
width:100%;
}
div.section.header {
margin-left: -20px;
margin-right: -10px;
background-image:url("/images/slide-bg-3.jpg");
background-position-y:-200px;
padding:0!important;
height: 210px;
margin-top:6px
}
div.section.header .container {
display:flex;
align-items:center;
justify-content:center;
height:30%
}
div.section.header h1 {
margin-top:280px;
font: normal 40px Open Sans !important;
font-weight: bold;
color: white;
max-width:90%
}
</style>
</head>
<body id="loginBodyId" class="claro" bgcolor="white" style="font-size:medium;background-size:cover" >
<div class="section header">
<div class="container">
<h1> Login Page </h1>
</div>
</div>
<div class="DivLogin">
<div> <span class="loginTitleTxt"> Login </span> </div>
<hr class="loginSeperator"></hr>
<div class="loginForm">
<div class="loginTable">
<div class="loginRow">
<div class="loginCellLeft">
<label for="userId">Username:</label>
</div>
<div class="loginCellRight">
<input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId" />
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="passwordId">Password:</label>
</div>
<div class="loginCellRight">
<input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="passwordId"/>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="domainId">Domain:</label>
</div>
<div class="loginCellRight">
<select id="domainId" autocomplete="true" dojoType="dijit.form.ComboBox" value="Default">
<option selected="selected">default</option>
</select>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
</div>
<div class="loginCellRight">
<button dojoType="dijit.form.Button" onClick="verifyLogin()">Login</button>
</div>
</div>
<div class="loginRow">
<div class="loginCellEmpty">
</div>
</div>
</div> <!-- End loginTable -->
<label class="loginMsgLabel" id="msgId"></label>
</div> <!-- End loginForm -->
</div>
</body>
</html>
Thanks
Loc
Generally, the error dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox' means there is an issue with the dependency. Can you check your login.js to make sure that you are referring to the TexBox correctly and also try to move that import statement up the order and see what happens?
The javascript "login.js" is the optmized script which is generated by the
build script of Dojo when it compile along with the profile above. I have
tried to re-order the TextBox but there isno luck. I think this could be
related to the configuration of Dojo profile.
Thanks,
Loc
I found out the issue. With the new dojo syntax, it's using the foward-slash in
data-dojo-type to specify the module ("dijit/form/TextBox"). My code is still
using the old syntax ("'dijit.form.TextBox"). As looking in the optimized login script, the module TextBox is defined as below
'dijit/form/TextBox':function(){
That's why I got the error message "Unable to resolve constructor for: 'dijit.form.TextBox'"
Loc
Related
So hello. I've been working on my own stuff as I believe it is the best way to learn things. So I got stuck, I am quite new to this react thing. I got this code, as you can see I have few checkboxes there, and what I want to achieve is to check the box to filter (hide) products from the array. I kinda got to the point where I don't know what should I do next, I know I need to put something into constructor, but I can't really figure out what. Can you please help me with that? Thanks!
class Shop extends React.Component {
constructor(props) {
super(props);
this.state = {
//I should put something here?
}
}
render(){
let checkbox = (a) => {
this.setState({cpu: a.target.checked});
}
return (<div>
<input type="checkbox" onChange={checkbox} name="cpu" id="cpu"></input>
//I will do these later, so far I'd be happy to get cpu filter to work.
<input type="checkbox" name="gpu" id="gpu"></input>
<input type="checkbox" name="psu" id="psu"></input>
<input type="checkbox" name="mb" id="mb"></input>
<input type="checkbox" name="ram" id="ram"></input>
<input type="checkbox" name="case" id="case"></input>
{products.filter(product =>{
if (true) {
return true;
}
}).map((shop) =>
<>
<div id="prodinfo">
<p id="pname">{shop.name}</p>
<p id="pprice">{shop.price}</p>
<img src={shop.image} id="pimg" alt=""></img>
</div>
</>)} </div>);
}
}
ReactDOM.render(
<Shop/>,
document.getElementById('maincontent')
);
.group:after {
content: "";
display: table;
clear: both;
}
/* HEADER */
header {
background-color: rgb(57,184,231);
height: 9em;
border-bottom: 2px solid blue;
}
.mainheader {
margin: 0 auto;
width: 70em;
}
.socialnetworks {
display: flex;
justify-content: flex-end;
margin: -7px 0 0 0;
width: 100%;
background-color: rgb(0,170,203);
height: 20px;
}
.socialnetworks i {
padding-right: 20px;
color: white;
font-size: 20px;
}
.socialnetworks i:first-child:hover {
color: rgb(66, 103, 178);
cursor: pointer;
}
.socialnetworks i:last-child:hover {
color: red;
cursor: pointer;
}
.socicons {
padding-right: 410px;
}
.socialnetworks i:last-child {
padding: 0;
}
.logo {
position: relative;
top:0;
left:0;
max-width: 18%;
font-size: 60px;
color: white;
}
.logo span {
font-weight: bolder;
}
.menu {
text-align: center;
}
.menu span {
margin-right: 15px;
padding: 10px 10px 10px 10px;
font-size: 25px;
font-weight: bolder;
}
.menu span:hover {
border-radius: 5px;
background-color: rgb(33, 97, 194);
cursor: pointer;
}
.menu a {
text-decoration: none;
color: whitesmoke;
}
.menu a:last-child {
padding: 0;
}
.basket {
position: absolute;
top: 65px;
right: 60px;
}
.basket span:hover {
background-color: rgb(0, 140, 255);
cursor: pointer;
}
.basket span {
padding: 5px 5px 5px 5px;
border: 1px solid grey;
border-radius: 5px;
background-color: rgb(0, 41, 128);
color: whitesmoke;
}
/* MAIN_CONTENT */
#maincontent {
padding-top: 10em;
width: 1251px;
margin: 0 auto;
}
#prodinfo {
display: inline-block;
width: 400px;
height: 300px;
border: 1px solid black;
border-radius: 5px;
margin: 0 15px 15px 0;
}
#pname {
text-align: center;
font-size: 30px;
font-weight: bolder;
}
#pprice {
position: relative;
top: 165px;
left: 60px;
font-size: 20px;
}
#pimg {
position: relative;
bottom: 40px;
left: 110px;
height: 160px;
width: 200px;
}
#pprice::after {
content: "€";
}
#prodfilters {
text-align: center;
}
<!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">
<script src="https://kit.fontawesome.com/a2faab1b70.js" crossorigin="anonymous"></script>
<script src="database.js"></script>
<script src="functions.js" type="text/babel"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>PCzone</title>
</head>
<body>
<header>
<div class="socialnetworks">
<div class="socicons">
<i class="fab fa-facebook-square"> Facebook</i>
<i class="fab fa-youtube"> Youtube</i>
</div>
</div>
<div class="mainheader">
<div class="logo">
<span>PC</span>zone
</div>
<div class="menu">
<span>Domov</span>
<span>Zľavené produkty</span>
<span>O nás</span>
</div>
<div class="basket">
<span><i class="fas fa-shopping-basket">Nákupný košík</i></span>
</div>
</div>
</header>
<div id="prodfilters">
<p>Filter produktov</p>
</div>
<div id="maincontent">
</body>
</html>
class Shop extends React.Component {
constructor(props) {
super(props);
this.state = {
cpu: false,
gpu: false,
psu: false,
mb: false,
ram: false,
case: false,
}
}
render(){
let checkbox = (a) => {
this.setState({ [a.target.name]: a.target.checked });
}
return <div>
{products.map(product=> {
return <input
type="checkbox"
onChange={checkbox}
name={product.type}
id={product.type}
/>
})}
{products.filter(product => {
return this.state[product.type];
}).map((shop) =>
<div id="prodinfo">
<p id="pname">{shop.name}</p>
<p id="pprice">{shop.price}</p>
<img src={shop.image} id="pimg" alt="" />
</div>)}
</div>;
Okay, so.. First of all, you need to set initial state to be able to trigger re-renders in you components (this what #alexsc _'s answer was about).
Second of all, if you're trying to filter on an array of objects, you must have a field that you can use for that (note that I added a type variable that would contain the type of cpu or gpu, etc.. for each product). The React way to render multiple elements with similar values are usually done with mapping the related array (notice the mapping of products that returns an input element).
Following this logic, the third modification I made on your code was the filtering of products. This might not make any sense whatsoever, but when you click on an input element, it will trigger a re-render, due to the modification of a state member. This is why you need to have initial state and this is why I put the line, this.state[product.type] in the filter. With this, React will detect a change in state and will attempt to re-render your component, which calls the filter method again with updated values.
To make it more clear, let's say you filter by cpu. You'll click on the input which says cpu. This will set the cpu state variable to true. React detects that the state has changed so it attempts a re-render. Then it'll call the filter method on your products array again and this.state[product.type] will eventually be this.state['cpu'] which will evaluate to true.
NOTE: If you're unfamiliar with any of the used syntax, you should checkout the docs
In
this.state = {
//I should put something here?
}
You should put the initial value of cpu, in this case i think you want to filter the products when the user checks the checkbox, so the initial value of the state variable is gonna be false, like this:
this.state = {
cpu:false
}
So when the value of cpu is true you should filter all the products that are an cpu.
I need to understand how to connect peers in gun db. I have a socket.io server deployed on heroku but I don't know if it will work with gun. Can anyone with experience with gun db help me with this? I've readed the documentations but it's not clear how the peers are connected and there isn't a clear code example on the documentation.
I've tested the chat example, but it will not work on my localhost server, I will not be able to deploy it on my shared hosting because sockets are not permitted. Also on localhost messages are not delivered between two different browser windows.
UPDATE :
Here is the code with the suggested lib/webrtc added. Still not working.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Converse</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../style.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>
.chat__heading {
position: fixed;
text-align: center;
z-index: 1;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
.chat__form-container {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 20px;
position: fixed;
z-index: 1;
bottom: 0;
}
.chat__form {
display: flex;
justify-content: center;
height: 50px;
background-color: white;
border: 2px solid white;
max-width: 900px;
width: 100%;
border-radius: 5px;
}
.chat__name-input {
flex: 1;
padding: 10px;
}
.chat__message-input {
flex: 5;
padding: 10px;
}
.chat__submit {
padding: 10px;
color: white;
border-radius: 5px;
}
.chat__submit:hover::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit:focus::after {
background-color: rgba(0,0,0,0.2);
}
.chat__submit::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 5px;
transition: background-color 0.3s;
background-color: rgba(0,0,0,0);
}
.chat__message-list {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
overflow-y: auto;
padding: 60px 20px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
min-height: 100vh;
}
.chat__message {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
width: 100%;
position: relative;
max-width: 900px;
}
.chat__name {
margin-right: 20px;
}
.chat__when {
position: absolute;
top: 0;
right: 2em;
padding: 10px;
background: rgba(100%, 100%, 100%, 0.9);
opacity: 0;
border-radius: 5px;
}
.chat__message:hover .chat__when {
opacity: 1;
right: 0em;
}
#media (max-width: 567px) {
.chat__heading {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="chat hue2 page">
<h2 id='title' class="chat__heading hue2 whitet">Have a Conversation...</h2>
<ul class="chat__message-list">
<li class="none"></li>
</ul>
<div class="chat__form-container hue2">
<form class="chat__form">
<label for="name-input" class="visually-hidden">Name</label>
<input id="name-input" class="chat__name-input" placeholder="Name"></input>
<label for="message-input" class="visually-hidden">Message</label>
<input id="message-input" class="chat__message-input" placeholder="Write a message..."></input>
<button class="chat__submit say hue2">say</button>
</form>
</div>
<div class="model">
<li class="chat__message white huet2 box">
<b class="chat__name"></b>
<p class="chat__message-text"></p>
<span class="sort none">0</span>
<div class="chat__when"></div>
</li>
</div>
</div>
<script src="../jquery.js"></script>
<script src="../../gun.js"></script>
<script src="../../nts.js"></script>
<script src="../../lib/webrtc.js"></script>
<script>
var gun = Gun(document.location.host + ':443/gun');
var chat = gun.get('converse/' + location.hash.slice(1));
console.log(chat);
console.log(gun);
console.log(location.hash.slice(1));
$(".chat__submit").on('click', submit);
$(".chat_form").on('keydown', enter);
function enter(e) {
if (e.which !== 13) { return }
submit(e);
}
function submit(e) {
e.preventDefault();
var msg = { when: Gun.time.is() };
msg.who = $('.chat__name-input').val();
if (!msg.who) {
msg.who = 'user' + Gun.text.random(3);
$('.chat__name-input').val(msg.who);
}
msg.what = $('.chat__message-input').val();
if (!msg.what) { return }
chat.set(msg);
$('.chat__message-input').val('').focus();
}
chat.map().val(function (msg, id) {
if (!msg) { return }
var messageList = $('.chat__message-list');
var last = sort(msg.when, messageList.children('li').last());
var li = $("#msg-" + id)[0]; // grab if exists
if (!li) {
li = $('.model li').clone(true) // else create it
.attr('id', 'msg-' + id)
.insertAfter(last);
}
// bind the message data into the UI
li = $(li);
li.find('.chat__name').text(msg.who);
li.find('.chat__message-text').text(msg.what);
li.find('.sort').text(msg.when);
var time = new Date(msg.when);
li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
$('html, body').stop(true, true)
.animate({ scrollTop: messageList.height() });
});
function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
</script>
</body>
</html>
wow #mauro-stepanoski 's comment is so good (it should be the answer)! #jihuuNI when the lib/webrtc adapter is added like in the Todo-Dapp tutorial, it attempts to automatically connect all browsers with all other browsers - in the future, AXE will automatically cut off unnecessary connections. Do note, browser's WebRTC feature is not very reliable, so you still want to also have super peer connections.
Is there any reason as to why I cannot get the Upload button to display the name of the file(s) uploaded despite copying exactly the tutorial on YouTube - see link below?
In the tutorial e is used for the eventListener function in JS, but Adobe Dreamweaver is having none of it, so I used addEventListener
Thanks in advance for any insight. :)
https://www.youtube.com/watch?v=JML3BZo_ToA&list=PLQ0Y5YcHFmjVCFO7t1_72VU2FiXo5XaEI&index=1
$(document).ready(function(){
"use strict";
$("#uploadBtn").on("change", function(){
var files = $(this)[0].files;
if(files.length >= 2){
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = addEventListener.target.value.split('\\').pop();
$("#label_span").text(filename);
}
});
});
.uploadFile{
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn{
display: none;
width: auto;
}
.uploadButtonLabel{
font-size:18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before{
font-family: fontAwesome;
content: "\f093";
margin-right: 10px;
}
.uploadButtonLabel:hover{
cursor: pointer;
}
<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple = "true" />
</div>
<script src="bookCastingJS.js"></script>
You can just use your files variable instead.
$(document).ready(function() {
"use strict";
$("#uploadBtn").on("change", function() {
var files = $(this)[0].files;
if (!files) return;
if (files.length > 1) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = files[0].name;
$("#label_span").text(filename);
}
});
});
.uploadFile {
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn {
display: none;
width: auto;
}
.uploadButtonLabel {
font-size: 18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before {
font-family: fontAwesome;
content: "\f093";
margin-right: 10px;
}
.uploadButtonLabel:hover {
cursor: pointer;
}
<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple="true" />
</div>
<script src="bookCastingJS.js"></script>
Good morning world! I've got another problem with my project, this time the JavaScript isn't working, I want the picture to change when I'm holding my mouse pointer over it, thanks for your patience!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<title>Konst UF</title>
<meta charset="utf-8" />
<script type="text/javascript" language="javascript">
if (screen.width <= 699) {
document.location = "mobile.html";
}
document.getElementById("Orderbutton").onclick = function () {
location.href = "http://www.youtube.com/";
};
function billFunction() {
var Bill = getElementById("BillGate");
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
</script>
<body>
<p class="madeby">Made by Albin Karlsson and Oliver Jansson</p>
<center>
<ul>
<li>
<p class="Home">Home</p>
</li>
<li>
<p class="Products">Products</p>
</li>
<li>
<p class="About">About Us</p>
</li>
</ul>
</center>
<center><p class="para1">Konst UF</p></center>
<center>
<img
id="BillGate"
src="bill-gates.jpg"
alt="Bill Gates"
class="Billgates"
onmouseover="billFunction()"
/>
</center>
<marquee><h2>Bill GATES</h2></marquee>
<div></div>
<div class="sidepanels1">
<center>
<img class="Konstbild" src="Konst_uf_1.jpg" alt="Konst" />
</center>
<h2>Unknown</h2>
<p>I have no idea haha</p>
</div>
<div class="sidepanels2">
<center>
<img class="Konstbild" src="mikrofiberduk-konst.jpg" alt="Monalisa" />
</center>
<center><h2>Mona Lisa</h2></center>
<center>
<p>Mona Lisa is a painting which was painted by Leonardo Da Vinci</p>
</center>
</div>
<center>
<button
id="Orderbutton"
type="button"
onclick="location.href = 'http://www.youtube.com/';"
>
Order Our Products
</button>
</center>
</body>
</head>
</html>
That was the html code and I hope you could find the problem, if you need the css I got it too:
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
font-size: 30px;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
margin-top: 40px;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
margin-top: 40px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
div.2nd {
background-color: black;
color: white;
}
img.asus-logo {
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 40px;
}
img.Konstbild {
margin-top: 20px;
width: 300px;
height: 300px;
border: 3px solid green;
margin-right: auto;
margin-left: auto;
}
ul {
list-style-type: none;
}
p.madeby {
position: fixed;
}
Thank you !
Lets take a look at your billFunction, as there are a few problems with this function.
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
First of all, getting the element of your desire requires you to use document.getElementById, rather than just getElementById. Changing that should give you the correct element.
Next, you are setting img.src, but variable img is never defined. I assume this should be Bill.src instead. (Side note, I want to advise you to use lowerCamelCase variable names)
Last, your logic for checking which image to use looks wrong. Bill (capital B) can never be in bill-gates. Changing this logic using all lowercase should work.
You will get something along the lines of:
function billFunction() {
var bill = document.getElementById('BillGate');
if (bill.src.match("bill")) {
bill.src = "bill-gates.jpg";
} else {
bill.src = "Card.jpg";
}
}
In your JavaScript change this
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
And in your HTML
<img id="BillGate" src="screenshot_tweet.png" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)"/>
Also you should comment the onclick code before, it's causing you problems.
A better solution would be to do this only with CSS. It's much easier.
#bill {
background-image: url("bill-gates.jpg");
}
#bill:hover {
background-image: url("Card.jpg");
}
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
Corrected One:
$("img").hover(function(){
$(this).attr("src","bill.jpg");
},function(){
$(this).attr("src","card.jpg")
});
I love how http://www.squarespace.com/templates/?q=minsk does their signup process -- When you click on "start with this template", the entirety of the viewport is taken over, and the signup box shows up.
Does anyone know of a script that already does something similar to this?
You can do it very easily with simple javascript.
HTML:
<div id="trigger">Click to open</div>
<div id="overlay"></div>
<div id="login">
<h1>title</h1>
<form action="/login" method="POST">
<label>Username:
<input type="email" name="username" />
</label>
<label>Password:
<input type="password" name="pass" />
</label>
<button>Login</button>
</form>
</div>
CSS:
#overlay, #login {
display: none;
}
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: black;
opacity: 0.7;
filter:alpha(Opacity=70);
z-index: 999;
}
/* Change styles as you like beyond here, make sure the z-index of #login be always higher than #overlay */
#login {
position:fixed;
top: 5%;
left: 35%;
width: 30%;
height: 50%;
background: #555;
padding: 5px;
color:white;
z-index: 1000;
}
#login h1 {
margin: 0.5em 0;
}
#login form input {
width: 90%;
padding: 5px;
}
#trigger {
width: 100px;
padding: 5px;
background: #ccc;
}
Javascript (jQuery):
$(function(){
$('#trigger').click(function(){
$('#login').fadeIn(500);
$('#overlay').fadeIn(500);
});
$('#overlay').click(function(){
$('#login').fadeOut(500);
$('#overlay').fadeOut(500);
});
});
You can click the overlay to quit the window.
See the example!
This is called Modal Window. You can achieve it using jQuery or JavaScript. For a simple start, you can check out the tutorial given by Queness's Simple jQuery Modal Window Tutorial.
The code is very simple. First you have to build your HTML.
<!-- #dialog is the id of a DIV defined in the code below -->
Simple Modal Window
<div id="boxes">
<!-- #customize your modal window here -->
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<!-- close button is defined as close class -->
Close it
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
</div>
Some CSS for the presentational look and feel.
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
width:375px;
height:203px;
}
And finally, JavaScript for the interactions.
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
You can see a working demo of this project hosted at Simple jQuery Modal Window Examples from Queness WebBlog. Click on the Simple Window Modal link on that page.
Came across this while searching for a similar situation I have. I have a piece of custom javascript code that I'm using with my SS6 site. You'll have to forgive me, as I am a designer & not a developer.
Site in question:
http://tentenbtc.com
Currently, after a user clicks "Count Me In" a popup window appears that allows said user to signup. Everything works fine and all, but the popup is just a .png with some input fields & a submit button--not very elegant, and not responsive. I would like to replace the popup window with a modal that dims the background, and this thread looks like the right place to start solving my approach. Btw, the code is inline and formatted to fit into a SS codeblock.
Code for the javascript widget:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.0.19.min.js"></script>
<style>
.bgimg {
background-image: url("/s/bluebk.jpg");
}
#overlay_form{
position:relative;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border: 0px solid black;
width: 640px;
height: 340px;
background-image: url("https://static.squarespace.com/static/532ccd30e4b00d0eac2a448c/t/533acaffe4b0cd1c8b92271c/1396361983567/tenfortenpopup.png");
background-repeat:no-repeat;
background-size: 100% 100%;
overflow:Hidden;
margin:0px auto;
margin-top: -344px !important;
}
.slemail{
border:0px solid white;
font-size: 22px !important;
width: 310px;
height: 40px;
font-family: "Futura-pt";
color:#ababab;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
position: absolute;
left: 34px;
bottom: 20px;
-webkit-appearance : none;
padding-left:5px;
}
.countertext{
font-family: "futura-pt";
text-transform: uppercase;
letter-spacing: 4px;
color:white;
font-size: 52.55px;
font-weight: 700;
font-style: normal;
line-height: 1;
text-align: center;
margin: 0px, auto;
margin-top: 24px;
}
.counternumber {
font-family: "futura-pt";
text-transform: uppercase;
letter-spacing: 0px;
color:white;
font-size: 100.55px;
padding:3px;
display: inline-block;
line-height: 100%;
font-weight: 700;
font-style: normal;
background: none !important;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
}
.hitme {
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 4px;
border: solid 1px Black;
display:inline-block;
width: 70%;
line-height: 1.482;
text-align: center;
font-family: "futura-pt";
font-size: 38.28px;
font-weight: 400;
font-style: normal;
background-color:#343e3d;
color:white;
letter-spacing:2px;
text-transform: uppercase;
margin: 0px, auto;
margin-top: 13px;
}
.hitmesmall:active { right: 38px }
.hitmesmall {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display:inline-block;
width: 200px;
padding:2px 10px;
font-family: "futura-pt";
font-size: 22px;
background-color:#666666;
color:white;
letter-spacing:1px;
height:41px;
position: absolute;
right: 40px;
bottom: 20px;
border: solid 0px #343e3d;
}
input:focus{
outline:none;
}
.exitpopup
{
position: absolute;
right: 5px;
top: 4px;
}
</style>
<script TYPE="text/javascript">
//mailchimp javascript block
////////////////////////////
//Ten for Ten
var arr = {
apikey: "3865eadb82f9d9951067ff814b6fe34a-us4",
id: "9f12ac9801",
double_optin:"false",
email:{
email: "replacewithemail"
}
}
var url = "https://us4.api.mailchimp.com/2.0/lists/subscribe.json";
function mailchimp_addemail($email)
{
arr.email.email = $email;
$.ajax({
type: "GET",
url: url,
contentType: "application/json",
async: false,
cache: false,
dataType: "jsonp",
data: arr,
complete: function(jqXHR, textStatus){
// alert("Mailchimp added");
}
})
return false;
}
// end mailchimp javascript block
</script>
<script TYPE="text/javascript">
//popup javascript block
////////////////////////
function validateEmail($email)
{
var re = /\S+#\S+\.\S+/;
return re.test($email);
}
function openpopup()
{
$("#overlay_form").fadeIn(10);
$('#subscriberemail').focus();
$('#subscriberemail').val("your#email.com");
just_count();
return false;
}
function closepopup()
{
$("#overlay_form").fadeOut(10);
return false;
}
function subscribe()
{
var $email = $('#subscriberemail').val();
var $checkme = $email.toLowerCase();
if ( validateEmail($checkme) == false)
{
$('#subscriberemail').val("your#email.com");
$('#subscriberemail').focus();
return false;
}
if ( $checkme == "your#email.com" )
{
$('#subscriberemail').val("your#email.com");
$('#subscriberemail').focus();
return false;
}
// kick off the parse.com stuff
// the mailchimp call gets made on success
parse_add($email);
return false;
}
//end popup javascript block
</script>
<script TYPE="text/javascript">
//generic javascript block
// parse.com Appid and jskey
////////////////////////
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
//Ten For Ten
var parseappid = "I8bjfDP5GK8UKA509BFUQAsTRmHHgocl1ppSAwDO";
var parsejskey = "JxvgeMDJQuHCwinZjq8TBEJmx1KUd3EwtcOmSr3e";
var subscriber;
var sequence;
$( document ).ready(function() {
Parse.initialize(parseappid, parsejskey);
subscriber = Parse.Object.extend("subscriber");
sequence = Parse.Object.extend("sequence");
// lets init the subscriber count
parse_initcount();
});
</script>
<script TYPE="text/javascript">
//parse.com javascript block
////////////////////////////
function parse_addemail($email)
{
var addsubscriber = new subscriber();
addsubscriber.set("email", $email);
addsubscriber.save(null, {
success: function(object) {
parse_incrementcount();
mailchimp_addemail($email);
},
error: function(error) {
alert("parse_addemail :" + error);
}
});
};
function just_count()
{
var query = new Parse.Query(sequence);
query.get("FJ2FWGWED6", {
success: function(object)
{
object.increment("counter");
object.save();
var s = object.get("counter");
var display = numberWithCommas(s);
$("#curcount").html(display);
},
error: function(error)
{
alert("parse_incrementcount :" + error);
}
});
};
function parse_incrementcount()
{
var query = new Parse.Query(sequence);
query.get("FJ2FWGWED6", {
success: function(object)
{
},
error: function(error)
{
alert("parse_incrementcount :" + error);
}
});
};
function parse_initcount()
{
var query = new Parse.Query(sequence);
query.get("FJ2FWGWED6", {
success: function(object)
{
var s = object.get("counter");
var display = numberWithCommas(s);
$("#curcount").html(display);
},
error: function(error)
{
alert("parse_initcount: " + error);
}
});
};
// this is called on from hitmesmall submit onclick
///////////////////////////////////////////////////
function parse_add($email)
{
var query = new Parse.Query(subscriber);
query.equalTo("email", $email);
query.find({
success: function(object) {
if ( object.length == 0 )
{
parse_addemail($email);
$('#subscriberemail').val("Congrats! Thanks for Pledging!");
} else {
$('#subscriberemail').val("Email already Subscribed !");
$('#subscriberemail').focus();
}
}, error: function(error) {
alert("parse_add: " + error);
}
});
};
//end parse.com javascript block
</script>
</head>
<body>
<div class="bgimg" align=center>
<br>
<span class="counternumber" id="curcount">0</span>
<br>
<span class="countertext" id="pledged">PEOPLE HAVE PLEDGED! </span>
<br>
<button class="hitme" id="subscribe" onclick="return openpopup() ">COUNT ME IN!</button>
<br>
<br>
<br>
</div>
<!-- popup form -->
<div id="overlay_form" style="display:none">
<input id="subscriberemail" class="slemail" type="text" value="your#email.com"/>
<button id="addemail" class="hitmesmall" onclick="return subscribe()" >SUBMIT</button>
<button id="exitpopup" class="exitpopup" onclick="return closepopup()">X</button>
</div>
</body>
</html>