Thursday, April 19, 2012

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]);



Wednesday, April 11, 2012

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/