I am trying to use button from bootstrap material design from below link:
http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html
I downloaded the dropdown button and all needed CSS and JavaScript from the above link. When I am trying to test a sample dropdown button it is not drawn properly. Below is the sample html code and output.
I am not able to find out what I am missing. I tried to find the answers from net but didn't find any! So I am posting it here.
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<link href="css/roboto.min.css" rel="stylesheet">
<link href="css/material.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
</head>
<body>
<h3>Why this dropdown icon height is half of button????</h3>
<div class="btn-group">
Primary
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
</body>
</html>
Setting the doctype to HTML5 did the trick for me -- add <!doctype html> to the top of your document.
I don't know why, but it's the FIRST thing I thought of.
Related
I am working on an application in Electron, on this page I have put a button however the script does not run when clicked. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far")
}
</script>
</div>
</body>
Add some cdn for .js to work with javascript library functions as i see theres no library imported to work with javascript like
<script src="your_js/cdn"....></script>
Console.log will display text in a terminal window. If you are trying to display something in a browser you have to change the DOM.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<div id="message"></div>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far");
document.getElementById("message").appendChild(document.createTextNode("You see me now"));
}
</script>
</div>
</body>
Simplest way is to create an empty "div" with id of your choosing. Then in javascript use the document object "document" and it's functions like ".write" or ".appendChild" to change the DOM.
You should be able to run the above code in the stack overflow sandbox and see that the output to terminal (console.log) is different than the browser rendered DOM (getElementById("message").appendChild)
your Code should output something in the Browserconsole.
You can open the Developertools afaik with Ctrl+Alt+i.
To output / connect with the Mainapplication you should use IPC.
See: https://electronjs.org/docs/api/ipc-main
Greets
I have a dropdown in my menu for a site I'm creating with bootstrap and the dropdown doesn't seem to work. I am using Bootstrap 2.3.2 Below is the code for my dropdown:
<li class="dropdown">
Art
<ul class="dropdown-menu" role="menu">
<li>Upload Art</li>
<li>Search For Art</li>
</ul>
</li>
And after doing a little bit of research, I've read that the order of the .js, .css, and jQuery links might have an affect. This is the current order I have them in, perhaps this order is what is causing the problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet">
<link href="Styles/css/NewStrap.css" rel="Stylesheet" />
<script src="Styles/js/bootstrap.min.js"></script>
1st, load css first, put your css in <head></head> tag
2nd, load js before the </body>
example:
<!-- load all css first -->
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<li class="dropdown">
Art
<ul class="dropdown-menu" role="menu">
<li>Upload Art</li>
<li>Search For Art</li>
</ul>
</li>
<!-- put all js before </body> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Okay I found out what was wrong. Bootstrap 2.3.2 is not compatible with JQuery 3.0 and higher. Using JQuery 1.9 fixed the issues.
I'm having an issue with getting the icons to display while using MaterializeCSS. I'm using the bare bones "Getting Started" from the documentation but for whatever reason icons refuse to show up. Below is the code I'm using
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<ul class="hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">First Sidebar Link</li>
<li class="bold">Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
<!--Import jQuery before materialize.js-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
$('.collapsible').collapsible();
</script>
</body>
</html>
All this code is trying to do is display a navbar, it was pulled directly from the documentation.
The hamburger menu doesn't appear when the browser is resized
The dropdown arrow doesn't appear beside the dropdown menu item.
I feel like it's something stupid that I'm missing but I've been looking at it for 2 hours and my brain is melted. Any help would be appreciated.
EDIT: Here's the updated code for the dropdown arrow too:
<i class="material-icons right">arrow_drop_down</i>
I ran into this issue too and wondered where my hamburger icon went!
Unfortunately, a lot of their documentation hasn't been refreshed, so the code you are using is a bit outdated.
Change this:
<i class="mdi-navigation-menu"></i>
to this:
<i class="material-icons">menu</i>
and you should see the icon. If you check their source code, you'll see that even their site uses the updated code that's different from their docs:
CHANGE HTTP TO HTTPS in linking font library. It worked for me.
I have a website I'm creating, still in it's beginning stages. I have it hosted locally, but when I click the links, it says the files cannot be found even though they do in fact exist. Also, the styling won't apply. My index.html is below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>Sports</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/TeamsCtrl.js"></script>>
<script src="js/services/TeamsService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container">
<!-- HEADER -->
<nav class="container-fluid navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="HeaderController">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa fa-home fa-lg"></i>Sports</a>
</div>
<ul class="nav navbar navbar-nav">
<li ng-class="{ active: isActive('/teams') }">Teams</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> Log In</li>
</ul>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
</body>
</html>
The part I do not understand is that this runs fine on my work computer. I zipped it up, sent it to myself at home, and it doesn't run correctly. When I click the Teams link, it takes me here: file:///C:/teams, which isn't correct. I have no idea where to even start looking, as this is my first web project. Any help would be greatly appreciated as to where I should start/what the issue could be. Thank you ahead of time.
use ~ symbol infront of all your links. For example use ~/teams instead of /teams.
~ symbol will take you current folder where the files are located.
I wasn't running a localhost web server on my machine. Once I did, everything worked fine.
I have a problem with Twitter Bootstrap's class="nav."
When I include "data-toggle='tab'", none of my menu items function.
(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Google</li>
<li>Bing</li>
<li>Bing2</li>
<li class="dropdown">
More choices <b class="caret"></b>
<ul class="dropdown-menu">
<li>Yahoo</li>
<li>CNN</li>
<li>Weather</li> <!-- NOTE data-toggle removed -->
</ul>
</li>
</ul>
</body>
</html>
Here is a working example: http://jsbin.com/ujujub/1/edit
Three things:
Remember to include bootstrap-tab.js
Write a script responsible for handling navigation from tab to tab
The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.