July 19, 2024, 05:25:40 pm
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Welcome to Revolution X, where Coding meets Graphics.
 
  Home Help Search Arcade Affiliates Staff List Calendar Members Login Register  
  Show Posts
Pages: 1 2 [3] 4
31  Coding Community / Coding Snippets / Auto-Update the Time on: April 30, 2009, 02:01:17 am
Preview: http://celebrusisawesome.smfforfree.com/

Has been tested on Firefox, Epiphany and Opera.

First ensure you have this in your headers:
Code:
<script src="/jquery.js" type="text/javascript"></script>

If you have that, proceed. If you don't, add it and return.

Then stick this in your footers:
Code:
<script type="text/javascript">
/**
 * Auto-Update the Time
 * http://aetus.net/
 * http://revolutionx.smfforfree3.com/
 *
 *  While there is NO warranty on this script unless you pay me a very large fee,  I will *TRY*
 *  to the best of my ability to help you out.
 *
 *  License: WTFPL (http://sam.zoy.org/wtfpl/)
 *  
 *  Feel free to remove this copyright notice, just visit those two sites listed above.
 *  Thanks for using this script.
 *
 */
function getTimeString() {
  var t = new Date();
  var months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July',
  'August', 'September', 'October', 'November', 'December' ];
  var month = months[t.getMonth()];
  var date = t.getDate();
  var year = t.getFullYear();
  var hour = t.getHours();
  var suffix = "am";
  if (hour >= 12) {
    suffix = "pm";
    hour = (hour == 12) ? "12" : hour - 12;
  }
  if(hour < 10) { hour = "0" + hour; } 
  var minute = t.getMinutes();
  if(minute < 10) { minute = "0" + minute; }
  var second = t.getSeconds();
  if(second < 10) { second = "0" + second; }
  return month + " " + date + ", " + year + ", " + hour + ":" + minute + ":" + second + " " + suffix;
}
function updateTheDate($) {
  var timeString = getTimeString();
  var timeDisplay = $("div.tborder table tbody tr td.titlebg2 span.smalltext:contains(pm)");
  if(timeDisplay.length === 0) {
    timeDisplay = $("div.tborder table tbody tr td.titlebg2 span.smalltext:contains(am)");
  }
  timeDisplay.html(timeString);
}
setInterval("updateTheDate(jQuery)", 1000);
</script>

And voila, you now have a clock that shows the time *right now*, not when the page was loaded. And the time is from the user's computer, so you (and your members) don't have to mess with time offsets.
32  Coding Community / Coding Snippets / Twitter Widget in Profile on: March 19, 2009, 05:54:22 am
First off, this is a preview:
http://9861.smfforfree.com/index.php?action=profile;u=1

First off, create a new profile field.
These are the settings I have for it.
Name: Twitter
Show in profile: Yes
Show in posts: No
Parse BBC: No
Text to display before field:
Code:
<div id="twitterstream"><a href="http://twitter.com/
Text to display after field:
Code:
" target="_blank">Twitter</a></div>
Field ID: twitter
Only allow admins to edit field: No
Only allow admins to view field: No

You can put in anything you want for anything I didn't mention. Make sure it's type is 'Text'.

Once you are done with that, ensure you have the jQuery code in your headers. It looks like this:
Code:
<script type="text/javascript" src="/jquery.js"></script>

Then add this to your footers.

