CyberD.org
C:\ Home » Blog » Archive for "Code" (?)

The Root Of The Problem

I had a jam game today. Deadline at midnight. Hoped I'd get it done way before then (I'm actually typing in this post around 5 PM - still have barely made it past the interface design - writing this a little ahead of time) but of course it's probably going to be done at the last moment possible...

Technically I have a few hours extra before midnight EST, but work awaits tomorrow and I didn't sleep well last night (tailbone pain all of a sudden, can't lie on my back - can't lie easily on my sides either - very problematic) so I really don't want to stay up that late if I can help it.

This is all beside the point though. Neither here nor there. Nor over there. Nor anywhere.

But anyway, the point is: I think I finished up my interface bit about an hour or so ago. Maybe even earlier. A complex mash-up of movie clips and tweens and buttons as to give the game a floating kind of feeling (you'll see if you play it) and the only thing that remained was adding in some actions to those buttons to direct the users to the relevant frames within said game... and it just wouldn't work! I used an action I'm pretty sure I've used plenty of times before, namely:

on(press){_root.gotoAndPlay(1);}

...but it just didn't happen! Nothing happened when you pressed it.

I tried copying the button outside the movieclip it was embedded in.

I tried copying it outside the additional movieclip it was embedded in within that (had one for a rotating question mark in addition the wave FYI).

I tried swapping out _root for _parent, and adding in the scene number along with the frame, and adding in a frame name instead of the number, and then actually copying the button outside the movieclip and removing that _root bit there... and suddenly it worked fine.

What's the problem? _root is an accepted parameter, so why wouldn't that work?

I've been looking through code examples and tutorials and what-not trying to figure this out, wondering if maybe a button can't be clickable within a tween, or with layered MCs, or with too many MCs on the same frame, or if there was maybe a problem with the MC name (it had a space in it, could that be it?). Tried applying the code to the MC itself instead of the button too. The MC doesn't play then, but debug doesn't say there's anything wrong with it, might actually work with button actions on an MC - finna need to test that a bit further some other time.

In the end though I settled for a working workaround. I cut out the _root bit of it all, and instead just added in a regular gotoAndPlay within the MC, beyond the last frame of the loop, with this:

_root.gotoAndPlay(4);

...and...

gotoAndPlay(1);

...on the last frame of the loop, as to keep it looping seamlessly without automatically taking the user to the aforementioned frame in the root of all should the user not click said button.

And it worked! For some reason it works when the action's applied to the frame itself, but not when it's applied to the button.

I'm battled, and slightly frustrated I spent one or two hours on this tiny thing, but that's that. And that's it for writing/spending all the more time on this thing that I don't really need to spend time on. It's functional though. Documentation and vent in one.

Now onto the rest of that game...

Anti Auto-Hyphenation Hacks

Noticed the maybe annoyingly frequent hyphenations on the site lately?

Lines that go li-
ke this even when they re-
ally don't need to?

I didn't until I switched to Chrome! Apparently it's a browser-based feature. Neither FireFox nor Opera had it - Chromium-based though the latter may be too it's apparently not all that similar to Chrome after all.

I don't want this stuff though.

Lines aren't supposed to hyphenate themselves. I do that manually.
I add in shy hyphens into the code so certain words hyphenate at certain resolutions, and have been planning to revise old posts eventually with this in mind, to get them looking as good as possible.

Hyphens at the end of every line just look weird.

So, the solution? I found this:


article .entry-content {
	-moz-hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
	word-wrap: normal;
}

I tried adding it in... nothing happened. It didn't work. I kept looking. I found this too. Good alternative, though no MS compatibility here:


.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

But that's not very different after all.

After digging around a little more I found this:


p {
     -webkit-hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
     -webkit-hyphenate-limit-chars: 6 3 3;
     -webkit-hyphenate-limit-lines: 2;
     -webkit-hyphenate-limit-last: always;
     -webkit-hyphenate-limit-zone: 8%;
     -moz-hyphens: auto;
     -moz-hyphenate-limit-chars: 6 3 3;
     -moz-hyphenate-limit-lines: 2;
     -moz-hyphenate-limit-last: always;
     -moz-hyphenate-limit-zone: 8%;
     -ms-hyphens: auto;
     -ms-hyphenate-limit-chars: 6 3 3;
     -ms-hyphenate-limit-lines: 2;
     -ms-hyphenate-limit-last: always;
     -ms-hyphenate-limit-zone: 8%;
     hyphens: auto;
     hyphenate-limit-chars: 6 3 3;
     hyphenate-limit-lines: 2;
     hyphenate-limit-last: always;
     hyphenate-limit-zone: 8%;
 }

...and started questioning if my manual hyphenation approach was really necessary after all.

If you actually have total control over the character amount required for automatic hyphenation to occur, and on how many lines in a row this can occur, then this would pretty much be the same thing as doing it manually after all, except you don't actually have to. Potentially plenty of time saved at no extra cost! No downside.

I tried using this too though and that didn't work either! Did some digging through my stylesheet and noticed... I'd actually enabled auto hyphenation myself in the code further down, and just hadn't been using a browser earlier with which this code was compatible. -_-

So I removed that but... it's not going away anyway.

Some plugin-related stylesheet with this built-in? Some function I've forgotten about? Something built-in with WP itself? Something browser-based after all, that I just can't override?

For now I think I'll just give this a break, but it does seem like the manner of hyphenation changed slightly after I removed my own code.

It's not as frequent now. Doesn't happen with two letter cuts. The lowest I've seen so far is three.

So that's that. Override. Don't let browsers take control. Even if you want to go automatic: manual code's the way to go!

I'll look into this some more in the future; post a follow-up then.

When I can get these lines exactly where and how I wan-
t 'em.

Customizing WordPress MediaElement.js Audio Shortcode Again

Back in 2015 I customized the WordPress MediaElement.js audio shortcode, and some time since then it broke. I tried fixing it. I dug around and did things but... nothing seemed to work. So I finally cleared out the old code and started fresh.

This is what the vanilla version looked like:

Original

This is what my 2015 version looked like:

New!

And now here's the 2018 version:

The New MediaElement Element!

The process was a lot more time-consuming last time - mainly because I'd never done it before, but also because documentation for MediaElement.js in regards to WP was pretty much non-existent. Unfortunately this is still the case, but I did a search and found this new and super helpful post, with a new stylesheet included. I didn't want that particular style, but I used it as reference and experimented with other colors and dimensions, trying to make it somewhat like my own one, and you can see the result above.

I'm pretty happy with the result! Thoughts?

It's a bit buffer now. A bit thicker, and simpler (no gradients... yet), but I was happy to see the loading pattern was a part of the original player, so that part didn't need redoing. Further mods may happen when time allows, but for now: the player's no longer broken! Hurrah.

If you want to make your own modification the link above's a fantastic reference. Super easy to understand, use, and modify. Not all elements are included in the stylesheet, but you can copy in any additional ones from the official one (just check your page source on a player page - there should be a link to the official stylesheet there).

And if you don't: this is all you really need. The barebones; essentials. Much easier than the one I used before.

Hopefully it'll work longer than the last one, too.

Most preferably forever.

Making Images UNresponsive

How do you do it? I can't figure it out. The image in this post just won't stop stretching no matter what I try, and Google gives little help on the topic. Seems people all want responsive images, even if that means upscaling images that are smaller to sizes they shouldn't be. I mean seriously, would you rather see an image like this...

...or like this?

Those spots above would be the places I add in those example images, but since suddenly all images on the blog are responsive I can't even give you an example of how different they'd look. They'd both be just as ugly and blurred as the one in this post.

So what's causing this:

Is it the browser? It shouldn't be. Not unless both FireFox and Chrome made a simultaneous update that causes the same issue. Up till now this hasn't been a problem, and... no, it's showing the same way in Vivaldi too.

I shouldn't need to try more alternatives, but I did. That didn't work either.

Is it my lightbox plugin? No. I tried disabling it, and modifying the settings, and checking to see all traces of it were really gone. That wasn't it.

Is it the WordPress function they added in with 4.4 that automatically makes all images on the blog responsive unless you tell it otherwise? No. Not unless this plugin isn't working. And it should: it's been tested on the latest version. I actually just switched from this other plugin since I assumed that's the one that'd stopped working. But that wasn't it.

Is it just this one post? Nope. It's affecting all others too. All images smaller than the post area are scaled up to match the content area width.

Is it my CSS? It shouldn't be. I went through it to check, and I can't find anything there that should cause anything like this - though if you know code feel free to give it a look too. I tried adding in bits and pieces to combat this issue, but couldn't find anything that worked. The 'initial' value did not work, and though I'm not sure it would have worked I couldn't specify precise image dimensions either, since image sizes often differ between posts - even for smaller versions.

Adding a CSS style to override any potential others directly via the post didn't work either. I fiddled around the with the HTML values for size there too, but no game.

What else could it be? The image just won't stay the right size no matter what. I give up. I'm leaving this here in case someone has any ideas on how to fix this! And if I do (or anyone else lets me know - I'll give credit where due): there will be a follow-up. I hope there will be a follow-up...

...because this is just ridiculous.

The Missing P Tag

I updated this post recently with... an update. If it's a typo or other minor thing I usually don't mention this, but for notable updates I have an update shortcode I usually use. It shows up like so:

UPD: This is an important update!!!

...usually at the bottom of the updated post in question.

This time, however, the shortcode didn't work. The tags appeared as plain text and everything was appended the impending block of text like an ugly tumor.

I checked the spelling. I copied in the tags from another post where it did work. I pondered if maybe I'd added in a filter that prevented shortcodes from running in the front page specifically... but what was strange was that the prepended line break wasn't showing either.

I deleted the shortcode and tried updating the post with just the text. The line break was still missing.

I copied and pasted via Notepad - to get rid of any potentially erroneous formatting. I added multiple line breaks. I added in new paragraphs. I eventually checked the source code to see if there was something I just couldn't see via the text editor... and it was missing a <p> tag.

For some reason no matter how many line breaks I added after the final line it just wouldn't break, shortcode or no. The p tag (that is otherwise inserted automatically each time you break a line in the WP text editor) just was not there.

Why? I have no idea. I Googled: no result. I finally added in extra </p> and <p> tags where the break was supposed to occur and... that works. For now. If in the future that post starts looking weird again, maybe the missing p tags have finally returned.

A Little Random Title Script

I made a little random title script for the movie review pages with more than one review. A little impulsive thing... that took 40 minutes to figure out. Ugh. Here's how it turned out though, in two parts. It's in JS.

First there's the header, that either shows a random title from a specific list, or if the user has JS disabled, a standard one:

<h1><script src="/theme/js/more-reviews.js" type="text/javascript"></script><noscript>More Reviews!</noscript></h1>

Then there's the script with the aforementioned list, and code to cycle through the titles randomly, above refereed to as more-reviews.js:

var r_text = new Array ();
r_text[0] = "More Reviews!";
r_text[1] = "Added Addages!";
r_text[2] = "Ongoing Opinions!";
r_text[3] = "Latter Ramblings!";
r_text[4] = "Future Views!";
r_text[5] = "Later Watches!";

var i = Math.floor(7*Math.random());

if (navigator.appName == "Netscape")
   {
   document.write(r_text[i]);
   }
else
   {
   document.write(r_text[i]);
   }

That's it! Depending on your number of titles you might need to change the formula below the list too. I tried using a solution that didn't rely on numbers at all first, but just couldn't get it working, so this is it.

This is what it looks like in action (reload page to see more):

It's such a simple thing, but I dug through such a huge mess of other methods before finding one that for some reason actually worked, that I felt like I needed to post about it. It's not all that strange this one did, but it's strange the others didn't. I still have no idea why. Something with the way H1 tags work? Something about including a JS script in a header? If you have any knowledge about such limitations I'd be intrigued to hear.

So, stranger who stumbled upon this post, if you're wise then feel free to send me a message, and if you're in the same situation - searching for a solution to the same problem, hopefully this will find you faster than it found me! And hopefully it'll work for you, too. It's just a little random random title script, but it sure took a big effort to get right.

Privacy   Copyright   Sitemap   Statistics   RSS Feed   Valid XHTML   Valid CSS   Standards

© CyberD.org 2021
Keeping the world since 2004.