Archive

Posts Tagged ‘html’

Right align icons in a header

July 18th, 2008
geek

A little curiousity I’ve found trying to put icons inside my headers. The order is significant (IE6/7 and FF2) such that to get the right effect I should put the images before the text. This is what I get if I do it ‘normally’…
Image icons in the header looking ugly


img.tool {
	float: right;
	cursor: pointer;
	display: inline;
	margin: 0px 2px 2px 0px;
}

<h1 class="position">
	Human Resources Administrator
	<img class="tool" src="img/new.png">
	<img class="tool" src="img/copy.png">
	<img class="tool" src="img/edit.png">
</h1>

Try as I might I just could not get the margin/padding/whatever to budge. But if I switch the images to be before the text I get the right result. Don’t bother to wonder why. Just make a mental note and keep moving.

Image icons in the header looking pretty


<h1 class="position">
	<img class="tool" src="img/new.png">
	<img class="tool" src="img/copy.png">
	<img class="tool" src="img/edit.png">
	Human Resources Administrator
</h1>

POST to a popup window

January 17th, 2008
geek

The most ‘fun’ thing about charity work is that price is no obstacle. When they describe something really supa-dupa to me, I tend to blink and say ‘Yes, well, that does sound like a good solution”, quietly acknowledging that they haven’t a clue just how much work they’re describing.

In the real world you, when hitting this situation, in parallel with preparing the quote for that Rolls-Royce version, I know I can go right ahead and prepare a cheaper, alternative vision which is more respectful of the budget they’ve actually got. When shown the first quote I know exactly what’s going to happen and like to be prepared.

But not so with a charity because the price difference between the Rolls-Royce and the Mini Minor is exactly zero. Presented with two solutions, one which will take me a month, and one which will take a minute, they inevitably opt for the one month solution because, frankly, it’s no skin off their nose. How to deal with this is the classic conundrum for anyone who voluntarily commits to ‘a worthy cause’.

Fortunately I’m not the principal on this occasion and can sympathetically deliver my little contribution to the poor bugger who is.

It’s some javascript to take the value of a donation and and popup the shopping cart of a partner site prefilled with the value and project id.

Sorry about the illegibility; wordpress wants to ‘help’ me. No doubt there’s another post in how to I choose to solve what is no doubt a common nuisance.

</p> <h3>Donation Amount</h3> <form> <input id=CAT_Custom_20066 type=text/></p> <input type=submit value=Donate onClick="spawnCNEC(CAT_Custom_20066.value, 'loan');"/> </form> <p><script type="text/javascript"><!-- // Spawn a new window to the cnecpi website and add a donation to the cart // donationValue: an integer corresponding to the dollar value of the donation // project: text string identifying the project to contribute to. Either 'dump' or 'loan'. // eg: // spawnCNEC(20, 'dump') // opens a cnec shopping cart with a $20 contribution to the Rubbish dump project function spawnCNEC(donationValue, project) {</p> <p> // cnec's cart and catalogue numbers for identifying the microloan or dump project const url = 'http://www.cnecpi.com.au/cart.html'; const loanID = '264'; const dumpID = '263';</p> <p> // default to the microloan item var itemID = loanID; if (project.match(/dump/)) // unless contributing to the dump :) itemID = dumpID;</p> <p> // create form to send to cnec var cForm = document.createElement('form'); cForm.target = 'cnecTarget'; cForm.method = 'POST'; cForm.action = url;</p> <p> // add the value of the donation (donationValue) var iPrice = document.createElement('input'); iPrice.type = 'hidden'; iPrice.name = 'price' + itemID; iPrice.value = donationValue; cForm.appendChild(iPrice);</p> <p> // add the cart id of the item var iHidden = document.createElement('input'); iHidden.type = 'hidden'; iHidden.name = 'addtocart'; iHidden.value = itemID; cForm.appendChild(iHidden);</p> <p> // attach and spawn submission in a new window document.getElementsByTagName("body")[0].appendChild(cForm); mywin=window.open(cForm.action,cForm.target,'scrollbars'); cForm.submit(); } --></script><br />