JustAboutDaniel.Com

Magnifying an Image on MouseOver with CSS and HTML

• Posted by Daniel on 8/16/2011 6:45:45 AM
• 1 comments

Magnifying an image with CSS and HTML isn't very complicated. The following sets styleing to the background of the body  and appropriate links to create the illusion of an image being magnified. There is actually two images that are on the webpage which is actually a dissadvantage since both images have to be loaded onto the webpage. The advantage is that the magnifying is done with only CSS and HTML which is great because I have heard that it is bad to use a lot of JavaScript on  websites that are visited a lot by people using Mobile Devices since Mobile Devices don't render JavaScript well.




There is a few fixes for IE since IE will display the magnified image a little off OnMouseover
if the following fixes are not in place:

How to Solve Syntax Error on DOCTYPE Error

• Posted by Daniel on 8/28/2011 9:15:39 PM
• 0 comments

This past weekend I was coding something in JavaScript and I kept getting the following error on the FireBug console:

I couldn't figure out how to solve the issue. Until I came accros an article that mention that it was that one of the attributes of a tag might not be being set properly. Well I looked at all of my script and link tags and they were all fine. I finally noticed that in the clobal I was rewriting the path when I shouldn't have been to a different URL which lead to script file that didn't exist.
Moral of the story check that all of your script tags and link tags do not get overwritten and that the tags have an src attribute that leads to a valid file. Also, it is possible that JavaScript can cause the above error too.

Auto Scrolling / Focusing on an Element With or Without JavaScript / jQuery

• Posted by Daniel on 9/11/2011 8:25:58 PM
• 1 comments

I have heard that auto scrolling was dead, but however I think that autoscrolling can be usefull for many purposes. Such as:

1. When clicking a link focusing on a paragraph.
    - FAQs webpage
2. When loading a webpage taking users straight to a section of the webpage.
    - Focusing on the comments that are below a blog post
3. Taking user's to the bottom of a webpage and to the top of a webpage without having to scroll a massive amount, which users tend not to scroll much.

Below are two examples of how to focus a browser on different sections of a webpage. One example is using nothing but HTML and the other example uses jQuery.

The first example uses the first href in the first li of the ul below. As you can see the link's href has "#example1" inside. Which is the id of one of the divs. Upon clicking the link the href="#example1" will go on the address bar at the very end of the URL and instantly your browser will focus on the div with id of "example1".

The second example uses jQuery which adds an onclick event to the href with id of "linkExample2". Upon the link being clicked the browser's scrollbar will scroll for 2 seconds until the div with id of "example2" is within view.