I'm developing a space based environment in Rails 4 and want to play a small sound file every time a key is pressed while the user is filling out a form. In other words, every keystroke would make a small clicking sound while typing.
I'm also looking to have this solution hosted remotely possibly in the assets folder, so the user does not have to install some third party application or software to make it happen.
Is this even possible with rails? Or, what other frameworks/libraries/technologies would I need to incorporate to accomplish this with Rails, and any examples or links to examples would be appreciated. Thanks.
<!-- Sound Manager -->
<link rel="stylesheet" type="text/css" href="/soundman/demo/360-player/360player.css" />
<link rel="stylesheet" type="text/css" href="/soundman/demo/flashblock/flashblock.css" />
<!--[if IE]><script type="text/javascript" src="/soundman/demo/360-player/script/excanvas.js"></script><![endif]-->
<!-- I'm not certain which of the following .js includes are actually required, I included them all and it works, however, some of these includes may not be necessary for the most basic of implementations. Please update if you find the minimal required includes -->
<script type="text/javascript" src="/soundman/demo/360-player/script/berniecode-animator.js"></script>
<script type="text/javascript" src="/soundman/script/soundmanager2.js"></script>
<script type="text/javascript" src="/soundman/demo/360-player/script/360player.js"></script>
<script type="text/javascript">soundManager.setup({url: '/soundman/swf/'});</script>
<script type="text/javascript">
function hoverCategory() {
soundManager.setup({
url: '/soundman/demo/_mp3/hover01.wav',
onready: function() {
var mySound = soundManager.createSound({
id: "a2", // <----------- Make this unique or you might run into conflicts
url: '/soundman/demo/_mp3/hover01.wav' // <------- mp3's work as well
});
mySound.play(); // <------------- lots of cool options on mySound, play() being just one of them
},
ontimeout: function() {
}
});
}
</script>
<!-- Onclick -->
<%= f.check_box :radial, :onclick => "Javascript:hoverCategory()" %>
<!-- Onmouseover -->
<%= f.submit :onmouseover => "Javascript:hoverCategory()" %>
<!-- Onkeypress -->
<%= f.text_field :status, :onkeypress => "Javascript:hoverCategory()" %>
Related
Ich want to call a JavaScript function within the application.html.erb. The function is imported and provided in the application.js:
import myFunction from 'myJSModule';
window.myFunction = myFunction;
I am using turbolinks and vite_rails and it seems like the JS function is called before the application.js is loaded and it is undefined.
Example:
application.html.erb
<html>
<head>
<script type="text/javascript">
</script>
<%= vite_javascript_tag "application", 'data-turbolinks-track': "reload" %>
<%= render "layouts/partial" %> # here I call the window.myFunction
</head>
<body></body>
</html>
layouts/_partial.html.erb
<script>
window.myFunction
</script>
Behaviour:
window.myFunction is undefined.
When I try to call the function in the console, after the side is loaded, then it is defined.
Also when I wait for the turbolinks:load event:
document.addEventListener("turbolinks:load", function() { window.myFunction }
The Problem with the event is, that it is triggered every navigation event, but I want to call the function only when the partial is re-rendered.
I recently migrated from webpack to vite. For webpack the solution seemed to be to move the render partial below the java_script_tag. Unfortunately, this does not work with with vite.
I could find a solution. Appending the attribute type of the script with module:
<script type="module">
window.myFunction
</script>
i am trying to render a page with two textbox and login button in react js with Asp.net MVc as follows but only image is rendering nothing else rendering.
in
index.cshtml
inside head section css rendered
and in body section react cdn and reactjs file has been added
#{
Layout = null;
}
<html>
<head>
</head>
<body>
<div class="wrapper" id="signup"></div>
<link href="Assets/Css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Assets/JS/jquery.min.js" type="text/javascript"></script>
<script src="~/Assets/JS/react.js"></script>
<script src="~/Assets/JS/react-dom.js"></script>
<script src="~/Assets/JS/remarkable.min.js"></script>
<script type="text/jsx" src="#Url.Content("~/Assets/JS/login.jsx")"></script>
</body>
<!-- Core JS Files -->
<script src="~/Assets/JS/jquery.min.js" type="text/javascript"></script>
</html>
login.jsx
class NameForm extends React.Component {
constructor(props) {
render() {
return (
<form onSubmit={this.handleSubmit}>
</form>
);
}
}
ReactDOM.render(<NameForm />,document.getElementById('signup'));
All design part mentioned but while declaring class the error
"JSX:Parser Unable to communicate with jsx parser". Error is occuring..So Any idea how to create login form in react js using asp.net mvc. would be appreciated
I use tablesorter in combination with jquerycsvtotable.
Everything works fine, but... there's a lag between the moment when the table is loaded and the moment when tablesorter is shown that makes the data appear without any formatting on the screen. The time varies on the amount of data, between 2 and say 5 seconds.
Is there any way to show a "loading" gif or just nothing untill all the process is completed to avoid showing ugly data?
Thanks!
PS: I don't mean the time tablesorter takes to re-order rows when you click on a certain header cell, which I know is already arranged with optional processing gifs shown into the header...
EDIT: please find below my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/js/ts/css/theme.default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/ts/js/jquery.tablesorter.widgets.min.js"></script>
<script type="text/javascript" src="/js/csv/js/jquery.csvToTable.js"></script>
<script>
$(function() {
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
.bind("loadComplete",function(){
var footer = mytable.find('tr:last');
mytable
.find('thead').after( footer.wrap('<tfoot/>').parent() ).end()
.tablesorter({
sortList: [[5,0]],
widthFixed : true,
widgets: ["zebra", "filter", "stickyHeaders"],
widgetOptions: {filter_hideFilters : true}
});
});
});
</script>
</head>
<body>
<p>
<a href=../../>Home</a> <a href=../>30</a> <a href=./>0000</a><br>
2013-04-15 12:45:17
</p>
<div>
<table id="tabla1" class="tablesorter">
</div>
</table>
</body>
</html>
I wonder if the solution is as easy as just adding the "tablesorter" class name to the table. If you are using a theme other than default, that theme name should also be included:
var mytable = $('#tabla1')
.CSVToTable('/est/data/cli_30_0000.txt',{
tableClass: 'tablesorter tablesorter-default', // adjust theme name here
loadingImage: '/js/csv/images/loading.gif',
separator: ";"
})
First i got the error while validating my code in Sortsite as "Document type does not allow element "Style" here." So i removed style portion and kept in a new css sheet.
After that while validating, i got "Document type does not allow element "link" here." error.
here is the code:
<%#taglib prefix="s" uri="/struts-tags" %>
<%#taglib prefix="d" uri="/dror-tags" %>
<link href="<s:url value='/styles/menu.css' includeParams="none"/>"
rel="stylesheet" type="text/css" media="all"/>
<!-- Action URLs -->
<s:url id="dppUrl" namespace="/xyz" action="abc" includeParams="none"/>
<s:url id="dppUrl" namespace="/xyz" action="abc" includeParams="none"/>
<d:button value="Menu" submenuId="mainSubmenu" cssStyle="float: left;"/>
<div dojoType="dror:PopupMenu2" widgetId="mainSubmenu" submenuOverlap="0">
<div dojoType="dror:MenuItem2"
caption="xyz"
onclick="try { window.location = '${xyzUrl}'; } catch (e) { };">
</div>
</div>
Please help me in solving this issue.
The only valid location for that <link> tag in a HTML document is between the <head> and </head> tags. You're getting that error because that's not the case in your code.
From the HTML spec:
If the rel attribute is used, the element is restricted to the head element.
Hey. Imagine i have two separate gsp pages with diferent css formatting (with name conflicts between two). And i want to "display" or render one page with its ows formatation inside a div in the other page. Imagining this scenario:
page1.gsp
...
...
<div id="here"></div>
...
...
page2.gsp
Hello there!
I want my final page to be:
...
...
Hello there!
...
...
Is it possible to do that?
Yes use the g:render tag and create a "fragment" page to contain your content.
then use the g:render tag to pull it in.
Refer to the documentation or tutorials for more detail on this.
This is very similar to a question I posted a couple of days ago:
Can I display an inner dive with an independent stylesheet?
Is this something you want to work for every page? (Like a layout?)
If that is the case, use SiteMesh (built in already)
{app}/grails-app/views/layouts/mylayout.gsp
<html>
<head>
<g:layoutTitle default="My Application" />
<link rel="stylesheet" href="${resource(dir:'css',file:'layout.css')}" />
<g:layoutHead />
</head>
<body>
<div id="here"><g:layoutBody /></div>
</body>
</html>
{app}/grails-app/views/{somefolder}/page1.gsp
<html>
<head>
<meta name="layout" content="mylayout" />
<link rel="stylesheet" href="${resource(dir:'css',file:'page1.css')}" />
</head>
<body>
Hello There!!!!
</body>
</html>
If you already have that, and are just looking at breaking up you pages and keeping them DRY..
{app}/grails-app/views/{somefolder}/page1.gsp
<html>
<head>
<meta name="layout" content="yourLayout" />
<link rel="stylesheet" href="${resource(dir:'css',file:'page1.css')}" />
</head>
<body>
<div id="here2"><g:render template="page2" model="[foo:'bar']"/></div>
</body>
</html>
* The Model property of render is optional, but works for passing data to the template to be rendered
{app}/grails-app/views/{somefolder}/_page2.gsp
* Notice the "_" before the gsp name. (Convention for Template pages)
Hello There
Checkout the documentation for render and templating