I am using HTML to do the basic FancyTree initialization of a folder tree control and I was wondering if I could also specify a custom icon for these folders, i.e.,
<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name
In the definition of my FancyTree control, I specify an imagePath:
$("#tree").fancytree({imagePath: "skin-win8/",
but all I see is an empty spot where my icon should appear, even though I placed my custom icon in the skin-win8 folder. What's the simplest way to add a custom icon or two to a FancyTree control? I'm both a FancyTree and CSS neophyte, in case you were wondering :)
Sheldon
That looks ok to me. Basically the same as in this demo:
http://wwwendt.de/tech/fancytree/demo/sample-theming.html
Maybe simply a typo in your markup:
<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name
(should be id="xyz" instead of id="xyz')
Thanks again to mar10 to pointing me in the right direction, even though his thought that I had a typo in my markup was not the actual culprit. But by saying that he didn't see anything wrong and referring me back to his demo for custom node icons, it got me thinking that perhaps I too was also experiencing an imagePath issue, like this previous custom-node question
So I went back to my FancyTree download and got the custom-node example working on my server, then I moved the page and its dependencies around till I got something similar to my situation. Once I had that working, I was able to use the same approach within my actual page...
I happen to keep all my FancyTree-related files in a directory called fancytree within my application's web folder, so I added a subfolder called custom there and set my imagepath in the following manner:
imagePath: "fancytree/custom/",
Once I did that, I was able to use my custom icon either by including it in the HTML definition of the node or by setting it within the Javascript function I used to initialize certain aspects of my tree. Hope this helps some other custom-node newcomer...
Sheldon
Related
Currently I am working in a project in which Admin is saving the html code as a whole as a string which will later be used in the front end. It is saved so that user can put their own custom css like placing of whole div, size etc. It was working for some time, but now they want the saving part as it is, but when viewing it should look little differently. Like placement of images(it's just a part of whole div), grid system.
Following is a part of html admin saves:
<img src="http://localhost:3001/api/v1/images/image_454812039.jpeg" style="float:none;height:170.17142857142858px;width:301px;" /><p><span style="color:rgb(0,0,0);background-color:rgb(237,237,237);">Other names of Marshall Bruce Matters</span></p>
as you can see, that's what I get from backend. Now in the front when user is viewing, the span should be at the top, and image should be at bottom of it in a grid.
First of all to answer your question I will propose you to go and look at this loader react-jsx-parser -> https://github.com/TroyAlford/react-jsx-parser
But I would like to warn you that this method is not really recommended. It is better to have the structure in the code. Then call the source to the backend and then integrate it into your DOM.
This will make your frontend and backend easier to understand and therefore maintain
The only problem there is that the styles are not like jsx styles. They should be like:
style={{float:'none', height: '170.17142857142858px', width:'301px'}}
or
style={{float:'none', height: 170.17142857142858, width:301}}
But there is a npm package which helps getting the job done. react-html-parser
Hope it helps!
I'm new to this website and just begun my journey in HTML. My hope is that I can provide to the community as much as I have received lurking in the answers!
I am currently working on automating some navigation on IE using VBA. All has gone to plan with the exception of the following:
There's a "button" I am trying to click...here is the HTML:
<a class="alignLeft nowrap" href="/assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0">Download</a>
In the past, I have simply used the href to navigate directly to the page. However this particular request returns an error page in the browser so that doesn't seem to be an option.
Any help would be appreciated!
What link are you trying to access? Is it a folder included in your project, or the one from an external server?
From what I understand, you're trying to access the "assistant" folder is this?
The "/" before "assistant" (/ assistant) can affect the location because it indicates the entry in another folder.
Try if the folder is in the project, without a previous "/":
"assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0"
Have you also tried a CSS selector of a[href='/assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0']
Which would be
.document.querySelector("a[href='/assistant/newRunReport?parameterId=de9498-1643e6f7969-5tv0']").Click
If those fail try:
.document.querySelector(".alignLeft.nowrap").Click or
or
.document.querySelector("a.alignLeft.nowrap")
.querySelector is the method of document that applies a CSS selector. You select an element by its styling.
a.alignLeft.nowrap, for example, is a tags with className of alignLeft nowrap. The "." means className. You are not allowed compound names when using .querySelector so you add another dot where the space is to get a.alignLeft.nowrap.
.querySelector returns a single matching item i.e. the first. .querySelectorAll will return a nodeList of all matching elements which you then traverse the .Length of to get to individual items by index.
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
I have an control, to which I want to add a custom html attribute called, previousValue.
The Salesforce Developer's Guide assures me that I can do this by prefixing the attribute name with html-.
So I have an element that appears thus:. I also have the docType="html-5.0" attribute in my page control.
However, in Eclipse I get an 'unsupported attribute' error. I have upgraded to the latest force.com IDE; can any one tell me why this isn't working? What else do I need to do?
Thanks.
After much experimentation, the answer to this seems to be that the salesforce developer's guide is inaccurate and the 'hmtl-' prefix is not supported by the <apex:inputField> component. I can add it without a problem to an <apex:outputPanel> component. Don't understand why this should be so and the whole point to using these attributes is to locate data in a relevant place and avoid complex jquery selects to find the data relative to the location at which it is required.
I have a number of templates that create headings based on a formula. I am wondering if there is anyway to create an "edit" link that will take you directly to that section? The way that it currently works, the edit link takes you to editing the template itself. Could I possibly create a customized link that would keep you on the page and take you to right part?
Here is some sample code to help clear things up...
Template:Head:
==={{{1}}}===
This is a heading titled "{{{1}}}"
Test Page:
=Section 1=
{{head|1.1}}
{{head|1.2}}
{{head|1.3}}
=Section 2=
{{head|2.1}}
{{head|2.2}}
{{head|2.3}}
At the moment, if I want to edit the information for template "2.3", I have to edit all of section 2. (Note that for this example, that isn't a big deal. For the actual templates I am working with on my site, the templates have dozens of parameters and there are sometimes 10 or more in a section.)
Bottom line, is there way to create a custom edit link inside of the {{head}} template that would take you directly to editing the templates call on the page "Test Page"? Hope that makes sense.
Edit: Is there perhaps a way to make use of "anchor" tags? Can anchors be passed in to the URL?
To restate your problem, when you transclude a section heading the header isn't treated as being part of the destination page, so the edit link takes you back to the source. So you need a separate container for the template in order to edit it individually, and a complete section is the smallest editable container.
The only way I can think of doing this is using subpages (or virtual subpages if you don't have that ennabled in this namespace, doesn't change anything). So instead of placing {{head|1.1}} on MyPage, put it on MyPage/Subpage1 and then transclude that into MyPage in the usual way ({{:MyPage/Subpage1}}).
{{head}} can then include a custom edit link to the template input by using HTML heading tags (<h2> is equal to ==, etc.) to suppress the standard edit link and then use one of these templates (probably {{ed right}}) to create a custom edit link pointing to MyPage/Subpage1.
The way to create anchors in Mediawiki, by the way, is to use a <span id="name"/> tag, but that doesn't create a container that can be edited (or at least, not that I've been able to work out through URL tinkering).
I'm pretty sure there's no way to do that. As far as MediaWiki's section editing feature is concerned, the only thing that begins a new section is a line of the form:
=== Some text here ===
with the number of = signs determining the level of the heading. There's no way to get MediaWiki to let you edit any segment of the document that doesn't begin and end with such a line (or the beginning or end of the page).
Well, OK, I'm sure you technically could do it with an extension, in the sense that you can do anything with a MediaWiki extension. All you'd need to do is provide some way (e.g. a special parameter in an edit URL) for to user to indicate "I want to edit this template", then extract the template from the wikitext, present it to the user for editing, and write the result back into the page text over the original.
The tricky part will be extracting the template from the page source. (Finding and replacing templates on a page is a fairly common task for MediaWiki bot writers, so you might want to look for ideas there.) Whatever method you end up using for that, there will probably be edge cases where you need to give up and tell the user "Sorry, but I can't figure out how that template is transcluded here."