Member Avatar for bala2111

hey all,
Am trying to display the div tag and its content by clicking it. the code below displays the whole source code when cliked on the div with id = softros. I want to make this script to display the div in view source format of the browser when clicked on any div.

Thanks in advance, looking forward for your ideas

Regards,
Bala

<html>

<head>
<script>
function viewSource()
{

window.open('view-source:'+location.href);
}
</script>
</head>
<body>
<div id="softros" onClick="viewSource();" style="border:1px red solid;">
<img src="images/rain_small.jpg" alt="rain_small" title="rain_small" />
</div>
</body>
</html>
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 2 Contributors
  • 3 Replies
  • 330 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Recommended Answers

All 3 Replies

Member Avatar for Taywin

The reason is that you are passing the URL which is the whole page to the view-source. As a result, what you see is the whole page regardless you place and click the button anywhere on the page. I have an idea but need to test it before I show you the code...

Member Avatar for bala2111

The reason is that you are passing the URL which is the whole page to the view-source. As a result, what you see is the whole page regardless you place and click the button anywhere on the page. I have an idea but need to test it before I show you the code...

Hey Taywin,
thank you very much for your reply, i have been breaking my head with this the whole day.. :( still not getting anything positive ...please help me when u are through with it.

Thanks in advance mate,

Cheers,
Bala..

Member Avatar for Taywin

OK, here is a try out... The code below will open a new window with the code of anything inside a specified div element ID. I use innerHTML and pre format tag to force it to display. However, each browser may display innerHTML differently. As a result, it may not be exactly the same as the original in your HTML file. Also, there is no color because of using pre tag. You may try to enhance it in whatever way you want.

function viewSource(elementID) {
    var elem = document.getElementById(elementID)
    if (elem) {  // element exists
      var cont = elem.innerHTML.replace(/&/g, "&amp;")  // convert inside content to String
      cont = cont.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g, "&quot;")
      var newWin = window.open("", "View Source for "+elementID, "height=400, width=600")
      newWin.document.write("<html><body><pre>"+cont+"</pre></body></html>")
      newWin.document.close()  // no more writing to the page
    }
  }
Edited by Taywin because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.