Blog Post 6: jQuery Number Counter

The website I chose this week is the 10 years review done by the PSD2HTML.

Screen Shot 2015-04-12 at 21.37.47

No doubt, this is a well-designed website. But I think the most attractive element there is those changing numbers. They give readers a direct look at the progress PSD2HTML has made in the past ten years. This effect is consistent with the nature of numbers and it makes this website more interactive.

Screen Shot 2015-04-12 at 22.16.49

After examining the code, I found that it used jQuery to make this happen.

The script code is as follows:

function initNumber() {

            jQuery(‘span.number, div.number’).each(function(i) {

                        new NumberCounter({

                                    holder: this

                        });

            });

}

function NumberCounter(options) {

            this.options = jQuery.extend({

                        holder: null,

                        counterSpeed: 600,

                        step: 5,

                        divider: ‘.’,

                        activeClass: ‘active’

            }, options);

            return this.init();

}

NumberCounter.prototype = {

            init: function() {

                        this.findElements();

                        this.attachEvents();

                        this.reset();

            },

I think using number counter s a really useful way to display multiple numbers. Instead of using just the steady numbers, it gives the website more diversities.

Blog Six: jQuery Scrolling

So for this week’s critique I stumbled upon a really cool animated web portfolio site. As I scrolled down the page I noticed four icons pop up. I liked how this added to the interactivity of the site so I looked at the code and found they were each named by icon, called design, development, newsletter and social icons.

Screen Shot 2015-04-12 at 4.25.22 PM

Then in the html I found script code:

<script>

$(window).scroll(function)() {

$(‘#designIcon’).each(function(){

var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();

if (imagePos < topOfWindow+500) {

$(this).addClass(“fadeIn”);

}

});

});

</script>

Instead of the “click” command that we learned in class, this code used scroll as the function to bring in the icons, which I think is really neat and doesn’t require extra work or more clicking by the user.

W3schools says that scroll can be used for all scrollable elements, in their example a div, and in browser windows, as was done on this site. I think to indicate when the icons should drop in, the coding uses the if and pos/position, and if the user is at less than the “topOfWindow”, the icon appears. The code also used a “fadeIn” command to style the transition as well.

Additional lines of coding are necessary to make this effect work so well, like defining “did scroll,” and “has scrolled” as true and false, and setting an interval.

$(window).scroll(function(event)

{

didScroll = true;

});

setInterval(function() {

if (didScroll) {

hasScrolled();

didScroll = false;

}

}, 250);

There’s definitely a lot involved in the coding to make this work (and I’m still not sure 100% how) but the way this designer used the scroll and fadeIn in combination helped create this cool effect.

Blog Six: jQuery mouseenter() and mouseleave()

I would like to dig deep into the website I analyzed in Blog 5, where I explained why I like the design style. There are many jQuery skills that I want to learn from it and apply to my own website, among which, I found that MouseEnter() and MouseLeave() is very practical.

When I hover mouse over the circle, it will turn to pink from dark grey, the font will be white from black, and the size will be bigger.

jquery

The effect is to execute an activity when hover mouse over the element or move the mouse out of the element. I grab this part of codes which contain this function

