a client of mine wanted a website translated in some languages. We decided to use the simple Google Translate funcion.
The issue is that everytime the website is translated the majority of the links aren't working anymore (you can't click on them).
Does anybody know how to solve this?
Many thanks
I got into the same trouble. The problem came from jQuery scripts conflicts in my case.
If you manage to deal with all script errors / conflicts on both the Google translated and the original pages of your website, you'll be fine - all the links should work.
Other situation that can occur is that you create an HTML structure with block elements inside a link (invalid for HTML4 and XHTML):
<a>
<div>
<p>...</p>
<img />
</div>
</a>
In this case, Google Translator will remove the link from the structure.
Note: I haven't tried it with HTML5 doctype. HTML5 allows wrapping pretty much anything inside a link, therefore, Google Translator might not remove the link with HTML5 doctype.
Related
I have some information in HTML run in a WebView on an iPhone which should not be visible to regular Users, but should be read out by accesibility features such as IOs's VoiceOver.
just putting all the information inside an aria-label="lorem ipsum dolor" attribute did not work. Voice Over stil reads out the plain content of the tag. So i tried adding an "invisible" Element holding this information. However it seem to me that VoiceOver magically ignores elements which are not visibleto the user. I tried the varios techniques described by the Yahoo Accesibility Lab: http://www.cssmojo.com/hide-content-from-sighted-users/ but none of them are working for me.
Here is the Code:
<div tabindex="2">
<h2 class="visually-hidden">Ausgewählter Ton:</h2>
<div class="jingle" ng-if="ctrl.getAlarmJingle()">{{ctrl.getAlarmJingle()}}</div>
</div>
I want VoiceOver to read out "Ausgewählter Ton:" plus the value of `{{ctrl.getAlarmJingle()}}. best case would be that all of this appears to be one element in VoiceOver the Accessibility-Tree. What is the best practice of doing this? Has anybody good resources on how VoiceOver really works?
The Project is a hybrid app using angular 1 and Ionic. We are using wkwebview as WebView, but i don't think thats relevant for VoiceOver problems.
Sorry the problem was, that my scss wasn't compiled hance the css never updated. Now that it does everythings works as expected.
After a fair bit of looking around, the only way I've found to get a signature on gmail is to copy the rendered HTML signature. Two problems arose: 1) I couldn't actually select my entire signature, and I can't even see what I am selecting like how it works with regular text and other's tutorials for gmail signatures. 2) If I press Ctrl+A on Firefox (Chrome only copies half, even when I use Ctrl+A), I can manage to copy my signature, but if I try to paste in the signature box, it glitches out and appears static in the top left of that specific Chrome/Firefox tab, like this (edited for privacy reasons):
And if I try to just go for it and email (after saving changes), no signature will be rendered at all. Not too sure what to do at this point, so any suggestions are welcome.
Thanks.
EDIT: This is the HTML I use to render the signature. As a side note, I do replace those placeholder file names with links from an image hosting site. I also add 3 tags around a few of the ""s.
Ultimately I found the solution after playing with various HTML and image options. The problem lies in my use of the <div> tag for the layout of the signature. I should have been using <td>. Using the slice tool in Illustrator will render the HTML with <div> tags, while using ruler guides in Photoshop and saving for web (I used the legacy option) will render with <td> tags. I'm going to do a little more digging and see if using guides in Illustrator will still render with <div> tags, but I'm not sure if this site is the place to discuss this piece of the problem.
EDIT: By the way, Illustrator just really likes <div>s, so if anyone is looking to do this same thing, use Photoshop's legacy Save for Web mode. It will generate the <td> tags for you.
I'm looking for a way to practice CSS and HTML without worrying about whether the backend works or not, or whether or not I have to make the content. I've played around with javascript and node.js a bit, and although I feel like I have a (very) rudimentary understanding of it, I feel as if I should be learning HTML and CSS correctly before messing more with the backend.
Is there a good place to just write CSS and HTML? How did you learn them?
Is there a code editor I should be using (specifically for HTML layouts and CSS layouts) besides Sublime Text?
Well, first of all, you do not worry about how backend works if what you want is to practice CSS and HTML.
Easy steps to play around with HTML and CSS:
create a new file, say index.html. Then, just double click on that file or open with.. your favorite browsers (Chrome, Safari, Opera, Mozilla, or IE).
If you want CSS, you can attach it to the index.html by using <link rel="stylesheet" href="file.css">.
Note : You would only need Node.js when you are dealing with AJAX method like using XMLHttpRequest or $.ajax() method due to CORS (Cross Domain Policy. Other than that, just play around with HTML and CSS with the browser.
My Personal Journey to the Front End Web Development
About me
I am currently working as a full time Front End Web Developer and I self-studied coding for 2 years now (I started this in June 2012) from almost zero knowledge about coding. When I started this, HTML5 and CSS3 were briefly introduced to the public so I learned HTML4 beforehand.
Web is fairly a big topic if we talk about the full stack integration (from the browser to the server to the database). If you are into the front end (HTML/CSS/Javascript), start off with some online tutorials (link below), then try to create your own web product (it could be a website or a web app). Try to improve a bit by a bit, and if you ever get stuck, you can always google search your problem and try to find the solution online (usually StackOverflow).
About Text Editor
I think the best way to learn is to get your hands dirty with minimal code help as possible. This will force you to remember most of the syntax and in turn increase your productivity. I was using Notepad++ but then switched to Sublime Text (Currently Sublime Text 3), and is my favorite text editor up until now. I know my co-worker is using emacs or vim that has a lot of keyboard shortcuts. Personally, Sublime Text is good enough to write HTML and CSS. Link: http://www.sublimetext.com/3
I started learning HTML and CSS from these links:
Paid
http://www.codeschool.com
Free
http://www.codeacademy.com
http://code.org
Hope it helps,
Yanuar Wibisono
Have you looked at w3schools html and CSS tutorials ?
They have a very handy "Try it yourself" button which allows you to try out your own code and see the results very quickly. The tutorials themselves are also well written with plenty of example code.
For HTML and CSS, I would recommend the text editor Microsoft WebMatrix, which is a standard program for Windows. For learning HTML and CSS, check out http://codeacademy.com. It's one of the best places to learn HTML, CSS and a bunch of other coding languages.
I have created a single HTML file that includes its own CSS styling, as well as custom HEAD tags so that it displays in a mobile browser fairly nicely. I then have it working with PHP as a file attachment.
Trouble is this -- Gmail is munging the View of it, but not the Download of it. Gmail is stripping out the CSS and rebuilding the HEAD without my custom viewport stuff.
Is there a programmatic way to code the HTML5 to cause Gmail to fail in doing this cleansing?
My only advice (and it sucks because it means a lot more work) is to put the styles inline with the html as much as you can. That seems to get past at least some of their filtering.
What tools allows me keep track of tags when doing web development? For example, I would like to be able to quickly find whether I missed closing a div tag.
At the moment I am using notepad++ to write html. It highlights starting and ending tags, but it can take me time to review almost all tags to find where I went wrong.
HTMLTidy is pretty much the de-facto standard for this kind of thing nowadays
Tidy Windows Installer
Tidy FAQ
Whenever I'm writing a page from scratch I indent the tags so the inner ones are nested within the outer tags.
Ex:
<body>
<div>
Content here...
</div>
</body>
I also write out the opening and closing tags at the same time, plan out the page layout, and then go back and fill in the content later.
You could make the opening and closing tags at the same time. You could indent. Choosing an IDE or tool specifically for that seems a little bit overkill in my opinion.
You can't go past proper indentation, IMHO.
The Web Developer add-on for Firefox is very handy. It gives you a good way to highlight different tags on the page and makes it easy to visualize them. Also has too many tools to list here, including HTML and CSS validators.
Indenting is helpful. I also find the Html Validator extension for Firefox to be handy for checking for HTML issues once you're viewing the page in the browser (which is especially handy for checking server-generated HTML).