Categories
post

LESS CSS Strings

I saw a tweet about LESS CSS today that I was able to answer with some simple trials. The question came from @funkatron: “Can any LESS.js nerds tell me how I could use a variable to set a base path for various `url()`s? like `background: url(@BASEPATH/foo.png)`”

The solution was quite simple after some trial and error.

@BASEPATH: ‘/PATH/TO/BASE’;
#element {
url({@BASEPATH}/foo.png);
}

Turns out it doesn’t work in lessc. I use PHP Less CSS. (plessc)

Categories
post

jQuery Panel Slide Out

I was looking for some code to do slide out panels and found http://www.building58.com/examples/tabSlideOut.html

I created a patch that will allow you load the content through AJAX, instead of statically in the HTML.

In the HTML you need to add another element (DIV) that wraps the content to be loaded. Change the example on the page above with the two lines left aligned below.

     <div class=”slide-out-div”>
          <a class=”handle” href=”http://link-for-non-js-users.html”>Content</a>
          <h3>Contact me</h3>
<div id=”CONTENT_TO_REPLACE”>
          <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
          <p>This can be a form to submit feedback, or contact info</p>
</div>
     </div>

And then in the initialization step:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=”text/javascript”></script>
<script src=”http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js”></script>

     <script type=”text/javascript”>
      $(function(){
           $(‘.slide-out-div’).tabSlideOut({
                tabHandle: ‘.handle’, //class of the element that will become your tab
                pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab //Optionally can be set using css
                imageHeight: ‘122px’, //height of tab image //Optionally can be set using css
                imageWidth: ’40px’, //width of tab image //Optionally can be set using css
      tabLocation: ‘left’, //side of screen where tab lives, top, right, bottom, or left
                speed: 300, //speed of animation
                action: ‘click’, //options: ‘click’ or ‘hover’, action to trigger animation
                topPos: ‘200px’, //position from the top/ use if tabLocation is left or right
                leftPos: ’20px’, //position from left/ use if tabLocation is bottom or top
                fixedPosition: false, //options: true makes it stick(fixed position) on scroll
‘contentURL’: ‘http://URL_TO_YOUR_CONTENT’,
‘contentDiv’: ‘CONTENT_TO_REPLACE’ //This is the id of the content box above in the HTML
          });
});

      </script>

Below is the patch to v1.3

— jquery.tabSlideOut.v1.3.js 2009-09-21 00:00:53.000000000 -0400
+++ jquery.tabSlideOut.ajax.js 2011-02-25 08:38:47.000000000 -0500
@@ -35,11 +35,19 @@
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
– onLoadSlideOut: false
+ onLoadSlideOut: false,
+ contentLoaded: false,
+ contentURL: null,
+ contentDiv: ”
}, callerSettings||{});

settings.tabHandle = $(settings.tabHandle);
var obj = this;
+
+ if (settings.contentURL) {
+ settings.contentDiv = $(settings.contentDiv);
+ }
+
if (settings.fixedPosition === true) {
settings.positioning = ‘fixed’;
} else {
@@ -142,6 +150,10 @@
};

var slideOut = function() {
+
+ if (settings.contentURL && (settings.contentLoaded === false)) {
+ settings.contentDiv.load(settings.contentURL, function() { settings.contentLoaded = true; });
+ }

if (settings.tabLocation == ‘top’) {
obj.animate({top:’-3px’}, settings.speed).addClass(‘open’);

Categories
status

Dinner with wife and father-in-law. Good…

Dinner with wife and father-in-law. Good times 🙂

Categories
post

Mobile Website Design

What is mobile web design today? Is there a standard? Or is it just about smaller pages with less images? I don’t do mobile sites very often. With smart phones today, I personally expect the full version. I know I will have to zoom in and out, but I am usually looking for specific information. Do people really do much shopping on mobile?

So many questions. Time will tell.

Categories
status

Git is back in my life to stay this time…

Git is back in my life to stay this time. I have started and stopped using GIT on the same project numerous times. Each time I felt I was using it incorrectly or effectively and in the end I would just stop.

I have picked it back up, and this time started using a script that would take my ‘git log’ entries and put them into MySQL. I then created a report for my boss to be able to see every change I make.

I am the only “tech” here, so nobody has held me accountable in the past. I need to do it myself.