Show and hide paragraphs using JQuery

Below is the JQuery code I used to show and hide paragraphs when user clicks on the hyperlink - paragraph title:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
     <title>Test
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){  
   $('p').hide();
   
   //toggle the componenet with class msg_body  
   $('a.title').click(function()  {  
    var res = this.id.substr(1); 
   $('#p' + res).slideToggle(500);

   });
  });
 </script>  
</head>
<body>

   <a href="#" class="title" id="t1">Topic 1</a>
 <p id="p1">Testing 1
  </p>

 

  <a href="#" class="title" id="t2">Topic 2</a>
 <p id="p2">Testing 2

 


 

  <a href="#" class="title" id="t3">Topic 3</a>
 <p id="p3">Testing 3

 </p>

 

  <a href="#" class="title" id="t4">Topic 4</a>
 <p id="p4">Testing 4


</body>
</html>

How to create a slide show of external pages inside a DIV

The code below unables you to display various external pages inside a DIV and switching them every 15 seconds


First add a DIV to your html page

<div id="contentarea"></div>

Then save jquery.js file in the dame directory as your html page and add reference to jquery to the head section of your page:

<script type="text/javascript" src="jquery.js"></script>

Then add the following script to the head section:

<script type="text/javascript"> 
<!-- 
  
 // Place the urls in this array 
 var urls = new Array("page1.html", "http://elena-sqldba.blogspot.com", "http://www.google.com"); 
 // Set the number of seconds you want to view each page
 var viewfor = 15; 
 var mark=1;
   
   
         $(document).ready(function(){
          initSrc();
         });

 function changeurl(){   
         ajaxpage(urls[mark], 'contentarea');
  mark+=1;// increments the mark variable (array element) 
  if (mark==urls.length){ 
   mark=0;// returns to urls[0] at the end of the array count 
  } 
 }  
  
   
 function initSrc(){
  ajaxpage(urls[0], 'contentarea');
  window.setInterval("changeurl()", viewfor * 1000);   
        }
            

 function ajaxpage(url, containerid){
      var page_request = false
      if (window.XMLHttpRequest) // if Mozilla, Safari etc
           page_request = new XMLHttpRequest()
      else if (window.ActiveXObject){ // if IE
          try {
               page_request = new ActiveXObject("Msxml2.XMLHTTP")
          } 
          catch (e){
               try{
                   page_request = new ActiveXObject("Microsoft.XMLHTTP")
               }
               catch (e){}
          }
      }
      else
          return false

      page_request.onreadystatechange=function(){
          loadpage(page_request, containerid)
      }
    
      page_request.open('GET', url, true)
      page_request.send(null)

 }

 function loadpage(page_request, containerid){
      if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
       var divElement = document.getElementById(containerid);
          divElement.innerHTML = '';
       
          try {
             divElement.innerHTML = page_request.responseText;
          }
          catch (e) {
             // IE fails unless we wrap the string in another element.
             var wrappingElement = document.createElement('div');
             wrappingElement.innerHTML = page_request.responseText;
             divElement.appendChild(wrappingElement);
          }        
         } //end if
 }
// --> 
</script>

How to load external pages into a DIV

Loading external html pages into a DIV without having to reload the browser or using iFrames is possible using AJAX and JQuery.

First add a DIV to your html page

<div id="contentarea"></div>

Then save jquery.js file in the dame directory as your html page and add reference to jquery to the head section of your page:

<script type="text/javascript" src="jquery.js"></script>

Then add the following script to the head section:

<script type="text/javascript"> 
<!-- 
    
         $(document).ready(function(){
          ajaxpage("http://elena-sqldba.blogspot.com", 'contentarea');
         });


 function ajaxpage(url, containerid){
      var page_request = false
      if (window.XMLHttpRequest) // if Mozilla, Safari etc
           page_request = new XMLHttpRequest()
      else if (window.ActiveXObject){ // if IE
          try {
               page_request = new ActiveXObject("Msxml2.XMLHTTP")
          } 
          catch (e){
               try{
                   page_request = new ActiveXObject("Microsoft.XMLHTTP")
               }
               catch (e){}
          }
      }
      else
          return false

      page_request.onreadystatechange=function(){
          loadpage(page_request, containerid)
      }
    
      page_request.open('GET', url, true)
      page_request.send(null)

 }

 function loadpage(page_request, containerid){
      if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
       var divElement = document.getElementById(containerid);
          divElement.innerHTML = '';
       
          try {
             divElement.innerHTML = page_request.responseText;
          }
          catch (e) {
             // IE fails unless we wrap the string in another element.
             var wrappingElement = document.createElement('div');
             wrappingElement.innerHTML = page_request.responseText;
             divElement.appendChild(wrappingElement);
          }        
         } //end if
 }


 
// --> 
</script>

JQuery: Setting image properties

The following code sets the src and alt attributes for all images

$("img").attr({ src: "test.jpg", alt: "Test Image" });

If you want to det just the src attribute, use:

$("img").attr("src","test.jpg");

If you want to set Title attribute of an image to reflect image filename, use:

$("img").attr("title", function() { return this.src });

JQuery: $(document).ready() vs. $(window).load()

$(document).ready() executes when the DOM is fully loaded (ex.: an 'element')

$(document).ready() is ideal for one-time initialization routines

$(window).load() executes when the complete page, including all fames, images and objects, is loaded

Suppose you have an iFrame

Code below will find your iFrame and insert the text specified into the body of the document

$(document).ready(function(){ 
    $('#frameID').load(function(){ 
        $('#frameID').contents().find('body').html('My new contents'); 
    }); 
}); 

How to access contents of an iFrame from JQuery

Suppose you have an iFrame

   <iframe id="iframeID" ...></iframe>

Your iFrame contains div with id=”myDiv”:

   <div id="myDiv">DIV contents here</div>

You can retrieve contents of a div using the following line of code:

   $('#iframeID').contents().find('#myDiv').html();