Hi … How can I remove image when I clicked on the image ? here in my code I used remove function in javascript but I’m not sure about it because it is not working.
Here is one way to do it:
<WhileFalse ux:Name="hideImage">
<Panel>
<Image File.....>
<Clicked>
<Toggle Targetr="hideImage" />
</Clicked>
</Panel>
</WhileFalse>
This is using a WhileFalse trigger to conditionally show the image (which it will by default). Then in a clicked trigger we toggle its value, which will result in the image being unrooted.
The image hide works but when I tried to click the button again to have another image it is not appeared in the second time.
I will explain more, first when the user clicks on the image called “Friends Card1” there are many cards on the assets folder on of them will appear randomly on the page ( this part works and I don’t have any problem)
1-
2- function showcard() { card.value = “Users/rashaalnuwaiser/Desktop/Jalsah/Assets/test”+Math.floor(Math.random() *10)+".png";};
3-
Second: here is my problem - when the user clicked on the image that appeared randomly I want it to be removed or hide from the page UI and when the user clicked again on the “Friends Card1” it should one of the cards appear randomly again…
Hi!
I’ve attached an example doing what you asked for (assuming i understood you correctly :))
I hope this helps!
I think there is misunderstanding. I will explain more …
When the user clicked on the button one image will appear … when he clicked on the image that appeared I want it to be hiding I used what you gave me and it workes but my problem when I pressed the button again there is no image appeared in the second time …
Kristian Hasselknippe wrote:
Here is one way to do it:
<WhileFalse ux:Name="hideImage"> <Panel> <Image File.....> <Clicked> <Toggle Targetr="hideImage" /> </Clicked> </Panel> </WhileFalse>This is using a WhileFalse trigger to conditionally show the image (which it will by default). Then in a clicked trigger we toggle its value, which will result in the image being unrooted.
Sorry but i still do not really understand what you are trying to achieve. What was not correct about the code i posted?
It is correct but when I pressed the button again to have new image it is not apeared in the second time …
When the user clicked on the button one image will appear … when he clicked on the image that appeared I want it to be hiding I used what you gave me and it workes but my problem when I pressed the button again there is no image appeared in the second time …
You have to re-toggle hideImage in order to make it visible again.
You can either do this by including a <Toggle> action that is triggered when you click the button or you can bind the value of the <WhileFalse> to a variable in javascript and control it from there (e.g. set it to true from the showCard function).
Thank you Remi for your response, can you explain more please ?
For the first approach I mentioned:
<Panel>
<WhileFalse ux:Name="hideImage">
<Image File="{card}">
<Clicked>
<!-- hide the image -->
<Set hideImage.Value="True"/>
</Clicked>
</Image>
</WhileFalse>
</Panel>
<Button>
<Clicked>
<!-- show the image -->
<Set hideImage.Value="False"/>
</Clicked>
</Button>
Here I’ve used <Set> instead of <Toggle> to make it easier to see which click does what (but <Toggle> would of course also work).
For the second approach you could instead do something like this:
<JavaScript>
var Observable = require("FuseJS/Observable");
imgVisible = Observable(false);
function showCard(){
imgVisible.value = true;
}
module.exports = {showCard: showCard, imgVisible: imgVisible};
</JavaScript>
<Panel>
<WhileTrue ux:Name="showImage" Value="{imgVisible}">
<Image File="{card}">
<Clicked>
<!-- hide the image -->
<Set showImage.Value="false" />
</Clicked>
</Image>
</WhileTrue>
</Panel>
<!-- Show image -->
<Button Clicked="{showCard}"/>
Thank you so much