Tag: Javascript

Custom button in WordPress navigation for opening prompt() and mailto event

This is a neat little trick you could to do spice up the administration experience for your customers if you sell websites using WordPress as CMS.

First of all you’re gonna have to add a new entry/link in your admin sidebar. To do this, you could use a plugin such as Admin Menu Editor or code it manually through your theme functions.php file by following this instruction.

Now for the exciting part. In the URL for your menu/sidebar link, you’re going to use an inline javascript function which fires a prompt() dialog which shows some general contact information, in addition to actually firing a mailto() event if the user clicks OK.

Paste the following code as the target URL for your link. Remember to edit the text/mail/phone etc. \n just means a newline to make it look a little better. After all, this is just an ugly javascript prompt dialog, not some sexy bootstrap dialog. 

javascript:(function(){
    let subj = prompt("Hi! Contact us at\n\nEmail: support@company.com\nTelephone: 123 45 678.\n\nEnter subject below and press OK to send us an email.\n","Issue regarding WordPress");
    if(subj) { window.location.href = "mailto:support@company.com?Subject="+subj+""; }
})();

Once that’s done, refresh your admin panel and it could look something like this:

  • Fancy link in admin menu
  • The prompt() dialog
  • Clicking OK fires a mailto() event and fills out subject

For more inline javascript bullshittery you can take a look at this browser bookmark which appends stupid emojis all over the website.

Javascript bookmark function to add emojis to website ?

After fiddling around with some DOM manipulation I figured an emoji generator would be fun…

Add a new bookmark to your browser and paste the following code into the URL target:

javascript:(function(){
    const c='😀';
    let domh= document.getElementsByTagName('h1');
    let domp= document.getElementsByTagName('p');
    for(let i=0; i<domh.length; i++) {
        domh[i].innerHTML+=c
    }
    for(let i=0; i<domp.length; i++) {
       const s='<span style="font-size:'+Math.random()*1000/5+'px;">';
       const se='</span>';
       domp[i].innerHTML=s+c+se+domp[i].innerHTML+c.repeat(i);
    }
})();

 

Quick explanation:

First of we define the emoji (&#128512;) in the c variable.

Then we scan the website for every h1 and p tags.

For every h1 tag we append the smiley.

For every p tag, we prepend the smiley in a random size by using inline span and styling, then we append a few more smileys at the end.

 

This is really stupid, but it’s just a quick demonstration that Javascript functions in bookmarks can be used for many useful things. For instance I have one shortcut which opens a prompt() where I enter a Dell servicetag, then it redirects me to the Dell website to check ProSupport warranty.

 

Here’s a pic of this website destroyed by stupid emojis:

 

jQuery serialize empty result on bad HTML form

TIL that jquery’s $('#someform').serialize(); will output nothing if there’s a syntax error in the form HTML markup.

I actually added a parameter to a <select> field, so it looked like <select type="type" name="type"> , obviously I wasn’t paying much attention because type="type" shouldn’t be there at all. As soon as I removed that parameter jquery serialize would work as intended again.

hours_spent_debugging_pebkac += 1;

Quickly turn any HTML file/site into a desktop app

Step 1: Locate your chrome.exe application

Copy the full path to your Google Chrome executable, for example:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Step 2: Create a new shortcut on your desktop

Enter the following as the shortcut target:

"path/to/chrome.exe" --app=file.html

Examples

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -incognito --app=https://it-db.com

This will create a shortcut to open Google Chrome in “Desktop app” mode (no URL bar or menus etc) and point to the url after the --app= parameter.
The -incognito isn’t neccessary, just for showing the possibility.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=C:\Users\kek\Downloads\cyberchef.htm

Same as above, but this will open a local file on my computer (cyberchef.htm) as a desktop app.

You could even distribute apps as single compressed html files and a corresponding shortcut, as long as the user has Chrome installed and you can figure out the chrome.exe path. Then you’d never have to go through the hassle by using Electron and compile it as an .exe.