Suppose In an App there is a pic of a hand which shows five fingers.
If anybody tap on any one of the finger then suddenly a pop up will come
and some data will be send to the server.
Is this possible with Ionic or meteor especially the tap feature on a picture(not a button) and then a popup?
Update: I figured out that it is possible through d3.js but still how to connect those fingers to dots of d3.
Is there a possibility of such app in Ionic or meteor?
This should be able to be implemented very simply with the use of an image map.
First create your template
<template name="handClick">
<img src="hand.gif" width="xxx" height="xxx" usemap="#handmap">
<map name="planetmap">
<area id="thumb" shape="circle" coords="x,x,x" href="#">
<area id="index" shape="circle" coords="x,x,x" href="#">
<area id="middle" shape="circle" coords="x,x,x" href="#">
<area id="ring" shape="circle" coords="x,x,x" href="#">
<area id="pinky" shape="circle" coords="x,x,x" href="#">
</map>
</template>
Then your event listeners
Template.handClick.events({
"click area": function(e) {
e.preventDefault()
//handle click on any area element in the template
},
"click #thumb": function(e){
e.preventDefault();
//handle click on the #thumb area element
}
});
Related
Below I put a screenshot of some ReactJS code which are buttons that are linked to another part of my website.
I was wondering why this code was not working correctly when I click on it.
<Actions>
<PrimaryButton href="/about" css="">
Start Searching
</PrimaryButton>
<SecondaryButton href="/about">
Learn More
</SecondaryButton>
</Actions>
I tried the above solution and when I clicked the button, it did nothing.
You can use a tag to open an another page. You can use target _blank to open in a new tab or you can use _self to open the same tab.
<a className="your classname" target="_blank" rel="noopener noreferrer" href="/about"
Start Searching
/>
is there any way to have img and Icon Corner Icon using Semantic Ui. so i need to have the img show and add icon to it
<span>
<i class="huge icons">
<img src="test.jpg"></img>
<i class="corner add icon"></i>
</i>
<span>
I'm assuming that you are using semantic-ui-react.
You can do:
<Icon.Group size='huge'>
<img src="test.jpg" />
<Icon corner name='add' />
</Icon.Group>
You can find more examples HERE
In web page,there are few tabs like CustomerAccountContact.
These tabs are inside SPAN html tag.
PFB, the html source code for accounts tab:
<a class="x-tab-right" onclick="return false;" href="#">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text ">
Account
</span>
</span>
</em>
</a>
I have tried the below click methods apart from the normal click,but none worked:
1.JavascriptExecutor executor = (JavascriptExecutor) browser;
executor.executeScript("arguments[0].click();", we);
2.
Actions builder = new Actions(browser);
builder.moveToElement(we).click().perform();
In QTP, using device reply I was able to click on the tab as that it stimulated the mouse click method
Please suggest on how to stimulate the mouse click and click the 'Accounts' tab
Im trying to create a button in jquery mobile only with a image and no text, as far as able to do is to add a data-icon, But i have i feeling it could be done better.
<a onclick="newfunction();" data-icon="plus" data-iconpos="notext" ></a>
You can create button with only images :
<img style="height: 40px; width: 40px;" id="newid" data-role="button" src="source\images\greenplus.png" data-iconpos="notext" data-theme="a" />
data-iconpos="notext"
is indeed the right-way ahead for you to create a button with no text, but image only.
But i would change the onclick function that you have written. Instead of :
<a onclick="newfunction();" data-icon="plus" data-iconpos="notext" ></a>
Try out :
<a class="plus_button" data-icon="plus" data-iconpos="notext" ></a>
Since you are using jquery, use maximum jquery and your function would be :
$(".plus_button").click(function(){
//something here
});
Cheers.
I'm trying to open a modal using SimpleModal OSX, and the values for some of the attributes are assigned using AngularJS. However, when I click an item to open a new modal it doesn't work and the page reloads. Here's the code to make this clear
<li ng-repeat="news in newsItems" class="some class">
<a class="osx" href="#" data-page={{news.dataPageUrl}}>
<article>
<header>
<span class="itemtype">{{news.dateHeader}}</span>
<h1>{{news.header}}</h1>
</header>
<img height="145" src={{news.imageUrl}} alt={{news.imageHeader}} />
</article>
</a>
</li>
The dynamic items appear in my page, so the ng-repeat directive works. I added a static item and it opens a new modal without issues. The osx.js script is loaded at the end of the body tag. What am I doing wrong?