Blog 6: The Russia Left Behind

I chose to study the New York Times story, The Russia Left Behind. It is a simple yet well-designed website that contains texts, slideshows, videos and interactive maps. After examining its codes, I found that this website uses a lot of “attr” in its jQuery.

Screen Shot 2015-04-13 at 1.20.56 AM

For instance, the website uses the codes below to make the effects of its slideshows:

container.append(“div”)

     .attr(“class”, “slideshow-button slideshow-button–next”)

     .on(“click”, function() { stopPlay(); showNext(); })

   .append(“svg”)

     .attr(“class”, “slideshow-button-arrow”)

     .attr(“width”, 22)

     .attr(“height”, 22)

   .append(“path”)

     .attr(“d”, “M3,1.008L20.742,9.045L3,17.083L6,8.917Z”);

W3Schools suggests that the attr( ) method sets or returns attributes and values of the selected elements. When the “attr” is used to return the attribute value, it returns to the value of the first matched element; while when used to set values, it can set one or more attribute or value pairs.

When it is used to set the attribute and value, it is always in the following format–$(selector). attr(attribute, value). So in the “.attr(“width”, 22)”, the attribute is width and the value is 22.

By using this method, the website can be more active and engaging.

Advertisements

One thought on “Blog 6: The Russia Left Behind

  1. I think different from other websites, the navigation bar of this page has a interesting look and functions really well. It used the route from St. Petersburg to Moscow to navigate the content. This form is consistent with its content. So, it makes those articles, photos and slideshows into one whole group. I think this is a method we can learn from.
    About the “attr()” function, I think it can be useful for setting multiple attributes to the same element. By doing this, it will make the element more active and full of change. But I think using this too much can be a little bit confusing and hard to distinguish. We should avoid overusing it.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s