Archive for ‘JavaScript’

23/01/2016

Laravel vs. AngularJS

I have been spending some time keeping my PHP skills sharp, and have been dabbling with rewriting/updating a front end for my personal home-hosted websites.

I started off with Laravel, and was pleasantly surprised with how quick and easy it was to get off up and running  (manipulating data with CRUD), thanks to the excellent docs, and my forays into PHP MVC stuff (the yii framework) in the past.

Part way through however, I chanced upon this youtube video, and such was the simplicity demonstrated in the examples, I was inspired to go knock together a quick proof of concept.

After one PHP script (less than 50 lines) to spit out all the data I wanted as json, I had a tabulated data viewer with powerful live filtering.

Next on my list is to evaluate how easy it is to implement the search/filtering with the Laravel side, and compare my options for implementing a CRUD system on the single page AngularJS site.

An interesting exercise – I don’t feel like my time has been wasted by doubling up on the work.

06/12/2010

New look Chocolate Hedgehog website

Haven’t posted for a few days because I’ve been busy developing a new look for the website.

I’ve tried to give it a more striking and memorable appearance using some jQuery and CSS elements.

http://www.chocolatehedgehog.co.uk

01/12/2010

Scrolling div using jQuery

I’m in the process of redesigning the chocolatehedgehog.co.uk website to make it a bit more quirky and interesting.

I found some cool effects in that can be done with jQquery – particularly getting a html div object to follow your progress down the page. http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/ is the tutorial I used, and very good it was too.

http://www.chocolatehedgehog.co.uk/new – the url of my work on this so far. It will become the theme for my main site as soon as the content is ready. I’ll keep you posted.

18/11/2010

Change the style of font inside a search textbox

I wanted to emulate certain sites where the search box is populated with “Search…” in grey coloured italic font, but as soon as you click on it and start typing, your query appears in black normal font.

The examples I was able to find were horribly complex and I was unable to get my head around them in the time available, so as an interim measure to get the effect I wanted I wrote my own:

<input type="text" name="q" style="width: 105px; font-style:italic; color:grey;" value="Product Search..." onFocus="this.value = ''; this.style.fontStyle='normal'; this.style.color='black';" onblur="this.value = 'Search...'; this.style.fontStyle='italic'; this.style.color='grey';"/>

The drawback to this is that you cannot use a search button to submit the form – as soon as focus of your browser leaves the textbox (i.e. when you click the button) the text box reverts back to the value of “Search…“. The button has been removed from the form where I’ve used this so users must press the enter key on their keyboard to submit their query.

Interestingly, even though people are searching all the time, and this has been live for a day or so now, I’ve not had a single complaint from a user that the search button has gone….

Tags: , ,
15/11/2010

JavaScript News Ticker

A site I have been working on has had a Flash banner with scrolling text for a couple of years. The problem is that the page took longer than it should have to load, and visitors couldn’t see the banner at all (company logo etc.) if they didn’t have a flash plugin.

Luckily I was able to use this neat little JavaScript at the top of the main body of the page, and revert back to a standard image for the banner.

I modified it slightly so that it would scroll a little slower, the javascript was contained in an external .js file and I could style it using CSS.

Other than that the original script was used: http://www.users.globalnet.co.uk/~thompp/jsscripts/t_newsticker.html

My version is at http://www.chocolatehedgehog.co.uk/files/jsnewsticker.txt