I have been searching around for quite a while on ways to do this, and I'm beginning to think it's not doable. I can't say I'm an expert in html or CSS, but I have done a lot of research and found no tutorial for this specific problem.
I am coding a software user's guide to be posted online. The guide will include screenshots of the software, with figure numbers. The original code (I'm not the first on this project) simply hardcodes in the numbers of each image, which becomes more and more tedious as more information is added in.
I know there is a way to simply add in a new image and then tag the caption to include an automatically incrementing figure number. This would be very helpful, for if a new figure is added in, the numbers automatically change in all of the figures after the new one.
IF that were the only facet of the problem, I would simply use a CSS counter and be done with it. However, I also want to be able to reference specific figures in the text of the guide. My question is this: Is there a way to do this in CSS?
An example of text within the guide would be "Figure n shows the dialog box for customizing x." Is there a way to reference the nth figure in the guide without hardcoding the numbers?
If this is not possible in CSS, is there another language that can do it?
Edit: To clarify: The figures themselves would be labeled consecutively. But if I wanted to, within my text, refer to Figure 3, for example, that could be anywhere.
Edit 2: I have tried a javascript implementation using arrays. However, now it seems that some versions of Internet Explorer refuse to show the script portions of my code.
I am using the <script></script> tags within the body of my document, calling a javascript function located in the head. I know the syntax must be right because firefox and google chrome both load the page just fine. Is this simply IE being picky about something? (I checked, it's not my security settings).
Thing is, referring to things by their page index (incrementing) and by some figure number you maintain (also incrementing) are two identical solutions.
Actual problem: Maintaining the figure list with a sequence of ordered numeric identifiers becomes more difficult the longer a document becomes.
Solution: Give figures names, not numbers, and generate a number for display to the user. This gives ordered numbering to the user and allows you to reference figures with memorable names, but does not require you to reorder or modify figure numbers after every edit. Here's a quick example using jQuery:
<h2>How to add a contact</h2>
<img id="add-contact" class="figure" src="figures/add-contact.png" />
<p>This screenshot shows the location of the Add Contact button.</p>
<script type="text/javascript">
$(function() {
var figNum = 0;
$(".figure").each(function() {
figNum++;
$("a[href='#"+$(this).attr("id")+"']").append(" (figure "+figNum+")");
});
});
</script>
Related
The last 9 months, I've been working on two big websites with PHP and Javascript without using any framework.
Every time I wanted to modify a page or fix a bug, I was spending:
10% of the time on finding the PHP file with the html content
20% of the time on locating the CSS and JavaScript files it is using
20% of the time on locating the PHP classes it's using and the functions and variables it's inheriting
20% of the time on locating all the scripts that are being called through ajax calls.
And only 30% percent of the time to actually fix the problem.
So, I wanted something that for every file that I want to modify within a project, after indexing all the aforementioned, it shows a list with all of these relationships on a diagram/flowchart along with the corresponding links to these files.
After a lot of Googling I couldn't find anything that directly solves this problem effectively. Right now, except for just opening all the includes inside the PHP file one by one, I am using Google Chrome's Inspector to quickly locate the includes from the Network tab or even add my whole Workspace in the Sources tab in order to apply CSS and JavaScript modifications directly from there. The problem with this, is that I don't have any options for locating any server-side code(PHP). Also I don't want to be dependent on any specific Web-Browser. Lastly, this solution doesn't provide me any graphical representation of the website's schema, something that's really important for understanding in seconds the whole structure of a webpage that you are going to modify for the first time.
I know that this question sounds a little off-topic but I couldn't find anything on the Web (maybe I didn't use the correct search keywords?) and I feel like it's something that a lot of developers struggle with sometimes so it could be really helpful if it's answered and stay visible. Even if I am missing the point due to luck of experience and there is a different approach to this kind of problems, I don't think I am the first one and It could be also good to be clarified for all the others out there.
I can't help you with the diagram part of your question but I understand that your problem is indexing.
You could use sublime which more or less work with all the operating systems and at the same time it's quite light. With it you will have indexing as you can see here.
Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.
I found this great tutorial http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
Its easy to follow but i am getting stuck with the JS because i want to have more than one image on the page.
Can someone assist.
You dont need to edit your script (May be the selector).But you have to set two classes for each of your images, one is for common identity (will be feasible while selecting from Jquery) and the other one is to set unique styles to each pair of your images
DEMO
I know that there are already a few answers regarding this subject, but I wanted to ask again, so that you can suggest the best option.
I have created a book that teaches (4 languages so far) at the same time. I will be selling various versions of this books travelling in Mexico. But it is also available online, free of charge. You can go directly to the version in question by visiting
http://jersllvs.majormigraine.com
I have created this book using the spreadsheet program in the OpenOffice suite (same as excel). Right now there are 4 columns for the 4 languages and as I am starting to work on language #5, I am realizing that I can save myself a lot of work, if I can hide/show the columns on the page. What I want to do is use the spreadsheet program to create the index.html for this book with all languages, and then add the needed code to the html file so that the user can check/uncheck the languages. There will be a list of languages at the top of the screen (English, Spanish, etc.) and each language will consist of 3 columns which will extend the entire length of the page.
I only have a limited knowledge of basic HTML, but have a long history working with computers, and can learn whatever is needed. However, as this entire project is to remain completely free (and I still have to get out and sell books to make a living), I want to find the easiest and fastest way to achieve this.
Thank You very much for your answer,
Jerry
I personally would use Jquery. However this could be pretty complicated if you arent too familiary with it. If you click the link I have provided below there is a short demonstration of what I think you are looking for. However because your webpage is so big, I think it could be very complicated for you as there is a lot of styling involved as well.
Take a look at the link I have made, and see if thats what you want. If yes, then you can slowly start to work out how to implement that into your site. To make Jquery work on your webpage you need to add the following code into the <head> tag of your HTML page.
<script type="text/JavaScript" src="http://code.jquery.com/jquery-latest.js"></script>
and then the Jquery code that you may use from my link will need to be within the <script> tags which will look like
<script type="text/javascript">YOUR CODE HERE</script>
I hope this is what your looking for. Here is the link to the page I have made for you: http://jsfiddle.net/3xR2p/1/
A project I'm currently working currently has about 10 ULs, each which will have anywhere from 10-50 elements in them. Its been proposed that each of those elements have a unique ID specified to it that we will use to update content with via Javascript.
This seems like a large number of IDs to add to a page, but each field will have a real and meaningful name.
If this is useful to us, are will adding IDs to this many already existing elements have any effects on performance while initially rendering the page or traversing/modifying it with javascript?
In my personal experience I've implemented pages with over 1000 unique IDs and even IE seem to cope quite well. However, please remember that IE will create a global variable for each ID on the page and remember that in javascript, commonly both global variables and function names are merely attributes of the window object.
So in IE the following code will break:
<div id="foo"></div>
<script>
function foo (txt) {
document.getElementById('foo').innerHTML = txt; // fail in IE
// because function 'foo'
// clash with ID 'foo'
}
</script>
Just something to keep in mind because with such a large number of ID's chances of function names clashing increases.
I took Eddie Parker's advice. Further, I was interested in the difference between short ID's (<10 characters) vs long ID's (>50 characters).
My test used FF2.0 to open a page with n DIV tags, each with an ID, containing only the text "Content":
5000 Short ID's: 1.022s to load from localhost and render
5000 Long ID's: 1.065s to load from localhost and render
50,000 Short ID's: 6.702s to load from localhost and render
50,000 Long ID's: 6.792s to load from localhost and render
Hope that gives you a ballpark.
Edit:
I was using the YSlow extension to perform the timing.
I can't answer authoritatively, but why don't you just write a script to generate yourself a ridiculously large ul list, and test rendering performance with/without id's? Then you can test it across a multitude of browsers while you're at it. Then post the answer up here and you can answer your own question and earn a shiny badge. ;)
It shouldn't take very long to implement a python script to output that.
Adding all the id attributes of course means that the page source gets longer, which might affect the load time somewhat. Other than that, the effect would be minimal. Just having the elements in the page clearly causes a lot more work than adding an id to them.