So, I have this sharing buttons: http://myst.sandman.net/book (at the right, for twitter, facebook and mail) and they are wrapping. The code for the buttons looks like this:
<div class="buttonwrapper">
<img /> Share on Facebook
<img /> Share on Twitter
<img /> Share via email
</div>
But, as you can see (using a browser that supports corner-radius), the "Share via email" button wraps down to a new line, which is quite allright, but I think it looks wanky. Is there a way to make it have a rounded left side and have the upper right button have a rounded right side? I.e. how do you detect and assign styles to elements depending on wrapping?
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 am using an online survey tool (alchemer.com) previously known as surveygizmo.com. I need to create an Arabic survey, which means that the alignment must be from right to left. The tools support some configurations which aloowed me to align the text from right to left. However, the problem is that their settings did not change the alignment of the radio buttons (the answer choices) to be from right to left. I contacted the support, which pointed to me that there is CCS and HTML customisation. I find this HTML code. Can you help me make the HTML page to be aligned from right to left (including the radio buttons and not text only). See the code and the image that illustrate the problem.
<div class="sg-wrapper">
<div class="sg-header">
<div class="sg-header-hook-1"></div>
<img class="sg-header-image" src="[template("header image url")]" alt="[template("header image text")]"/>
[template("survey title")]
<div class="sg-header-hook-2"></div>
</div>
<div class="sg-content">
<div class="sg-content-hook-1"></div>
[template("error message")]
[template("page title")]
[template("page description")]
[template("page contents")]
<div class="sg-content-hook-2"></div>
<div class="sg-footer">
<div class="sg-footer-hook-1"></div>
[template("button bar")]
[template("progress bar")]
[template("footer text")]
<div class="sg-footer-hook-2"></div>
</div>
</div>
</div>
The problem is shown here where the radio buttons should appear in the right before the text starts. I could not align them. Is there anyway to do this from the HTML or CCS?
I'm working on a blog page template in Shopify and having a real tough time trying to figure out why the Facebook share button won't line up vertically with the other share buttons? It appears the Facebook button is 5px lower than the others.
The Facebook share button code is:
<div style='margin-top: -5px;'
class="fb-share-button"
data-href="MY URL"
data-layout="button_count"
data-mobile-iframe="true"></div>
As you can see I have tried applying an inline style to line up the buttons, however it doesn't have any effect. I'm sure other people have come across this problem. Any ideas?
Cheers, DB.
Add vertical-align: top; to your div.
<div style='vertical-align: top;'
class="fb-share-button"
data-href="MY URL"
data-layout="button_count"
data-mobile-iframe="true"></div>
You can read more about vertical-align here.
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/