Elance css test answers


What is “inline” for the CSS display property? 

An inline element has no line break before or after it, and it tolerates HTML elements next to it.

Advertisements

resize


http://code.jquery.com/jquery-1.11.1.min.js

jQuery(‘document’).ready(function($){
var ht = $(window).height();
var po= ht -250;
//alert(po);
$(“.window-imgages”).height(po);

$(window).resize(function(){
var ht1 = $(window).height();
var po1= ht1 -250;
//alert(po);
$(“.window-imgages”).height(po1);

});
});


div img{ cursor:pointer;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}

div img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}


.primary-header  {
-webkit-transition: top 800ms; -moz-transition: top 800ms; -o-transition: top 800ms; transition: top 800ms;  display: block; position: fixed; top: -80px; width: 100%;
left:0px; z-index:9;
}

.primary-header.fixed {
top:0px;
}

how to call latest blog in shopify


<h2>Recent Posts</h2>
<ul>
{% for article in blogs.news.articles limit: 5 %}
<li><a href=”{{ article.url }}”>{{ article.title }}</a> <span>{{ article.created_at | date: “%d.%m.%Y” }}</span></li>
{% endfor %}
</ul>

Create Fullscreen HTML5 Page Background Video


A Pure CSS Approach

Build the HTML5 video as usual:

<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="polina.webm" type="video/webm">
    <source src="polina.mp4" type="video/mp4">
</video>

Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.

The poster image will be replaced by the first frame of the video once it loads, so it makes sense to derive that image from the same first frame.

To make the video fullscreen:

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}
 

Older browsers will not recognize the video formats, but should still recognize the basic <video> tag (with the exception of IE8, detailed below). For those browsers we create a background-image for the element, using the same placeholder picture. At this stage only Safari (mobile and desktop) requires the -webkit vendor prefix for transforms, so it has been included in the code; if you’re also targetting Firefox 15 or earlier, you’ll want to include a -moz prefixed version of the transform.

Integrating Accessibility

Users with vestibular disorders can become motion-disoriented, especially when trying to read text in front of a moving image, while users on the autism spectrum can be disturbed by rapid change. For those users – and everyone else – a pause button should be within easy reach. Ideally, the video should also stop and fade out when it has played through once. To make this happen, add a <button> element to the page:

<button id="vidpause">Pause</button>

Then some JavaScript to the bottom of the page:

var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("vidpause");
function vidFade() {
    vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
    // only functional if "loop" is removed 
     vid.pause();
	// to capture IE10
	vidFade();
});
pauseButton.addEventListener("click", function() {
    vid.classList.toggle("stopfade");
	if (vid.paused) {
vid.play();
		pauseButton.innerHTML = "Pause";
	} else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
	}
})

The JavaScript calls on some CSS added to your stylesheet (with vendor prefixes removed for clarity):

video#bgvid {
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

(Of course, you should also write CSS to make the button element disappear on mobile devices, given the solution above: otherwise, the button will appear on iPhones, etc without any apparent purpose).


			

How to Add Twitter Feed to Your Shopify Store


There are many great reasons to add a Twitter feed to your site, such as

  • Engaging visitors on your site.
  • Gaining new Twitter followers.
  • Providing social proof for your store

There are two main parts to add a Twitter feed to your Shopify store:

Part 1 – Access the embed code from Twitter.
Part 2 – Add the code onto your website.

You need a basic understanding of HTML. You can always contact a Shopify Expert to assist you.

Part 1: Getting the embed code from Twitter

Step 1: Sign into Twitter and click the Settings menu

scr1-1

scr2

scr3

window height get js


$(window).load(function() {
var windowHeight = $(window).height(); // New height

$(“.main-top-div”).css({“height”:windowHeight}); // before resize
});
$(window).resize(function(){
var windowHeight = $(window).height(); // New height

$(“.main-top-div”).css({“height”:windowHeight});

});

WordPress.com.

Up ↑