Go to link within same webpage in Angular - html

I'm just starting angular and am able to display the homepage via the url: http://localhost:8002/app/#/home
Now, I want to use a name tag, to go to 'FAQ' section within the same page by using:
FAQ and <section id="faq">
However, this is not working. Can anyone please guide me here ?

You can also use $anchorScroll (better solution). You can see an sample and more details here. I don't test ng-href but i think it is bad solution.

You should write in the href attribute #/faq, with a slash.
and another issue, is using ng-href, as written in angular docs(https://docs.angularjs.org/api/ng/directive/ngHref):
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

Related

Fixing a PDF Accessibility Issue (Alternative description missing for an annotation) when converting an HTML Page to PDF

Currently, I am working on a program that converts an html page into a PDF using the iText Library.
The Checker that I am using is PAC3 -->PDF Accessibility Checker 3 which is described by the following link (https://section508.gov/blog/check-pdf).
One of the issues is the “Alternate description missing for an Annotation”
An excerpt from the following link explains it:
http://www.uottawa.ca/respect/sites/www.uottawa.ca.respect/files/fss-fixing-accessibility-errors-in-pdfs.pdf
Alternative description missing for an annotation This usually happens when the link is not clear enough. To fix this error, add alternative text to the link tags. To add the alternative text, please do the following;
In the tag tree, select the tag for the link, and select Properties
from the options menu.
In the Touchup Properties dialog box, select
the Tag Tab.
Type alternate text for the link, and click close
I have been trying to use iText to fix this problem, but googling, looking at the source and reading the documentation does not help.
Does anybody have any suggestions on how to either write the HTML or use the itext problem to get rid of the “Alternate description missing for an Annotation”
Thank you for your help
You did not specify whether you using old code (XMLWorker, HTMLWorker) or new iText code (pdfHTML).
This of course impacts the proposed solution.
In my answer I am going to assume you are using pdfHTML
There are several options:
edit the incoming HTML using a library like JSoup
convert the incoming HTML to iText IElement objects, and edit those, setting properties where needed
write your own custom TagWorker that handles all instances of a specific tag, and write custom logic to deal with the missing annotations.
An example of a custom tag worker can be found here:
https://developers.itextpdf.com/content/itext-7-examples/converting-html-pdf/pdfhtml-custom-tagworker-example

angularjs ng-href doesn't work in ie8

We are building a site which needs to work in IE8( be functional at least), and we got some links which doesn't work, common for all of them is that they use ng-href instead of href which works fine.
so this does not work:
<a ng-href="/User/Index/{{item.MetaData.Author.Id}}">{{item.MetaData.Author.FullName}}</a>
but this does work:
{{item.MetaData.Author.FullName}}
After angular has done is bindings the link looks like this:
<a class="ng-binding" href="/User/Index/15143" ng-href="/User/Index/15143" jQuery191021026375357298033="135">Niclas Schumacher <!-- IE fix --></a>
I asssume that it is angular adding the IE fix for IE8.
other things made which angular work fine, but its pretty crusial that the links will work!
anyone who has had this error, or knows how to fix it ?
OR is it so VERY crusial to have ng-href instead of href, when using angularjs ?
Hope you can help, thanks in advance!
Encountered a similar problem (from the question's text I'm not sure if it's the same). Either way, here's my problem and what got me working:
Problem:
Apparently there are problems when using href or ng-href [1] in IE8 (I am using 1.2.18 at this time) in which they don't get evaluated.
Example:
If angular finds a link without both name and a href, it adds it automatically, therefor, a code like:
<a ng-href="redirectTo()">link</a>
will end up as
link
and the redirect to baseUrl due to "" (the first page of the application) is performed upon click and the ng-href does not override the value in href.
The trick I used was to convert the link to an anchor (to not have to change depending code)
<a name="someRandomName" ng-click="redirectTo()">link</a>
and change the return statement of redirectTo() to do a redirect (either with window.location.href or $location.path, depending on the URL needed) instead of simply returning the URL.
[1] ngHref: https://docs.angularjs.org/api/ng/directive/ngHref

Change page title with PJAX?

I'm using PJAX with cakePHP. Everything works super fine, but since I'm not reloading the layout, I don't get title update. I was told I had to put a tag in the body, and that it would get removed. It seems to work but, is it valid to have an HTML page without a tag ?
EDIT : well actually the tag isn't removed, so HTML markup is invalid! What is the best practice for this? It would need to be the same for metas.
The official demo uses this in Ruby but I don't read it :
https://github.com/defunkt/jquery-pjax/blob/heroku/app/pjax.rb
https://github.com/defunkt/jquery-pjax/blob/heroku/app/views/layout.erb
Since #57 pjax also looks for a data attribute data-title in the fragment that is loaded and should update the main title.
This is much cleaner and would not break html with a title in the body.

How do you modify wordpress css for posts?

So, Im using wordpress.com to run my blog. I have paid for the upgrade with custom css. Now I want to change the formatting of posts that are on the front page. Ive been using the "inspect element" on Chrome, simular to Firebug, to see what class everything has and changing the CSS.
Its been pretty easy other than the posts. Each post, apparently has its own class.
my latest post is of class="post-190"
However, the post before it is class="post-188"
etc...
How do you write a CSS to include all of the post-##
You can use these attribute selectors
[class|=post]
an element whose "class" attribute has a hyphen-separated list of values beginning (from the left) with "post"
[class^=post]
an element whose "class" attribute value begins exactly with the string "post"
Source
From the basic TwentyEleven Wordpress theme let me suppose that you want to add border to this post, the structure of this class is forming from the wp-includes/post-template.php file.
This method is creating the class for this post -- get_post_class()
And then add styling to my content-aside.php page in the template, i hope this is what you are looking for, ley me know if u have an issue.

"title" attribute for <html:options> struts tag

In a regular select box you can show the full title on mouseover using "title" attribute in the "option" field.
In Apache Struts, you make the select box with the "html:options" tag. I don't think this tag supports the "title" attribute. Is there another way to show the full title of an option on mouseover for the "html:options" struts tag?
Thanks
Struts' tag for <select><option>.. is <s:select />, or <s:doubleselect /> for double lists. <s:doubleselect /> doesn't support title at all, you have to modify the Javascript it generates by hand (ddoubleselect.ftl).
For with the default theme, the file is found in struts2-core-2.1.6.jar under template/simple/.
hard code in html or jsp file is a bad code practice.
if you are writing code in struts 1.x try to store all messages in MessageResources_en.properties
try update your jsp with following (alternatively go for )
title="<bean:message key="your_tool_tip"/>
and modify MessageResources_en.properties
your_tool_tip=toolTIp is a cool idea
ps there are solutions available in jquery as well
I'll admit to not being familiar with Apache Struts. If nobody more familiar can find you a better solution then worst case you could do it as a javascript tooltip. It's more effort, but gives you more effective visual control over the presentation.