I'm trying to apply some effects to a TileList; basicly when i remove an element from the list i want it to dissapear fading out, and when i add an element to the list i want it to appear fading in, quite simple no? well its not, the TileList component only has one effect to play with itemsChangeEffect, don't understand why there isn't a "itemsAddEffect" or "itemsRemoveEffect". So basicly i have created a sequence using filters to apply one fade to the items being added and another to the items being removed. This is my sequence:
<mx:Sequence id="dataChangeEffectSequence" effectStart="trace1(event)" effectEnd="trace2(event)">
<mx:Fade duration="300" alphaFrom="1.0" alphaTo="0.0" perElementOffset="150" filter="removeItem"/>
<mx:Fade duration="300" alphaFrom="0.0" alphaTo="1.0" filter="addItem"/>
</mx:Sequence>
And this is my TileList:
<mx:TileList id="list" dataProvider="{arrPro}" itemRenderer="compIdea.view.Thumb" width="100%" height="100%"
itemClick="product_selected(event)" dragEnabled="true" dragComplete="updateCart()"
itemsChangeEffect="{dataChangeEffectSequence}"/>
The problem is that the fade i apply to the added items does not work, and the items are added to the tileList invisble(Faded out). It makes no sense, the fade doesn't do anything and the only way i have at least made the items appear in the tile list(Not faded out) is by doing this(don't understand why this works):
<mx:Fade duration="300" alphaFrom="1.0" alphaTo="0.0" perElementOffset="150" filter="removeItem"/>
<mx:Parallel>
<mx:RemoveItemAction filter="removeItem"/>
<mx:AddItemAction startDelay="200" filter="addItem"/>
<mx:Fade duration="300" alphaFrom="0.0" alphaTo="1.0" filter="addItem"/>
</mx:Parallel>
</mx:Sequence>
Can someone please help me? i have also tried doing it from actionScript, but it gives me null Pointer and app dies..
Related
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I'm developing an SAP-ui5 XML view. In that view I created dynamic custom tiles using the CustomTile tag, as demonstrated in this image:
<TileContainer
id="container"
height="400px"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<tiles>
<CustomTile id="ct1">
<content>
<VBox>
<Toolbar class="backcolor" design="Transparent">
<Text class="sapMHeader" text="Dynamic content" />
</Toolbar>
<Button type="{infoState}" text="Button"
icon="sap-icon://approvals"
ariaDescribedBy="defaultButtonDescription genericButtonDescription">
</Button>
</VBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
Currently, clicking on the navigate button slides three tiles per click. I want to get it to slide only one tile per click. How do I achieve this?
The TileContainer control is responsive meaning how many tiles you see totally depends on the available screen space and nothing else. The scroll-buttons act as an overflow and slide a complete 'page' just as a Carousel would do. There is no way of changing this behavior via existing API.
If you really want to adapt this behavior TileContainer.prototype.scrollLeft and TileContainer.prototype.scrollRight are probably a good starting point.
BR
Chris
So... Any bright ideas how we can enable Horizontal content stretching on the GroupHeader template of a Grouped ListView in Win RT - phone?
I'm all ears!
I've added a demo application so you can try it out - please do before posting your answer!
Code can be found here https://github.com/Depechie/ListView-HorizontalStretch-RT81
I added 2 pages, MainPage has the problem of not having Horizontal stretching.
MainPage2 has a fix for Horizontal stretching, but because of that fix, the JumpList ( zoomed out view ) is not working anymore.
You can navigate from MainPage to MainPage2 through the appbar button.
Here the 2 visuals
Your fix is overly complicated and deprecated. What you need for your group header style is as simple as the following:
<Style x:Key="FixedHeaderContainerStyle"
TargetType="ListViewBaseHeaderItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
And apply it to your ListView like so (old ContainerStyle is deprecated and replaced with HeaderContainerStyle):
<GroupStyle HidesIfEmpty="True"
HeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
HeaderContainerStyle="{StaticResource FixedHeaderContainerStyle}" />
BUT the header fix wasn't the reason why your ZoomedOutView stopped working. The issue is because you added the following to MainPage2:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
VirtualizingStackPanel breaks this and the new and improved panel (that includes virtualization is ItemsStackPanel, which is also the default now so omit this altogether.
If I understand the problem, add Width="{Binding ElementName=LayoutRoot, Path=ActualWidth}" to your MobileAppsGroupHeaderBorder on MainPage. That'll render as full width like MainPage2 but the jump list functionality is maintained as normal.
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.