Jump to content

Make Something Cool Everyday


billy.

Recommended Posts

I'm just going to keep posting coding / web experiments on here while i try to teach myself since I bet I can keep doing one-a-day and maybe it'll keep the thread up enough that people will keep posting.

jquery test

combined a script to display last twitter messages with a toggling visible / invisible display area. took me a while to figure out how to make it start hidden.

tomorrow (more likely wednesday) hoping to figure out how to display more than one message at a time on a page

Link to comment
Share on other sites

Nice work, servo! I know this was just a quick experiment, but I'm going to assume you wouldn't mind some feedback, so I'm gonna give some ;)

I recommend getting in the habit of using standard HTML tags instead of the p1, p2, p3 tags you've used in your example:

<div id="twitter">
   <h2>TWITTER FEED TOGGLE TEXT</h2>
   <!-- change <p3> to a <div> because <p> tags should not be nested within other <p> tags -->
   <div id="container">
       <p class="p2">Currently:</p>
       <h3><span id="twit_status"></span></h3>
       <p class="p2"><span id="twit_time"></span> <a href="http://twitter.com/nofriendsforus"> via Twitter</a></p>
   </div>
</div>

Don't forget to update the javascript to reflect the new tags, and add some visual feedback to the user in the form of a simple colour change upon mouse over/out of the h2 tag:

<script type="text/javascript">
$(document).ready(function()
{
   //change colour of text on mouse over/out
   $('h2').mouseover(function(){ $(this).css('color', '#bb0000'); });
   $('h2').mouseout(function(){ $(this).css('color', '#000000'); });

   //updated js to reflect the new tags
   $('h2').click(function () { $('#container').slideToggle('slow'); });
   $('#container').hide();
});
</script>

Lastly, change your css to reflect the new tags, and try adding cursor: pointer; to your css to change the user's cursor when they hover over the h2 tag:

<style type="text/css">
#twitter h2 {margin:0; padding:0; font-size:14px; font-weight:bold; cursor:pointer;}
#twitter h3{margin:0; color:#333333; font-size:2em; font-family:"Times New Roman", Times, serif; line-height:normal; font-weight:lighter;}
#twitter .p2 {margin:6px 0 0 0; color:#333333; text-transform:uppercase; font-size:10px; font-weight:bold;}
</style>

Link to comment
Share on other sites

thanks DUM. i can't tell you how torn i am w/that. uniformity looks clean, and on the other hand the randomness kind of allows the projects to be viewed how they naturally would be as opposed to putting them in a set sized box? i honestly don't even know. if an internship wasn't a priority i probably would've done something different altogether.

i think i gotta rearrange the nav. takes up too much space w/smaller screens.

Link to comment
Share on other sites

yea! I'm ok with the varying height, but undecided regarding the varying width :)

For the height issue, maybe try more "defined" lines vs the fine/dotted lines you have now, to give more of an impression of the images "hanging" off them... ? In that vein, you would focus on creating a visually pleasing vertical rag using the bottoms of the images...

Just throwin' it out there...

Link to comment
Share on other sites

wow yea, really feeling your portfolio.

I quite like the idea of dynamic sizes personally, although the larger ones could be a bit smaller height-wise?

*man, why haven't you posted the Aeturnum stuff before? (of have you) Sooo good man, i just finished my shit end of last week, i was gonna relax and fuck about but you've inspired me to get started again. :D

Link to comment
Share on other sites

yea! I'm ok with the varying height, but undecided regarding the varying width :)

For the height issue, maybe try more "defined" lines vs the fine/dotted lines you have now, to give more of an impression of the images "hanging" off them... ? In that vein, you would focus on creating a visually pleasing vertical rag using the bottoms of the images...

Just throwin' it out there...

no the border idea sounds good, i'll experiment with it.

varying width in terms of paper city / savile? i'm going to add a section, so savile is getting bumped to 1 column to make room. or do you mean the subpage width flux? in any case the width changes remain on the grid.

and thanks i appreciate the crit.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...