I'm trying to set a max-height to an image. It works well in Safari and Chrome, but not in Firefox/Opera/IE. Now I read that html and body heights should be put at 100%, and it did work when I used jsfiddle. However, it doesn't work in my page (memo-designs.com/portfolio.php).
The following is the source of the page:
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel='stylesheet' href='style/stylesheet.css'>
<script type = 'text/javascript'>
function displayImage(image, link) {
document.getElementById('img').src = image;
document.getElementById('mylink').href = link;
}
function displayNextImage() {
if (x < images.length-1){
x++;
} else {
x = 0;
}
displayImage(images[x], links[x]);
}
function displayPreviousImage() {
if (x > 0){
x--;
} else {
x = images.length-1;
}
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, -1);
}
var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png"
links[0] = "http://memo-designs.com/items/doublek-01.png"
images[1] = "http://memo-designs.com/items/memodesigns.png"
links[1] = "http://memo-designs.com/items/memodesigns.png"
</script>
</head>
<body style = 'background-color: #000000'><div id = 'menucontainer'>
<div id = 'menu'>
<p>
<ul>
<li><a class = 'menu' href = '/'>HOME</a></li>
<li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
<li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
<li><a class = 'menu' href = 'rates.php'>RATES</a></li>
<li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
</ul>
</p>
</div>
</div>
<div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'>
<p>
<img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'>
<img class = 'arrow' onclick = 'displayPreviousImage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'>
<img class = 'arrow' onclick = 'displayNextImage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'> </p>
</div>
</body>
</html>
And the css stylesheet (only part of it is shown here):
*{
margin: 0;
padding: 0;
}
html{
margin: 0;
min-width: 100%;
height: 100%;
min-height: 100%;
}
body{
margin: 0px;
background-color: #f3f4f4;
min-width: 100%;
height: 100%;
min-height: 100%;
}
Would appreciate any help as to what I'm doing wrong :)
First of all I recommend you to start using a CSS-Reset like Normalize.css . It makes browsers render all elements more consistently and in line with modern standards.
Your HTML notation might also cause inconsistency across browsers. Turn things like <div id = 'menu'> into <div id="menu">. This makes it also more readable IMHO.
Inline style attributes make maintaining the pages a pain and may override things you didn't intent to. They also need to be applied to every single element thus also increasing download time. Using classes / id's is the way to go. Also pseudo-elements can't be used with inline styles. I advice to only use them for quick changes during development. I use the element inspector from Chrome / Firefox to change things quickly and instantly see how the changes look, copy/pasting the edits afterwards.
So, make sure to put all css into your stylesheet. It's also considered as a best practice for maintainability and better download speed (minify the files for production) of your pages.
You surely have heard about jQuery before. Try using it. jQuery makes developing things like image sliders a breeze (once you understand the syntax, but it's a low learning curve). Furthermore, there are LOTS of ready-to-use plugins for jQuery.
Another "good practice" is to put your javascripts at the very end of your document just before the </body> tag. Read more about this here and here.
Ok, enough tips. Let's get the hands dirty:
The HTML Part:
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel="stylesheet" href="/assets/css/normalize.css">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div id="menuContainer">
<div id="menu">
<p>
<ul>
<!-- Instead of writing in CAPITALS use the text-transform:uppercase; css property -->
<li><a class="menu" href="/">Home</a></li>
<li><a class="menu" href="about.php">About</a></li>
<li><a class="menu" href="portfolio.php">Portfolio</a></li>
<li><a class="menu" href="rates.php">Rates</a></li>
<li><a class="menu" href="contact.php">Contact</a></li>
</ul>
</p>
</div>
</div>
<div id="contentContainer">
<p>
<!-- NOTE: Use IDs only once, else use classes to share css styles -->
<img id="img" src="http://memo-designs.com/items/doublek-01.png">
<img class="arrow left" src="style/graphics/larrow.png" onclick="displayPreviousImage()">
<img class="arrow right" src="style/graphics/rarrow.png" onclick="displayNextImage()">
</p>
</div>
<!-- Put the JavaScript at the end of the document just before the closing body tag -->
<script>
var images = [], links = [], x = 0,
baseUrl = "http://memo-designs.com/items/";
images[0] = baseUrl + "doublek-01.png";
links[0] = baseUrl + "doublek-01.png";
images[1] = baseUrl + "memodesigns.png";
links[1] = baseUrl + "memodesigns.png";
function displayImage(img, link)
{
document.getElementById('img').src = img;
document.getElementById('mylink').href = link;
}
function displayNextImage()
{
if (x < images.length-1) x++;
else x = 0;
displayImage(images[x], links[x]);
}
function displayPreviousImage()
{
if (x > 0) x--;
else x = images.length-1;
displayImage(images[x]);
}
function startTimer()
{
setInterval(displayNextImage, -1);
}
</script>
</body>
</html>
...and the CSS:
/* Assuming you'll use a CSS-Reset */
body {
background-color: #f3f4f4;
font:
...
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#menuContainer { ... }
#menu { ... }
#menu ul { ... }
/* Making the menu labels all UPPERCASE */
#menu ul > li {
text-transform: uppercase;
}
#contentContainer {
background-color: #000;
padding-top: 0;
overflow: hidden;
/* IMPORTANT: Set a fixed pixel height here to make the images use up the given space */
height: 200px; /* change 200 to your needs */
}
#img {
display: block;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#contentContainer .arrow {
position: absolute;
top: 40%;
}
#contentContainer .arrow.left {
left: 0;
}
#contentContainer .arrow.right {
right: 0;
}
Ok, try out the suggestions and the code example. Tell us if and what helped.
Good luck and happy coding!
Related
Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:
HTML
<div class="offer-detail-image-div"><div>
CSS
.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.
You can use ng-style to dynamically change a CSS class property using AngularJS.
Hope this ng-style example will help you to understand the concept at least.
More information for ngStyle
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
ul{
list-style-type: none;
color: #fff;
}
li{
padding: 10px;
text-align: center;
}
.original{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Edit-1
You can change the background-image: URL by following way.
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
You can use ng-class : documation.
If you want to do it in your directive check directive - attr : attr.
You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]
For example:
<div class="offer-detail-image-div"
[ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>
Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.
enter the size in textbox you can see box changes height and width
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" >
<input ng-model="myCol" type="textbox">
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>
</div>
</body>
</html>
I found a similar question here but I couldn't find a solution.
I'm using twitter-bootstrap 3.3.6 . When I add a bootstrap class to my div elements that contains images, the images are not displaying. But images are visible in code inspector in the browser.
<div class = "tab1 grow col-sm-12">
<a href = "#/tab1" class = "tooltips">
<img ng-src="{{ imageUrlProfile }}">
<span>
<strong>Profile</strong><br />
</span>
</a>
</div>
Images are loading from angularJS.
Controller.js :
application.controller('app', function($rootScope, $scope) {
$rootScope.imageUrlProfile = 'images/profile-icon.png';
$rootScope.imageUrlWork = 'images/exp-icon.png';
$rootScope.imageUrlEdu = 'images/edu-icon.png';
$rootScope.imageUrlContact = 'images/phone-icon.png';
});
Relevant CSS styles are :
.tab1, .tab2, .tab3, .tab4, .tab5
{
margin: 30px 30px 0px 30px;
width: 25px;
height: 25px;
display: inline-block;
}
.tab1 img, .tab2 img, .tab3 img, .tab4 img, .tab5 img
{
width: 100%;
height: 100%;
}
Any help?
I would like to style my menu bar Like THIS.
It's fixed to the top of the site when you scroll down and it isn't fixed where it is when the page is loaded.
How can it be done with CSS?
What you're after is a 'sticky navbar/menu'.
The simplest way would be to add the below CSS to your menu/navbar
position:fixed;
top:0px;
That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menu element, the fixed class would simply be e.g. the CSS above.
There are some nice examples listed here.
Source: Creating a sticky nav css and jquery
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
This is some content 0<br/>
This is some content 1<br/>
This is some content 2<br/>
This is some content 3<br/>
This is some content 4<br/>
This is some content 5<br/>
This is some content 6<br/>
This is some content 7<br/>
This is some content 8<br/>
<div id="data" />
</div>
CSS
* {
font-family: Consolas,Sans-serif;
font-size: 10pt;
}
#menu {
position: absolute;
width: 100%;
}
#menu.out {
position: fixed;
}
#menu ul {
margin: 0;
padding: 1em .5em;
list-style: none;
background-color: #fc9;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
padding: 5px .5em;
}
#content {
background-color: #ebebee;
padding: 4em 1em 1em;
height: 900px;
}
JQuery:
var menu = $("#menu");
var ul = menu.find("ul");
var content = $("#content")[0];
var data = $("#data");
var menuHeight = menu[0].getBoundingClientRect().bottom;
var inView= true;
$(document).scroll(function(evt) {
evt.preventDefault();
var top = content.getBoundingClientRect().top;
var nextInView = top+menuHeight > 0;
if (inView ^ nextInView)
{
data.append("<div>Switching.</div>")
inView = nextInView;
if (inView)
{
menu.removeClass("out");
}
else
{
menu.addClass("out");
ul.hide().slideDown("fast");
}
}
});
Fiddle :Demo
Courtesy : Robert Koritnik
Hope this helps
Happy Coding
I'd like to create a responsive left-hand menu, like the menu on Yahoo's Pure CSS site.
In other words, it should look like this on desktop:
And collapse like this on narrower screens:
Oddly, although this menu is prominent on the Pure site, it doesn't actually seem to be part of the Pure framework.
I've been struggling with the CSS to replicate it, looking at Yahoo's source - this is as far as I've got: http://jsfiddle.net/WZt4z/
It's part-way there, but I don't understand how they have styled the body of the page so it's in the right place, and got rid of the scrollbars on the menu.
Here is the HTML in the JSFiddle:
<a href="#menu" id="menuLink" class="pure-menu-link">
<img src="/img/navicon-png2x.png" width="20" alt="Menu toggle">
</a>
<div class="pure-u" id="menu"> <!-- contents of menu --> </div>
<div class="pure-u-1" id="main"> <!-- contents of body of page --> </div>
And the CSS:
#menu {
margin-top: 31px;
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 150px;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: grey;
overflow-y: auto;
-webkit-overflow-scroll: touch;
}
.pure-menu-link {
display: none; /* show this only on small screens */
top: 0;
left: 150px; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
padding: 0.75em 1em;
}
#media (max-width: 470px)
... responsive styles
You're running into problems because the side menu layout they built has multiple classes and ids that you are not including. Specifically you need the "layout" id:
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
Additionally for the menu to work properly you need to include the javascript for it:
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
menuLink.onclick = function (e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
};
}(this, this.document));
The javascript uses the ids to update the css when you hit the media breakpoint (screen gets too small) so if you don't have all the necessary ids ("layout", "menu", "menuLink") the javascript will break as well.
I updated the fiddle you posted with the necessary code (I pulled it straight from the site at purecss.io).
Here's the working fiddle: http://jsfiddle.net/schmanarchy/WZt4z/3/
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.