All I've done is to include Angular in my chrome extension and right of the bat it gives me a ´Uncaught ReferenceError:minErr is not defined´. I've tried multiple versions of Angular but the issue persists.
This is all I've done:
<!DOCTYPE html>
<html>
<head>
<title>Typography</title>
<script type="text/javascript" src="bower_components/angular-latest/src/Angular.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/core.css">
<body ng-app="" ng-csp>
<h1>Typography</h1>
<div class="viewport">
<form>
<label for="baseline">Baseline</label>
<div class="row clear">
<input type="range" name="baselineRange" id="baselineRange" min="0" max="144" step="1" />
<input type="input" name="baseline" id="baseline"/>
</div>
<label for="offset">Baseline offset</label>
<input type="text" name="offset" id="offset" />
<button type="submit" id="send">Generate</button>
</form>
<p>Typography was created by Joel Sanden</p>
</div>
</body>
</html>
Related
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>
I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm in the process of learning angular. When I execute the code below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
</head>
<body >
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</body>
</html>
The code that renders shows {{qty * cost | currency}}. Is angular not loading into the browser (chrome) ? I've checked the version of angular and it appears to be ok. Thanks.
Most probably you angular js is not loaded properly.
Check this plunker with your code, this works.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity:
<input type="number" min="0" ng-model="qty">
</div>
<div>
Costs:
<input type="number" min="0" ng-model="cost">
</div>
<div>
<b>Total:</b> {{qty * cost | currency}}
</div>
</div>
</body>
</html>
when I clicked on time icon it shows nothing. I am using this code:
<div class="control-group">
<label class="control-label">Next Time</label>
<div class="controls">
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
</div>
and here is the script and CSS i m using:
<link type="text/css" href="assets/css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="assets/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
You have to put the id on your parent div :
<div class="control-group">
<label class="control-label">Next Time</label>
<div class="controls">
<div id="timepicker1" class="input-append bootstrap-timepicker">
<input type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
It works fine.
Have you include jquery and bootstrap scripts, css too?
I've bought and installed a custom template for Wordpress and it is randomly giving white/blank pages on all areas of the site excluding the admin cp when navigating around on IE7 (works fine on Chrome). I know it's the template as it works fine with standard templates, and I'm pretty sure it's a javascript as I've disabled all the plugins to see if it was those.
Here's the site: http://www.visualisebi.com
Looking at a page with minimal code that has the issue (Admin CP login area), the only major differences I can see that are different between the new template pages and a standard template are the amount of scripts the new template calls. Here's an example:
New template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery-1.6.1.min.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/modernizr-2.0.js?ver=2.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/superfish.js?ver=1.4.8'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.prettyPhoto.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/easyTooltip.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.easing.1.3.js?ver=1.3'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.loader.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/swfobject.js?ver=2.2'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/jquery.cycle.all.js?ver=2.99'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/audiojs/audio.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/themes/theme1334/js/custom.js?ver=1.0'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Standard template source:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Visualise Business Intelligence Services › Log In</title>
<link rel='stylesheet' id='wp-admin-css' href='http://www.visualisebi.com/wp-admin/css/wp-admin.css?ver=20111208' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='http://www.visualisebi.com/wp-admin/css/colors-fresh.css?ver=20111206' type='text/css' media='all' />
<script type='text/javascript' src='http://www.visualisebi.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<meta name='robots' content='noindex,nofollow' />
</head>
<body class="login">
<div id="login"><h1>Visualise Business Intelligence Services</h1>
<p class="message"> You are now logged out.<br />
</p>
<form name="loginform" id="loginform" action="http://www.visualisebi.com/wp-login.php" method="post">
<p>
<label for="user_login">Username<br />
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
</p>
<p>
<label for="user_pass">Password<br />
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
<input type="hidden" name="redirect_to" value="http://www.visualisebi.com/wp-admin/" />
<input type="hidden" name="testcookie" value="1" />
</p>
</form>
<p id="nav">
Lost your password?
</p>
<script type="text/javascript">
function wp_attempt_focus(){
setTimeout( function(){ try{
d = document.getElementById('user_login');
d.focus();
d.select();
} catch(e){}
}, 200);
}
if(typeof wpOnload=='function')wpOnload();
</script>
<p id="backtoblog">← Back to Visualise Business Intelligence Services</p>
</div>
<link rel='stylesheet' id='wp-pagenavi-css' href='http://www.visualisebi.com/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var wpBannerizeJavascriptLocalization = {"ajaxURL":"http:\/\/www.visualisebi.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.visualisebi.com/wp-content/plugins/wp-bannerize/js/wpBannerizeFrontend.min.js?ver=3.0.32'></script>
<div class="clear"></div>
</body>
</html>
Any help greatly appreciated.
Is the original theme properly working in IE7 ??
Have you checked the theme demo where you purchased the theme ? Is it working in IE7. If not you can ask the theme owner to fix the issue.
(Cannot comment yet and hence the answer.)