Archive for the ‘JavaScript’ Category
JavaScript innerHTML
Posted on: August 6, 2009
- In: JavaScript | Tutorials
- 2 Comments
You people might be wondering how you could change the contents of an HTML element? like to replace the innerhtml with the one selected from the select box. Its very easy, you’ll be able to change your text and HTML as much as you like with the help of JavaScript innerHTML.
Many HTML elements rather you can say each HTML element have an innerHTML property, and this property allows you to access the text related to an element and modify it.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id thats very important. With that id in place you will be able to use the getElementById function, which works on all browsers.
For Eample:
here is the JavaScript Code:
<script type=”text/javascript”>
function changeText(){
document.getElementById(‘chngTxt’).innerHTML = ‘the world of Mywebdunia’;
}
</script>
<p>Welcome to <b id=’chngTxt’>mysite</b> </p>
<input type=’button’ onclick=’changeText()’ value=’Change Text’/>
thats it very simple, try it out yourself.
what is the DOM?
Posted on: August 6, 2009
DOM stands for Document Object Model is a W3C (World Wide Web Consortium) standard.
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM has three different levels:
1. Core DOM – standard model for any structured document.
2. HTML DOM – standard model for HTML documents.
3. XML DOM – standard model for XML documents.
DOM also defines the objects and properties of all document elements, and the methods (interface) to access them.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.
Show/Hide Div Block with checkbox
Posted on: July 16, 2009
- In: JavaScript | Tutorials
- 2 Comments
Here is another tutorial for JavaScript. How to show/hide your div block with check box.
Its very easy and simple to understand. Just copy the below code and try.
JavaScript :
<script type=”text/javascript”>
function showMe (ids, box) {
var vis = (box.checked) ? “block” : “none”;
document.getElementById(ids).style.display = vis;
}
</script>
Here the above JavaScript code will check whether the checkbox is checked or not. If it is checked then it will return true and the block of code will be displayed. Else the block of code will be hidden(display:none)
Down below is the HTML code which will show you how to call the JavaScript function.
HTML Code :
<input type=”checkbox” name=”vendors” onclick=”showMe(‘viewVendors’, this)” /> View Vendors
<div style=”display:none;” id=”viewVendors”>
Block of code goes here
</div>
Try this code and get me your feedbacks, if any errorsor if it is not working let me know.
Toggle display the block element
Posted on: May 6, 2009
Here is a code to toggle and display the bock element using simple JavaScript and CSS. Try the below code
Put this code in your body section
<a href=”toggle(‘myDiv’)”>Toggle</a><br />
<div id=”myDiv” style=”display:none;”>
<p>Some Text goes here … Blah Blah Blah….</p>
</div>
Put this in the head section of your page
<script language=”javascript”>
<!–
function toggle(someid){
if(document.getElementById(someid).style.display == “none”){
document.getElementById(someid).style.display = “block”;
}else{
document.getElementById(someid).style.display = “none”;
}
}
//–>
</script>
On mouseover Image change
Posted on: April 28, 2009
Here is an example how we can change the image on mouse over.
<a href=”#” onmouseover=”document.btn1.src=’images/img1.jpg'” onmouseout=”document.btn1.src=’images/img2.jpg'”><img src=”images/img2.jpg” alt=”” border=”0″ name=”btn1″/></a>
Here in this example I have used onmouseover one image and onmouseout another image. You can see the name parameter for the img tag. Using this tag I am changing the image that is document.name.src
This is one way another way would be to write a separate javascript for this an call the function on mouse over and onmousedown event.
To display a visitor’s screen resolution, simple include the following javascript code in your page:
<script type="text/javascript">
document.write('Screen Resolution: ' + screen.width + ' * ' +
screen.height);
</script>
JavaScript window.open method
Posted on: December 29, 2008
To open a new window by clicking on the link, you will need to use window.open method of javascript.
Example:
<a href="javascript: void(0)" onclick="window.open('http://nazare.50webs.com', 'windowname', 'width=200, height=77'); return false;">Click here for simple popup window</a>Now you can open a simple window, also this function can have different features of that window to appear.
Feature List:
| Property | Default value | Description |
|---|---|---|
| width | auto | specifies width of the new window in pixels |
| height | auto | height of the window in pixels |
| top | auto | specifies window position |
| left | auto | specifies window position |
| directories | no | should the directories bar be shown? (Links bar) |
| location | no | specifies the presence of the location bar |
| resizable | no | specifies whether the window can be resized. |
| menubar | no | specifies the presence of the menu bar |
| toolbar | no | specifies the presence of the toolbar |
| scrollbars | no | specifies the presence of the scrollbars |
| status | no | specifies the presence of the statusbar |
To close the window just use window.close() or use window.close(‘windowname’) the name of the window which you have opened.
Mywebdunia's Blog 