I have a javascript link (works like a plugin, but not plugin, it's just a javascipt link), the user can just drag and drop the link to it's bookmark bar.
Everything is working, but when the URL/location link is too long, it's very annoying that when the use mouses over the bookmark, it will also show the URL/Location link.
So is there a way not to display the URL/Location link when mousing over?
It would be better if we can display a customized description;
It would be better if it works for all major browsers;
It would be better if it's cross-platform;
Any reasonable suggestions or even hacks are also welcomed as long as it will improve the user experience.
Thanks.
So is there a way not to display the URL/Location link when mousing over?
Not without modifying the browser at a deep level. And if you are going to do that, you don't need to use a bookmarklet.
But you can add a comment to the code to explain it.
Example:
javascript:/*--A-very-short-description--*/document.location=...
I choose to use - instead of spaces because spaces are encoded to %20, which is much worse that - for reading.
This won't hide the code, but it does make the bookmarklet slightly more friendly.
Using this, there is a slight trick that in Firefox and maybe other browsers that sort of "hides" the code. Firefox shows only the beginning and ends of the code, not all of it. So if you code begins and ends with a comment, you can effectively hide the code.
Approximate example:
javascript:/*------------------------*/document.location=.../*------------------------*/
In Firefox this will look something like "javascript:/------------...--------------/"
You can experiment with the details to get the desired result.
Related
I'm just starting to work with the WebExtension API (on Safari rather than Chrome), and I've gotten as far as having the extension show a button in the popover ui and on clicking it the content.js script will replace any given word on a page with another given word.
This works great, but I'd like to have another button in the popover ui that easily reverses this replace call. Currently I just have it perform the same replace function but in reverse, but I'm wondering if there's a way to reverse all extension actions performed without having to define them a second time, and without simply refreshing the page to revert all changes.
Hope this makes sense, would appreciate any pointers anyone could give!
You didn't show us the code with which you make the replacements, but if you want to revolve the process a possible solution could be to wrap every single word\sentence you want to replace within a tag (e.g. span) and adding to it a property which "remember" the sostituted value.
I usually do something like this:
<span class="myExtensionId_className" data-previuosValue="foo">bar</span>
I have an idea for a useful tool but I have no idea where to start. (I apologize for the vague nature of the question, but I do think it can be answered in a specific way and therefore is appropriate for SO.)
Here's what I'm after in a nutshell: a Chrome extension that darkens/shades the whole viewport except for the "current" line, i.e. the line you're reading. (I explain momentarily how the "current" line is determined.)
Pretend the line outlined in red is the highlighted line and everything above and below is grayed out. (My mockup sucks but I'm working with limited tools right now.)
When the page loads and you turn on the extension, the "current" line is the first line of paragraph text. To go to the next line, press the down arrow. Ideally, your highlighted line is in the exact middle and the rest of the page "slides underneath" to the extent that it can so your eyes don't have to move.
So here's my question: if you knew HTML/CSS/JavaScript well enough but you'd never written a browser extension, where and how would you start this? Do a plain JS POC first? Build the POC as an extension?
To be clear, this isn't a "plz how i write ecomerce site" question where I'm asking you to spoon feed me the whole thing. I'm just asking what you'd do as the first step. I realize this is a non-trivial undertaking. Thanks in advance.
If you know HTML/CSS/Javascript well enough to get the effect you after, then getting started with a Chrome extension shouldn't be hard. Just read the Chrome extension developer documentation. There are loads of example extensions as well.
You basically need to make a package directory, containing a manifest.json, and specifying a single "content script" which would contain all your code.
It could make sense to start out developing based on a bookmarklet that injects a script tag (with file:///path/to/yourscript.js) because I think that would be slightly faster wrt loading new code, resulting in a slightly faster development cycle. You could also set up a dummy page to always include this particular script tag so you only have to reload that page to see your change. Even fancier: Use http://livereload.com/
Otherwise you need to instruct chrome to reload the extension manually after each change in your code.
You may like to use Extensions Reloader for easier reloads.
I like the idea by the way!
Our web application is designed such that the text transform is picked from CSS.
There are multiple links on a webpage; hence i will take example of a Next link.
When i hover the mouse over Next link in FF, it shows the below code:
_click(_link("Next"));
Similarly when i hover the mouse over the same link in Chrome, it shows the below code:
_click(_link("NEXT"));
When the script is recorded in FF and executed in chrome, it fails at the location because "Next" link is unavailable. This is one example of a link and there are multiple links and multiple pages. For this scenario, do i need to verify the text for each link or is there a universal way i.e. toLowercase method that can help me.
Thanks.
As Kshitij pointed out, you can get this working by using a regular expression as your accessor... but you might also check the Alternatives pulldown in the Controller. Perhaps there's an alternative accessor that is better suited for both browsers.
I think, the question should be how can Sahi identify the element with text by ignoring the case-sensitivity.
Any tool can only record the attributes which is available on the browser at that time.
You can use the following code to achieve the functionality:
_click(_link("/Next/i"));
I'm currently using CodeMirror as a browser based code editor, but what really annoys me is its lack of real tabbing. It uses spaces instead of tabs, and I just cant get my code as clean as desktop editor.
Are there any better editors out there? It can be DOM based or Javascript or even browser specific, just as long as it gives me real tabs! :)
PS. I've had a look at Ace, which looks like it should do the job, but I cant seem to get real tabs to work - anyone tried it?
Cheers,
Chris.
I was wondering if it was ever ok not to have a submit button (Ok, Go or Search for example) near a search box in Web pages.
I know that hitting enter is much faster and that it will perform the search.
However, is it an accepted convention for the average non tech savvy user or only for the tech community?
For example, the search box here at stackoverflow doesn't have a submit button, but I don't think anyone is complaining (and I sure don't).
On the other hand, someone suggested using Google as an example: would people notice if the buttons were removed?
I just started reading Don't Make Me Think by Steve Krug and he mentions that every search box should have something that tells me I can click on it to launch the search.
Your thoughts?
Why you should have a button:
Not everyone knows they can hit
enter, so you are leaving some less
savvy people out in the cold.
Some devices like phones and consoles may not have a way to submit without a button. The PC based browser is still dominant but don't assume it is the only way people access your site.
You may not have a button if (both conditions must be satisfied):
Your audience is tech savvy (as on SO)
You provide a visual cue that the search box actually is a search box
By adding text inside it mentioning it should be used to search
By adding an icon inside the box
Generally I would think that hitting enter is a shortcut to submit rather than the primary means.
I think it depends on your target market. If you are StackOverflow it's not too hard too think they know how to use a browser (using a back button on a browser to navigate is a similair design convention) and pressing Enter = submit for search.
However if your target market is say mechanics (no offence to mechanics) that don't use a browser/computer often then look at how Google does it (and they target the broadest scope) - they have a button to submit.
There is a middle ground you could look at, which is have a water mark like StackOverflow which tells users "Click here, type in search values and press enter to search" - or something like that (hopefully shorter) where you actually catering for users of all levels.
Whether or not a button is required depends on the audience. Here are issues to consider:
Technically oriented users may not need a button and will usually not have to think about hitting enter to submit a search request.
Conversely non-technical people may not even know it is possible to hit enter to submit a search request. So no amount of thinking might work for them.
There may be technology limitations that require a button. If you expect your audience to be browsing your form from a platform that does not provide an implicit way to submit a search request then you may need to provide an explicit button.
So essentially you need to know your audiences and determine where the edge cases lie and how critical they are. Using SO as an example, it is directed at technical users so an explicit button probably isn't required. However for a site like google where you need to be accessible to every single user using every possible platform, a clear explicit search button is a must.
"Don't Make Me Think" - so gimme a button.
There will always be someone using the application for the first time; don't make them think either. And your screen shouldn't be so fussy that it is impossible to fit the button in comfortably - that would indicate a different set of problems.
I think for a non-tech person some sort of submit button is needed. Think about people who don't use computers very much. They often click all of the buttons needed instead of hitting enter because they don't realize enter does the same thing. My opinion...if it isn't for tech guys only then it should be as simple as possible.
It depends on your audience. Steve's audience is everybody. Majority of which are so far from IT you'd need a telescope to see them. If your auditory is a single user, you might skip all clues: button (with or w/o names), in-box label.
For my own login window I leave two fields: no labels, no buttons, no javascript to tell you which one is which. But that's not a public project.
A while ago there was an article on Smashing Magazine about this.
There were some alternatives like a looking glass or another icon, but basically there is always a button, or something which represents it.
Having a button makes it clearer that the text field is a search field. Merely having the text field itself indicate this in its contents is unsufficient.