[Pro] Javascript for Search Field, Safari problems

Legacy Dynamo
41

I almost forgot my favorite reason for using these services – unlike an e-mail, you can edit them after the fact. I cannot count the number of times I have posted something example-shaped, read through what I wrote (after I sent it) and saw a typo that either altered the meaning or broke the example entirely. I can go back and edit a Gist, and the next person to see it embedded in FreewayTalk will see the corrected version.

True, sometimes there is value in my errors, and pointing them out, and correcting them “in public” with a follow up message. But if a person comes along later, parachuted into the conversation by Google (or the fabulous Sphinx search engine in FreewayTalk.net), then they also have to piece together the real solution over multiple messages in a thread. Sometimes having everything together and fully baked is just nicer.

Walter

On Mar 9, 2017, at 5:00 AM, Walter Lee Davis email@hidden wrote:

The Gist (or Pastie) only appears in FreewayTalk after you publish the new post. That’s a long-standing bug that I never fixed while I had the chance, and now can’t fix because I no longer have access to the server.

In my usual use-case, I just paste the URL in Mail.app when I compose messages there, so I don’t see that distinction. The color syntax highlighting is dependent on you setting the correct file type, either by giving the Gist a fake filename when you create it, as I did, or by using the file type picker to choose the programming language. Both of those options are in the Gist interface, not the FreewayTalk one.

In the case of your example, which I just pasted into Gist, the fact that it had tags meant that it was HTML, so I ended my example’s “filename” with .html. That was all the clue that the formatter needed. I could also have stripped off the tags, and set it to .js, and that would have worked similarly.

Walter

On Mar 8, 2017, at 11:18 PM, JDW email@hidden wrote:

Walter, I created a Gist but when I paste the URL into this field here on FreewayTalk, the URL does not appear in the Preview! The only way I can get it to display is by putting it inside “code” tags like this:

https://gist.github.com/JDW1/2c2b619fb6bca99fdbfd43d4a4c49b2c#file-gistfile1-txt

I copied your Gist’s URL above and pasted it into my post here, but that URL too won’t display in Preview. How in the world did you insert it?

Furthermore, when I view my Gist on Gist Hub, it is not colored. What’s the trick to that?

Thanks,

James

dynamo mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

dynamo mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

dynamo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

42

I never use an email client to post to this list. I simply receive email notifications that replies have appear, then I come here with Safari and do my thing. Because we cannot EDIT or DELETE posts (for reasons I already know), I am very cautious about posting, which is why I noticed the URL missing in the Preview. The Preview is my Savior! It keeps me from posting a train of separate posts which can be hard to read and boggle up discussions. But since you cannot access the server to fix the problem, I guess it cannot be helped. So I will conduct a truly “blind” test here to see if a CSS Gist will come through as I expect…

The following is a copy/paste of the “Embed” URL (with SCRIPT tags) at GitHubGist:

Fingers crossed it displays.

James Wages

dynamo mailing list
email@hidden
Update your subscriptions at:

43

Holy cow, it does display fine! Well, that’s a relief. I shall remember this trick when posting in other threads. Thanks, Walter.

James W.

dynamo mailing list
email@hidden
Update your subscriptions at:

44

It’s even easier than that – just grab the HTML page URL. No need to fiddle with the embed widget business. Copy and paste just the full HTML URL to the Gist as you see it in your browser after initially creating it. The FreewayTalk server is smart enough to recognize a Gist (or Pastie.org) URL on its own on a line in your post and turn that into the entire script tag to do the embed thing.

Walter

On Mar 9, 2017, at 7:32 PM, JDW email@hidden wrote:

Holy cow, it does display fine! Well, that’s a relief. I shall remember this trick when posting in other threads. Thanks, Walter.

James W.

dynamo mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

dynamo mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

45

Understood. Thanks!

dynamo mailing list
email@hidden
Update your subscriptions at:

46

For the sake of others who may come lurking into this thread, I wish to mention that I updated my code today to eliminate the second inline SVG, making the code a tad more compact.

Originally I used a gray magnifier icon as the normal state and a white one as the rollover (focus) state. But I realized I could eliminate one SVG by simply leveraging opacity in the CSS. However, it took a little time to work out the kinks. For some reason, Safari and Chrome (Webkit) were fading the placeholder text, while FireFox and IE/Edge were not. (Actually, FF usually fades the placeholder text, but using the opacity attribute set to 1.0 fixes that, but doing the same would not fix Webkit.) The fix was for me to simply reorder the first three lines of the CSS. Instead of having the “input::-webkit-input-placeholder” line first, I put it third, beneath the 2 Mozilla lines, and magically (again, I don’t know why) Safari and Chrome stopped fading my placeholder text and now it looks the same across all browsers.

Here’s my updated Fiddle:

Since the SVG I use is an inline background-image, to ensure cross-browser compatibility, I used the following SVG encoder:

http://yoksel.github.io/url-encoder/

You can download the original unencoded SVG from my website here (it’s WHITE so you can’t see it in-browser):
https://kiramek.com/SearchMagWHT.svg

Also note that if you Minify the CSS, you cannot Minify the SVG code or it won’t display. So just Minify all your CSS here:

Then replace the SVG part of the minified code with the unmagnified (but encoded) SVG. And yes, if you’re wondering, you can still shave off a fair amount from your code if you Minify and use GZIP on your web server. It isn’t a lot, but sometimes every little bit counts.

I tested this JS/CSS combination in all modern browsers on Windows and Mac, as well as in iOS. It works well, I think.

Best wishes,

James Wages

dynamo mailing list
email@hidden
Update your subscriptions at:

47

If you are wondering why I used “initial” in the second line of the following code instead of “all”…

    -webkit-transition: all 0.4s ease-in-out;
    transition: initial 0.4s ease-in-out

…it’s because Explorer and even Edge are stupid. (Don’t we all know that by now?) Meaning, those lovely browsers from MS will cause the SVG to vanish until the 400ms is finish and then the roll state SVG will appear (yes, even when rolled by opacity change). Just plain stupid. To fix, I used the “initial” attribute on the “transition” line. That means most every other modern browser (Chrome, FF, Safari, etc., even on iOS) will show the ease-in-out just fine, but silly explorer won’t show the transition at all, just making the roll state appear instantly. I also found older versions of FF running on WinXP won’t show the transition due to my hack either, but that’s okay with me. And yes, I tested Opera on MacOS Sierra, and it works fine.

–James Wages

dynamo mailing list
email@hidden
Update your subscriptions at: