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>
Advertisements

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

October 2009
M T W T F S S
« Sep    
 1234
567891011
12131415161718
19202122232425
262728293031  

My Twitter

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

del.icio.us bookmarks

Blog Stats

  • 23,212 hits