{var p,f,m=0,v=0,y=0;s.on({“touchstart.houdini mousedown.houdini”:function(t){var e=u.getEvent(t);m=e.pageX},”touchmove.houdini mousemove.houdini”:function(t){var e=u.getEvent(t);y=e.pageX-function(){return p||m}(),p=e.pageX,f=Date.now()},”touchend.houdini touchcancel.houdini mouseup.houdini”:function(){endTime=Date.now(),deltaTime=endTime-f,v=Math.abs(p-m),500>deltaTime&&v>50&&(t.isFunction(o.onManualNav)&&o.onManualNav(),y>0?s.previous():0>y&&s.next())}})}o.autoPlay&&(s.play(),o.pauseOnHover&&(s.on({“mouseenter.houdini”:s.pause,”mouseleave.houdini”:s.play})

“houdini” is an animation library, which determines the details of colors, fonts and sizes. The jQuery part is to via MouseEnter and MouseLeave function.

w3school introduced the difference of MouseOver and MouseEnter: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.

The fundamental format of the event is:

$(document).ready(function(){
$(“p”).mouseenter(function(){
$(“p”).css(“background-color”, “yellow”);
});
$(“p”).mouseleave(function(){
$(“p”).css(“background-color”, “lightgray”);
});

These code will trigger the background-color from lightgray when it’s still to yellow when it’s hovered over.

Blog Post Six: CrimeTimeline (Javascript & JQuery)

Screen Shot 2015-04-12 at 2.13.11 PM
     One website that features great Javascript work is crimetimeline.io
CrimeTimeline is a great website that tracks where crime has occurred by simply searching a street, address, or specific location. This website uses public APIs to pull in data that occurs in Britain. Using this mapping device this website shows you exactly where a crime occurred giving a very detailed description of the event that occurred there. This site is one that I found very interesting because its extremely interactive and very easy to use.
      This site uses Javascript and Jquery plug-ins to generate a data slider that is featured at the bottom of the page as well as manage the Ajax calls. This site also uses JavaScript to detects user interaction. One thing that I really enjoyed about this site is how much of an emphasis they put on collecting data and ensuring that it is all current and up to date. This feature shows that the use of JavaScript and JQuery help to highlight where crime occurs using moving images of maps to detect the location. I think that they did an excellent job at providing a way to truly highlight how important the use of JavaScript and JQuery can be to a website. If this site did not use these features it would be a simple website that did not show much of an interesting view of the crime sites. However, with the use of these plug-ins the site is more visually appealing and creates a way for viewers to see high crime areas and provides more clickability. Another feature that I also enjoy is that at the bottom the JQuery plug-in aggregates all of the crimes that occurred within a specific month and allows viewers to go back and click and review that information. Overall, this is a website that does a great job at presenting many of the features and tools that using JQuery and JavaScript can provide.

Blog 6: Little Known Secrets

Knowing the web designer behind this production, I thought it was a great opportunity to further demonstrate the work behind this awesome site that was created by someone who has already been in this class. I remember as she originally thought of the design and its rapid transformation that she took it through to this product.

I really like how subtle the hover transitions are with the JavaScript included in the design. Only seeing the hover text and especially the color change would be way too much to compete with against the photos so it’s very enhancing to see the black backgrounds behind the text to enhance the text.

One thing I wish had happened was more consistent use of the gifs throughout the piece. It helps draw me into the placement of them throughout the site and makes me want to click on them more compared to the still images.

I also like the element of sticking the navigation bar too. It helps remind me of the various aspects that I can look through on the site without overwhelming me with everything that is available to me.

Blog 5: The Hart Island Project

The Hart Island Project works on engaging the public to provide information for unclaimed and unidentified burials on Hart Island, New York City.

The website is easy to navigate with a sticky navigation bar at the top and a clear footer.

I really like the Traveling Cloud Museum page. By scrolling down, you’ll see all the names of people buried on the Hart Island, each with a timer showing how long they’ve been buried there without being identified. If a story is submitted for the person, the clock will stop and the person’s name will be lighten up. I think this interactive design shows the value of the project, the respect for every individual and helping the lost stories to be found.

Screen Shot 2015-04-05 at 11.21.37 PMTheir intended audience are New Yorkers and nationwide audience. Everyone can register and submit a story that may be published on the website.

I really like the website’s color palette, simply black and light yellow, solemn and not gloomed. I’m not so sure about the rounded sans serif choice. It seems a bit playful.

Blog 5: NPR’s ‘Planet Money makes a t-shirt’

Screen Shot 2015-04-01 at 6.34.12 PM

NPR decided to follow a shirt around the world through production, exploring the cotton, machines, people, boxes, and wearers that are involved in the making of a shirt. The piece incorporates text, photos, video, and music within the videos. Each element of the story has text and video. It’s very interactive, but it’s easy to navigate, and the site organizes all of the information well. The audience is anyone who is a consumer, which is pretty much everyone. The point of this story is that one normal shirt has an entire world behind it, and this multimedia piece deconstructs that. The design and colors are simple because there are so many elements. I think it’s a good design because it makes it easy to navigate and doesn’t distract the audience from all the different parts of the story.

I just really love this package because it shows that the digital and multimedia aspect of the story was there since the very beginning. It wasn’t thrown together online at the very end. The plan and organization was planned out so that the reporters could get video and text and photos for every single section. I think that I can borrow the navigation bar for each chapter that the website has at the bottom of the page that you can hide and show easily.Screen Shot 2015-04-01 at 6.34.29 PM I think I can also the heading, subhead, and button they use for the top of each story section. When you click the button, it shows the video, which is really clever because it acts as a heading for the text as well as hides the video underneath, making sure to think about space and layers in a really smart way.Screen Shot 2015-04-01 at 6.40.57 PM