JavaScript String Replace All

JavaScript String Replace All

Today When I was working I came across the need to replace all the “’” marks with null or with nothing like “” as the “’” mark produces an error while handling with database I have the StringBuldier Class and could replace all at once but to use that it will be a server side code that means irrespective of anything on textchanged event the page should be postback so I decided to use the JavaScript function replace ()

Now the problem with this JavaScript String Replace function is that it replaces the first occurrence in the string. It takes two simple parameters. The first parameter is the pattern to find and the second parameter is the string to replace the pattern with when found. The JavaScript function does not Replace All...







[code]

str=”http://www.msdotnetheaven.com and http://www.msdotnetheaven.com”;

str = str.replace(/heaven/,”mentor”)



[/code]



The output



str=”http://www.msdotnetmentor.com and http://www.msdotnetheaven.com”;







To make the replace function of the JavaScript to replace all the occurrences of the matched string we have to apply a trick and the trick is, use the g modifier like this:



[code]

str=”http://www.msdotnetheaven.com and http://www.msdotnetheaven.com”;

str = str.replace(/heaven/g,”mentor”)





[/code]







The output



str=”http://www.msdotnetmentor.com and http://www.msdotnetmentor.com”;

Type Text in Upper Case using CSS

Type Text in Upper Case using CSS

While working with web application forms. When we create the forms which can be filled online and then printed to submit we came across the need that the particular textbox such as Name or Father’s Name should be filled in capital letters as most of the conventional forms need this. To accomplish this task we can take help of the CSS property by writing a single line code we can lower our most of the extra work and can concentrate on other parts of the code here is a small example to achieve what I have described above. Here we go:

Type Text in Upper Case using CSS

[code]

< head runat="server" >
< title > Upper Case < /title >
< style type="text/css" >
.test
{
text-transform: uppercase;
}
< /style >
< /head >
< body >
< form id="form1" runat="server" >
< div >

< /div >
< asp:TextBox ID="TextBox1" runat="server" CssClass="test" > < /asp:TextBox >
< /form >
< /body >

[/code]


Thanks and Regards
Meetu Choudhary
founder: http://www.msdotnetmentor.com

No scrollbar on HTML web pages - JavaScript code

No scrollbar on HTML web pages - JavaScript code

In my previous article I described how we can hide a scrollbar from user's view by putting the same color value as the web page.

What I have described in that article is absolutly fine for those web pages whose content fits in the browser display area because Netscape and Mozilla display no scrollbars for such pages and as far as IE is concern the scrollbar can be made transparent or hidden as it recognizes the CSS scrollbar properties. Even, if the page content is more than the browser display area, IE would show transparent or hidden scrollbar as it understands the css properties of the scrollbar but in case of Netscape and Mozilla they will display a scrollbar.



So the need arises to create cross-browser compatible web page windows with no scrollbars to accomplish this purpose we have to take help of little JavaScript code.



Note: But again a drawback is that it will not work on browsers that do not supports JavaScript or have JavaScript turned off.



We will use the window.open method of the javascript which will help us to open a new window with controlled funcationalty.



a small snipet of code will look like

[code]

< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com')" >Open a new window < /a>[/code] The open method is of the window object and in the above code it is taking an argument i.e. the ame of the webpage to be opened. and the onclick is a JavaScript event handler which is used to invoke the function in our case.

Bacically the JavaScript window.open() method takes in four arguments.

window.open('URL', 'NAME', 'FEATURES', 'REPLACE')By default, If we provide the filename of a web page through the first argument, it will be loaded in the new window.



NAME: specifies a name for the new window which can be used as value for the target attribute of < a > tags.

FEATURES: let you define properties of the window such as width, height, presence or absence of scrollbars, location bar, status bar etc.

REPLACE: takes a boolean value... we won't bother ourselves with this argument!

[code]< a href="javascript:void(0)"onclick="window.open('http://msdotnetheaven.com','welcome')">Open a new window </a>< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com','welcome','width=300,height=200')">Open a new window </a>[/code]List of important FEATURESheight: Specifies height of the new window in pixels. width: width of the new window in pixels location: determines the presence of the location bar menubar: menubar scrollbars: scrollbars status: status bar toolbar: toolbar directories: specifies the display of link buttons resizable: determines whether the window can be resized. If it's absent or its value is set 'no', the window does not have resize handles around its border. fullscreen: Specific to the Internet Explorer, it determines whether the window is displayed in the full screen mode. In the new window please notice that It is not having any scrollbars, location bar, status bar, menubar, toolbar or buttons!
The width and the height take a number (pixels) as value, for other features the value is either a yes or no.

[code]< a href="javascript:void(0)"onclick="window.open('http://msdotnetheaven.com','welcome','width=300,height=200,menubar=yes,status=yes')">Open a new window </a>[/code]


This window has the menu and the status bars. The others are absent since we didn't specify them.

[code]

< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com','welcome','width=300,height=200,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes')">Open a new window </a>
[/code]

The fullscreen feature is specific to this browser and displays the document on the entire screen. A neat effect... sort of! Click on the F11 to remove the full screen display.

[code]
< a href="javascript:void(0)"onclick="window.open('http://www.msdotnetmentor.com','welcome','fullscreen=yes,scrollbars=yes')">Open a full screen window </a>
[/code]

Note: Firefox and Netscape also open a full sized window but show the title bar at top.

Transparent or Hide Scrollbar

Transparent or Hide Scrollbar

Sometimes when < body style="overflow: hidden" > property doesnt workswith some broswers then we have the alternative that we must hide it by making it transpernt or coloring it as the page is.

To create a transparent scrollbar or hide it from view, What we need is to work with the css properties of the scrollbar. for our assistance I am here mentionning the cascading style sheet properties.



Note: These properties are recognized by Internet Explorer (5.5 and above) and are ignored by FireFox, Opera and Netscape.



scrollbar-track-color: Sets the color for scroll bar track
scrollbar-face-color: Sets the color for the scroll bar slider
scrollbar-arrow-color: Sets the scroll bar arrow color
scrollbar-3dlight-color: Sets the scroll bar 3D light color
scrollbar-highlight-color: Sets the scroll bar highlight color
scrollbar-shadow-color: Sets the scroll bar shadow color
scrollbar-darkshadow-color: Sets the scroll bar dark shadow color

When does a web page display a scrollbar?
When the content overflows the display area on a browser a web page displays a scrollbar. The controll of the display area on a web browser is monitored and ruled by several factors some of them are the screen resolution, installed toolbars, browser configuration (text size, display of large or small icons), view/hide status bar etc. If the page is long, the browser displays a scrollbar on the right and if the width of the page set at a higher value then the horizontal scrollbar will be added in the browser window.


Sometimes when the page content is less than the display area in a browser.


Different Browsers behave differently if the page fits in the display area. Internet Explorer displays a "grayed" scrollbar while Netscape and Mozilla do not show a scrollbar.



Even if the page content fits nicely in the display area, IE will show a scrollbar. which we may not want to display or just we want to hide it from the user

we have to set the following style properties you may add this in the head section of the page or may use it in external stylesheet



makes the scrollbar transparent.



considering that the page background color is white

[code]

html {
background-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
[/code]

Note:-- Basically we are setting the color of the scroll bar as the page to give it a feel of transprancy but it will be there

Thanks and Regards
Meetu Choudhary
Founder http://www.msdotnetmentor.com