I wanted to add images to jquerymobile button elements.
example: http://jaketastic.com/jmobile/
source: http://jaketastic.com/jmobile/jquerymobile-advanced-theme.zip
I wrote this snippet of jquery to add a new element every time it encounters the ‘decorate’ attribute. It adds a div with a class = to the decorate attribute’s value.
HTML:
<div data-role="content">
<a data-role="button" href="#page1" data-icon="gear" data-iconpos="right" decorate="ui-deco-gold">
Settings
</a>
<a data-role="button" href="#page1" data-icon="info" data-iconpos="right" decorate="ui-deco-blue">
Credits
</a>
</div>
jquery:
//Decorate every element with the ‘decorate’ attribute (prepend):
$(‘[decorate]‘).each(function () {
var decoration = "
<div class="" + $(this).attr("><span> </span></div>";
$(this).prepend(decoration);
});
CSS:
//Container class to hold image
.ui-deco-gold {
float: left;
left: 9px;
top: 0px;
width: 0px;
position: absolute;
}
.ui-deco-gold span {
display: block;
width: 200px;
height: 39px;
background-image: url(‘../images/magic-bolt_fade.png’);
}
// For taller elements like lists
li .ui-deco-gold span {
height: 42px;
}
//We can even change the image on hover!
a:hover > .ui-deco-gold span, li:hover > .ui-deco-gold span {
background-image: url(‘../images/magic-bolt-green_fade.png’);
}
.ui-deco-blue {
float: left;
left: 9px;
top: 0px;
width: 0px;
position: absolute;
}
.ui-deco-blue span {
display: block;
width: 200px;
height: 39px;
background-image: url(‘../images/magic-bolt-blue_fade.png’);
}
li .ui-deco-blue span {
height: 42px;
}
a:hover > .ui-deco-blue span, li:hover > .ui-deco-blue span {
background-image: url(‘../images/btn-deco.png’);
}
..
jquerymobile theme
I’ve made another website!
Some of the more interesting features of semblancesolutions.com are:
- Twitter feed on the home page.
- A mobile version that automatically loads on most smartphones.
- Neato logo!
Normal
Mobile
MechJeff.com
My cousin Jeff needed a site to show off his cool craft creations, so I made him one! If you happen to need a skilled welder, and fabricator and mechanic to build anything you can imagine for your home or business, he’s the man to contact.
family, mechjeff.com
I’ve made a simple slide show in flash to work with the pods plugin for wordpress. In principle, you can use the slide show in any situation, because it uses a ‘magic’ string to get the images, links etc it needs to load.
The compiled .swf is just under 4kB and uses a config_slideshow.txt file to get itself started.
The slideshow.swf looks for config_slideshow.txt in the same directory (as itself) and loads some configuration variables from it. (Don’t rename slideshow.swf or config_slideshow.txt.) The config_slideshow.txt will look like this:
url=http://your domain.com/flash_slideshow/&delay=6&suppressLoadInfo=false&linkText=Click here to learn more.
The format for the magic string the slideshow will read is:
title of image^http://my domain.com/path_to_image.jpg.gif.png.bmp^http://link when you click the linkText^image description text in simple html or txt#
<br>
title of image2^http://my domain.com/path_to_image2.jpg.gif.png.bmp^http://link when you click the linkText^
image description text in simple html or txt#
<br>
etc…
You can see the magic string uses carrots “^” and “#<br>” to break into usable data. The order of the elements in the magic strings is important, but you may leave an element blank if you like: “^^”
Here is an example with intentional missing images to show how errors are handled:
Here are the files:
Flash slideshow files and source
Still to do:
back/forward buttons. + configure in config_slideshow.txt file.
Fullscreen button. + on/off in config_slideshow.txt file.
Play music .mp3 or midi with the slideshow. +config_slideshow.txt file controlled.
AS3, pods plugin, wordpress
I’ve made a more complicated WordPress website using the excellent pods plugin.
BridgeCityPM.com
pods plugin, web development, wordpress
I’ve made another simple wordpress site.
speechtherapypdx.com
web development, wordpress
I made a simple wordpress site for a friend: floralsunshine.com
She was delighted with the way it came out, even though I was rushed into completing most of it in one day!
web design, web development, wordpress
Oh boy I am so excited.
Let me see here… How is this supposed to work…
Kewl..
