Bookmark and Share
Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts

Wednesday, May 09, 2012

How to show RadNotification inside an IFRAME

The Telerik RadNotification is a great component, you can show beautiful notifications on the web using little code.

There’s a  problem, if you host your aspx page inside an IFRAME the RadNotification element is positioned without considering the scrolling of the parent window.

The solution uses the RadNotification OnClientShown event

Server side:

RadNotification1.OnClientShown = "ShowNotification";





Client Side:




function ShowNotification(sender, eventArgs) 
{
//check if the page is inside a frame
if (window.location != window.parent.location)
{
if (sender.get_popupElement()!=null)
{
var leftPos = $(sender.get_popupElement()).position().left;
sender.moveTo(leftPos, window.parent.window.scrollY);
}
}
}





That’s all, hope it helps

Thursday, March 22, 2012

Jquery : adding a question to every download link

If you have a lot of links to downloads  in your web site and you need to ask to the user why he is downloading the file/program… here is a simple jquery solution.

It searches for every link with a particular class and overrides the standard click showing a panel under the link with a question, here is an example:

image

after a click:

image

After the click on the checkbox the download starts using an iframe created on the fly:

image

and the download:

image

Here is the Code:

 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   1:  
   2:  
   3: <script>
   4:  
   5: $(document).ready(function()
   6: {
   7:     checklinks();
   8:     }
   9: );
  10:  
  11: function checklinks()
  12: {
  13:     $('.confirmMe').click(function (e) 
  14:     {
  15:         if ($(e.srcElement).is('a') || $(e.srcElement).parent().is('a')
  16:             || ($.browser.mozilla && $(e.currentTarget).is('a'))
  17:             ) 
  18:             {
  19:                 var templateMessage = "<div class='confirmDownload'><br/><div style='width:200px;'>$QUESTION$</div><br/><span style='width:100px;'>$OPTION1$</span><input type='checkbox' name='down' value='OPTION1' ><span style='width:100px;'>$OPTION2$</span><input type='checkbox' name='down' value='OPTION2'></span>";
  20:  
  21:                 var dwnMessage = templateMessage.replace('$QUESTION$', 'Download reason:');
  22:                 dwnMessage = dwnMessage.replace('$OPTION1$', 'I need to try it');
  23:                 dwnMessage = dwnMessage.replace('$OPTION2$', 'I bought it');    
  24:  
  25:                 $('.confirmDownload').remove()
  26:  
  27:                 $(this).after(dwnMessage);
  28:                 $(this).parent().find('.confirmDownload input').click(function (e) 
  29:                 {
  30:                     alert('clicked:' + $(e.srcElement).val() + ' downloading.....')
  31:                     $('.confirmDownload').hide('slow');
  32:                     var durl = $(this).parent().parent().find('.confirmMe').closest('a').attr('href') + '?REASON=' + $(e.srcElement).val();
  33:                     var stempid = 'tmpdwn' + (new Date()).getTime();
  34:                     $('body').append('<a id=' + stempid + ' href="' + durl + '"</a>')
  35:  
  36:                     //ie fix
  37:                     if ($.browser.msie)    
  38:                         document.location.href = durl;
  39:                     else {
  40:                         $('body').append('<iframe id="if' + stempid + '" src="about:blank" style="display:none;"></iframe>')
  41:                         setTimeout("$('.confirmDownload').remove();$('#if" + stempid + "').attr('src',$('#" + stempid + "').attr('href'));", 1000);
  42:                     }
  43:                 })
  44:                 e.stopPropagation();
  45:                 return false;
  46:             }
  47:     });
  48: }
</script>
<body>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
<a href="http://download.tuxfamily.org/notepadplus/5.9.8/npp.5.9.8.bin.zip" class="confirmMe">download notepad++</a><br/>
</body>
</html>

Tuesday, December 13, 2011

Multiple CSS class selection

If you have two or more classes inside your HTML element you can select it using :

CSS:

.classA.classB
{
border:1px;
}

JQuery;

$(‘.classA.classB’).css(‘border’,’1px’);

Wednesday, May 18, 2011

Javascript HTML encoding/decoding utility

Today I found a great script for encoding and decoding HTML on the browser:

http://www.strictly-software.com/htmlencode

The library is located under http://www.strictly-software.com/scripts/downloads/encoder.js

The usage is really easy:

Encoder.EncodeType = "entity";

var encoded = Encoder.htmlEncode(document.getElementById('input'))

var decoded = Encoder.htmlDecode(encoded);


That’s all!

Thursday, November 11, 2010

JQuery: HOWTO Add Validator To Your Forms

Here is a simple way to add Input validation to your ASP.NET code using the JQuery Validator plugin.

1) Add a reference to the validator javascript library

<script src="scripts/jquery.validate.min.js" type="text/javascript"></script>


2) Add Css class to your input, example:


<asp:TextBox ID="txtFirstname" runat="server" Text='<%# Bind( "Firstname" ) %>' CssClass="required"></asp:TextBox>

or for a required email:

<asp:TextBox ID="txtEmail" runat="server" Text='<%# Bind( "Email" ) %>' CssClass="required email"></asp:TextBox>


3) Call the “validate” method:


$(document).ready(function() {
$("#aspnetForm").validate();
}


4) If you have custom regular expressions loaded from server you need to:


Add on the server side an attribute to the the text elements with the regular expression:

 

txtEmail.Attributes.Add("regexp", "your regular expression rule" );

Add a custom validator via Javascript:


$.validator.addMethod(
"regex",
function(value, element, regexp) {
var check = false;
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
'<%= GetRes("Your message from sderver") %>'
);


apply the validation rule to all elements with a “regexp” attribute existing:

if ($('INPUT[regexp]').length > 0) {
$('INPUT[regexp]').rules("add", { regex: $(this).attr('regexp') });
}









5) If you need to change the default validation messages you can use this code:


jQuery.extend(jQuery.validator.messages, {
required: '<%= GetRes("Your_String_Id") %>'
});

GetRes is an internal helper function, it loads a string from the resources.

 

Hope it helps!

Thursday, September 02, 2010

How to use JQuery UI Theme with other themes using CSS Scope

If you need to use the slider element inside you web site you’ll find very useful the JQuery UI Slider:

image

You can download from the JQuery UI web site the theme you like and you can use it inside your web site.

Theme preview + Theme download = Theme folder with CSS and Images
image + image = image
image

One problem may arise if your site is using another theme, the second theme will override the first, causing undesired layout effects.

Here comes the “Advanced Theme Settings” option, it permits to define a “CSS namespace” used only by the new control:

image

Next you need to insert your control code inside an HTML element like div or span with the same CSS Scope, for example:

<div class=”.SLIDER”>
<!—your control using the SLIDER CSS theme here –>
</div>

And this is the effect, two JQuery themes used in the same page:
image

Thursday, August 26, 2010

How to Add JQuery Intellisense to JS libraries in VS2010

If you work with JQuery and VS2010 you will find usefull enabling intellisense support for JQuery, for example:

or 





You can have the JQuery Intellisense following this steps:


  1. Download from the JQuery site the file jquery-1.4.1-vsdoc.js, search for the Visual Studio link near the release link
  2. Add the file to your project
  3. Change your js file and add to the top of the file:

Hope it helps!

Thursday, July 29, 2010

How To center “Coding Staff Popup” DNN module

If you need to show a simple popup message on your Dot Net Nuke site you can download and install the good “Coding Staff Popup”, here is the demo page.

Here is the nice modal popup created with this module:image

I found useful to override some behaviors like width, height, hide the title bar and reposition the popup, here is what to do:

1) Hide the title bar
Go to the module “Advanced Settings” and add to the Header section the code:

<style type="text/css">
.popup-window-header
{
display:none!important;
}
</style>


Image:
image

2) Resize the popup:
In the same section add the CSS style:
.jqmWindow
{
position:absolute!important;
width:1030px!important;
height:380px!important;
top:160px!important;
margin-left:0px!important;
}


3) Center the popup:
With JQuery you can easily reposition the popup using the exact window size, add to the “Advanced Settings” “Footer” the code:

<script language="javascript">
$('div[id*="popupDialog"]').css('left',($(window).width()/2)-($('.jqmWindow').width()/2));
</script>

Note that popupDialog and jqmWindow' are HTML elements created by the Popup module.

Here is the Picture of the module section:image

Here is the page before the patch :
image

And here is the result, popup aligned exactly to the center, title hidden with custom popup size.

image

Monday, November 30, 2009

JQuery assorted tips

Here are some useful JQuery 1.2.7 code snippets:

//Select the cheched checbox:
$('#myId').find('input[@type=radio][@checked]')
//Get an array of text of the selected SELECT
var elems = $.map($('#myId).find('select :selected'),function(a){return $(a).text();})
//Get an array of the values of the selected SELECT
var txtelems = $.map($('#myId).find('[@id=innerElementId]').find('input'),function(a){return $(a).val();});
//Set the title on a element
$(idTxtSearch).attr('title','my title');
//Focus a textbox (INPUT field)
$(idTxtSearch).focus();
//reset the value of a textbox (INPUT field)
$(idTxtSearch).val('');
//not JQuery, add a trim function to the JavaScript String object
String.prototype.trim = function ()
{
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
//ASP.NET + JQuery + blockUI
//Call the postback on a button after having blocked the page
//Note that the __doPostBack requires the name of the element, not the Id, asp.net rules.
$.blockUI({message:$('#myId').html()});
__doPostBack($('#<%= myAspNetBtn.ClientID %>').attr('name'), '');
//Attach the keyup event of a textvox
$().keyup(function(e){myFunction();});
//function for the blur and focus events
searchBoxes.focus(function(e){$(this).addClass("mycss");});
searchBoxes.blur(function(e){$(this).removeClass("mycss");});
//reset all the checkboxes inside an element
$('#myid > input[@type=radio]').attr('checked','')
//find the first DIV inside a table row that contains a value
if ($('#myid').find('tr:contains(thestring)').find('div:eq(1)').length>0)
//reset an element and add some HTML
$('#myid').empty().append(someHTML);
//find all visible elements inside an element with class myClass
$('.myClass').find('*').css("visibility","visible");
//change the source image on some images 
$(elemDiv).find('IMG[@src*="myvalue"]').attr('src','images/oem/newimg.png');
//add the nowrap attribute to all TDs
$(elemDiv).find('TD').attr('nowrap','nowrap');
//hide an element 
$('.myClass').hide();
//disable a button
btn.attr('disabled','disabled');
//find the first element with the same attribute and get the display attribute
$("[@myattr='my-row']:first").css('display');
//Toggle a class on a element
element.toggleClass("myClass");
//Execute script after the page load
$(document).ready(function()
{
//some js here;
});
//find the first image inside an element and chenge the image source
element.children('img:first').attr('src',newSrc);
//duplicate an HTML element
$('#myId').clone();
//get the url of an anchor with id=myId
var sUrl = $("a[@id='myId']").attr('href');
//hide all anchors inside an element
$('#myId').find('A').css('display','none');
//get the text of an element
var text = $('#myId').text();
//disable a button
$('#myId').attr('disabled', true);
//click a button after the load of the page
$(document).ready(function(){$('#myId').click()});
//check all visible checkboxes inside a table
function selectAllVisibleCheckBox(idTable)
{
$("#" + idTable).find("input[@type$='checkbox']").each(function()
{
if ($(this).parents("TR").css("display")!='none')
this.checked=true;
}
);
return false;
}
//call the classical HelloWorld asmx web service using JQuery
jQuery.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServices.asmx/HelloWorld",
data: "{'msg':'hello!'}",
dataType: "json"
});
 

Tuesday, April 21, 2009

DOTNETNUKE e JQuery

Se volete utilizzare JQuery all'interno di DotNetNuke (DNN) potete includere la libreria tra gli script di DNN che vengono caricati da ogni pagina.

Il problema è che DNN utilizza già una funzione javascript chiamata $.

Per poter utilizzare JQuery si deve chiamare la funzione "noConflict" che rimappa la funzione $ su un altro nome.

Ecco un esempio:

<script>
var $$ = jQuery.noConflict();
// jQuery ora è accessibile tramite la funzione $$
alert($$(document));
</script>