I am building my site using MaterializeCSS (http://materializecss.com/)
I am wondering how can I trigger the Wave/Ripple effect manually to certain control , for example:
"Trigger the wave/ripple effect of certain button."
The MaterializeCSS team stands that they use a port of the "Waves.js" javascript library (http://fian.my.id/Waves/) , but when I try to use the commands, errors appear in the browser console.
Can someone point me out here?
Code used as example:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<title>My website title</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
Waves.ripple('#but_1');
});
</script>
<a id="but_1" class="waves-effect waves-light btn">button</a>
</body>
</html>
According to the MaterializeCSS TEAM ...
"Waves is an external library that we've included in Materialize to
allow us to create the ink effect outlined in Material Design"
... and according to Waves docs ....
Waves.ripple(elements, options) Create a ripple effect in HTML element
programmaticaly.
(http://fian.my.id/Waves/#api)
So in the Browser Console I get this error:
Uncaught TypeError: Waves.ripple is not a function
I found a Solution !!!
Steps:
Download the latest version of Waves.js , link https://github.com/fians/Waves/releases
Open the file named "materialize.js" from the materializeCSS files
Once opened, try to find the section that starts with something like ...
;/*!
* Waves v0.6.4
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
;(function(window) {
'use strict';
var Waves = Waves || {};
var $$ = document.querySelectorAll.bind(document);
// Find exact position of element
function isWindow(obj) {
return obj !== null && obj === obj.window;
}
That section belongs to the Waves library embedded inside materializeCSS .... Replace all that section of code with the new code of Waves.js .... how? .... COPY the code of the latest version of Waves.js, and replace (PASTE) inside the Waves SECTION inside materialize.js
Now ... inside your HTML file you should have something like this (check the comments)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--ADD the CSS from materializeCSS -->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- Add the file "materialize.js" ... the one you just modified -->
<script type="text/javascript" src="js/materialize.js"></script>
<!-- Add the CSS from Waves.js -->
<link type="text/css" rel="stylesheet" href="waves/waves.css" media="screen,projection"/>
<!-- DO NOT ADD the Waves.js
<script type="text/javascript" src="wave/waves.js"></script>
-->
<title>Your site</title>
</head>
<body>
<script type="text/javascript">
function clickbut() {
//Now you can use the Waves.ripple function!!!
Waves.ripple('#but_1');
};
$(document).ready(function() {
//Initialize the Waves module
Waves.init()
});
</script>
<h2 class="left-align"><i class="left-align medium material-icons">touch_app</i>My website Header</h2>
<button onclick="clickbut()">click me</button>
<a class="waves-effect waves-light btn ">button</a>
<a id="but_1" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
</body>
</html>
If you click the "click me" button ... the ripple effec will be played in the #but_1 button
I have always added waves-effect as a class to the button. It triggers on the button click.
<a class="waves-effect waves-light btn">button</a>
This is from the first button example on the materialize css website.
Buttons on MaterializeCSS
If it says the Waves.ripple function does not exist, try bringing in the Waves.js script from a CDN.
None of the above answers worked for me. Played around with this and managed to get it to trigger using the following
Waves.attach('#refresh', ['waves-light']);
Waves.ripple('#refresh');
Related
Hi while learning html and css I got the idea of adding an scroll to top arrow to my page, I found an solution and adapted it to my project, but the javascript part is not working as I thought and I really don't know how to fix this.
I have following html-code for the arrow:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#200;300;400&display=swap" rel="stylesheet">
<!-- Scripts for Webfonts and Icons -->
<script src="https://kit.fontawesome.com/9dfc4870d4.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- custom js-->
<script type="text/javascript" src="./js/script.js"></script>
</head>
<body>
<i class="fas fa-chevron-up"></i>
//more elements...
</body>
</html>
and this is the javascript code which is located in the script.js file
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
The fadeIn/fadeOut functions are executed correctly on my page but when I click the link nothing is happening or at least it's not jumping to the top of the page.
But if I use the internal script-element to place the code at the end of the body section of my html file it does all work correctly, but why isn't the click working as intended if I place this code in a external file is it because of loading order in the html file?
You can use the defer attribute on your script to defer execution until the body loads:
<script type="text/javascript" src="./js/script.js" defer></script>
I'm a beginner creating an app through jQuery Mobile, i am trying to incorporate a custom theme through theme roller and it prompted me to use these lines of code:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
I have already put the themes folder in the apps folder however I am trying to figure out how to include these lines within this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
All while not changing the layout and current look. The end goal is to figure out how to change the background and button colors on my app. Thank you!
Currently I am working on a project and I need to access various different libraries, but the problem is that I am very stuck. My program is a web based application which uses ethereum blockchain (ganache, truffle, metamask). I am trying for example to access the library web3-eth-accounts through a JavaScript file which I access with the press of a button in my website, but all that happens is this:
Uncaught Error: Cannot find module 'web3-eth-accounts'
at o (web3.min.js:1)
at o (web3.min.js:1)
at Object.init (Test.js:4)
at HTMLButtonElement.onclick (statePrototype.html:26)
JavaScript:
Test = {
init : function () {
var Web3EthAccounts = require('web3-eth-accounts');
var account = new Web3EthAccounts('ws://localhost:7545');
}
}
All of the libraries including web3-eth-accounts are in the node-modules folder.
Here is an image of all of the files
<!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">
<title>Certificate System</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Pagrindinis htmlo kodas -->
<h1>Student State Prototype</h1>
<button onclick="App.render()">Show Student State</button>
<p id = "StatePrint"></p>
<button onclick="App.fail()">Make Student Fail</button>
<button onclick="App.complete()">Make Student Complete the Course</button>
<button onclick="Test.init()">Test</button>
<hr />
<form action="index.html">
<button class="pageSwitch" type="submit">Back to HOMEPAGE</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
<script src = "js/Test.js"></script>
</body>
</html>
All you did was instantiate it, you never created an account. You have to call
account.create();
from the docs here: https://www.npmjs.com/package/web3-eth-accounts
I am trying to build a new application using Blazor and I am facing a weird issue. The "onload" jquery scripts are not applied even though the breakpoint is fired.
Let's take an example, here is my setup:
_Host.cshtml:
#page "/"
#namespace DentalOffice.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Dento - Dentist & Medical HTML Template">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DentalOffice</title>
<!-- Favicon -->
<link rel="icon" href="./img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<!-- jQuery js -->
<script src="/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="/js/dento.bundle.js"></script>
<!-- Active js -->
<script src="/js/default-assets/active.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Index.razor:
#page "/"
<!-- Preloader -->
<div id="preloader">
<div class="preload-content">
<div id="dento-load"></div>
</div>
</div>
active.js:
(function($) {
var dento_window = $(window);
// *******************************
// :: 1.0 Preloader Active Code
// *******************************
dento_window.on('load', function() {
$('#preloader').fadeOut('1000', function() {
$(this).remove();
});
});
})(jQuery);
If I run this page as plain HTML it works as expected and the loader disappears. Inside Blazor component is behaving very strange. If I set a breakpoint in active.js on line: $(this).remove();, the breakpoint is hit but the change is not updated on the UI (the preloader is not removed).
However, if I manually trigger remove from the console like this ($('#preloader').remove()), it works.
What could be wrong here?
I have an issue that's driving me bonkers.
Im using a _Layout.cshtml file with Scripts rending on top.
from _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- CSS Start -->
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<!-- CSS End -->
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Javascript Start -->
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/customJS.js"></script>
<!-- Javascript End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
All scripts works like a charm, except one thing. I'm using a code in a webgrid that displays data on hover using popover()
from customJS.js
$(function () {
$('[data-toggle="popover"]').popover()
})
Every thing work well, untill i use webgrid paging or sorting, then the code breaks an i need to reload the page to make it work. Now to the kicker, if i place all scripts on the bottom the popover works while paging and sorting but my jquery-ui dialogs breaks and won't display, plus i get jquery undefined errors.
I have spent some time now searching and trying different solutions with no correct result in sight. What am i doing wrong?
Here is the code for the popover call also
FileGrid.Column("Description", style: "width-20", format: #<button role="button" tabindex="0" class="btn btn-success btn-block" data-toggle="popover" title="File Information" data-content="#item.Description" data-trigger="focus"><i class="fa fa-book"></i> View file Description</button>),