There is a X button on chatango widgets which if user clicks on it, the chat box will disappear and there is no way you can have chat again,
I checked the embed codes guide in chatango room configuration, I found this: "showx Show close button" I insert "showx":0 into my page's script tag, in brackets right the place it should be
{"handle":"eurousd","arch":"js","styles":{"a":"000066","b":62,"c":"000000","bpos":"tl","d":"000000","e":"ffffff","f":62,"h":"ffffff","i":62,"k":"3366ff","l":"3366ff","m":"3366ff","o":62,"q":"3366ff","r":62,"sbc":"bbbbbb","surl":0,"allowpm":0,"fwtickm":1,"pos":"bl","showx":0}}
but still shows that x button :/
do you know how can i remove that?
I created an <a> to overlap the X button:
<a class="bugfix" href="URL TO YOUR CHAT BOX" target="_blank"></a>
Then, this to your CSS:
.bugfix {
width: 25px;
height: 25px;
right: 0%;
background-color: #242731;
position: absolute;
}
Note that your chat needs to have position: relative;. You can do that by wrapping the <script> inside a <div> then you can use CSS.
Related
I'm trying to build a button that looks like Zoom's button.
Here there is a button to pick a device inside the camera button. I'd like to create something similar, where you have a button and another button that expands a picker inside it.
How can you create this in an accessible way?
If I nest buttons in React, it throws errors that you can't nest a button inside another. Zoom's equivalent would be:
<button>
Stop Video
<button>Pick Device</button>
</button>
which doesn't work. How would you create an interface like this so it stays accessible (and valid)?
Preword
Don't nest interactive elements
There is a reason that it isn't valid HTML to nest buttons or hyperlinks, it causes nightmares for knowing which action should be performed on a click (for a start) and for assistive technology this makes things even worse as it can confuse the accessibility tree as to what it should present to screen readers.
The answer
If you look carefully you will see they aren't actually nested, the "picker" button is placed on top of the other button.
Now there is an issue here in terms of accessibility, click / tap target size.
A button / interactive element should be no less than 44px by 44px
So the Zoom example you gave fails this criteria. Additionally the tooltip that says "stop video" looks wrong if you have the picker selected as that should be the tooltip for the button that is currently hovered.
So how could we create an accessible version of what you want?
I would recommend having a large button with a 44 by 44 button placed on top to the right.
This can easily be done with absolute positioning.
To ensure that it is evident visually that the buttons are related I inset the second button by 2px.
The below is not a complete example but I have given you a start.
I added aria-expanded to the button that opens the sub menu, this gets toggled when the menu is opened.
I also added the aria-haspopup attribute to let users know that this button opens a sub menu.
I also added aria-controls to let assistive technology know the relationship between the button and the menu it opens.
Finally you will see I added a <span> with some visually hidden text inside so that screen reader users know that the picker button opens the video controls.
The example maintains logical tab order and is pretty accessible, but there are still things such as being able navigate the menu buttons with the arrow keys, closing the menu with Esc key and returning focus to the button that opened the menu etc. that you need to implement yourself. Oh and styling obviously!
var mainButton = document.querySelector('.main-button');
var menuToggle = document.querySelector('.sub-button');
var menu = document.getElementById('controls');
mainButton.addEventListener('click', function(){
alert("clicked the main button");
});
menuToggle.addEventListener('click', function(){
if(menu.classList.contains('open')){
menu.classList.remove('open');
menuToggle.setAttribute('aria-expanded', false);
}else{
menu.classList.add('open');
menuToggle.setAttribute('aria-expanded', true);
}
});
.container{
position: relative;
width: 144px;
height: 48px;
}
.main-button{
width: 144px;
height: 48px;
padding-right: 50px;
}
.sub-button{
position: absolute;
width: 44px;
height: 44px;
top:2px;
right:2px;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
#controls{
display: none;
}
#controls.open{
display: block;
}
<div class="container">
<button class="main-button">Stop Video</button>
<button class="sub-button" aria-expanded="false" aria-haspopup="true" aria-controls="controls">⌄ <span class="visually-hidden">Pick Device</span></button>
<ul id="controls"
role="menu"
aria-labelledby="sub-button">
<li><button>Option 1</button></li>
<li><button>Option 2</button></li>
</ul>
</div>
The react gives a warning if you try to do so and the reason is simple. It has everything to do with semantic HTML and you should never put a button inside a button.
Alternatively to get the desired behaviour you can do something like this:
<div style={{ position: "relative", width: "200px", height: "40px" }}>
<button
onClick={() => console.log("Stop Video")}
style={{ width: "100%", height: "100%" }}
>
Stop Video
</button>
<button
onClick={() => console.log("Pick Device")}
style={{ position: "absolute", right: 0, top: 0 }}
>
Pick Device
</button>
</div>
This will do the same thing you need. Here is the codesandbox example for the same implementing the exact same thing.
I have found the technique to customize file input element through putting a regular button in "front of it" and make the file input element with opacity: 0. Like this:
#wrapper {
position: relative;
overflow: hidden;
}
#button-on-top {
width: 200px;
padding: 10px;
}
#file-input-below {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 10px;
}
<div id="wrapper">
<button id="button-on-top">Upload</button>
<input type="file" id="file-input-below">
</div>
But why does it actually work that when you click the button "above", the click goes to the real file input button and activates it? Normally, when there's an element "below" another, it doesn't register a click.
Such as with different kinds of overlays where buttons underneath cannot be clicked?
Thank you for an explanation in advance.
HTML files are rendered from top to bottom, so your input field is rendered later. That means if you put absolute to your button the input field slides under it.
But if you put your button below your button will slide under your input field.
If you still want to make it work put to your button an index-z of 1
#button-on-top {
z-index: 1;
}
and your input field should have an lower z-index then your button if you want to make your button clickable
#file-input-below {
z-index: -1;
}
I need android like floating action button at the button of my jsp page.The button should remain at the bottom irrespective of the scrolling. Any options available ?
If your button has id fixedbutton. You can specify this in the CSS as:
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
}
This is the HTML
<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li>
This is the CSS
.navs:after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #0d0d0d;
opacity: 0.5;
transform: scaleY(0);
transform-origin: 0 100%;
transition: all .2s ease-out;
}
.navs:hover:after{
transform: scaleY(1);
}
.navs:active:after{
background: #FFFFFF;
}
I think the reason why i can't click the button is because when i click the button, the overlay forms. I do not want to remove the overlay though. Is there any way to click through the overlay?
Option one
You can give your element a higher z-index. This will move your button above the overlay, so you will be able to click it
Option two
You can disable all mouse events on your overlay using pointer-events:none; so the click event will 'fall through' it and the button will register it
Edit: Use pointer-events when you can, let z-index be your backup plan. If you fall back to it, I suggest that you don't use it inline, but write a specific selector for it in your CSS.
use span instead of before and after,
something like
<a href="my link"><img class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>
the span will not cover the clickable region
It could be many different things...
Definitely try to check if you've used any z-index properties for other elements that are the parents of the element.
I encountered the exact same problem and I fixed it by troubleshooting:
what I did was pull up a javascript file and console log the target className of where I was clicking (can be done by:
window.addEventListener('click' , (e) => {
const target = e.target.className;
console.log(target);
})
)
Once I did that, click on the button that doesn't seem to be working. Make sure to add a class to your button before this and check if the class is displayed properly. Sometimes, in my case, I had to move the console out of the window.
From this, I found my SVG Animation was actually taking up invisible space that covered the button. All I had to do to fix this problem was give the SVG a z-index of -1.
Hope this helped! I know I took a long time to find a solution so I hope my solution can help others too.
Note: Also check your pointer events (make sure it isn't set to none) for the button and other elements
I want to use pretty 3d button images on my website. However, currently the way this works is the text is part of the image.
So, when I want to change the text (or make a new button) it's a 10 minute editing chore instead of a 20 second text change.
I've seen a few websites that have a blank button with text on it.
The real trick is making the entire image clickable. I've been able to make the link inside an image visible but that's a poor UI. Users will expect to click the button anywhere and failure to behave that way will frustrate them.
It seems like they're wrapping a .DIV tag with an image background around a Hyperlink.
<Div (class w/ image>
<a> text
</a>
EXAMPLE:
https://www.box.net/signup/g
Anyone have any insight or explanation of how this works?'
CODE SAMPLE
<a href="#" class="button" style="position: relative;left:-5px;"
onmousedown="return false;"
onclick="document.forms['register_form'].submit(); return false;">
<span>
My text
</span>
</a>
Make the button a background image:
<style>
div.button a {
display: block;
width: /* image width */;
line-height: /* image height */;
text-align: center;
background: url(/* image uri */) no-repeat;
}
</style>
Would setting your anchor to display:block and giving it a height/width equal to your div/background image help you?
perhaps something like
a {
width: something ;
height: something;
display: block;
background: url('hi.png');
}
also,
input { background: url('hi.png'); }
is an alternative
Your example is just placing CSS styles on the a tag...
From there:
The tag:
<a onclick="document.forms['register_form'].submit(); return false;"
onmousedown="return false;" style="position: relative; left: -5px;"
class="button" href="#">
<span>Continue</span>
</a>
Note that they are using JS for some reason, and not using the href, I don't like that.
Then, the button class:
a.button
{
background:transparent url(../img/greenbutton2.gif) no-repeat scroll left top;
font-size:16px;
height:42px;
line-height:42px;
width:155px;
}
This is just how that site you linked to did it.
I found this rather impressing. Using GWT to style hyperlinks.