I am trying to apply material design ripple effect to a button but on the browser I see no ripple effect applied to the button,
The code that is using the ripple is,
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
I have tried the below but none of them work,
mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));
I am not using node for bundling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="masterCSS.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js">
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
mdc.autoInit();
MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work
const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
</script>
</head>
<body>
<div class="header">
</div>
<button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>
</body>
</html>
The button doesn't exist at the time that the script runs.
Wrapping your script on a window.addEventListener('load', function(){ [...] }) is the first step to fix it.
Second, you have a <script> with a src attribute and then with code.
You can't mix both.
Just write a <script src="..."></script> and then open a new <script> with the inline code.
Note: this answer assumes that all files loaded properly.
Add matRipple in button tag and import MatRippleModule,
You also change the MatRippleColor
eg:
<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
Related
I've been searching for a while, and I found that I can send a value from doGet to html created.
But I want to do smth different, I want to have a button and label where where every time I press on that button it increments the label.
something like a counter for pressing that button.
I already has the HTML that renders button and label it's pretty simple
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('stylesheet'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDP Test</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function incrementCounter() {}
</script>
</head>
<body>
<label> Counter 0 </label>
<button onClick="incrementCounter"> Increment counter</button>
</body>
</html>
I want to link the incrementCounter function to this label, or whatever html element that can be done that whenever the button is pressed it gets incremented and rendered on the screen
can someone guide me to go through this ?
You have some errors in your code. Firstly it should be onclick not onClick and the function should be called as onclick="incrementCounter()".
Secondly, a label should be used with a input, textarea or select element.
Now coming to the code
HTML
<p>Count: <span id="counter">0<span></p>
<button onclick="incrementCounter()">Increment Counter</button>
JS
function incrementCounter() {
const counterElem = document.querySelector('#counter'),
count = +counterElem.innerHTML;
counterElem.innerHTML = count+1;
}
What is happening inside the code is I'm selecting the target element where the count would display. Then I'm getting the value of its innerHTML and parsing it as an integer using + before the counterElem.innerHTML. Then I'm adding 1 to the value and setting it as the innerHTML
I've tried every combination that was given in the answers throughout the different sites.
Here's my code.
<div class="circular" v-bind:style="{ 'background-image': 'url(' + require('../assets/kafa.jpg') + ')' }"></div>
The problem is (I think) that path is good, and image is found, it just won't show on the background (or anywhere for that matter).
And here is the image of the page and Inspect Elements
Thanks.
Okay, so I found the problem. I closed the tag in the same line, instead of wrapping whole template in that div.
According to vue documentation:
https://v2.vuejs.org/v2/guide/class-and-style.html
in the section of “Binding Inline Styles” and “Object Syntax” it describes that you could define peroperty-values of styles in the “data” part of “vue instance”. This is what I was doing for implementing that:
new Vue ({
el: "#app",
data: {
activeColor: "red",
backImg: 'url("galaxy.jpg")'
}
});
.circular {
min-height: 1080px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="circular" v-bind:style="{color: activeColor, backgroundImage: backImg}"> texts to show styles</div>
</div>
<script src="vue.js"></script>
<script src="myScript.js"></script>
</body>
</html>
I used the “camelCase” format and the image is something different, you can substitute your own “url” in the “data” part of “vue instance” in the script code. I could not upload my used image, but you could test your own image.
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
I'm stuck on something very simple and can't seem to figure out what I'm doing wrong. I've created a blank project in ionic and would like to set a default home screen as the first view loaded. I'm staring at a blank screen when I run this in the browser.
My code is as follows:
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home_screen', {
url:'/',
templateUrl: 'home_screen.html'
})
})
home_screen.html
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Home Screen</h1>
</ion-header-bar>
<ion-content>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<button class="button button-block button-balanced">Play</button>
</div>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<a class="button button-outline button-block button-balanced" href="#/app/about">About</a>
</div>
</ion-content>
</ion-pane>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
home_screen.html will work just fine when I include it in the index.html but does not work when I try to set it as the default view. I tried following the tutorial from here:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
Any help would be appreciated.
Actually you have to uncomment the ion-nav-view in your index.html file. You don't have to give that a name even. Try to add this in your index.html file:
...
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
...
To get started with ionic I also recommend to look at other starter projects like tabs or sidemenu which are described here.
Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;