I wanted to make something that would just straight prevent people from registering to my site with special characters in their username. I was playing around with all types of complicated crap, but then I came up with this little doozy that works perfectly. Small, quick, and unobtrusive. Obviously, if you really don’t want them in a submitted text field, you have to back it up with server-side processing.
.: Adam
I spent a few hours last night looking for a good color picker for the new version of BodyMod.org and I found 2 really nice ones.
The first was a really fancy looking one from ColourMod.com.
It’s $5 to use, and I figured it was worth it, but first I wanted to try it out on my site to make sure that it’ll work with all my styles and JS code I got goin on. I figured support at 6am on a sunday wasn’t too high, so I just borrowed the code from their site and tweaked it to get it to run on my server. End result: doesn’t work with my site. Crap. On to the next one.
The second one I found was free (i love that word), and open source (even better!). This was done by ColorJack.com.
This one worked right out of the box. Beautiful script, and really small too! A lot smaller and easier to implement than colourmod.
My only gripe (if you wanna call it that), is that it wasn’t made to handle color picking for more than one area on the same page. So, let the hacking begin!
Well into Sunday morning (now 9am), I couldn’t get it to work right…ARG! I sleep on it, and when I wake up I get an idea. BAM! Works like a charm =). So if you need multiple color pickers on the same page, this one will do it for ya! Here’s the code I modified to get it to work:
Plugin.js
function toggle(v,id) { $S(v).display=($S(v).display=='none'?'block':'none');$('divUpdateID').innerHTML=id; }
Add this to the HTML Code put at the top of the page:
Modify the calling javascript to this:
function mkColor(v){$S($('divUpdateID').innerHTML).background="#"+v;$($('divUpdateID').innerHTML).value=v;}loadSV(); updateH('F1FFCC');
Then update the onClick call from the launcher:
Launch
In the example above, the color picker will update the textbox with the id of colorArea. It will put the selected color as the background and the hex value in the text box as the value.
If you want to launch more, you just change the id of the text box you want to update in the toggle function. So you can change colorArea to colorArea2 for the second box.
I also really like his use of shortening the whole ‘document.getElementById(’blah’)’ down to just $(’blah’). I’ll be using that one from now on!
function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }
So smooth…
Again with the paging…
Well, I need it. I’ve spent waaaay to long trying to redesign the mod listing pages and this is what I’ve come up with that seems to work:
objCommand.Connection = objConn
strSQL = “SELECT * FROM table”
Dim objAdapter As New System.Data.SqlClient.SqlDataAdapter(strSQL, objConn)
objAdapter.Fill(dsTemp, “table”)
objConn.Close()
objAdapter.Dispose()
objConn.Dispose()
Dim objDps As PagedDataSource = New PagedDataSource
objDps.DataSource = dsTemp.Tables(0).DefaultView
objDps.AllowPaging = True
objDps.PageSize = 15 ‘ Amount of records to show on each page
theDataList.DataSource = objDps
theDataList.DataBind()
Public Function BuildItem(ByVal fld1 As String, ByVal fld2 As String, ByVal intCount As Integer) As String
…
Format the data to be displayed the way I want
…
End Function
‘ This function is used to throw in a div with style=”clear:both”
‘ to make a new line every 5th object
Public Function LineWrap(ByVal intLineNumber As Integer) As String
Dim strSpacer As String = “”
If intLineNumber = 4 Or intLineNumber = 9 Or intLineNumber = 14 Then
strSpacer = “<div class=”"spacer”"> </div>”
End If
Return strSpacer
End Function
function stripOutBR(theID){document.getElementById(theID).innerHTML = document.getElementById(theID).innerHTML.replace(/<\/span><br><span>/gi,”);}
Then using the various methods of the objDps object (the PagedDataSource) you can set the current page, list out how many items there are, how many pages, etc. Just mess around with it. I’m not saying this is perfect or correct, as I’m still learning. But this is how I do it and it seems to work.
I had a problem where I wanted to swap the background color of a given div dynamically between two colors (alternating rows in a list) depending on which item was selected. Originally, I was just doing this:
This did what I wanted, but wasn’t very CSS oriented cuz the colors would be set in the javascript. So then I decided to store it at the class level in CSS and just swap the className as needed like this:
CSS:
.lineOn, .lineOff{lots of styles…;background-color:#FFF;}
.lineOff{background-color:#CCC;}
JS:
for(i=1;i<=intNumOfLines;i++){
// turn them all off
document.getElementById(column+i).className = ‘lineOff’;
}
// turn selected one on
document.getElementById(column+x).className = ‘lineOn’;
Now I was happy…. for a while. Then I didn’t like that the colors were stuck in the .lineOn and .lineOff. I wanted to create global color schemes in my CSS files, so I then moved the colors to their own class and then reff’d two separate classes like so:
CSS:
.colorOn{background-color:#FFF;}
.colorOff{background-color:#CCC;}
.line{lots of styles…;}
Now I was happy with my CSS design. The problem I ran into was that my javascript to change the className didn’t work when I wanted to swap .colorOn for .colorOff, so it was on to Google to figure something out.
With the help from this article on eVolt.org, I got this code:
switch (a){
case ’swap’:
o.className=!modCSS(’check’,o,c1)?o.className.replace(c2,c1): o.className.replace(c1,c2);
break;
case ‘add’:
if(!modCSS(’check’,o,c1)){o.className+=o.className?’ ‘+c1:c1;}
break;
case ‘remove’:
var rep=o.className.match(’ ‘+c1)?’ ‘+c1:c1;
o.className=o.className.replace(rep,”);
break;
case ‘check’:
return new RegExp(’\\b’+c1+’\\b’).test(o.className)
break;
}
}
// call the function
for(i=1;i<=intNumOfLines;i++){
modCSS(’remove’,document.getElementById(column+i),’colorOn’);
modCSS(’add’,document.getElementById(column+i),’colorOff’);
}
// Turn on the requested one
modCSS(’swap’,document.getElementById(column+i),’colorOff’,'colorOn’);
volia! It worked. Yay =)
! most of this code was written on-the-fly for this post, so there may be type-o’s. This was to give you the idea and methodology that I used to solve my problem