I have an Ionic app with a navbar. In this navbar are buttons that are a little bit bad to touch. So I want to increase the touch area of the buttons. I tried this:
<ion-nav-bar class="bar bar-stable background-main-color" align-title="center">
<ion-nav-buttons side="primary">
<div class="navbarIconArea" ng-click="test2()">
<button class="button searchIcon background-main-color icon-color" ng-click="test()"></button>
</div>
</ion-nav-buttons>
[...]
</ion-nav-bar>
But test2() is just called when the button is clicked exactly and test() is invoked, too. The div works when it is outside of an ion-nav-bar.
Any idea how to fix this or how to increase the area otherwise?
CSS (50px just to test, will be 10px):
.navbarIconArea {
padding-right: 50px;
padding-left: 50px;
padding-top: 2px;
display: inline-block;
}
EDIT:
The problem is not that I both functions are called when clicking on the button. It is that test2() is not called when clicking on the area around it.
What I could understand from your problem is. You have a div which has a button and you want to invoke the function test() only on button click and test2() only when the div is clicked. Now your problem is that when ever you click the button the div is also getting clicked. Actually this is the expected behaviour. The button is inside the div and when you click on the button you are actually clicking the div too. So click of button is also equal to click of div. So both your functions are getting executed.
Solution is Give enough margin between your button and div. So use this CSS, button.searchIcon{margin:20px}, this will set 20px space between button and the div.
So now one problem is fixed, you can click around the button and it will be a div click.
Now another problem still exist. Even if you click the button the div is clicked, So the solution would be to remove the ng-click on the button, So now you will just have the div click, so inside this div click what you do is see if the click happened on the button or not (since you have not added jquery tag i am not giving you any example code, you can check it in jquery), if the click was on button then dont execute test2() execute test(). else if it was not on the button execute test2(). So this will require a new function which will warp this logic and the toggling of the calls. and point to this new function in ng-click of the div.
You need to make the button div itself a link. Nest the div tag within an a tag.
<a href=#><div></div></a>
Related
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
My buttons structure is as stranded as it can be:
<a class="button">click me</a>
They work just fine on click.
But, on touch devices, you can get them to work by tapping at the areas around the text inside the button. When you tab in the center "click me" it just does not work.
It is baffling me and I have not been able to find out why.
You can try it live by going to https://plutio.com from your touch device and try to tab on the Get Started button.
It won't work unless you tab around the button text.
Things I tried:
line height
user-select
box-sizing
appearance
pointer-events to none
I got it please use below code:
.button:after, .button:before{
display:none
}
Good evening!
I am currently developing a website which includes the Facebook Like Button. This button is located at the bottom of the page. When I click the button, the "comment" popup is displayed below the button, which extends my page. I would like to know whether (and, if so, how) it is possible to have the "comment" popup be displayed on top of the button or hide the popup permanently.
The image below depicts my problem (the horizontal white bar is supposed to be at the bottom of the page, notice how the "comment" popup extends the page).
Thank you in advance.
Without seeing the actual website, I imagine you could just use css to select that popup and set it's display property to none. However you might need to use an !important statement to override any css property being set on that popup with javascript.
Example code:
.popup {
display:none!important;
}
You can hide the popup box. Make sure your facebook like button layout type is button i.e. In your code snippet that facebook provides there should be data-layout="button"
and use this css
.fb-like{
overflow: hidden !important;
}
To help protect users, you can't really style upload's with CSS. So, the solution then is to hide the real upload and show the user some other element that looks how you want.
I started a JSFiddle that shows how you could mask an invisiable real upload over a simple button or something so that you could style the button - but still get the user to click the upload input.
However, the problem is that I can't get the hover states to work since the real input is floating above the button.
Am I approaching this problem wrong? How do you style upload inputs?
After playing around some more I finally got it working by making the input a child of the Upload button element. I had to make the upload button a div also since it's not correct to have an input as the child of a button.
See it in action here
If I understand the question, this is what you want to achieve
jsfiddle.net/yVFWJ/1/
.button {
width: 47px;
height: 19px;
cursor: pointer;
text-indent: -9999px;
border: none;
background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}
Hm... You could use document.onmousemove event. In there you can check if your mouse position is inside the button area. If it is, simply change the class of button to eg "send_button_hover". If it's not, change the class to just eg "send_button".
You can do it using pure JavaScript. It's not very difficult.
But it's a lot easier if you use jQuery. You have mousemove() function for handeling event; height() and width() functions to calculate button dimmension; offset functions to calculate position of the button and toggleClass() to change the class of the button.
I have a current webpage that is broken into two sections. The top section contains various controls for filtering content on the webpage, and the bottom section contains a grid of the content.
What I want is encapsulate the filter controls in a div tag that initially is completely hidden except for a button link that will say something like "Click to Expand". Upon clicking the button link the div will open up downward to expose the filter controls that are in it. However, I don't want the div to just suddenly appear, because that's too easy and boring. I want the opening of the div to be noticeable as it slides downward to expose the content.
Is this possible? If so, how do I go about achieving it? I'm not a CSS monkey, but I've done a fair amount with jQuery.
Thanks in advance for any suggestions.
Straight from http://api.jquery.com/animate/ ...
So, instead of clicking the div, you could just add the click function to a button somewhere else on the page.
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;" />
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
You can use the jQuery slideToggle().
$('#expandBtn').click(function() {
$('#filterDiv').slideToggle('slow', function() {
// Animation complete.
});
});
As an alternative to jQuery there is also the scriptaculous.js blind down and slide down effects.