css: zoom overlay on image thumbnail

I was thinking of an alternative method of doing this instead of the absolute positioning of another div. 

 <a href="image.png" class="screen-img" target="_blank">  
 <img src="image.png" width="100" />  
 </a>  

using this class:

 .screen-img {  
 display: inline-block;  
 margin-right: 5px;  
 background: #999 url(zoom.png) 50% 50% no-repeat;  
 height: 75px;  
 width: 100px;  
 img {  
 &:hover { opacity: 0.4; }  
 }  
 }  

The zoom.png is the magnify image, set as a background in the link tag.  So when the image is hovered, it will be a little transparent showing the magnify image from behind.

bonus: niffy code formatting gen for blogger - http://codeformatter.blogspot.ca/

extra space using position relative (css)

use negative margin instead.

html image mapping.. is it used in the web? part1

Image mapping is an interesting method of breaking down an image to display added information  like clicking to a link or offering more specific details on an image.

The common way it seeems to be used is by breaking the image and by hovering specific areas shows a specific detail for that area.  Recently I have come acrossed this method to try to recreate this nifty annotation widget I saw on a blogging site.  What the annotation does is it allows the user to click an area of the image and take a snapshot of it where the user can make a comment of that particular detail on the image.  Another way this is used where everyone is familiar with is the facebook photo tagging.

In my circumstance I mapped an image of a car, detailing each car part.  So when the user creates a snapshot it will also include the name of the part.

I'm still experimenting the whole thing.. more to come later.

AnkhSVN.. i can't remember everything.

This is a great free subversion program!

So how do I show SVN on Visual Studio?

1. Go to Tools > Options > Source Control > Plugin selection

2. Select "AnkhSVN – Subversion Support for Visual Studio"

3. Then press OK

done.

tabindex for popups

I've designed many forms with tab ordering and usually they are on the main browser window.  So the tabindex flows through each item with no issue.  But what if you have a popup window with a form?  Does the popup tabindex trump the tabindexes from the main window?  Yes it does actually but you would need to arrange you indexes so that the numbers are not the same as the ones from the main window.

So if in the main window the numbering is 1,2,3,..10
The popup ordering has to be a different set 20, 21, 22,..30

The More You Don't Know... SASS

When I first started to read more about CSS3 and HTML5, I thought that they were relatively new since browsers began catching up to them around 2009 (I have only started learning around 2012).  Today I have discovered that there are evolved ways for CSS, ie SASS.  SASS is a dynamic template to generate CSS.  It seems like it is a method to creating a more tidy css style sheet for a webpage/app/etc.  And it was developed in 2008. 

http://sass-lang.com/

Best way to remove Gum on clothing

I haven't posted in awhile but I haven't forgotten my blog site.  So here's another installment for new found treasure!

I recently had to remove some gum off from clothing and I tried three methods suggested on the internet.  One was freezing the clothing then scrap off the gum (not work), the other was ironing the gum to a cardboard piece of paper (not work either).  The last option I tried also the best and took the gum right off was soaking the clothing under hot water then brushing the gum off with a tooth brush.

I wish I did that first coz there was left over residue from the previous attempts and unfortunately unremovable.  Anyway hope this was helpful.

treasure! Web Report Card

Need to perfect your website?  Try these: google pagespeed
yslow
It's a great way to tweek your site for better browsing experiances for your users.

More tools to simplify and optimize your code:

google closure
yuicompressor
minify

jquery not firing

So I had this issue before where when a page loads the jquery script would not fire for other function displays like tabs. 

Why is that?

Well there was one answer I had which was using .on() but this only fires when an event is triggered, like mouse clicks, etc.  In this case it was in the jquery tabs.  The script would show on the first tab but not show in the others.

What to do?

The task was in each tab there was a condition, and if met an image would display.  Theoretically the condition should work for each tab (which is a mvc page view) but the issue was that the condion written was too general.  So when it became more specific the code was then fired.

The condition took the first tag for the entire loaded view but not run each script for each pageview.

eg,

$("#A #B").addClass('something');
$("#C #B").addClass('something');
$("#D #B").addClass('something');

rather than

$("#B").addClass('something');

indexed png .. how to edit?

I had no trouble working with gradient black to transparent images using fireworks but when I was working with images white to transparent it didn't not work.  It would solidify the transparent whites. ugly.

There is a solution here alpha-transparency-in-indexed-png-images

But here's my work around using both fireworks and photoshop.

1. Open the image in fireworks.  Do your editing.
2. When done save the image as fireworks png.

3. Open your image in ps.
4. Save your image with "save for web and devices" choose png-24.

It'll increase your file size a bit more than the original for me it was less than double but still under 10kb.  I will test more with png-8

pay your respects

graveyard_of_dead_google_products

learning... jquery bind events

list of jquery bind events

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

credits to jquery4u

