Dushyant Patel’s Blog

Remove HREF attribute using Regular Expression & jQuery

Requirement is to get the content of the specific DIV remove HREF attributes from all and assign new content (without HREF attributes) to printer friendly page.

For Demo : onClick of button storing content of <DIV class=”content1″>. Using Regular Expression removing HREF and then assign that content to <DIV class=”content2″>.

HTML Code:

<div class="content1">
<a href="javascript:testfunction(4933)">This is test link 1</a>
<p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> <a href="test2.html">This is test link 2</a> <p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> <a href="test2.html">This is test link 3</a> <p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> <a href="test3.html">This is test link 4</a> <p>This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. This is dummy text, Please don't read. </p> </div> <div> <input name="testbtn" id="testbtn" type="button" value="Remove" /> </div> <div class="content2"></div>

CSS Code:

<style type="text/css">
body {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
 }
.content1, .content2 {
   width:400px;
   margin:10px;
   background-color:#efefef;
   border:1px solid #ccc;
   float:left;
   padding:10px;
}
.content2 {
   float:right
}
.btndiv {
   width:100px;
   float:left;
}
</style>

jQuery Code:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

  $("input#testbtn").click(function () {
     var printcontent = $("div.content1").html();
     printcontent = printcontent.replace(/\s*href\s*=\s*('[^']*'|"[^"]*")/ig,'');
     $("div.content2").html(printcontent);
  });
});

</script>

Filed under: Technology

Position DIV to element using jQuery

Requirement is how to position DIV to some element on the fly using jQuery?

Using jQuery position(), can access position of element and assign position to DIV on the fly.

For Example: onClick of link element access the position of <a> element and on the base of that assign position to DIV.

HTML Code:

<div>
   <a href="#" id="pospayerlnk">Position Layer</a>
   <div id="testDiv">
         Test
   </div>
</div>

CSS Code:

body {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
}

.center-main {
   width:400px;
   margin:auto;
   margin-top:100px;
}

#testDiv {
   width:100px;
   height:100px;
   position:absolute;
   top:10px;
   left:10px;
   background-color:#CCCCCC;
   border:1px solid #666666;
}

a#pospayerlnk {
   border:1px solid #3366CC;
   height:18px;
   display:block;
   width:100px;
   color:#0066CC;
   line-height:18px;
   text-decoration:none;
   text-align:center;
}
</style>

jQuery Code:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () { $("a#pospayerlnk").click(function () { var position = $(this).position(); $("div#testDiv").css("left", position.left); $("div#testDiv").css("top", position.top+20); }); }); </script>

Filed under: Technology

Typetester – online application for comparison of the fonts for the screen

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Read More…

Filed under: Technology

CSS issue Input width=100% & padding in IE issue

I was having a problem with width on input[text] fields in IE

In IE, it renders the width as 100% + 10px(padding which i have given for search icon).

HTML:

<div class=”container”>
<input type=”text” value=”Enter Keyword” name=”searchbox”/>
</div>

<div class=”button_div”>
<input type=”submit” name=”button” id=”button” value=”Search” />
</div>

CSS:

.container{ width:250px; float:left}
.button_div {width:100px; float:right}
.container input{ width:100%; max-width:100%; padding-left:10px;}

Soltuion:
Wrap the input field with a 100% div with no padding and no margin and set the input field inside that div to 100% width with a padding of 10px

<div class=”container”>
<div style=”width:100%”>
<input type=”text” value=”Enter Keyword” name=”searchbox”/>
</div>
</div>

Filed under: Technology

Beyond Compare is the ideal tool for comparing files and folders

I would like to share one good software with you all, for comparing files and folders.

Beyond Compare provides users with extensive side-by-side file comparison and management. Synchronize files between laptop and PC, home and office, etc. Compare directory trees side-by-side with mismatches highlighted. Display text files side-by-side with changes highlighted. Great for merging changes to source code.

Website Link : http://www.scootersoftware.com/index.php

Filed under: Technology, ,

How to access element of parent window from an iframe with jQuery

I got one requirment that need to assign value of check box which are in iframe to input box of parent window using jQuery.

I found solution which i want to share with you.

Parent Window Code:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script src=”js/jquery-1.3.2.js” type=”text/javascript”></script>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<div id=”inputbox”>
<input name=”” type=”text” id=”selectedchkbox” width=”400″ size=”50″/>
</div>
<br />
<div id=”iframe”>
<iframe src=”iframeCheckbox.html” width=”400″ height=”400″></iframe>
</div>
</form>
</body>
</html>

iframe code:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script src=”js/jquery-1.3.2.js” type=”text/javascript”></script>
<script type=”text/javascript”>

$(document).ready(function() {
$(“a.submitlist”).click(function() {
var newtxt = ”;
var chkbx = $(“div#checkboxlist input”)
for(var i = 0; i < chkbx.length; i ++) {
if(chkbx[i].type == ‘checkbox’ && chkbx[i].checked === true) {
if(newtxt.length !== 0) {
newtxt += ‘,’;
}
newtxt += chkbx[i].value;
}
}
parent.top.$(“input#selectedchkbox”).val(newtxt);
});
});

</script>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<div id=”checkboxlist”>
<p>
<input type=”checkbox” name=”checkbox1″ id=”checkbox1″ value=”checkbox1″ />
checkbox 1<br />
<input type=”checkbox” name=”checkbox2″ id=”checkbox2″ value=”checkbox2″ />
checkbox 2<br />
<input type=”checkbox” name=”checkbox3″ id=”checkbox3″ value=”checkbox3″ />
checkbox 3<br />
<input type=”checkbox” name=”checkbox4″ id=”checkbox4″ value=”checkbox4″ />
checkbox 4<br />
<input type=”checkbox” name=”checkbox5″ id=”checkbox5″ value=”checkbox5″ />
checkbox 5</p>
<p>
<label><a href=”#”>Submit</a></label>
<br />
</p>
</div>
</form>
</body>
</html>

Using “parent.top “, can target parent window and then use $(”input#selectedchkbox”).val(newtxt); to select targeted element and assign value.

Filed under: Technology

Gujarati boy rules world’s senses

I am following Narendra Modi on Twitter, and i found this story from his personal site.

This is about Pranav Mistry, a 28-year-old MIT researcher, who has got intangible digital information into the tangible world, allowing us to interact with this information via natural hand gestures.That’s wear ur world (WUW) — a wearable gestural interface. So, when you pick up your airline ticket and find that it is telling you that your flight is delayed, thank this boy from Palanpur, the land of diamantaires that has now produced a gem of a techie.

Read More…

Filed under: Technology

What is jQuery??? Where to learn jquery???

I have a friend who has been asking me What is jQuery? & Where to learn jquery?

www.jquery.com has itself all information available.

“jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.”

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

You can start learning it from its Tutorial(http://docs.jquery.com/Tutorials) section

Filed under: Technology

Testing websites in different browsers

One of my friend[David Lantner] suggested me his approach, which involves Virtual PC images of IE and Mozilla Firefox Portable Edition.

VPC images of IE 6, 7, 8
“Stand-alone” versions of IE are not officially supported by Microsoft. However, Microsoft periodically releases VirtualPC images of Windows XP with IE 6, 7, and 8 that can be used for testing:
http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

Note: when you use the virtual PC, you cannot point to the domain “localhost” – you must use your IP address.

Portable Firefox 2, 3
A guy named John Haller regularly releases custom builds of Firefox (and now other open source applications) that can run from a USB drive – or a folder on your computer that is separate from the “installed” version of Firefox. I prefer to browse with Firefox 3, but keep “clean” copies of Firefox 2 and 3 “Portable Edition” on my computer for testing:

The most current release of the portable edition (currently Firefox 3.0.3 ) can be found here, along with instructions for installing add-ons such as Firebug, Flash, etc.:
http://portableapps.com/apps/internet/firefox_portable

There is a section on that page with links to “Legacy Versions” such as Firefox 2.0.0.17 :
http://sourceforge.net/project/showfiles.php?group_id=151265&package_id=283201&release_id=629409

I found other option for Cross Browser Testing.

Visit >> http://spoon.net/browsers/

They provides to run browser directly from the web.

Go to this site click on browser you wish to run. It will ask to install plug-in. Install it.

Then you all set to test you website in selected browser. At this moment, they are providing IE6, IE7, IE8, FF2, FF3, Google Chrome, Opera 9.6 and Safari.

Happy Testing

Filed under: Technology

August 2017
M T W T F S S
« Oct    
 123456
78910111213
14151617181920
21222324252627
28293031  

My Twitter

del.icio.us bookmarks

Blog Stats

  • 23,131 hits