Code:
<script type="text/javascript">
function twitterAdd(o){var u='http://twitter.com/'+username+'/status/'+o.id;$("div#twitterstream div.tborder div.windowbg2 ul").append("<li style='padding-top:5px'><a href='"+u+"' target='_blank'>"+o.text+"</a></li>")}function twitterCallback(j){username=$("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1];$("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td b:contains('Twitter')").html("Latest Twitter Updates:");$("#twitterstream").html("<div class='tborder' style='opacity:0.55'><div class='windowbg2' style='font-size:0.8em'><ul style='margin:0px;padding-left:5px;padding-bottom:5px;list-style:none'></ul></div></div>");for(i in j){twitterAdd(j[i])}}(function(n){if(window.location.href.indexOf("action=profile")!=-1){username=$("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1];var a=document.createElement('script');a.setAttribute('src','http://twitter.com/statuses/user_timeline/'+username+'.json?callback=twitterCallback&count='+n);document.body.appendChild(a)}})(5);
</script>

You shouldn't need to edit anything except the 5 at the very end, that is the number of tweets that will be displayed.

And there, the code should work. Smiley Edit your profile, adding in your twitter username in the field you created to test it.

If you want the uncompressed source, it's below this. You shouldn't need it, but I decided to include it in case anyone wanted to know how it works.
Code:
function twitterAdd(o){
  var u = 'http://twitter.com/' + username + '/status/' + o.id;
  $("div#twitterstream div.tborder div.windowbg2 ul").append("<li style='padding-top:5px'><a href='"+u+"' target='_blank'>" + o.text + "</a></li>");
}

function twitterCallback(j){
  username = $("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1];
  $("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td b:contains('Twitter')").html("Latest Twitter Updates:");
  $("#twitterstream").html("<div class='tborder' style='opacity:0.55'><div class='windowbg2' style='font-size:0.8em'><ul style='margin:0px;padding-left:5px;padding-bottom:5px;list-style:none'></ul></div></div>");
  for(i in j){
    twitterAdd(j[i]);
  }
}

(function(n){if(window.location.href.indexOf("action=profile") != -1){
  // This is the profile page.
  username = $("div#bodyarea table.bordercolor tbody tr td.windowbg table tbody tr td a:contains('Twitter')").attr('href').match('http://twitter.com/(\.+)')[1];
  var json = document.createElement('script');
  json.setAttribute('src', 'http://twitter.com/statuses/user_timeline/' + username + '.json?callback=twitterCallback&count=' + n);
  document.body.appendChild(json);
}})(5); // Number of tweets to show

Note on browser compatibility: While I haven't been able to test this code on any browser like IE or Safari that doesn't have a linux version, the screenshots from browsershots.org indicates that it works correctly... sorta. On browsers where it isn't working like IE5.5, it's degrading gracefully, ie it just shows a link to the user's twitter profile.

Also, I think I should move the tweets down and make it look like the 'Additional Information' and 'Recently Uploaded Images'. What do you think?
33  Coding Community / Coding Snippets / Re: How to add cursors to your forum on: February 22, 2009, 08:39:28 am
Ubuntu cursors are cooler.

BTW, doing anything that puts outside ads on your forum is probably against the TOS.
34  Coding Community / Coding Snippets / Move the Navigation on: February 02, 2009, 01:24:03 am
Preview: http://celebrusisawesome.smfforfree.com/

First, ensure you have the jQuery include in your headers. It looks somewhat like this-
Code:
<script src="/jquery.js" type="text/javascript"></script>

Next, put this wherever your new tabs should appear.
Code:
<div id="_nav"></div>
In the preview, I put it at the very top of my headers.

Finally, add this to your footers.
Code: (javascript)
<script>
/*
 * Code created by Celebrus
 * - www.vikhyat.info
 * - aetus.net
 * - revolutionx.smffofree3.com
 */
// EDIT AFTER THIS IF YOU WANT TO.
reclass =                        "mirrortab";            // decides the root, try changing it to 'maintab' and see what happens
align_to_right =               true;                    // true/false
get_rid_of_top_padding =  false;                   // works better when 'reclass' is set to 'maintab'. once again, true/false
// EDITING ANYTHING AFTER THIS WILL VOID YOUR WARRANTY.

$(".maintab_active_back:contains(Home)").parent().parent().parent().appendTo("#_nav");
$(".maintab_back:contains(Home)").parent().parent().parent().appendTo("#_nav");
if(align_to_right)$("div#_nav").css("float","right").next().css("clear","both");
if(get_rid_of_top_padding)
{
  $("body").css("padding-top","0");
  $("#_nav").css("margin-bottom","10px")
}
$("div#_nav td.maintab_back").removeClass("maintab_back").addClass(reclass+"_back");
$("div#_nav td.maintab_first").removeClass("maintab_first").addClass(reclass+"_first");
$("div#_nav td.maintab_last").removeClass("maintab_last").addClass(reclass+"_last");
$("div#_nav td.maintab_active_back").removeClass("maintab_active_back").addClass(reclass+"_active_back");
$("div#_nav td.maintab_active_last").removeClass("maintab_active_last").addClass(reclass+"_active_last");
$("div#_nav td.maintab_active_first").removeClass("maintab_active_first").addClass(reclass+"_active_first");
</script>

Customization:
As you can see, there are 3 variables you can edit. They should be more or less self-explanatory, but I'll explain them.
reclass: This variable decides what the 'root' class of your new navigation will be. With 'maintab', the curved edges will be at the bottom. It looks like the default tabs. With 'mirrortab' the same thing would be inverted. In the preview, it is set to 'mirrortab'.
align_to_right: In the preview, you'd see that the tabs are to the right of the page. If you want it to be on left, change this to false. (without quotes)
get_rid_of_top_padding: This will basically stick the tabs at the very top of the page (with no gap) if you put the <div> on top of your headers.

Further customization:
If you want to customize it further, such as adding padding, and you know what you are doing, you can customize it with CSS using the div#_nav rule.

Notes:
1. This was inspired by sibyl's Endless theme which was a conversion of one by Crip.
2. I don't know if it's legal to have an underscore at the start of an id.

Disclaimer: THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
35  Coding Community / Coding Snippets / Re: Stop People From Stealing Images Or Codes on: January 17, 2009, 10:17:21 pm
I like right-click a lot, disabling it is pointless since select->ctrl+c would work anyway.
36  Graphics Community / Photoshop Tutorials / Simplicity Tag Tutorial on: December 24, 2008, 10:37:53 pm
Outcome:




You can get the PSD here.

License- CC-BY-NC-ND
37  Graphics Community / Dark Themes / Re: [StyleSheet] Volcano by (Mr) Henry on: December 11, 2008, 08:16:50 am
It's not too bad, I like some parts of it. However, Comic Sans is horrible imo. There's even a petition to ban it.
http://www.bancomicsans.com/
http://www.petitionspot.com/petitions/bancomicsans
38  Graphics Community / Photoshop Tutorials / Really Simple Avatar Tutorial on: December 06, 2008, 10:12:47 am
Original tutorial - http://aetus.net/forum/index.php?topic=397


(Click to download PSD)

39  Graphics Community / Light Themes / Re: Acies Theme on: December 05, 2008, 03:08:40 am
Nice cele, do u think u ever make a SimpleMachines one?

Doubt I'd do that, I made that one mainly to prove how much you could do with jQuery, CSS and the headers/footers feature.
40  Graphics Community / Light Themes / Acies Theme on: December 04, 2008, 10:14:36 pm

EDIT: Temporarily getting rid of this since it violates the TOS. If you are using it, well, change your style. I'll let you know when I fix it, I really can't do it now.
41  Graphics Community / Light Themes / Re: 31337 on: November 29, 2008, 11:01:49 pm
Yeah, well 1337 is old now.
42  Graphics Community / Photoshop Tutorials / Tenchu Tag Tutorial (Screencast) on: November 23, 2008, 05:39:18 am
http://www.vimeo.com/2321131
43  Graphics Community / Photoshop Tutorials / Re: Full Depth Signature Tutorial on: November 09, 2008, 07:06:23 am
Nice one. Smiley
44  Coding Community / Other Forum Coding / Re: [IF] Quick PM on: November 04, 2008, 09:17:28 am
You just make a normal javascript file and change it's extension to '.gif', although it might be wise to add a type='text/javascript' attribute to the script tab.
45  Graphics Community / Dark Themes / Re: Phoenix on: November 01, 2008, 04:27:01 am
Nice one. Smiley
Pages: 1 2 [3] 4
Powered by EzPortal
Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum

Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy