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;
}

jquery substring text with dots

Here is the code snippet to Substring text using jquery -

$(".className").each(function(){
    if ($(this).text().length > 24) {           
        $(this).text($(this).text().substr(0, 24));
        $(this).append('...');           
    }
});

Input type text element width auto resize

A small jquery function helps us making the text field resize automatically with width auto -

function resizeInput() {
    $(this).attr('size', $(this).val().length+2);
}   

$('input[type="text"]').keyup(resizeInput).each(resizeInput);

CSS Cross Shape

It's surprising to see how helpful the CSS Shapes are. These shapes help us in many many ways. If you look at the image below you will say you have to use full image for this effect, because background-repeat wont work in this situation.

 To avoid use of images for such designs we can use CSS Shapes and the web would be light-weight and full of fun. Here is the CSS that creates above shape and works in all browsers including IE.

.cssCrossShape{
    margin: 100px 0 0 100px;
    border-color:#3274D0;
    border-style: solid;
    border-width:150px 1100px;
    border-top:90px solid transparent;
    border-left:0px solid transparent;
    height:0;
    width:0;
}

<div class="cssCrossShape"></div>