Change parent elements background image position on child mouseover

Demo: http://jsfiddle.net/rFhtP/

HTML

<ul id="headerNav">
    <li class="navHome"><a href="index.php">Home</a></li>
    <li class="navServices"><a href="services.php">Services</a></li>
    <li class="navFaq"><a href="faq.php">FAQ</a></li>
    <li class="navGallery"><a href="gallery.php">Gallery</a></li>
    <li class="navContact"><a href="contact-us.php">Contact</a></li>
</ul>

CSS

#headerNav {
    background: url(http://wordpress.deaction.com/wp-content/uploads/2011/08/cat-whatiscat.com_.jpg) no-repeat left top;
}

jQuery

$("#headerNav > li").hover(function() {
    var pos = "0 -" + ($(this).index() * 75) + "px";
    $(this).parent().css("background-position", pos);
}, function() {
    $(this).parent().css("background-position", "0 0");
});

UX Portfolio

1. SumEqual

Project Details:

- What is the project about
It is an education domain where Teachers/Students/Parents collaborate to share information, schedule meetings, and participate in school related activities.

- What problem it solves
Generally, the process of arranging meeting and passing messages between parents and teachers is a long procedure as it depends on the availability of both sides. To make this procedure easier with technology - SumEqual was developed.

- How it helps the end user
Most of the times it's difficult to the Parents and Teachers to discuss all things related to kids development whenever and wherever they want to. SumEqual helps them send/receive messages anytime/anywhere.

- Visual Language
It's derived from the Green Boards of the schools as it gives the sense of school related portal.

- Brand Identity
A combination of school board colors along with Notebook mockings and the typeface appears as a hand writing.

- Problem Statement
Create a Brand for school portal and a landing page where Teachers/Students/Parents collaborate with each other.

2. Hotel Stay UK 

3. Skills Test 

4. Mobile App  

5. Travel app wireframes 

6. My Voyages

7. GiveANight

8. Journal Doc

9. Pack Your Bags

10. LetsGo2

Improving page load performance

Here are some general recommendations that can be given.

Start by running your site through a tool like http://gtmetrix.com/ which uses YSlow from Yahoo and a custom validation engine to provide recommendations. The recommendations you will get from GT Metrix will cover 95%+ of the most common web best practices. (Not affiliated; just really like their tool).

If your site isn't publicly available, you can use Chrome's developer tools (run an audit to get a list performance recommendations on the whole page, and also on JS and CSS interpretation times--very useful).

Validate your document for errors using http://validator.w3.org. Even if your site isn't public, you can paste the source into the validator engine as text.

If images are your main concern, use lazy loading techniques to only load visible content, such as the jQuery lazy loader for images. Use the correct size/format for web images. Use a tool like http://www.smushit.com/ysmush.it/ to compress images.

General Page Performance Factors

From YSlow, in alphabetical order

• Add Expires headers
• Avoid AlphaImageLoader filter
• Avoid CSS expressions
• Avoid empty src or href
• Avoid HTTP 404 (Not Found) error
• Avoid URL redirects
• Compress components with gzip
• Configure entity tags (ETags)
• Do not scale images in HTML
• Make AJAX cacheable
• Make favicon small and cacheable
• Make fewer HTTP requests
• Make JavaScript and CSS external
• Minify JavaScript and CSS
• Put CSS at the top
• Put JavaScript at bottom
• Reduce cookie size
• Reduce DNS lookups
• Reduce the number of DOM elements
• Remove duplicate JavaScript and CSS
• Use a Content Delivery Network (CDN)
• Use cookie-free domains
• Use GET for AJAX requests

Remove extra path from img src by jquery

<img src="http://www.example.com/wp-content/uploads/http://www.example.com/wp-content/files/img/2012/01/image.jpg">

<img alt="test" src="http://www.example.com/wp-content/files/img/2012/01/image.jpg">


$("img ").attr("src",$("img ").attr("src").split('http://www.example.com/wp-content/uploads/')[1]);

HTML marquee height - fixed

HTML marquee tag supports height attribute. If you want your text to scroll from bottom to top of your screen just define height attribute to the marquee tag and you are done.

Static solution:
<marquee direction="up" height="600">Scroll in 600 height area</marquee>

Dynamic solution with jquery
<marquee direction="up">Scroll in 100% height of my document</marquee>

The jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    var windowHeight = document.documentElement.clientHeight;
    $('marquee').height(windowHeight);
})
</script>

Input text field editable and non-editable on button click

jquery makes it simple by just adding and removing the readonly attribute to the text field.

The HTML

<input type="text" value="Edit me" readonly="readonly" />
<input type="button" value="Make Editable" class="makeEditable" />
<input type="button" value="Make Non Editable" class="makeNonEditable" />

The jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    $(".makeEditable").click(function(){
        $('input:text').removeAttr("readonly");
    });

    $(".makeNonEditable").click(function(){
        $('input:text').attr("readonly", "readonly");
    });
});
</script>

Demo: http://jsfiddle.net/jmuh3yzo/

Another demo that toggles the field: http://jsfiddle.net/aub2x3ka/

Simple jquery tab navigation

The code below creates very simple tabbed interface with plain HTML, CSS and jquery -

The jQuery

$('.tabsContent').hide();
$('.tabsContent:first').show();
$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){    
    $('.theTabs li').removeClass('selectedTab');   
    $(this).parent().addClass('selectedTab');    
   
    var currentTab = $(this).attr('href');    
    $('.tabsContent').hide();   
    $(currentTab).show();  
      
return false;

});

The HTML

<ul class="theTabs">                       
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tabsContent">
    Tab 1
</div>
<div id="tab-2" class="tabsContent">
    Tab 2
</div>
<div id="tab-3" class="tabsContent">
    Tab 3
</div>


The CSS

.theTabs{
    font-weight: bold;
}
.theTabs li{
    float: left;
}
.theTabs li a{
    display: block;
    padding: 6px 0;
}
.tabsContent{
    display: none;
}
.selectedTab{
    background: red;
}