By reading the question, you are probably already thinking; Just use plain JavaScript and add:
document.getElementById('yourId').classList.add('hide');
.hide {
display: none;
}
I added similar code to my program, and I am not getting any results.
Here is a codepen for the project I'm making.
Program View: https://codepen.io/dickeddocks/full/gKNMLW
Editor View: https://codepen.io/dickeddocks/pen/gKNMLW
If you just play the game and keep clicking "attack" till the round ends, you will get an alert and the log at the bottom will disappear. If you click "attack" again, another round starts but the log from the last round reappears.
My solution to fixing this was to add an id to each <li> element and the id would change after the round reset.
Then, I tried adding these two solutions to the function which would reset the app. ('#log0' being the id I chose to give to all the list elements generated in the first round. Then, a counter variable would run making all the list elements from the next round '#log1' -> '#log2' and so on).
document.getElementById('log0').classList.add('hideLog');
document.getElementById('log0').style.display = "none";
.hideLog {
display: none;
}
But for some reason all <li> items with #log0 keep appearing
P.S I dont want anyone to read all the code in the codepen, if you know a simple solution off the top of your mind, I'll happily take that.
Update: Ive even tried using Jquery's .addClass and still no results.
Related
I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the #filter callback.
I have currently two problems:
Whenever I click outside of the input field the input text is lost and the popup disappears.
If I click on the input the current text remains, but the pop is hidden until I click on it again.
For the latter issue, one workaround is to force the popup to show upon click:
<q-select
ref="input"
...
#click.native.prevent="onClick"
>
...
onClick(){
if( this.searchFilter.length > 0){
this.$refs.input.showPopup()
}
}
However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using #click.native.stop instead of #click.native.prevent to no avail.
As for issue number 1 I haven't even found a workaround yet.
Here is a related issue, though the popup disappearing was a wanted behavior in his case.
I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.
The trick was to use #click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here
I have a straightforward XPage that lets a user answer a question with a simple Yes/No/NA response using radio buttons. I have restyled the radio buttons to look like a bootstrap button group to make it visually more interesting for the user. If the user chooses "Fail" then they are informed that they need to do something else - easily done with a simple partial refresh to a div further down the page.
This all works fine.
The problem I'm having is that I'd like it so that when the user selects an option, I would like to add a new class of "active" to the selected option so that it highlights in a pretty colour. But for the life of me I can't get this to work and though I'm sure it's a straight forward problem, I can no longer see the wood for the trees.
My current (abridged) iteration of the radio button code is this:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass"
styleClass="btn btn-pass #{(item.itemResult eq '0')?'active':''}" groupName="itemResult"
selectedValue="1">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[XSP.partialRefreshPost('#{id:edit-result}');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- other radio buttons -->
</xp:div>
<!-- other page compenents -->
<xp:panel id="actionAlert">
<!-- panel content and appropriate rendered value -->
</xp:panel>
This was attempting to do a chained partial refresh on the radio button container so that the EL would evaluate and apply/remove the 'active' style based on the document datasource ('item') value. I have also tried using dojo.addClass, dojo.removeClass, XSP.partialRefreshGet and other options. I don't mind what the solution is as long as it's efficient and works. I'd prefer not to move the actionAlert panel to within the same container as the radio buttons and I can't do a full page refresh because there are other fields which will lose their values.
Some notes:
I'm not using a RadioGroup control because it outputs a table and I haven't got around to writing my own renderer for it yet. Single Radio button controls work fine for what I need them to do.
I originally tried using the full Bootstrap solution of using "data-toggle='buttons'" (source) which sorts out applying the "active" style fine but then, inevitably, prevents the partial refresh from working.
the radio button styles are clearly not Bootstrap standard
Any assistance pointers or, preferably, working solutions would be appreciated.
You need to aim your partial refresh at the div containing all your radio buttons. Give it an id, so you can address it.
Partial refresh, as the name implies, refreshes one element and its content only. So you target the element that covers all of the items you need to recompute.
Stepping away from the problem, a couple of beers and an episode of iZombie later, I realized what I was doing wrong and sorted it out. So, for posterity, here is the simple solution that I swear I tried earlier but clearly works now:
<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">
<xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
<xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
dojo.query('.btn-pass').addClass('active');]]></xp:this.script>
</xp:eventHandler>
</xp:radio>
<!-- et cetera -->
The many places I was going wrong:
In my code in the question, I was calling XSP.partialRefreshPost in the CSJS script of the radio button when it should have been in the onComplete of the eventHandler. It has to be chained to another partial refresh so that it runs after it, not at the same time. I did end up getting this right - but overlooked something I'll come to in point 3.
In my original attempt to use Dojo, my first mistake was to try and target the ID of the radio button, something like:
dojo.addClass(dojo.byId('#{id:radio2}'),'active');
This actually works as expected, so long as you remember that the ID of the radio button on the XPage refers to the actual radio button control and not the label wrapping; and the label is what I wanted to style. So the class "active" was being actually being added, just not to the element I thought it was. I should have spotted this in my browser code inspector except for the third thing I got wrong:
Ironically, I sorted out the first issue, remembering to put the XSP.partialRefreshPost into the onComplete - and then didn't remove it when trying to run the Dojo.addClass(). So I didn't notice the mistake with the addClass targeting the wrong element because after it ran, the partial refresh updated the container and removed the class I had just added which made me think that nothing was working.
So now I have some neatly styled radio buttons that don't look like radio buttons and it's all managed client side without any unnecessary partial refresh trips to the server barring the one where I actually need to look stuff up from the server. And the vital lesson is - sometimes you just need to step away from a problem and come back to it with fresh eyes later on.
First, im not really experienced with javascript or jquery, usually the plugins or very very simple code by hand (as you are about to see).
Wat i want is done many times, but for some reason i cannot get it to work like i would.
I have several problems.
I use the .animation to slide 2 divs in and out (2 divs next to each other, and i want them to slide in and out of the screen (like the iphone homescreen for example).
Now the problem is the animation does not work as intended, instead of sliding away div1 WHILE sliding in div2 along side of div1, div1 disapears/shrinks (sliding up and left) instead of "sliding outside of the screen" and then div2 shows up afterwards. (so the slide effect is not working and the divs hide and show seperatly instead of sliding like a iphone screen).
Now the thing is i have recreated the setup and tried on there, and it works as intended as shown here: http://jsfiddle.net/dkeulen/2fHbz/
So that is how i want it to work, but it does not do so as show here: (NOTE: its work in progress) http://jsfiddle.net/dkeulen/gQ9aE/2/
(Black square on the right center is the button you need to click).
I could post all the html and css and jquery here but its quite the amount to post...
If anything els is needed i can provide it ofcourse.
As code this is the part i use for the sliding:
$('.btnr').click(function(){
$('#hosting').animate({'width' : '0px'}, 100).hide(600);
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
$('.btnl').click(function(){
$('#hosting').animate({'width' : '100%'}, 600).show(400);
$('#inexchange').animate({'width' : '0px'}, 600).hide(600);
$('.btnl').fadeOut(600);
$('.btnr').fadeIn(600);
});
I hope anyone can help me out on what goes wrong and what i must do about it, thanks in advance!.
it's better to specify a jsfiddle for us to see it in action
I think your problem is that the hide() and show() doesn't stack in the same animation queue
so one way of solving this is using promise ex.
$('.btnr').click(function(){
promise1 = $('#hosting').animate({'width' : '0px'}, 100).promise();
$.when(promise1).then(
function(){
$('#hosting').hide();
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
});
the same goes for the other button.
check this simple fiddle I made to demonstrate how it's working
http://jsfiddle.net/artmees/BCTxH/
In a Win 8 / WinJS / StoreApp - What is the recommended way to make a modal dialog that has a listview where users can select items?
For example, say I have a page with a to do list (listview). There is an app bar with a button that should open some kind of dialog from which the user can select items from previous days displayed in a listview.
I looked at the MessageDialog, but that doesn't seem to let you have a listview (or any content) inside the MessageDialog.
The other option seems to be the Flyout Control, but I haven't found a way to make it modal. Any other options?
What I would like is something like the Bing Finance application when you add a security to the watchlist. That control seems to be a MessageDialog where you can have other controls nested inside.
Thanks for any help!
If your app cannot continue without the user input then a modal dialog is appropriate. It's often times better, however, to design your user input such that the input is not absolutely required. This allows you to give the user the ability to "light dismiss" the dialog (touch anywhere outside it to make it go away).
I highly suggest the latter. In classic user input scenarios, the user was asked for a bunch of stuff at once and they felt locked in until they got it all just right. In a more modern scenario, a user is allowed to create a new widget in one touch. The widget is created with a number of defaults and the user can then go fill in the important data. Obviously the widget is not ready for "submission" (whatever that might mean in your app) until all of the required data is on it, but a user feels better being able to drop out of input mode to do some more research or whatever it might take.
So, I suggest you use a flyout for the interaction you've mentioned. If the user clicks to fly it out and then touches outside, it just disappears. If you must make it modal for some reason, then I suggest creating your own custom MessageDialog. That would really just be a matter of creating a full screen grid with three rows. The top and bottom rows would be black with partial opacity and the middle row would be your dialog. The black rows would effectively dim the background and indicate to the user that this is modal and they must respond with user input and/or a command button to dismiss it.
Hope that helps.
You can find me online at codefoster.com
Have a look at free app codeSHOW for learning Windows 8 development
I personally haven't felt very comfortable with the inline data collection flyouts. I have decided to build my own modal controls with my own grid structure layout and design.
One thing to note is if you go the custom route you will want to use data-win-options to set the placement of your modal otherwise you will get some odd keyboard behaviors with the flyout keyboard.
As a UX designer, by trade I'm carefully evaluating each of the controls and determining what works best in each scenario. Like Jeremy said above (love the show). I started by identifying how much information I intend to collect and does collecting this information on another screen interrupt my flow. So a "locked" modal which can be dismissed from a button or taping outside the modal appears to be the best approach.
<style>
.customModal
width:500px
height:375px;
display: -ms-grid;
-ms-grid-columns: 100px 1fr 100px;
-ms-grid-rows: 100px 1fr 100px;
}
.CustomModalGridTitle {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}
.CustomModalGridContent {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}
etc.....
</style>
<div class="customModal" id="customModal" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement : bottom;}" >
<div class=customModalGrid>
<div class="CustomModalGridTitle"></div>
<div class="CustomModalGridContent"></div>
<div class="CustomModalGridButtons"></div>
</div>
</div>
Then I would use the grid layout tool on MS to help you construct your display grid and make it a bit more reusable: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm
That's the approach I have taken:). Y ou will of course need to setup your event listeners in your js to fire the customModal. Somewhere in your ready in yourpage.js
// Show the flyout
function showFormatTextFlyout() {
var myCustomModal = document.getElementById("formatTextButton");
document.getElementById("#customModal").winControl.show(myCustomModal);
}
// You may want the
If you have an outer div you can set it to 100% width and essentially mimic the Dialog control for user authentication.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});