Learning MVC4

Decided to learn mvc4.  Started with nerddinner only to find out it doesn't translate to mvc4 (i should have started the project mvc3).  Anyway found a shorter tutorial intro-to-aspnet-mvc-4 it's good.  Just gives a very basic sample and all the new functions in MVC4 in VS2012.  Now i just need to understand coding.

Model Controller View.  So that the developer side is separate from the designer side, that is they can work on their respected areas without interfering with the other.

also CRUD.. the power of scaffolding create, read, update and delete

jquery and javascript syntax - double quote or single quote?

I have always wonder which was a better choice for when writing string type codes.  For example, $("hi") or $('hi)

Answer:  It doesn't matter.  However if you have a string statement that contains quotes you would need to use both single and double to contain the string.  Using this method you would not need to use special codes for those symbols.

eg,
error

'today's special'

no error

"today's special"
'she said "boom"'

how to create a chrome desktop shortcut

how to create app shortcut  .. that is from chrome.  This creates the shortcut but removes the url bar and buttons.

To get all that back do the following...

1. After you created your shortcut.
2. Right click on the icon you created on your desktop and select properties.
3. In the target part find "--app=http://...." and REMOVE only "--app=".  Press apply and ok.

Now clicking the icon will open your website in the chrome browser

OR

1. bookmark the page.
2. open the bookmark manager.
3. locate the website, then drag and drop the icon to your desktop.

However this way doesn't pull the nice favico image.

ways to save... farecompare

Found this reallly niffy site

http://www.farecompare.com/maps/

ways to save.. car rental website

So I tried this site to rent a car autoslash for my Florida trip.  For an economy car 5-6 day rental from Payless Car Rental the reserved price was $103 but when we picked up the car the price became $250.

Now why is that?  Well we added car insurance ($100) and "no fill up on return" option ($50).  The "no fill up" extra cost was probably not necessary because in Florida gas stations all have different prices.  And the gas quoted price from Payless was more.

it's not personal... (saving embedded images from outlook)

Answer: click on the message then File > Save as (.html)

better answer:  have them send you the file.

jquery selectors ... more investigation

I still don't have a very good grasp on selectors in html, javascript and css.  I'm getting there though.  

With the updates in jquery, the library has also depreciated some of there functions (like one niffy one I discovered: live).  The live event allows functions to work even when parts of the page is loaded dynamically.  This is simple way of doing things (answering a lot of my issues) but it slow things down because it looks for the event in the entire document!

answer: use ".on()" (eg, $('#parent').on("click", "#child", function() {}); )

css learning -- more selectors!

How little I know... but now that can be changed! http://www.w3schools.com/cssref/css_selectors.asp

css learning - adjacent sibling selector

I was looking to do this " can-you-apply-a-css-hover-effect-to-an-element-thats-not-a-child-of-the-hovered ".  BUT I also wanted to do the reverse of this (ie, hover the 2nd element and something happens to first...)
I found it's not possible, as ordering is important.  So I used jquery :)

jquery 1.9 removes browser detection - answer modernizr

From my little bit of research.....

Javascript browser detection is not fail safe (since some websites/browsers can apply a different browser identity thus wrong styling).  Modernizr detects what css attributes the browser supports and (from your stylesheet) applies the most advanced attribute (like css3) and if the browser doesn't support that feature it will go to a fallback class.  

It seems pretty new since I'm still trying to figure how to detect ":nth-child".  But there are some resources with a bit of google searching. 

http://modernizr.com/

for my future remembering -- open higher version of eps file

I did a google search of this many months ago and of course today I needed to open a higher version eps and forgot how to do it.

Solution.
1. create a new document.
2. file>place (which works like import) open the eps file.

and ta da it's there.  Also be sure to open as smart object so you can resize the image if necessary.

event handling

Expanding my knowledge in some more advanced javascript.  Reading up on some beginner stuff.  Once I get it I will post a mini tutorial!

did not prepare so heres a random link - hybridcars

Ok so I didn't prepare for a good link today so I will post this one http://www.hybridcars.com .  In time I will make more comprehensive posts that make more sense and fun to read (hopefully?)  It's the goal.

As for this link, hybridcars, it's a great guide for learning the types out in the market as well as the pricing.  Definitely worth a visit!

First treasure - chrome frame

I have the urge to revive this fregan blog.  I hope this will help me expand my mind because I really need to improve my skills rather than playing mindless video games.

I found this nifty plugin for Internet explorer http://www.google.com/chromeframe and it was created in 2009!  Well I'm not so late to the party coz apparently ie still has around 60% of browser popularity share.  Ok what the hell am I talking about.

It's a plugin that enhances the ie browser to open up html5 capabilities!  Yes now ie users can be able to see current web standards and beautifully rendered pages!

Stay tuned tomorrow for more new found treasure!