<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<style>
.d1 {
background-color: lightblue;
display: flex;
}
a {
background-color: yellow;
display: block;
margin: 0 10px;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="d1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
</body>
</html>
I am trying to display 6 <a>'s in a row with 3 to be shown at a time. I use the above code copied and pasted directly from their tutorial site (https://kenwheeler.github.io/slick/) and I replace the container (class d1) as well as the child elements but the result does not function or move at all, not even the left and right buttons appear... The folder contains only this .html file.
Two things I changed to fix this:
Add the slick initialisation class "multiple-items"; this tells Slick what container to affect
Link to slick css, theme css and javascript repos on cdn; make sure you are linking to those properly in your project (not the cdn versions I'd say)
Your code, updated, now works:
.d1 .slick-prev,
.d1 .slick-next {
width: 50px;
height: 50px;
z-index: 9999;
opacity: 1;
}
.d1 .slick-prev {
left: 25px;
}
.d1 .slick-next {
right: 25px;
}
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<style>
.d1 {
background-color: lightblue;
display: flex;
}
a {
background-color: yellow;
display: block;
margin: 0 10px;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="multiple-items d1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true
});
});
</script>
</body>
</html>
You are initializing a class "d1" for slick. But on scripts you are targeting the wrong class. Please update your script with the following
$(document).ready(function(){
// Your class "multiple-items" will replace with "d1"
$('.d1').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
Need to replace .multiple-items with d1 which is your class name in your jQuery.
Also make sure, your cdn or path to the file directory is correct.
Any console error?
Related
Can anyone check the code above
I don't know why I can't put boxes in the middle with the directive layout-align="center center"? Thanks.
Code snippet:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
.wrapper {
width: 100%;
height: 100%;
}
.one {
background: tomato;
width: 50px;
height: 50px;
}
.two {
background: green;
width: 50px;
height: 50px;
}
</style>
</head>
<body ng-app="testApp">
<div class="wrapper" layout-align="center center">
<div class="container" layout-gt-xs="row" layout-xs="columnn" flex="none">
<div class="one" flex="initial"></div>
<div class="two" flex="initial"></div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial"]);
</script>
</body>
</html>
Thanks for #ManojKumar's answer, layout-align directive only affects immediate children.
I am new with polymer and I am experimenting a little with it. How can i set my component to full height?
This is what i have and for some reason i can't get it to work. It only has the height of his content:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="reactive-navbar">
<style>
div {
display: block;
width: 20%;
height: 100%;
background-color: #2c3e50;
}
</style>
<template>
<div>
<content></content>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "reactive-navbar",
});
</script>
If you want your Polymer element to be affected by your style instead of your div, you can change that div in your style tag to :host to make your style affect the host https://www.polymer-project.org/1.0/docs/devguide/styling.html
Updated code:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="reactive-navbar">
<style>
:host {
display: block;
width: 20%;
height: 100%;
background-color: #2c3e50;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: "reactive-navbar",
});
</script>
In your index.html file, set style for html tag:
html {
height: 100%;
}
So, I am aware the web components, Shadow DOM and such is only implememted natively in Chrome today.
For support in Firefox, Polyfill is needed. According to the website, Polymer has polyfill support in Firefox:
https://www.polymer-project.org/resources/compatibility.html
but when I have made a very simple page, it looks completely screwed up i Firefox. But, if I try the Polymer website in Firefox, it works there without any obvious problems.
Test URL: http://misc.snapcode.se/polymer/
Here is how my test-site looks in Chrome:
and in Firefox:
The code can be seen below.
But they say that Firefox has Polyfill support, and it supports CSS, so why is the layout/design so screwed up?
How come they get their own site to work in Firefox, but a super-simple site I build is screwed up?
If I try out the paper-dropdown in FF, it works fine on their demo site, but if I use the paper-dropdown on my own site, constructed the same way as described on the polymer website, its completely screwed up. Why?
What am I missing?
EDIT 1
I found out that to get the header panel "right" in Firefox, I have to remove the CSS in index.php for the div {...}:
That seems to me like the Shadow DOM isnt working correctly, even though I have imported webcomponents.js, which should be the Polyfill needed.
EDIT 2
I have looked in Firefox using Firebug and I can see the following:
As I can see it, webcomponents.min.js is imported (I tested different js files), and there is some stuff talking about ShadowDOMPolyfill. So, it is even weirder now I think.
EDIT 3
I debugged Firefox using Firebug, image below. As I see it, ShadowDOM using Polyfill is indeed detected and used. Do you agree? =)
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/font-roboto/roboto.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>
assignment-card.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-dropdown/core-dropdown.html">
<link rel="import" href="/components/core-dropdown-menu/core-dropdown-menu.html">
<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<link rel="import" href="/components/core-tooltip/core-tooltip.html">
<polymer-element name="assignment-card">
<template>
<style>
input {
padding: 10px;
font-family: 'RobotoDraft', sans-serif;
font-size: 16px;
margin: 0px;
}
core-icon[icon="error"] {
width: 40px;
height: 40px;
color: red;
}
core-icon[icon="perm-identity"] {
width: 40px;
height: 40px;
}
core-icon[icon="lock-outline"] {
width: 40px;
height: 40px;
}
core-icon[icon="arrow-forward"] {
color: #e4e4e4;
}
core-icon {
color: #808080;
}
paper-button {
background-color: #6fd177;
margin: 0px;
}
core-field {
margin-bottom: 10px;
}
div[id="container"] {
background: #C0C0C0;
padding: 5px;
}
div
{
margin: 10px;
font-size: 12px;
}
</style>
<div id="container" layout vertical >
<div layout horizontal>
<core-label >Starttid: 14:13</core-label>
<core-label flex></core-label>
<core-label >Uppdrags-id: 13213241</core-label>
</div>
<div><core-label>Kertin Karlsson,</core-label></div>
<div layout horizontal relative>
<paper-dropdown-menu raised label="-Välj" style='background: #fff; padding: 5px; margin: 0px; margin-right: 15px; ' flex>
<paper-dropdown class="dropdown" layered="true">
<core-menu class="menu">
<template repeat="{{assistant in assistants}}">
<paper-item name="{{assistant.id}}">{{assistant.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>Tilldela</paper-button>
</div>
</div>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/relay.php"
method="post"
params='{{json}}'
handleAs="json"
on-core-response="{{handleResponse}}">
</core-ajax>
</template>
<script>
Polymer('assignment-card', {
ready: function() {
this.assistants = [
{id: 1, name: 'Kalle'},
{id: 2, name: 'Ted'},
{id: 3, name: 'Micke'},
{id: 4, name: 'Bengt'},
];
}
});
</script>
</polymer-element>
logout-button.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<polymer-element name="logout-button">
<template>
<style>
paper-button
{
background: #DF0101;
color: white;
}
</style>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/logout.php"
on-core-response="{{handleResponse}}">
</core-ajax>
<paper-button raised id="btnLogout" on-click="{{onLogoutClicked}}">Logga ut
<core-icon icon="highlight-remove"></core-icon>
</paper-button>
</template>
<script>
Polymer('logout-button', {
onLogoutClicked: function()
{
this.$.coreAjax1.go();
},
handleResponse: function(e)
{
document.location.href = '/index.php';
}
});
</script>
</polymer-element>
The problem persist because firefox does not create shadow DOM but it displays shadow content directly. So the following snippet screws the overall view:
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
If you remove that code and add some specific code then it will work. The snippet for index.php with specific code is given below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/font-roboto/roboto.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
assignment-card,
logout-button{
margin: 10px;
}
logout-button paper-button{
top: 3px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>
You can try this full code on your computer. When I resize my Chrome and Firefox, the right hand side (which is column 2) will overrun the left hand side.
In jsfiddle this is harder to observe but if you want to: http://jsfiddle.net/kkmzkkyq/5/
It seems like this is caused by my col-xs-12 but isn't that used if I want a stack behavior?
Second problem is when I resize the window I can also see the right hand side continue (the text is not done!) How do I fix that? Am I supposed to apply text wrap?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>robots.txt scanner demo</title>
<link rel="stylesheet" type="text/css"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<!-- CSS are mainly based off
http://tech.deepumohan.com/2013/09/javascript-ace-editor-positioning-bootstrap.html
ACE editor CSS is a pain to work with....
-->
<style type="text/css" media="screen">
.right {
position: absolute;
padding-left: 0;
right: 0;
display: block;
padding: 0px;
height: 100%;
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, sans-serif;
background: #708090;
color: black;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
top: 0;
bottom: 0;
left: 0;
padding-left: 0;
padding-right: 0;
}
#editor {
position: relative;
top: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 left">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-md-4 right">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
</script>
<script type="text/javascript" charset="utf-8"
src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript" charset="utf-8"
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js">
</script>
</script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
</html>
Your biggest problem is that you're not including the bootstrap3.0.2.js file - the css alone is not enough.
Secondly - the grid "bubbles up" - so if you define col-xs-12 and no col value for "sm" you will get 12 as the col value for sm size screens. So you could do a col-sm-8 and remove the col-md-8.
You also don't need to add left or right as your classes. Here's a good explanation of the grid: http://scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system
And here is the body of your html: you have some messy (closed but never opened) script tags - and I added the include for the bootstrap JS file.
You still have to address the text issue (it's not being wrapped because there are no white spaces I would expect.
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div id="editor"></div>
</div>
<div class ="col-xs-12 col-sm-4">
<h1>ewkrwkjrkwejlrjwrwerjwlkrjwlr1111</h1>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
editor.setOptions({
fontSize: "13pt",
useWorker: false
});
editor.session.setOption("useWorker", false);
function resizeAce() {
return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();
</script>
</body>
I'm trying to change a text link on my site to an image using css...need some help please. Below you will see my css - I would like to change my favorite text http://cl.ly/0S2j28082G2W423Y2T00 to an image.
a.upb_add_bookmark {
background: none repeat scroll 0 0 #E8BD61;
border-color: #C79324;
border-style: solid;
border-width: 1px;
color: black;
padding: 2px 5px;
text-decoration: none;
}
Your background property will need to be set to include the image. You will also need to set the <a> element as an inline-block so that you can declare a height and width for it.
a.upb_add_bookmark {
background: url('favorites-image.jpg') no-repeat;
display: inline-block;
height: 51px;
width: 92px;
}
Thats how you can display an image without actually using an <img> tag; nothing but css.
<img src="image.png" alt="Favorite icon" />
or
a {
background-image: url('image.png');
background-repeat: no-repeat;
display: inline-block;
height: 50px;
width: 150px;
}
Personally I would use the first one because the image is part of the structure and not a design element and CSS deals with design.
A very simple way to fix this problem
** 1. Create a div element that will encapsulate this image **
** 2. Add CSS in order to set that background of this div to be the image. (See code below). In this example the class name of your div will be called 'button'
.button
{
backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
Revise the Html *
Put the text you want to display into the aforementioned div with the class name 'button'
<div class="button">
<span>Favorite (1)</span>
</div>
* This will allow you to select the actual text while still maintaning the background *
Here is the complete version source with my modification for your reference.
<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
<head>
<style>
.button
{
background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
</style>
<title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">
<meta content="CloudApp" name="author">
<link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">
<!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id="image">
<header id="header">
<h1>Simple sharing</h1>
<h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>
<a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>
<section id="content">
<div class="button">
<span>Favorite (1)</span>
</div>
</section>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}
This code works for me