I am trying to implement a gsap example from codepen.
Nothing shows when I launch my html file. I remove the styles CSS at the bottom and it started showing. I believe the CSS is scss, which makes it more confusing because I assumed I could use it. The html file is below. I haven't used scss before so it seems strange to me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js"/>
</head>
<body>
<main>
<div class="content">
<h1 class="anim1"><span>Bridging the gap</span> <span>between dream</span> <span>and reality</span></h1>
<p class="anim1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio at ipsa alias modi natus excepturi?</p>
Start Dreaming
</div>
</main>
<aside>
<div class="wrapper">
<img class="swirl" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/swirl.png" alt="Swirl Graphic">
</div>
</aside>
<script type="text/javascript">
// 1
// gsap.from(".content", {duration:1, y:-50, opacity: 0});
// 1.1 Show Easings "steps(5)" "Power2.easeInOut" "elastic(1, 0.3)" https://greensock.com/docs/v2/Easing
// gsap.from(".content", {duration:1, y:-50, opacity: 0, ease: "elastic(1, 0.3)"});
// 2 ADD
// gsap.from("img", {duration: 1, y: 30, opacity: 0});
// gsap.from("aside", {duration: 1, opacity: 0, backgroundPosition: '200px 0px'});
// 3 Show Delay
// gsap.from("img", {duration: 1, delay: 1.4, y: 30, opacity: 0});
// gsap.from("aside", {duration: 1, delay: 1.1, opacity: 0, backgroundPosition: '200px 0px'});
// 4 Show Stagger (add class)
// gsap.from(".anim1", {duration:1, y:-50, opacity: 0, stagger: .6});
// 5 Show text reveal animation (add css span:after)
// <script src="CSSRulePlugin.min.js">
var rule = CSSRulePlugin.getRule("span:after");
// 6 Show Timeline
var tl = gsap.timeline({defaults:{duration: 1}});
tl.from(".anim1", {y:-50, stagger: .6, opacity: 0})
.to(rule, {duration: 1.8,cssRule: {scaleY: 0}}, "-=2.2")
.from("aside", {backgroundPosition: '200px 0px', opacity: 0}, "-=1.5")
.from("img", {y:30, opacity: 0}, "-=.5")
// 7 Show Click reverse
document.getElementById('cta').addEventListener('click', () => {
console.log('click')
tl.reversed() ? tl.play() : tl.reverse();
})
</script>
<style type="text/css">
body {
height: 100%;
margin: 0;
display: grid;
grid-template-columns: auto 30%;
font-family: 'Montserrat';
}
*, *:before, *:after {
box-sizing: border-box;
}
.line {
position: absolute;
}
main {
margin-left: 20%;
height: 100vh;
display: grid;
place-content: center;
.content {
width: 70%;
h1 {
font-size: 3em;
position: relative;
span {
display: block;
}
}
</style>
</body>
</html>
The above code in <style> tag uses nesting which is supported by scss.
So to run the above code follow these steps
Step 1: Install Sass
npm install -g sass
Step 2: Create a new file as styles.scss
Step 3: Copy the code from <style> tag to styles.scss file
Step 4: Run the following command in the terminal
sass --watch styles.scss:styles.css
It will generate new styles.css file
Step 5: Link this styles.css file to the html
<link rel="stylesheet" href="styles.css">
That's it!
Related
How do i modify :hover after an animation has occurred and changed the font-size of an h1?
it goes like this:
text: font-size: 12.5rem; letter-spacing: 0;
hover over the text- font-size: 13.5rem letter-spacing: 1rem; , after a few seconds, an animation with #keyframes comes and is changing the font-size, from 12.5rem to 5 rem. with the new change applied (font-size: 5rem;) I want to hover over it again but this time the values of :hover to change, the size when I hover to be from 5rem(the new values after the animation) to 6 rem, and letter-spacing, from 1rem; to 0.2rem.
i don't know how to do it.. please help me with some code
solution created with vanilla Js
let title = document.getElementById('title');
let i = 0;
title.addEventListener('mouseover', function() {
if (i >= 1) {
hoverText(5, 6);
title.removeEventListener('mouseover', function() {});
} else {
hoverText(12.5, 13.5);
i++;
}
});
function hoverText(small, big) {
title.style.fontSize = big + "rem";
setTimeout(function() {
title.style.fontSize = small + "rem";
}, 1000);
}
h1#title {
font-size: 12.5rem;
letter-spacing: 0;
transition-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<h1 id="title">h1 element</h1>
</body>
</html>
I am trying to identify each element of a v-for directive with a unique ID, so I can access the HTML object with the ID and change its CSS.
Currently, this is my HTML with Vue.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="assets/js/vue#2.6.12/dist/vue.js"></script>
<title>remoteProto</title>
<style type="text/css">
html,
.switch {
white-space: nowrap;
display: inline-block;
padding: 30px;
background-color: rgb(255, 223, 223);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
top: 24px;
right: 194px;
transform: rotate(0deg);
}
.switch.closed {
background-image: url(assets/image/switch-closed.svg);
background-position: 0px 0px;
}
.switch.opened {
background-image: url(assets/image/switch-opened.svg);
background-position: 0px -7.5px;
}
</style>
</head>
<div id="app">
<fieldset style="background-color: rgb(181, 207, 209);">
<h1>simTest server</h1>
<hr>
<div class="circuitplan">
<div v-for="(val, key) in switchObj" v-bind:key="key">
<div>{{ key }}
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened' }" #click="onSwitchClick(key)" ></span>
</div>
</div>
</div>
</fieldset>
</div>
<script>
const app = new Vue({
el: '#app',
data () {
return {
ws: null,
idCount: 1,
url: 'ws://localhost:3000',
switchObj: {
/*'K1': 'opened',
'K2': 'opened',
'K3': 'opened'
*/
},
sentObj: {},
}
},
})
</script>
</html>
How can I change the CSS of this specific ID?
Let's say "key" is named the following: "K1", "K2", "K3", ...
The class is "switch".
I know this is not right but to illustrate what I mean, I would like to have something like this:
switch.K1 {other position than e.g. K2}
switch.K2 {...}
Also, the switch is bound to close and opened, see the CSS.
I guess my syntax of the HTML reveals me being a noob. Anyway, I hope you guys can help me, thank you!
You have two choices :
1- defining an unique for each element then define its style like :
K1{
...
}
K2{
...
}
...
Kn{
...
}
template (key represents KEY1 KEY2 ...):
<div v-for="(val, key,index) in switchObj" v-bind:id="key">
2- to define a data property that contains the style of each element and bind it the element using the key:
url: 'ws://localhost:3000',
style:{
K1:{
color:'red'
},
K2:{
color:'geen'
}
}
in template use inline style binding :
<div v-for="(val, key,index) in switchObj" v-bind:style="style[key]">
So I think my site is responsive so far. Inside my div tag with the id "navResult" I render partial views. The site is responsive to how much data is inside the element. But for some reason when I load a partial view with a chartJS chart the site doesn't respond to the parameters of the chart. Instead, a scroll bar is added like so, "https://ibb.co/ceRenw". I don't believe this has anything to do with MVC, but more with plain HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title MM-3</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/unobtrusive")
#model IEnumerable<RoboticUI.Models.ResultantRead>
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/AutocompleteScript.js"></script>
<script src="~/Scripts/chartJsTrial.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" />
</head>
<body style="font-family:Verdana;">
<div class="container">
<header>
<div class="headerContent">
<p>Robot Gallery</p>
</div>
</header>
<div class="menu-content" style="overflow:auto">
<div class="menu">
<p>#Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p>
</div>
<div id="navResult" class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<footer>Copyright © MMM</footer>
</div>
#RenderBody()
</body>
</html>
external style sheet.
header, footer {
background-color: #68bbff;
height: 5%;
text-align: center;
}
div.headerContent p{
display:inline-block;
}
div.headerContent p.CompanySearchBar{
float:right;
}
div.container {
width: 100%;
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.menu {
float: left;
width: 5%;
text-align: center;
}
.menu-content {
padding-bottom: .2em;
}
.menu a {
border: 2px solid #4CAF50;
border-radius: 15px 100px;
text-align: center;
font-size: 12px;
display:block;
padding:20px;
}
.menu a:hover{
background-color:#4CAF50;
}
.main {
float: left;
width: 95%;
padding: 0 20px;
}
#media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
Code to call the chart
console.log('test');
function getFun() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
animationEnabled: true,
title: {
text: "Simple Column Chart in ASP.NET MVC"
},
subtitles: [
{ text: "Try Resizing the Browser" }
],
data: [
{
type: "column", //change type to bar, line, area, pie, etc
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
//Uncomment below line to add data coming from the controller.
}
]
});
chart.render();
}
and the chart is called inside this partial view.
#{
}
<link rel="stylesheet" type="text/css" href="~/Content/Data.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">getFun();</script>
<div id="chartContainer">
</div>
I believe I fixed my problem by adding style="overflow: -webkit-paged-x;" to each div that holds a chart. But, is was that the right thing to do? Is there another approach. I don't want to have to add style="overflow: -webkit-paged-x;" every single time I create a chart.
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}
I was make Street view containers. I was see that link.
But i cannot see Street view in my browser /Google chrome/
Please teach me my mistake and my error.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>アスタンソーチのGoogle-APIです。</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(32.785473,129.862451);
var panoramaOptions = {
position: fenway,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I had the same problem.
The problem is in the following line at the top
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
when your website is hosted on your own server location, your map page cannot find the css file.
you need to add the following css to your file;
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map-canvas, #map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
or you need to add it to a new file called default.css located at yourwebsitesAddress.com//\maps/documentation/javascript/examples/default.css