I am currently trying out the code institute 5 day challenge and can't seem to find where I am going wrong? multiple fails after running tests with things like "did you set the font size within the body of preperation hover function etc...the same for the other functions.
```
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tea Recipe</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
<h1>How to make Tea</h1>
</section>
<section onmouseover="preparationHover()" onmouseout="preparationNormal()">
<h2>preparation <i id="preparation" class="fa fa-check-circle" aria-hidden="true"></i></h2>
</section>
<footer>
<p>Copyright Me 2020</p>
</footer>
</div>
<script>
function ingredientsHover() {
document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontsize = '300%' ;
}
function ingredientsNormal() {
document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontsize = '100%' ;
}
function PreparationHover() {document.getElementById('Preparation').firstElementChild.firstElementChild.style.fontsize = '300%';
}
function PreparationNormal() {
document.getElementById('Preparation').firstElementChild.firstElementChild.style.fontsize = '100%';
}
</script>
</body>
</html>
thanks
matt
```<html>
```<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tea Recipe</title>
<!-- add the font awesome link here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
<h1>How to make Tea</h1>
<p>At the very least, tea is a flavourful way of getting enough fluid into your body each day.
On top of that, studies have shown teas can help protect your teeth and your heart</p>
</header>
<section onmouseover="ingredientsHover()" onmouseout="ingredientsNormal()">
<!-- add a fontawesome icon here -->
<h2>ingredients <i id="ingredients" class="fa fa-coffee" aria-hidden="true"></i></h2>
<ul>
<li>Tea Bag</li>
<li>Water</li>
<li>Milk - Dairy/Plant based(Optional)</li>
<li>Sugar/Honey (Optional)</li>
</ul>
</section>
<section onmouseover="preparationHover()" onmouseout="preparationNormal()">
<!-- add a fontawesome icon here -->
<h2>preparation <i id="preparation" class="fa fa-check-circle" aria-hidden="true"></i></h2>
<ol>
<li>
Run the tap a little so the water's nicely aerated, and only boil it once to keep the oxygen level up. Oxygen in water helps flavour!
</li>
<li>
Pop a tea bag into your mug (<em>always</em> a big mug)
</li>
<li>
Pour the hot water over the tea bag and stir briefly.
</li>
<li>
Tea needs time to unlock all its flavour, so give it 3-4 minutes to do its thing. This is a perfect time to grab a sneaky cookie or daydream about vacations.
</li>
<li>
Before removing the tea bag, gently squish it with a spoon against the side of the mug. Not too much or you'll make it bitter.
</li>
<li>
If you want, throw in some milk or sugar or honey or nothing else at all.
</li>
<li>
Enjoy!
</li>
</ol>
</section>
<footer>
<p>Copyright Me 2020</p>
</footer>
</div>
<script>
Function ingredientsHover() {document.getElementById("ingredients").style.fontSize = "300%";
Function ingredientsNormal() {document.getElementById("ingredients").style.fontSize = "100%";
Function preperationHover() {document.getElementById("ingredients").style.fontSize = "300%";
Function preperationNormal() {document.getElementById("ingredients").style.fontSize = "100%";
</script>
</body>
</html>
```
it's also asking have i created the preperation and ingredients hover and normal functions, i thought i had but I can't figure it out
In response to this request on your functions. Your code should look like this in your script tag:
function ingredientsHover() {
document.getElementById("ingredients").style.fontsize = "300%" ;
}
function ingredientsNormal() {
document.getElementById("ingredients").style.fontsize = "100%" ;
}
function preparationHover() {
document.getElementById("preparation").style.fontsize = "300%";
}
function preparationNormal() {
document.getElementById("preparation").style.fontsize = "100%";
}
P.S. Don't forget to add your id selectors in the sections
Related
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.
For example, for <h1> I can just do this in AngularJS:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<!-- JQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
<br>
<label>
<input type="checkbox" ng-model="isURL">
Make it look like a link
</label><br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.isURL= false;
}]);
</script>
</body>
</html>
EDITED
If you really need it to be a div you can use:
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.
I am new in bootstrap
I made a new page and this is my page (there is not content on it!)
<!DOCTYPE html>
<html lang = "fa">
<head>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<a class="fa fa-ban">Test ban</a>
</div>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
As you see I have an <a> element and it has a font-awesome class, I mean fa fa-ban, but it is not working!
What is the problem?
This works for me: https://jsfiddle.net/smit_patel/teg7kfc4/
Work fine in by this Tag.
<a><i class="fa fa-2x fa-ban"></i>Test ban</a>
try use <i> tag inside <a>
<i class="fa fa-ban"></i>Test ban
You cannot directly use the classes inside <a> tag i suspect.
So this
<a class="fa fa-ban">Test ban</a>
must be replaced with
<i class="fa fa-ban"></i>Test ban
This works for me: https://jsfiddle.net/fka3gp1b/
I would perhaps reformat your code slightly so that the font awesome icon is a child of the anchor element as follows:
<i class="fa fa-ban"></i>Test ban
Similarly, using a span tag works just as well:
<span class="fa fa-ban"></span>Test ban
Now I found the answer myself.
As you see there is a link to index.css, I had a little bad code in my index.css that is:
*, *:after, *:before{
box-sizing: inherit;
}
*, * *,{
/* Set your content font stack here: */
font-family: 'arad', Times, "Times New Roman", serif !important;
}
When I removed that, it is working correctly now!
In the process of updating a website, we are required to support IE in compatibility mode so as to not break existing functionality.
There is a new side menu, which uses Kendo UI's PanelBar. However if the content overflows and we have to scroll, the kendo controls do not scroll correctly - the items float on top in a fixed position.
IE Compatibility Mode vs IE Edge: (please ignore size difference)
I've created a fiddle here to replicate:
<!DOCTYPE html>
<html class="k-webkit k-webkit40">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Kendo UI - jsFiddle demo by paulcoghill</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.blueopal.min.css">
<script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<style type="text/css">
h1{
margin-bottom: 30px;
}
#container{
height: 200px;
width: 200px;
padding 5px;
background-color: red;
overflow: auto;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
});//]]>
</script>
</head>
<body hola-ext-player="1">
<div id="container">
<h1>Header</h1>
<ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu">
<li class="k-item k-state-default k-first" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
</ul>
<div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/
You can view the result in compatibility mode to test:
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/embedded/result/
Can anyone find a workaround or resolve this?
I've tried messing about with difference overflows and z-indexes, updating kendo, but I can't figure out what's going on.
Paul, try adding "position: relative;" to the container. Found this on another question: IE7 CSS Scrolling Div Bug
<!DOCTYPE html>
<html lang="en">
<head>
<title>Enjoy BluePrint</title>
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!-- <link rel="stylesheet" href="global.css" type="text/css" media="screen"> -->
<script type="text/css">
h1.logo {
width:181px; height:181px;
background: url("img/logo.png");
text-indent: -9999px;
}
</script>
</head>
<body>
<div class="container">
<!-- Header -->
<div id="header" class="span-24">
<div id="logo" class="span-6">
<h1 class="logo">This is my site</h1>
</div>
<div id="script" class="span-10">
<p>Frank Chimero is a graphic designer, illustrator, teac`her, maker, writer, thinker-at-large in Portland, Oregon.</p>
</div>
<div id="contact" class="span-8 last">
contact
</div>
</div>
<!-- Content -->
<div id="main-content" class="span-12">
<h3>DISCOVERY</h3>
<p>My fascination with the creative process, curiosity, and visual experience informs all of my work in some way. Each piece is the part of an exploration in finding wit, surprise, honesty, and joy in the world around us, then, trying to document those things with all deliberate speed before they vanish.</p><br/>
<p>Our creative output can have a myriad intended outcomes: to inform, to persuade or sell, or delight. There are many other creative people who do well in servicing the needs to inform or persuade, but there are not many out there who have taken up the mantle of delighting people. I’ll try my best.</p><br/>
<p>It’s not about pretty; it is about beauty. Beauty in form, sure, but also beauty in the fit of a bespoke idea that transcends not only the tasks outlined, but also fulfilling the objectives that caused the work to be produced in the first place.</p><br/>
<p>The best creative work connects us by speaking to what we share. From that, we hope to make things that will last. Work made without staying power and lasting relevance leads to audiences that are fickle, strung along on a diet of crumbs.</p><br/>
<p>The work should be nourishing in some way, both while a creative person is making it, but also while someone consumes it. When I think of all my favorite books, movies, art and albums, they all make me a little less alone and a little more sentient. Perhaps that is what making is for: to document the things that make us feel most alive.</p>
</div>
<!-- Side -->
<div id="award" class="span-4">
Awards
</div>
<div id="right-sidebar" class="span-8 last">
Right sidebar
</div>
</div>
</body>
</html>
I'm 100% sure the code works, and I can't replace image at h1.logo . I try to use live-editing CSS tool and it works fine .
Thanks for reading :)
its not script its style.
<style type="text/css">
h1.logo {
width:181px; height:181px;
background: url("img/logo.png");
text-indent: -9999px;
}
</style>