Category Archives: jQuery

jQuery animated swap div content on hover effect

Posted by on January 16, 2011 No comments

This is a simple sample how to swap div content on mouse hover. Actually I first stumbled upon this web article: http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/. After making few changes I was able to swap actual content of a div instead of background.

Here is the javascript i used (don’t forget to include jQuery library):

1
2
3
4
5
6
7
$(function(){
    $("#vertical div.wrap").hover(function(){
        $(this).stop().animate({top:"-130px"},{queue:false,duration:200});
    }, function() {
        $(this).stop().animate({top:"0px"},{queue:false,duration:200});
    });
});

Here is simple CSS styling:

1
2
3
4
5
6
7
8
9
html,body,div,h2,img {margin:0;padding:0;border:none;}
html { font:1em Arial, Helvetica, sans-serif; color:#444; }
h1 {text-align:center;}
.clear { clear: both; }
#vertical { margin:50px auto; width:920px; }
#vertical div.element { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
.wrap { display: block; height: 260px; width: 296px; position: absolute; top: 0; }
.init { display: block; height: 130px; width:296px; background: #F96; }
.short { display: block; height: 130px; width:296px; background: #69C; }

And at the end the actual HTML needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="vertical" class="clear">
    <h1>jQuery image slide on hover effect (vertical)</h1>
   
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me</div>
            <div class="short">On hover content</div>
        </div>
    </div>
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me 1</div>
            <div class="short">On hover content 1</div>
        </div>
    </div>
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me 2</div>
            <div class="short">On hover content 2</div>
        </div>
    </div>
</div>

Read List Items using Sharepoint Web Services and jQuery

Posted by on August 21, 2010 No comments

These days you can find the samples of this code almost in every corner of the WWW. Here is my contribution. I am also adding new JavaScript function called asmx(). What is does? It gets the URL of the current Site Collection, so you don’t have to write it every time you move your code to different site or server. Just be sure it is in the root folder of your Site Collection or modify the code accordingly.

First do not forget to include the jQuery library!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var listName = "myList";

$(document).ready(function() {
    var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
            <soapenv:Body> \
                 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                    <listName>"+listName+"</listName> \
                    <viewFields> \
                        <ViewFields> \
                           <FieldRef Name='Title' /> \
                       </ViewFields> \
                    </viewFields> \
                </GetListItems> \
            </soapenv:Body> \
        </soapenv:Envelope>";
   
    $.ajax({
        url: asmx(),
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset="utf-8""
    });
});

function asmx() {

    var url = window.location.href;
    var urlin = url.substring(7);
    var urlsplit = urlin.split("/");
    var dolzina = urlsplit.length - 1;
    var naslov = new Array();
    for(i = 0; i < dolzina; i++){
        var naslov = naslov + urlsplit[i] + "/";
    }
    var asmx =  "http://" + naslov + "_vti_bin/lists.asmx";
    return asmx;

}

function processResult(xData, status) {
    $(xData.responseXML).find("z\\:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") + " - " + $(this).attr("ows_Total") + "</li>";
        $("#data").append(liHtml);
    });
}

Also create some HTML markup where to insert the results:

1
<ul id="data"></ul>