I was following Devslopes tutorial on making the navbar responsive and i reached a point where i got stuck. in his video, after writing the javascript code and mediaquery css his navbar is showing but mine is not and i did exactly the same.
tutorial video link
html code:
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="topnav-right">Sign-Up</li>
<li class="topnav-right">Sign-In</li>
<li class="dropdownIcon">☰</li>
</ul>
</nav>
<script>
function dropdownMenu(){
var x = document.getElementById(dropdownClick);
if(x.className === "topnav"){
x.className += " responsive";
// change topnav to topnav.responsive
} else{
x.className = "topnav";
}
}
</script>
</body>
</html>
Css Code:
/* ***** defaults ******** */
nav,
header,
footer{
display: block;
}
body{
line-height: 1;
margin: 0;
padding: 0;
}
/* ****** Navbar ***********/
nav{
width: 100%;
margin: 0;
}
nav ul{
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.topnav li{
list-style: none;
float: left;
}
ul.topnav li.topnav-right{
float: right;
}
ul.topnav li a{
display: block;
text-decoration: none;
min-height: 16px;
text-align: center;
padding: 14px;
text-transform: uppercase;
color: #666;
}
ul.topnav li a:hover{
background-color: #0088ff;
color: #fff;
}
ul.topnav li.dropdownIcon{
display: none;
}
/* ************ mobile ******************** */
#media screen and (max-width: 680px){
ul.topnav li:not(:nth-child(1)){
display: none;
}
ul.topnav li.dropdownIcon{
display: block;
float: right;
}
ul.topnav.responsive{
position: relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display: block;
text-align: left;
}
}
Thank you.
In var x = document.getElementById(dropdownClick); the element ID (dropdownClick) is a string and should be in quotes like var x = document.getElementById('dropdownClick');
Related
This layout is breaking in Outlook only. I can't remember where I got the template from, so I can't give credit where it's due, but I believe it's one of Lee Munroe's templates. I can't figure out why it's breaking in Outlook 2013 and it's a simple one-column layout. I have a more complex one-column layout that I'm using with the same framework, and that one gives me no trouble at all. But when I tried to parse it down into a simpler layout, I cannot get it to play nicely with Outlook. Any ideas? Self-taught coder so I could be missing something simple. I know Outlook can't handle max-width, but this template was supposed to be Outlook ready.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Message from the CEO</title>
<style type="text/css">
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%; }
.img-block {
display: block; }
body {
font-family: open sans, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: open sans, sans-serif;
font-size: 14px;
vertical-align: top; }
body {
background-color: #F6F6F6;
Margin: 0;
padding: 0; }
.body {
background-color: #F6F6F6;
width: 100%; }
.container {
Margin: 0 auto !important;
max-width: 600px;
padding: 30px;
width: auto !important;
width: 600px; }
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 600px;
padding: 0px; }
.main {
background: #FFFFFF;
border-radius: 3px;
width: 100%; }
.wrapper {
box-sizing: border-box;
padding: 30px; }
.header {
background-color: #FFFFFF;
Margin-bottom: 0px;
Margin-top: 0px;
padding: 0px 0px 0px 0px;
width: 100%; }
.header > table {
min-width: 100%; }
h1,
h2,
h3,
h4 {
Margin: 0; }
h1 {
font-family: open sans, sans-serif;
font-size: 1.4em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 10px; }
h2 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #3C708F;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h3 {
font-family: open sans, sans-serif;
font-size: 1.2em;
font-weight: 700;
color: #7D1745;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
h4 {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: 700;
color: #454646;
text-align: left;
line-height: 1.4;
Margin-bottom: 15px; }
ul,
ol {
font-family: open sans, sans-serif;
font-size: 1em;
font-weight: normal;
color: #454646;
Margin: 0;
Margin-bottom: 20px; }
p li,
ul li,
ol li {
list-style-position: outside;
Margin-left: 15px;
padding: 0;
text-indent: 0; }
ul,
ol {
Margin-left: 5px;
padding: 0;
text-indent: 0; }
a:link {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:hover {
font-family: open sans, sans-serif;
color: #56A2CC;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:active {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
a:visited {
font-family: open sans, sans-serif;
color: #3C708F;
font-size: 1em;
font-weight: 700;
text-decoration: none; }
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0; }
#media only screen and (max-width: 600px) {
h1 {
font-size: 24px !important;
Margin-bottom: 10px !important; }
h2 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h3 {
font-size: 21px !important;
Margin-bottom: 10px !important; }
h4 {
font-size: 18px !important;
Margin-bottom: 10px !important; }
p,
ul,
ol,
td,
span,
a {
font-size: 16px !important; }
.wrapper {
padding: 10px !important; }
.content {
padding: 0 !important; }
.container {
padding: 0 !important;
width: 100% !important; }
.header {
Margin-bottom: 10px !important; }
.main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important; }
.img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important; } }
#media all {
.ExternalClass {
width: 100%; }
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%; }
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important; } }
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body class="">
<table border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<span class="preheader">Read the latest update from Johnson Financial Group.</span>
<table class="main" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp_600px.jpg" title="A Message from the CEO" alt="Header Image" width="600" class="img-responsive" border="0"></td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<h1>Headline</h1>
<p>Content here. Blah blah blah blah.</p>
<h2>Subheadline 1</h2>
<p>Content here. Blah blah blah blah.</p>
<h3>Subheadline 2</h3>
<p>Content here. Blah blah blah blah. <strong style="font-weight: 700;">Read More</strong></p>
<h4>Subheadline 3</h4>
<p>Content here. Blah blah blah blah.</p>
<p><img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/Jim_Popp.png" title="Jim Popp, CEO Johnson Financial Group" alt="Jim Popp" width="100" class="img-responsive" border="0" /></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="https://app.subscribermail.com/images/pp/56502968/2018_Images/JFG-HRZ-Web-200px.png" title="Johnson Financial Group" alt="JFG Logo" width="200" class="img-responsive" border="0" /><br />
<div> </div>
<strong style="font-weight: 700;">BANKING</strong>
<strong style="font-weight: 700;">WEALTH</strong>
<strong style="font-weight: 700;">INSURANCE</strong><br />
<div> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
</tr>
</table>
</body>
</html>
Your problems extend far beyond Outlook 2013. These problems are occurring in Outlook 2007-2016, Windows 10 Mail and Android devices.
The problem resides within the <style> sheet. If you comment out your style sheet, everything works fine when tested in Litmus.
The <style> sets the desktop <table> width to width: 100%;. But you don't want your tables at 100%, you wanted them at 600px.
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
/*width: 100%; <-- don't use this */
width: 600px;
}
Go through your <style> sheet and change width:100%; values to width: 600px;. This includes #media all, but you can skip #media only screen and (max-width: 600px) since those table values should be 100% width.
You need to figure out a way to make the controlling table 100% width and center the container tables in the parent table.
Other Issues
Your preview text is not working in Android. It's showing up and I think you want to hide it.
Open Sans will never work in Outlook or Gmail, since neither works with web fonts. You can use it for Apple, IOS, Android, AOL and other clients. I strongly suggest you use a link to a style sheet like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Add that to your <head>.
Use this instead in your style sheet for Open Sans as recommended by Google Fonts:
font-family: 'Open Sans', Arial, sans-serif;
You should set a default fallback font, which is currently set to sans-serif to ensure the right font is used. I suggest adding one more web safe font as a fallback for consistency, because Outlook has a bad habit of reverting to Times New Roman and you don't want a serif typeface.
Good luck.
Edit: I edited this answer because I did not make it clear you could skip editing values for this media query: #media only screen and (max-width: 600px).
I am trying to use meter tag to show battery power indicator. It works with hard coded value but does not work with $scope variable.Here is the jsfiddle
HTML
<div ng-app="app" ng-controller="main">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="2"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="value"></meter>
</p>
</div>
</div>
**JS*
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
$scope.value = 2
}])
You have to use {{value}} to reflect the scope value.
So use,
value="{{value}}"
instead of
in value="value"
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<style>
.styled meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 30px;
/* For Firefox */
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
/* WebKit */
.styled meter::-webkit-meter-bar {
background: #EEE;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value,
.styled meter::-webkit-meter-suboptimum-value,
.styled meter::-webkit-meter-even-less-good-value {
border-radius: 3px;
}
.styled meter::-webkit-meter-optimum-value {
background: #86CC00;
}
.styled meter::-webkit-meter-suboptimum-value {
background: #FFDB1A;
}
.styled meter::-webkit-meter-even-less-good-value {
background: #CC4600;
}
/* Firefox */
.styled meter::-moz-meter-bar {
border-radius: 3px;
}
.styled meter:-moz-meter-optimum::-moz-meter-bar {
background: #86CC00;
}
.styled meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: #FFDB1A;
}
.styled meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: #CC4600;
}
button {
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.75;
cursor: pointer;
}
button:active {
opacity: 1;
box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="page-wrapper">
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="4"></meter>
</p>
<p>
<meter min="0" max="4" low="1" high="3" optimum="4" value="{{value}}"></meter>
</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = 2
});
</script>
</body>
</html>
PLEASE RUN THE ABOVE SNIPPET
Here is a working DEMO
Some observations as per your fiddle :
You forgot to include AngularJS library in your fiddle.
To get the $scope value into the HTML . Use angular expression {{value}}
Change LOAD TYPE to No wrap - in <head> from onLoad in JAVASCRIPT section of the fiddle.
DEMO
As shown how do I enter my phone number through that keyboard.
I am trying but my method is overloading the previous button values.
So please can one help me how to do that...
I think we need to concatenate the buttons value. If I press button "1" the value in textfield should be "1", if I then press "2" the value in textfield should become "12".
everything works properly except these.
clear button it clears the textfield
angular.module('myApp', [])
.controller('MyCtrl', function($scope)
{
$scope.chandru = false;
$scope.noinput = "";
$scope.newNumber = true;
$scope.cleartext = function()
{
$scope.noinput = "";
};
$scope.hideshow = function(id)
{
$scope.chandru = true;
};
$scope.updateOutput = function(btn)
{
if($scope.noinput == "" || $scope.newNumber) {
$scope.noinput = btn;
$scope.newNumber = false;
} else {
$scope.noinput += String(btn);
}
};
});
.mainform {
background-color: #c0c0c0;
margin-right: 300px;
margin-bottom: 100px;
margin-top: 100px;
margin-left: 300px;
border-radius: 10px;
padding-left: 30px;
padding-bottom: 30px;
padding-top: 30px;
padding-right: 30px;
}
.Head {
color: #4169E1;
border-bottom: 2px solid #DC143C;
font-family: Righteous;
}
.inputprop {
border-radius: 5px;
border: 1px solid black;
height: 30px;
}
.classnumber {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 35px;
height: 30px;
font-size: 20px;
}
.classClear {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 70px;
height: 30px;
font-size: 20px;
}
.classOk {
border: 2px solid black;
border-radius: 5px;
padding-left: 10px;
margin-right: 5px;
width: 50px;
height: 30px;
font-size: 20px;
}
#buttondesign {
display: inline;
border: 2px solid black;
width: 40px;
height: 40px;
border-radius: 5px;
}
.clearbutton {
border: 2px solid black;
width: 60px;
height: 40px;
border-radius: 5px;
}
.okbutton {
border: 2px solid black;
width: 50px;
height: 40px;
border-radius: 5px;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title>My Task</title>
<link rel="stylesheet" type="text/css" href="styele.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="mainform">
<h1 class="Head"> SignUp</h1>
<div style="color: #4682b4; font-size: 20px;">
<center>
Enter mobile number:
<select class="inputprop">
<option value="IND(91)">IND(91)</option>
<option value="PAK(92)">PAK(92)</option>
<option value="SRL(93)">SRL(93)</option>
<option value="NUL(92)">NUL(92)</option>
</select>
<input class="inputprop"type="text" name="mobileno" value="{{noinput}}"
ng-model="noinput" placeholder="enter mobile number"/><br><br>
Press OK to send OTP
</center><br><br>
<center><div ng-init="num=['1','2', '3', '4', '5', '6', '7', '8', '9', '0']">
<div style="display: inline;"ng-repeat="item in num">
<button id="buttondesign" type="button" name="namebutton"
ng-click="updateOutput({{item}})">{{item}}</button>
</div>
<input class="clearbutton" type="button" value="Clear" ng-click="cleartext()"/>
<input class="okbutton"type="button" value="OK" ng-click="hideshow('second')"/>
</div>
</center>
</div>
</div>
</body>
</html>
you can put a ng-click="buttonPressed(number)" on each button.
<button ng-click="buttonPressed(1)>1</button>
<button ng-click="buttonPressed(2)>2</button>
<button ng-click="buttonPressed(3)>3</button>
...
So when you press a button it call this function.
Then in your controller you declare this function like this
var pressed = [];
$scope.buttonPressed = function(number){
pressed.push( number ) ;
console.log(pressed);
// to other stuff
}
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.
I am new to responsive web design and I am not sure why the ordered list and list is not responsive like the rest of the page.
#container {
text-align: center;
}
ol {
text-decoration: none;
font-family: helvetica;
width: 100%;
text-align: center;
margin-left: 500px;
text-decoration: none;
}
li {
text-decoration: none;
font-family: helvetica;
letter-spacing: 3px;
line-height: 25px;
color: green;
width: 100%;
padding-bottom: 10px;
font-size: 10px;
text-align: left;
}
<div id="container">
<h2>Step 1: Choose Your Drink</h2>
<ol>
<li>Chai Latte</li>
<li>Americano</li>
<li>Pumpkin Spice Latte</li>
<li>Vanilla Bean Frappuccino</li>
</ol>
<h2>Step 2: Join Us! and receive daily drink recipes.</h2>
</div>
any suggestions?
Thanks!
The ol{margin-left: 500px} is the culprit.
Try the following changes
ol{
font-family: helvetica;
text-decoration: none;
}
li{
text-decoration: none;
font-family: helvetica;
letter-spacing: 3px;
line-height: 25px;
color: green;
padding-bottom: 10px;
font-size: 10px;
list-style-position: inside;
}
I don't think this was exactly what you were looking for, but it should get you closer