Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to create a login form and I'm using PixiJs v4 to render everything. It would be ideal to have the login form also in PixiJS as well, instead of using HTML.
How to I create a simple inputbox to capture text?
Create your input box in HTML and have 2 canvases; one with a z-index higher than the input box (for sprites that cover the input box), and one with a lower z-index (for sprites that go behind the input box).
.higher-canvas {
position: absolute;
left: 0px;
top: 0px;
z-index: 99;
}
.lower-canvas {
position: absolute;
left: 0px;
top: 0px;
z-index: -99;
}
If you must absolutely have your input element be a part of the stage, have you taken a look at PIXI.Input? https://github.com/SebastianNette/PIXI.Input
Related
I would like to be able to add picture that always shows at the top part of the screen. I want a bar that stays at the top of it all the time. I do not know how to do it but I believe YouTube has something like it. Except I want it without the content on the side because that is a little annoying.
In order to do this, you have to use absolute positioning. This requires you to use CSS with your HTML (if you are talking about web design).
Here is the CSS
img {
position: fixed;
left: 0px;
top: 0px;
}
Here is the HTML:
<img src="YOURIMAGE.jpg" height="100" width="100">
Not to be disrespectful, but it seems as though you are not familiar with web design. I would recommend looking at W3 schools and try to grasp some of the concepts there before you continue.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Given end users who don't want to inspect the code of D3js visualisations, nor copy-paste, etc.
Given a D3 <svg> element with all shapes and styles within itself (not within any external CSS).
Is there a library/code which allow this end user to click on a button to download the code as a standalone SVG file.
The file should be valid to be opened with Inkscape and other SVG compliant softwares. This allow and empower the end user to fork the file, open it into an SVG editor and make some more advanced designs on it.
Here's a nice way to use svg-crowbar.js to provide a button on your site to allow your users to download your visualization as svg.
0) You need JQuery.
1) Define your button's CSS:
.download {
background: #333;
color: #FFF;
font-weight: 900;
border: 2px solid #B10000;
padding: 4px;
margin:4px;
}
2) Define your button's HTML/JS:
<a
class="download"
href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">
<!--⤋--><big>⇩</big> Download
</a>
Here's a closer look at that javascript:
javascript:(function (){
var e = document.createElement('script');
if (window.location.protocol === 'https:') {
e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js');
} else {
e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js');
}
e.setAttribute('class', 'svg-crowbar');
document.body.appendChild(e);
})();
3) You're done. This produces an svg download that Inkscape can open.
Note: svg-crowbar.js is loaded from https://rawgit.com or http://nytimes.github.com; you may prefer to integrate it into your website/folder.
If you want to do everything on the client, then one option would be to use Javascript to create an HTML blob object using the SVG content, then encode that blob as a data uri associated with a button or <a> tag.
I am just starting with AngularJS, which I know is meant to be an SPA. For the app we are building, all of the pages--except the index page--will have a two-column layout. We'd like the index page, however, to be a one-column, fullwidth page. Is this functionality possible with AngularJS?
I'd suggest posting a plunkr or jsfiddle, since I'm not sure I'm actually answering your question, or if there's more to your question I'm missing.
If you're doing all the pages via routing (ng-view), then just apply classes to differentiate the style for that one-column version. Something like:
.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }
and then in the html (on that firstpage only), wrap everything in div id="firstpage". Don't include that div in the routed pages, and the style will only apply for the first page. Or if you have some other set up, you can always use styles around the ng-view, too:
<div class="classname">
<div ng-view></div>
</div>
If you've got a side-column that's sitting outside your ng-view and that's what you want to turn off/on, then I'd suggest including the class on the first page (to make it go full-width), and at the same time use some kind of logic with ng-hide/ng-show on that first column.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have spent the last few hours trying to figure this out but still no luck...I think I have narrowed it down as something to do with a file permission issue on my host but maybe someone on here would be so kind as to point me in the right direction.
I have exactly the same files loaded onto two different domain, host combinations
http://northern.uwcs.co.uk/ApricotGum
http://apricotgum.co.uk
site a. renders fine but exactly the same files uploaded to site b. render in a very different way breaking most of the sites layout.
some of the problems with site b:
FlexSlider navigation does not work.(edit this is fixed by turning off mod-pagespeed with ?ModPagespeed=off# *)
Variety of layout problems.
Animations on the top logo do not work.
Please note the site is designed for mobile content...
Many thanks
Your CSS are different. In Chrome Dev Tools, there are noticeable differences between styles from W.main.css.pagespeed.cf.4qEnpEHvwU.css and main.css.
E.g. .header in W.main.css.pagespeed.cf.4qEnpEHvwU.css:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
z-index: 2;
}
In main.css:
.header {
position: fixed;
top: 0;
left: 0;
width: 0%;
z-index: 2;
background-color: rgba(0,0,0,0.5);
transition: width 1s ease;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
overflow: hidden;
padding-top: 0.25em;
}
I have a jqGrid that has add/edit dialogs with a form that's longer than the dialog height but the dialog won't scroll. I've tried to add an overflow: auto style to the dialog but no effect:
$("div.ui-jqdialog-content").css("overflow", "auto");
Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:
$("div.ui-jqdialog-content").css("overflow", "scroll");
This at least gives me a small glimmer of hope that I'm on the right track.
There doesn't seem to be any direction from the API documentation to support scrolling:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?
UPDATE
This is a total hack job but I got a scrollbar to appear and function doing the following:
setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);
I attached this to the afterShowForm event. However, this really doesn't solve the problem because it causes other issues with other fields.
I thought I'd share my solution for others to reference.
The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.
I attached a css update to the afterShowForm Form Editing event, using the following code:
afterShowForm: function(form) { form.css("height", "300px"); }
Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.
Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.
Reference link:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:
position: relative; width: 100%; height: auto; overflow: auto;
I just tested one jqGrid with a lot of controls and can scroll there without any problem.
The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.
This question is VERY old, but I'll add an answer anyway.
I don't know if this was possible before, but now you can simply use the dataheight property of the dialog (add or edit), to precisely set the height (in pixels) of the inner form. The default is 'auto', and thus it doesn't overflow. Setting the desired height shows the scroll-bar if necessary.
reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing