Solving development problems  |  About this blog

Archive for the ‘javascript’ tag

Replace all occurencies of one string in Javascript using replace function

Javascript replace function will by default replace only first instance of found pattern.

var demoString = "Replace text using javascript
  replace function within a javascript string variable";
demoString = demoString.replace("javascript", "js");
alert(demoString);

After replacement demoString will be “Replace text using js replace function within a javascript string variable”

Using “g” following the regular expression pattern, builtin javascript replace method will replace all matches and all occurences of the given text variable with the new string.

var demoString = "Replace text using javascript replace
  function within a javascript string variable";
demoString = demoString.replace(/javascript/g, "js");
alert(demoString);

After replacement demoString will be “Replace text using js replace function within a js string variable”

Written by Avivo

October 15th, 2010 at 11:06 am

Posted in HTML, Javascript and CSS

Tagged with , , , ,

Javascript Sleep or Wait function

This can be one possible implementation (not very clean, but working):

function sleep(numberMillis){
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true){
		now = new Date();
		if (now.getTime() > exitTime) return;
	}
};

Written by Avivo

July 29th, 2010 at 11:44 pm

Posted in HTML, Javascript and CSS

Tagged with , , , ,

Combine Javascript and CSS in one request, minimization and optimization in ASP.NET MVC

There is an Combres project that can help you achieve this goal: http://combres.codeplex.com/

Here is a tutorial how to use it:

http://www.codeproject.com/KB/aspnet/combres2.aspx

1. Put this in web.config:
<configuration>
<configSections>
<section name="combres" type="Combres.ConfigSectionSetting, Combres, Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/>
...
</configSections>
<combres definitionUrl="~/App_Data/combine.xml"/>
...
</configuration>

2. Put this in Global.asax
At the top put this:

using Combres;



And then in the Application_Start put this:


protected void Application_Start()
{
//Apply combres compression
RouteTable.Routes.AddCombresRoute("Combres Route");
}

3. Add a reference in your project to merged Combres.dll library.

4. Create an xml file (named it as it is in web.config and put it in specified location):

<?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
<resourceSets url="~/combres.axd" defaultDuration="30" defaultVersion="11">
<resourceSet name="siteCss" type="css">
<resource path="~/Styles/jquery.paginate.css" />
<resource path="~/Styles/general.css" />
<resource path="~/Styles/redmond/jquery-ui-1.8rc3.custom.css" />
<resource path="~/Styles/jquery.fancybox-1.3.0.css" />
<resource path="~/Styles/jquery.ratings.css" />
</resourceSet>
<resourceSet name="siteJs" type="js">
<resource path="~/Scripts/jquery-1.4.2.min.js" />
<resource path="~/Scripts/jquery-ui-1.8rc3.custom.min.js" />
<resource path="~/Scripts/jquery.ratings.js" />
<resource path="~/Scripts/jquery.paginate.js" />
<resource path="~/Scripts/jquery.apag.js" />
<resource path="~/Scripts/fancybox/jquery.easing-1.3.pack.js" />
<resource path="~/Scripts/fancybox/jquery.mousewheel-3.0.2.pack.js" />
<resource path="~/Scripts/fancybox/jquery.fancybox-1.3.0.pack.js" />
<resource path="~/Scripts/swfobject.js" />
</resourceSet>
</resourceSets>
</combres>

5. In the HEAD of yout HTML or master page call this:

<head runat="server">
<title>Some title...</title>
<%= Combres.WebExtensions.CombresLink("siteCss")%>
<%= Combres.WebExtensions.CombresLink("siteJs")%>
</head>

Written by Avivo

April 22nd, 2010 at 11:26 pm

Posted in ASP.NET MVC

Tagged with , , , , , , , ,

How to center div using JQuery

How can you center div or how can you center div inside another div?

This is a common problem.

For example, you have a paging with different number of pages and you need to center whole paging div inside parent div container.

JQuery is helpful there.

Look first at the picture (we want to center this paging control inside parent div control)

Center paging control

Center paging control

If you have paging div:
<div id="paging" class="jPaginate" style="padding-left: 67px; left: 0px;">
  <div class="jPag-control-back"><a class="jPag-first" style="border: 1px solid #8496ad;
    color: #000000; background-color: #ffffff;">First</a>
    <span class="jPag-sprevious">«</span></div>
  <div style="overflow: hidden; width: 410px;">
    <ul class="jPag-pages">
      <li><span class="jPag-current" style="border: 1px solid #cccccc; color: #ffffff;
        background-color: #0075ff;">1</span></li>
      <li><a style="border: 1px solid #8496ad; color: #000000;
        background-color: #ffffff;">2</a></li>
      <!--...more pages...-->
    </ul>
  </div>
  <div class="jPag-control-front" style="left: 481px;">
     <span class="jPag-snext">»</span><a class="jPag-last"
     style="border: 1px solid #8496ad; color: #000000;
     background-color: #ffffff;">Last</a></div>
</div>
You can use JQuery syntax:
$("#paging").css('left',($("#paging").width() -
  ($(".jPag-control-front").position().left +
   $(".jPag-control-front").width())) / 2);
What does this JQuery command do?
  • $(“#paging”) – finds div with id=”paging”
  • $(“#paging”).css(‘left’, 50); – move left “paging” div for 50px
  • $(“.jPag-control-front”).position().left – finds left distance for div element that has css class=”jPag-control-front” from the beginning of “paging” div
  • So, you get the left distance of Last element (div that has css class=”jPag-control-front” ) and you add the width of Last element to this left offset and then you substract this sum from parent div width and, at the end, you divide all this by two to get the blank space you need to move you paging div from the left.

Written by Avivo

January 29th, 2010 at 6:55 pm

Posted in HTML, Javascript and CSS

Tagged with , , , , , , , , , ,

Newer Entries »