How to display a particular div from viewsource

Question

bala2111 0 Newbie Poster

13 Years Ago

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>

javascript

Edited 13 Years Ago by Ezzaral because: Added code tags. Please use them to format any code that you post.

2 Contributors
3 Replies
332 Views
9 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Taywin

Taywin 312 Posting Virtuoso

13 Years Ago

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

Reply to this topic

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.

bala2111 0 Newbie Poster · Answer 1 · 2011-09-26T17:46:02+00:00

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

Taywin 312 Posting Virtuoso · Answer 2 · 2011-09-26T20:01:45+00:00

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