Pankaj Pandey » jquery http://www.pankajpandey.com Web design & Internet Marketing Consultant Thu, 19 Jan 2012 07:54:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Jquery solution for Radio Group in Umbraco mc_ed_formhttp://www.pankajpandey.com/2009/11/jquery-solution-for-radio-group-in-umbraco-mc_ed_form/ http://www.pankajpandey.com/2009/11/jquery-solution-for-radio-group-in-umbraco-mc_ed_form/#comments Mon, 02 Nov 2009 15:24:16 +0000 Pankaj http://www.pankajpandey.com/?p=175 Just tried Umbraco a dot net based open source system. following are some of my experience on that.

  • I am totally new to dot net platform so i faced lots of problem to install Umbraco on shared server. After lots of research i  found Umbraco is not compatible with networksolution and aplus.net shared hosting. Then i choosed Softsys. All thing set with softsys.
  • Surprised to see a nice cms. take 3-4 days to try after that i am successfully deploy my first website in Umbraco.
  • I found a beautiful way to manage the content from Umbraco.


As i am not very much familiar to dot net i did,not try to modify .net macro. i played lots of with xslt to achive desired result.

My client  need personalized form and each  form have multiple radio group. i searched on net to find a solution. I found a solution mc_ed_form from forum of Umbraco but that not support Radio groups. So i tried a solution from my way , I write a jquery code to transform all drop down list to Radio group. :)

Following are the Unobstructive jquery code which i used in page where form is there

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
function setid(){

arr=$('select');//call all list item in a array

jQuery.each(arr, function(count, item) {

$(this).attr("id", 'lisi'+count);//changed all select to my desired id

convertit(count);// Apply the function

$(this).hide();// hide the select element on page

});

}

function convertit(co){

var $dd = $('#lisi'+co);

if ($dd.length > 0) {

var selectedVal = $dd.val();

var $options = $('option', $dd);

var arrVals = [];

$options.each(function(){

arrVals.push({

val: $(this).val(),

text: $(this).text()

});

});

}

var arr = arrVals;

$.each(arr, function(count, item) {

if(arrVals[count].val!==""){

var pg='';

var lname="#lisi"+co;

var div=$("<div></div>").addClass("wrap2");

var rname='rad'+co;

radio = $('
<input />').attr({  type: 'radio', name: rname, value: arrVals[count].val, id: rname, checked:pg});

label=$('<label>'+arrVals[count].val+'</label>');

$(label).prepend(radio);

$(div).append(label);

var oc=true;

$(label).bind("click", function(){

var sv=$("input[name="+rname+"]:checked").val();

$("#lisi"+co).val(sv);

});

$(lname).parent().append(div);

}

});

}

$(document).ready(function(){

setid();

});

If you found any problem with code or any modification suggestion Please let me know. I know this is not a good way to proceed but this solved my purpose. I am finding a dot net way to do it.

]]> http://www.pankajpandey.com/2009/11/jquery-solution-for-radio-group-in-umbraco-mc_ed_form/feed/ 0 Jquery Image rollover with demohttp://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/ http://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/#comments Mon, 23 Mar 2009 22:09:01 +0000 Pankaj http://www.pankajpandey.com/?p=79 I have given a code in my earlier post for jquery image rollover. Now here are the final code and guide how to use this code.

  1. you need to creative two image ie: one for normal state and one for active/rollover state. name it like imagename.gif and imagename_active.gif.
  2. put your image in your HTML document.
  3. put all your image in normal state. remember to keep the active state image in same folder.
  4. include jquery latest script from jquery website and include script on your head section.
  5. copy below code and paste after jquery include. (you can put this code in common include file and include after jquery include.)
  6. don’t forget to change “#nav td” with your a element parent element in below script.
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
function getLeaf(url) {
var splited=url.split('?');// remove all the parameter from url
url=splited[0];
return url.substring(url.lastIndexOf("/")+1);// return file name without domain and path
}  
jQuery.fn.extend({
enter: function() {//plugins creation
return this.each(function() {
var pth = $(this).find("img")[0];
//alert($(this).children().attr("href"));
if($(this).children().attr("href")==getLeaf(document.location.href)){// check that the link url and document url is same
$(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));
} else{
$(this).hover(function(){
$(pth).attr("src",pth.src.replace(/.gif/g, '_active.gif'));// mouse over Image
},function(){
$(pth).attr("src",pth.src.replace(/_active.gif/g, '.gif'));// mouse out image
});
}
});
}
});
$(function(){  // Document is ready
$("#nav td").enter();// call the function
});

Jquery Image rollover demo download Let me know if you are not able to implement this code. I will happy to assist you.

]]> http://www.pankajpandey.com/2009/03/jquery-image-rollover-with-demo/feed/ 19 Jquery Image rolloverhttp://www.pankajpandey.com/2009/02/jquery-image-rollover/ http://www.pankajpandey.com/2009/02/jquery-image-rollover/#comments Sun, 15 Feb 2009 14:26:14 +0000 Pankaj http://pandey.ws/pankajblog/?p=49 if you need unobstructive JavaScript for image rollover you can use following code. I am not providing any detail markups for that if you face some problem to use that let me know. i will provide a demo section very soon for all of script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery.fn.extend({
 enter: function() {
    return this.each(function() {
      var pth = $(this).find("img")[0];
      if($(this).children().attr("href")==document.location.href){
         $(pth).attr("src",pth.src.replace(/.gif/g, '_over.gif'));
         } else{
            $(this).hover(function(){
              $(pth).attr("src",pth.src.replace(/.gif/g, '_over.gif'));
              },function(){
                 $(pth).attr("src",pth.src.replace(/_over.gif/g, '.gif'));
                 });
            }
            });
    }
});
$(function() { $("#nav li").enter();});

I have created this script for dot net development where navigation is in master page. So I have highlighed current page with if condition on line 5 on code ($(this).children().attr(“href”)==document.location.href). i have used gif images you can change code according to your image format.

]]> http://www.pankajpandey.com/2009/02/jquery-image-rollover/feed/ 0