Royal Deer Design » html

Hacking Pin It Button

Sheuli — Sat, 20 Oct 2012 14:53:39 +0000

Pinterest offers a user friendly Pin It button generator. Unfortunately, they don’t really let web developers to modify the look of it. It is getting problematic in a situation when we insert few social media buttons horizontally next to each other and we realize that they have slightly different height.

I faced this issue working on my client’s website organiceyourlife.com.

This is how Pin It button was not fitting into the crowed of other two social networking buttons:

The goal was to make it look this way:

The problems is that the button itself is loaded in iframe (on top of that this iframe is generated by JS) and all the files, including JS and leaded to iframe HTML file are hosted on Pinterest server. I did try many tricks like loading external CSS file to the iframe and forcing CSS styles on iframe elements by JavaScript. Nothing worked.
Solution.

Digging more into the structure of the button I found that I can host on my own server not only JS file which generates the iframe but also leaded into the iframe HTML file, and the functionality of the button will stay.

FLA to HTML with Wallaby

Sheuli — Tue, 08 Mar 2011 07:19:27 +0000

Adobe released Wallaby, a tool that was first previewed last fall at Adobe’s Max 2010 developer conference. Wallaby is the code name for an experimental Flash-to-HTML 5 converter available via Adobe Labs (the site with featured Adobe’s beta technology). Wallaby, is a tool that allows to convert Flash output (FLA files) to HTML5 via a simple drag and drop interface.

You can download it for free here.

Superscript and Subscript at the Same Place (html)

Sheuli — Sun, 31 Oct 2010 00:23:50 +0000

One can display mathematical formulas in plain HTML 4.0 on both Mac OS and MS Windows. You can read more about that here. Unfortunately, there is not any tag which can place the characters on top of each other. To achieve it we have to use few lines of CSS and HTML code.

Below the solution:

CSS:

span.subsup {
position: relative;
}

span.subsup sub {
position: absolute;
left: 0em;
bottom: -1.4em;
}

HTML:

CO 2-3

Interesting thing is that you can create a fraction simply by making Superscript underline. Just like: 2-.

Javascript Change Font Size

Sheuli — Sat, 19 Jun 2010 15:27:50 +0000

We are working on a website with a dynamic font size functionality. Do you know that this so useful functionality costs only two lines of code? If you consider the need of people to see larger fonts on your website you can use JavaScript code crated by our web developer.

Change Font Size with Javascript Ready to use code:

+A
-A

You can use this code on your website, just copy the code and past it into your document.

Web Developer’s Journal: CSS Reset

Sheuli — Fri, 11 Jun 2010 18:50:37 +0000

Web designers and web designers around the world are struggling with a cross-browser compatibility. To make web development process easier, experts have created something called CSS Reset. CSS reset is implemented in order to normalize most of the margin and padding-related differences across different browsers. This is a starting point for each HTML/CSS job.

An example bellow is crated based on Eric Meyer’s CSS reset (meyerweb.com) and it is recommended by Royal Deer Design.

—

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

—

More info:
Definition of CSS Reset from Wikipedia: CSS Reset – CSS declarations remove margins and standardize cross-browser rendering on common elements.