i am used card materialize in my page the page looks like this
cards
you can see my card content and description is in my image, i follow guide from materialize but it not work in my page
this is my code
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicons-->
<link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/mstile-144x144.png">
<link rel="icon" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/favicon-32x32.png" sizes="32x32">
<title>Home</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Materialize core CSS -->
<link href="<?php echo base_url(); ?>assets/home-user/materialize/css/materialize.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<link href="<?php echo base_url(); ?>assets/home-user/template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script src="<?php echo base_url(); ?>assets/home-user/assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/home-user/materialize/js/materialize.js"></
<script src="<?php echo base_url(); ?>assets/home-user/index.js"></script>
</body>
i dont know whats wrong with my code thanks
load materialize css and js files and also jquery file... here is a working snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
Related
I have multiple webpages that have the same header:
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-
1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-
3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-
1.2.5/datatables.min.css"/>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-
2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-
1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-
1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
Since these references change with time, I'd like to embed this code in 1 html page and then reference that page in the multiple webpages. That seems much easier than going in to 20 html files and updating manually, as needed.
I've scoured around and can't find what is probably an obvious answer. Is there a way to do this with an "include" statement?
Any help is much appreciated!!!!
First question, what framework/language you're using to develop your website?
What you're trying to do is actually creating web design template.
For example in html with php,
<html lang="en">
<!-- Top Bar -->
<?php require 'TopBar.php';?>
<!-- Main Navigation + LOGO Area -->
<?php require 'MainNavigation.php';?>
<!-- Banner -->
<header class="flat-header">
<!-- Banner Content-->
<div class="header-content">
<div class="header-content-inner">
<h1 class="homeHeading animated slideInDown">Singapore Dreams - Our Business.<span>
</span></h1>
<!--<h1 class="homeHeading animated slideInDown">Financial Consulting isn’t a thing we do. <span>-->
<!--It’s the thing that runs our business.</span></h1>-->
<div class="konnect-button-1 animated bounceIn">Read More</div>
</div>
</div>
</header>
<!--Top Call to Action-->
<?php require 'indexCallToAction.php';?>
<body>
//normal html file here
</body>
</html>
TopBar.php
<?php
/**
* Created by PhpStorm.
* User: Marcia
* Date: 23/5/2017
* Time: 10:03 PM
*/
include 'var.php';
echo'
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Marcia Ong">
<meta name="keywords" content="">
<!-- Favocon -->
<link href="img/sg-alliance-logo.png" rel="shortcut icon" type="image/x-icon"/>
<!-- Title -->
<title>SG </title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom icon Fonts -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Animated CSS -->
<link href="css/animate.css" media="all" rel="stylesheet" type="text/css" />
<!-- Main CSS -->
<link href="css/default.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Body -->
<body>
<!-- Pre Loader -->
<div class="loading">
<div class="loader"></div>
</div>
<div class="konnect-info">
<div class="container">
<div class="row">
<!-- Top bar Left -->
<div class="col-md-6 col-sm-8 hidden-xs">
<ul>
<li><i class="fa fa-paper-plane" aria-hidden="true"></i>';echo $EnquiryEmail;echo ' </li>
<li class="li-last"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i>'; echo"$contactNum"; echo '</li>
</ul>
</div>
<!-- Top bar Right -->
<div class="col-md-6 col-sm-4">
<ul class="konnect-float-right">
<li class="li-last">
<a target="_blank" href="https://twitter.com/Sg_Alliance1"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.facebook.com/SG-Alliance-133770687187613/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.instagram.com/sg.alliance/?hl=en"> <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
' //end of echo
?>
<!--<a target="_blank" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>-->
<!--<a target="_blank" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>-->
I'm working on a site and my goal is to make it responsive by reducing the background associated by when the site is reduced.
I want the grey area to reduce simultaneously when the site is reduced horizontally.
How can I achieve this?
Here is my code so far. I'm using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="#CurrentPage.siteDescription">
<title>#CurrentPage.pageTitle|Gymnasiestudera</title>
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/fanoe.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper col-md-12 col-lg-8 col-lg-offset-2">
<header>
<div class="row col-md-12">
<nav class="entry-links">
<ul>
<li class="">
För elever
</li>
<li>
För skolpersonal
</li>
<li>
Ungdom och elevdatabas
</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-xs-8 col-sm-12 col-md-4">
<a href="#home.Url">
<div class="brand" style="background-image:url('#(home.SiteLogo)?height=100&width=700&')"></div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 main-nav">
<nav id="cbp-hrmenu" class="meny cbp-hrmenu col-md-10 col-md-offset-1">
#{ Html.RenderPartial("MainNavigation"); }
</nav>
</div>
<br />
<br />
</div>
<div class="container-fluid">
<div class="container">
</div>
</div>
<div id="toggle" class="toggle">
<span></span>
</div>
</header>
#RenderBody()
<div class="foot-line-background">
<div class="foot"></div>
</div>
<footer class="field dark">
<div class="row">
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn2
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/scripts/fanoe.js"></script>
<script src="/scripts/Custom.js"></script>
</div>
</body>
</html>
If I'm understanding you correctly, you really just need to have a max-width on your "content container" to do the job. As the window width decreases, the gray area will also decrease until the container takes up the full window.
.my-container {
max-width: 800px;
}
http://jsfiddle.net/agentfitz/6s4u14yd/1/
Goody day guys, i am trying create a page using bootstrap and interactjs, yes, I've heard about jQueryUI's draggable and droppable, but it's conflicts with the main jQuery file, is a bit annoying so i turned to interactjs, and it actually did what i wanted it to do per se, the problem is that i can't drag an element across two columns(sidebar to main panel), what happens when i try is that the element goes "Underneath" the other column/panel.
The code that's responsible for moving the element
This is the HTML code, the element starts at the element with the angular repeat directive (div... ng-repeat=...)
<!DOCTYPE html>
<html lang="en" ng-app="Drag-on IDE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Integrated Learning Object Development Environment">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Drag-on IDE</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-controller="LEQueryController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<div class="nav navbar-nav navbar-right">
<li><button class="btn btn-default btn-info">Upload a Learning Element</button></li>
<li><button class="btn btn-default btn-success">Upload Material</button></li>
</div>
<form class="navbar-form navbar-left" ng-submit="controller.query()">
<input class="form-control" placeholder="Search Learning Element..." type="text" ng-model="searchText">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--SIDE BAR-->
<div class="sidebar col-sm-4 col-md-3">
<div class="list-group nav nav-sidebar" >
<a href="#" class="list-group-item draggable" ng-repeat="result in results">
<span class="badge">{{result.type}}</span>
<span class="badge">{{result.size}}</span>
<h4>
{{result.title}}
<br /><small>{{result.author}}</small>
<br /><small>{{result.publishingDate}}</small>
</h4>
</a>
</ul>
</div>
</div>
<!--SIDE BAR END-->
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<div class="container" id="lo-workspace">
<div class="draggable jumbotron text-center">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
******* ******* ***** *******
* * * * * * *
* * * * * * *
* * * * * * *
* ******* ***** *******
TO : Alfonso
Draggable mechanism is acting like a *,
complaining something like "$(...).draggable isn't a function because i'm having my period today".
-->
<script type="text/javascript" src="node_modules/jquery/dist/jquery-1.9.1.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/interact.js/interact.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="utilities.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="ie10-viewport-bug-workaround.js"></script>
</body></html>
What causes this problem? how do i fix it? thanks.
I'm trying to apply my own class to a div with bootstrap but it isnt working.
This is my header
<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8">
<h1 class="titulo-blog">CheeseBlog</h1>
<small>Un poquito sobre mí, es decir, nada interesante</small>
</div>
<div class="col-md-4 col-lg-4 pull-right hidden-xs hidden-sm redes">
<img src="img/twitter4.png" alt="">
<img src="img/googleplus4.png" alt="">
<img src="img/youtube4.png" alt="">
<img src="img/facebook4.png" alt="">
<img src="img/instagram4.png" alt="">
<img src="img/skype4.png" alt="">
</div>
</div>
</div>
</section>
and this is the class "redes" that i want to apply to my div
.redes{
margin-top:35px;}
and these are my imports
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=">
<title>CheeseBlog</title>
<!--Ficheros JS-->
<script src="js/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/miJavascript.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<!--Ficheros CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href='http://fonts.googleapis.com/css?family=Signika&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap-select.min.css">
<link rel="stylesheet" href="css/estilos.css">
<script>
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
I Hope someone can help me!
Thanks!
Im working on a simple project and i am new to this(as the title says).
So what i want to happend is: When you tap a link(ommig) i want the unit to vibrate a bit.
I tried to use Hammer.js lib but failed, I dont really mind using the html5 way, so im not all locked in to just be using hammer.js.
So when I click the #ommig ID/class i want the unit to vibrate.
Please help a newbie in distress (and thanks for all the answers)
HTML (i deleted all my bad js code):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start</title>
<link rel="shortcut icon" href="img/icon.jpg">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="hammer.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="index.html"> <div class="container">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/logo.png" alt="image">
</div>
<div class="item">
<img src="img/logo2.png" alt="image">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="ommig.html"> <div id="ommig"> <p>Om mig </p>
</div> </a>
<a href="cv.html"> <div id="cv"> <p> CV </p>
</div> </a>
<a href="portfolio.html"><div id="portfolio" >
<p> Portfolio </p>
</div></a>
<a href="kontakt.html"><div id="Kontakt" >
<div id="kontakt" >
<p> Kontakt </p>
</div></a>
</body>
</html>
There is a new HTML Vibrate API, but it is not very widely supported.
//Check if Vibrator is available, use custom browser prefix if needed
navigator.vibrate = navigator.vibrate ||
navigator.webkitVibrate ||
navigator.mozVibrate ||
navigator.msVibrate;
if (navigator.vibrate) {
console.log('vibration supported');
navigator.vibrate(500);
} else {
console.log('vibration not supported');
}
Read more here: http://shapeshed.com/html5-vibrate-api/