I am using animate.css but it don't seem to work in firefox. The code I am using is:
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="rotateIn"> content</div>
</body>
</html>
I want this div to show rotate in effect when we load the page but it don't seem to work.
you have to use animated class if you want to show animations try this
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="animated rotateIn"> content</div>
</body>
</html>
Long story short: http://jsfiddle.net/3ZLLm/
You MUST use the animated class provided.
So, to add further, it should be:
<div class="animated rotateIn"> content</div>
Related
The following html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body class="w3-red">
<div class="w3-main w3-content w3-padding">
<div class="w3-row w3-blue">
<div class="w3-quarter">
<img src="http://www.w3schools.com/w3images/girl_mountain.jpg" style="width:100%">
</div>
<div class="w3-threequarter">
<p>Hello World</p>
</div>
</div>
</div>
</body>
</html>
gives the following result. As you can see there is an extra pixel of padding below the image. Is this by design? An error on my part? A bug? Either way I find it very annoying and would love to know how to get rid of it. Thanks.
Credit here to Mats at bugzilla.
img{margin-bottom:-5px}
should be
img{vertical-align:bottom}
in w3.css
I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>
You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.
I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>
The timeout function will do what you want:
// timeout function will give some time for page load.
$timeout(function () {
//your page load
$("#panelTask").html(res);
});
the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).
I had to add :
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
to my css file for ng-cloak to work.
Like here :How to correctly use ng-cloak directive?
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" class="ng-cloak">
<img src="image/default.png">
</div>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
I was trying to load a CSS file to HTML to style it except the CSS doesn't load. I placed both the files in the same directory
I have an HTML file called Homepage.html and a CSS file called Homepage.css:
<html>
<title>
Welcome to Sids World!
<link rel="stylesheet" type="text/css" href="homepage.css">
</title>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div><!-- global division -->
</div>
</body>
</html>
Furthermore, my CSS file (located in the same directory) has the following code:
body
{
font-size:100%;
background-color:red;
}
#header
{
text-align:center;
font-size:4em;
font-family:sans-serif;
background-color:blue;
}
I expect when this loads that the background of the entire site will be red and the background surrounding my text will be blue, but this does not occur. What am I missing here?
The file paths of both files are:
C:\Sid\Rutgers\ComputerScience\SiteForDeploy\htmlfiles\Homepage.html
C:\Sid\Rutgers\ComputerScience\SiteForDeploy\htmlfiles\Homepage.css
I am using Sublime Text Editor for my processing if that helps
Your problem is twofold. Firstly, you fail to specify a <head> section for your document. Secondly, your <link> tag is within your <title> tag. The <link> tag should be within <head>, but not within <title>. Change to this and you'll see pretty colors:
<html>
<head>
<title>
Welcome to Sids World!
</title>
<link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
<html>
<title>
Welcome to Sids World!
<link rel="stylesheet" type="text/css" href="homepage.css">
</title>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
should be changed to
<html>
<head>
<title>
Welcome to Sids World!
</title>
<link rel="stylesheet" type="text/css" href="Homepage.css"/>
</head>
<body>
<div id="header"> <!-- menu here -->
This Site is Under Construction
</div>
<div> <!-- global division -->
</div>
</body>
</html>
Css url's are case sensitive, so you'll need <link rel="stylesheet" type="text/css" href="Homepage.css">
Otherwise your code is working just fine for me http://jsfiddle.net/3deg1h05/
I'm trying to create a basic Hello World page in Bootstrap, but the styles in the .css file are not being applied to the content on the page. In chrome dev tools, the .js and .css files are successfully loaded and can be looked through in-browser, but the styles are not applied to the element.
html:
<!DOCTYPE html>
<html>
<head>
<title>Alex Rules</title>
<link href="bootstrap/css/bootstrap.min.css" rel="styelsheet" media="screen" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="postContent" class="row">
<div class="span6 offset3">
Hello World!
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Is there a step that I'm missing?
In your link tag it says rel="styelsheet" and it should say rel="stylesheet".