I've got a problem. Lately i was creating website and I realize that i need text on my Images that are in parent (grid gallery - look below). Images were auto resizing, but at the moment i added div as parents to them autoresizing stoped working. Do you have any idea how to autoresize divs in grid gallery?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="galeria.css">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round&display=swap" rel="stylesheet">
</head>
<body>
<!--Gallery-->
<div class="gallery">
<span>
<img src="img/obraz1.jpg" alt="" >
</span>
<span>
<img src="img/obraz2.jpg" alt="">
</span>
<span>
<img src="img/obraz3.jpg" alt="">
</span>
<span>
<img src="img/obraz4.jpg" alt="">
</span>
<span>
<img src="img/obraz5.jpg" alt="">
</div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="galeria.js"></script>
</body>
</html>
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(55vh, 70vh));
margin-top: 10vh;
}
.gallery span{
display: contents;
}
.gallery img{
width: 100%;
height: 100%;
padding: 2vh;
}
.gallery img:hover{
opacity: 0.5;
cursor: pointer;
transition: all 0.3s ease;
}
#media screen and (max-width: 406px){
.gallery{
grid-template-columns: repeat(auto-fit, minmax(30vh, 1fr));
}
}
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
So I'm working on my site, and I want to incorporate the cool line particle from the particles.js library. I have the particles working and such it all works fine. When I try to put my text onto it, it forces it below all the particles. I don't know why this is happening. I've tried putting it above, below and inside of the tags, but it all ways ends up above or below the particles, or no where at all.
Here is my code:
/* =============================================================================
HTML5 CSS Reset Minified - Eric Meyer
========================================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}
/* =============================================================================
My CSS
========================================================================== */
/* ---- base ---- */
html,body{
background:#111;
}
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
font:normal 75% Arial, Helvetica, sans-serif;
}
canvas{
display:block;
vertical-align:bottom;
}
/* ---- stats.js ---- */
.count-particles{
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles{
font-size: 1.1em;
}
#stats,
.count-particles{
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats{
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles{
border-radius: 0 0 3px 3px;
}
/* ---- particles.js container ---- */
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-color: darkcyan;
}
#particles canvas{
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT TOUCH -->
<meta charset="utf-8">
<title>C#Web - Professional Web Development</title>
<meta name="description" content="C#Web is a web development & graphic design shop run by Gosintary and Lorsharish. They charge low prices and provide very high quality work!">
<meta name="author" content="Ethan Pszanowski" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- END OF DO NOT TOUCH -->
<!-- START OF CSS -->
<style>
.header{
height: 650px;
width: 100%;
font-family: 'Montserrat', sans-serif;
color: white;
margin-top: 104px;
}
.header p{
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">C# WEB</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#ethan">Portfolio</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<div class="layer">
<div id="particles-js"></div>
</div>
<div class="header">
<h1>123</h1>
</div>
<!-- DO NOT TOUCH -->
<!-- scripts -->
<script src="particles.js"></script>
<script src="js/app.js"></script>
<!-- END OF DO NOT TOUCH -->
</body>
</html>
So what am I doing wrong?
I know this is long overdue, but I was having the same issue and added
"position: relative;"
to the containing my content (e.g. the element I wanted to display over the particles background ).
This worked for me! Hope someone else might find this solution useful.
Been trying to create a simple "squad builder", basically just creating a list as different buttons are clicked. I noticed Jquery was not working, although it has been linked to in the section. I can't even access basic animations. What is going on in here?:
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
<title>Squad Builder</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
<style type="text/css">
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
</style>
<body>
<div class = "row container-fluid">
<div id = "player-box" class = "col-md-6">
<ul id = "player-list">
<li><button class = "player-btn btn">Player1</button></li>
</ul>
</div>
<div id = "squad-box" class = "col-md-6">
<ul id = "squad-list">
</ul>
</div>
</div>
</body>
Your code is ok, probably is only missing the animate.css assets:
animate.css
$(document).ready(function() {
$("button").addClass("animated bounce");
});
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="row container-fluid">
<div id="player-box" class="col-md-6">
<ul id="player-list">
<li><button class="player-btn btn">Player1</button></li>
</ul>
</div>
<div id="squad-box" class="col-md-6">
<ul id="squad-list">
</ul>
</div>
</div>
Hello I have this working example from the iron-list demo with cakephp:
<?php
use Cake\Routing\Router;
?>
<!doctype html>
<html>
<head>
<title>iron-list and paper-scroll-header-panel demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-icons/iron-icons.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-list/iron-list.html">
<style is="custom-style">
paper-scroll-header-panel {
#apply(--layout-fit);
#apply(--layout-vertical);
#apply(--paper-font-common-base);
}
paper-toolbar.tall .title {
font-size: 40px;
margin-left: 60px;
-webkit-transform-origin: left center;
transform-origin: left center;
overflow: visible;
}
paper-toolbar paper-icon-button {
--paper-icon-button-ink-color: white;
}
iron-list {
background-color: var(--paper-grey-200, #eee);
padding-bottom: 16px;
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.item:focus {
outline: 0;
border-color: #666;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
#apply(--layout-flex);
#apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<iron-ajax url="<?= $this->Url->build(["controller" => "Users","action" => "test.json"]); ?>" last-response="{{data}}" auto></iron-ajax>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar>
<paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search" alt="Search"></paper-icon-button>
<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
<div class="bottom title">iron-list</div>
</paper-toolbar>
<iron-list items="[[data.user]]" as="item">
<template>
<div>
<div class="item" tabindex="0">
<img class="avatar" src="[[item.image]]">
<div class="pad">
<div class="primary">[[item.email]]</div>
<div class="secondary">[[item.phone]]</div>
<div class="secondary dim">[[item.token]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-scroll-header-panel>
</template>
<script>
document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
};
</script>
</body>
</html>
This is the same example that comes in the demo if iron-list, I just changed some basic stuff to make it work with my cakephp architecture.
Now I want to have all these inside a custom Polymer element. So I did it like this:
<dom-module id="proto-element">
<template>
<style is="custom-style">
paper-scroll-header-panel {
#apply(--layout-fit);
#apply(--layout-vertical);
#apply(--paper-font-common-base);
}
paper-toolbar.tall .title {
font-size: 40px;
margin-left: 60px;
-webkit-transform-origin: left center;
transform-origin: left center;
overflow: visible;
}
paper-toolbar paper-icon-button {
--paper-icon-button-ink-color: white;
}
iron-list {
background-color: var(--paper-grey-200, #eee);
padding-bottom: 16px;
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.item:focus {
outline: 0;
border-color: #666;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
#apply(--layout-flex);
#apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
</style>
<iron-ajax url="<?= $this->Url->build(["controller" => "Users","action" => "test.json"]); ?>" last-response="{{data}}" auto></iron-ajax>
<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
<paper-toolbar>
<paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search" alt="Search"></paper-icon-button>
<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
<div class="bottom title">iron-list</div>
</paper-toolbar>
<iron-list items="[[data.user]]" as="item">
<template>
<div>
<div class="item" tabindex="0">
<img class="avatar" src="[[item.image]]">
<div class="pad">
<div class="primary">[[item.email]]</div>
<div class="secondary">[[item.phone]]</div>
<div class="secondary dim">[[item.token]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-scroll-header-panel>
</template>
<script>
// register a new element called proto-element
Polymer({
is: "proto-element",
iconForItem: function (item) {
return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
}
});
</script>
</dom-module>
Then in my html file I imported the needed polymer elements/files and used the element like this:
<?php
use Cake\Routing\Router;
?>
<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-icons/iron-icons.html">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-list/iron-list.html">
<?= $this->element('Polymer/proto-element');?>
</head>
<body unresolved>
<proto-element></proto-element>
</body>
</html>
When I look at the result in my laptop the result is exactly the same. But the problem comes when I open the page from my phone. The first option renders nicely as expected:
But the second option (when I wraped the list inside a custom element) shows the list zoomed out, everything tiny and not usable:
Am I doing something wrong? How can I use this iron-list example inside my custom Polymer element?
Thank you
I found the problem. So simple...
You need to add the meta tags!
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">