Follow by Email

Sunday, April 22, 2012

DHTML blogger comments

This post will describe about some techniques to comment a blogger site with DHTML content. especially dedicated to Ifinder

DHTML is nothing but Dynamic HTML and which is the combination of HTML, Javascript, CSS, HTML DOM. As we discussed in HTML comments for Blogger site post, using NCcode we can post HTML contents which gives you customized style of comments. Since external javascript are not secure, though NCcode recognize javascript, it will not accept external javascript. But javascript can be used without functions and variables.

below are the few examples for including javascripts in blogger comments(for non-techies please replace the highlighted parts with your images.)

Effect: on click, image toggle


NCcode:
〈img onclick="if (this.src=='http://www.w3schools.com/dhtml/bulboff.gif'){this.src='http://www.w3schools.com/dhtml/bulbon.gif';}else{this.src='http://www.w3schools.com/dhtml/bulboff.gif';}" border="0" src="http://www.w3schools.com/dhtml/bulboff.gif" width="100" height="180" /〉


Effect: Anchor tag on particular pixel(Map effect)
Venus

NCcode:
〈img src="http://www.w3schools.com/jsref/planets.gif" width="145" height="126" usemap="#planetmap" /〉〈map name="planetmap"〉 〈area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/images/venglobe.gif" /〉 〈/map〉


Effect: Hide/unhide the comments




you can hide me.
NCcode:
〈input type="button" value="Hide text" onclick="document.getElementById('pic').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('pic').style.visibility='visible'" /〉
〈p id="p1"〉you can hide me.〈/p〉


Effect:mouse over enlarge the image


NCcode:
〈img id="image" src="http://www.w3schools.com/dhtml/bulbon.gif" onmouseover="this.width='200';this.height='360';" onmouseout="this.width='100';this.height='180';" width="100" height="180" /〉


If you notice you would have found one thing that is javscript can be included in events like onMouseout, onMouseover, Onclick... you can develop complex javascripts with in events and you can make the effect in blogger comments. If you use image toggling effect, then it would reduce your page loading time comparing to large images


Suggestion for Blog owner:
If you are good in javascript, then allow the javascripted comments while moderating your blog comments. If not Please don't allow any javascripted comments it may have span links.



Reference:W3shools

28 comments:

  1. 〈input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'" /〉
    〈p id="p1"〉Test comment.〈/p〉

    ReplyDelete
  2. 〈img id="image" src="http://www.w3schools.com/dhtml/bulbon.gif" onmouseover="this.width='200';this.height='360';" onmouseout="this.width='100';this.height='180';" width="100" height="180" /〉

    ReplyDelete
  3. Thanking you very much. Wondered with admiration. And also consideration for Page Load Time and precautions.
    Hope and request keep going much more.

    ReplyDelete
  4. With all regards and full appreciations.

    ReplyDelete
  5. Learning and tried to get ' on click ' effect. Not yet got. Again try and report you back on ok.
    Thank You again with all regards.

    ReplyDelete
  6. GOT It. So Wonderfully worked.(credit of code mentioned at the picture in comments.) Many many Thanks. So fine and cool. learning for other Pictures/applications of the same. Couldn't it be without you. Again with thanks and regards.

    ReplyDelete
  7. Working very very fine, cool and amazing. Rare to find. Also so flexible to get required pictures and Sizes. Learning and using with enthusiasm.
    Thanking you again with all regards.

    ReplyDelete
  8. This working very very awesomely superb. Many may thanks with all regards.
    Any Way/Code to ' Edit Blogspot blog Published Comments ' ? ( similar to ' WP Ajax edit comments) - Enough only by Admin.
    very utility to Purify Published Comments. - SOSly for me lot to edit broken links.
    Again Again Many Many Thanks and all Rehads.
    Hope and Request, Please ?

    ReplyDelete
  9. 〈a href="linktohow.blogspot.com"〉 linktohow〈/a〉

    ReplyDelete
  10. This DHTML working so awesome and working Fine.
    Any more Help, Please?
    Any Way to insert OnClick Toggle Animated images in blogger Comment ?
    With all Regards and Thanking You again and again.

    ReplyDelete
  11. Sir. This DHTML working awesome. And Thanking You Very much.
    Hope and Request some more Help, Please ?
    Any way to post Animations (OnClick Toggle or otherwise) in Blogger Comments.
    With all Regards and Thanking You again.

    ReplyDelete
  12. Sir.
    The DHTML for OnClick Toggle Pictures in my Blog Comments now stopped working.
    Using FireFox. All previous pictures gone.
    Any Way out, Please.

    ReplyDelete
    Replies
    1. Being a part of google drive projects, google has depreciated it's other host applications. which had affected the Nccode scripting. Please follow the below new link to update your Blogs.

      http://macrolayer.blogspot.com/p/nccode.html

      Delete
  13. Sir.
    No, Please.
    In this Comments also, DHTML entry of April 22, 2012 at 1:15 PM Not Showing, Please.
    Help, Please.

    ReplyDelete
    Replies
    1. Hey,
      That was nothing but the image was removed from the w3school server. I will correct it in soon with new image. However the script is running fine

      Delete
  14. Sir.
    SUB:DHTML for OnClick Toggle Pictures
    Thank You. Thank You.
    The Code is exciting and Worked well with it.
    Thank You For the code being updated
    But, Sir, what about Already Published and disappeared.(more Important)
    Thanking You once again for your kindness

    ReplyDelete
    Replies
    1. since this issue raised due to host location, Nothing to do with the script.for disappeared images. In future avoid using third party images to avoid un notified degradation

      Delete
  15. Sir.
    DHTML OnClick Toggle Pictures.
    Thanking You.
    Not only the Third Party Pictures - All Total DHTML Pictures Disappeared - But Picture Comments for Blogger still Working very Fine.
    DHTML Script So Fine and Exiting - But Some thing may be with Blogger or W3Schools - Seeking a remedial Script/code to gain disappeared pictures.
    Thanking You again and Sorry for inconvenience.
    With Regards.

    ReplyDelete
  16. Sir.
    Thank You very much for the above exiting DHTML OnClick picture Code.
    NOW, the old disappeared DHTML pictures are being displayed.
    Thanks very much to you, Google Product Forum and Blogger Support.
    Above DHML picture being used again and working; by replacing "dhtml/bulboff" by "js/pic_bulboff". (The url from Google Image Bulboff)
    Hope and Request for more ventures from You, Sir.
    With All Regards.

    ReplyDelete
  17. Sir.
    ( commenting here as further comments not being allowed at ' Picture Comments for blogger', please)
    Awesome and Amazing your code ' Picture Comments for blogger'. It Even allowing iframe
    Thanking You again with regards.

    ReplyDelete
  18. P.S.
    Sir.
    Any code, Please, that to be placed in my blog HTML to rectify - Comment Related Gadgets (eg., Latest Comments) in my blog working and displaying/retrieving comments in First Page of comments (ie.,first 200) only, when clicked. My blog having more than 200 comments.
    Hope and Request a Way-Out from You, Please.
    With All Regards and Thanking You again.

    ReplyDelete
  19. 〈img id="image" src="http://www.w3schools.com/dhtml/bulbon.gif" onmouseover="this.width='200';this.height='360';" onmouseout="this.width='100';this.height='180';" width="100" height="180" /〉

    ReplyDelete
  20. 〈input type="button" value="Click to see magic" onclick="window.history.pushState('page2', 'Title', '/MrinmoyDas');" /〉Thanks, it's a good content to learn!

    ReplyDelete
  21. 〈body onload="window.history.pushState('page2', 'Title', '/Mrinmoy')"〉 〈/body〉

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. 〈input type="button" value="Hide text" onclick="document.getElementById('pic').style.visibility='hidden'" /〉〈input type="button" value="Show text" onclick="document.getElementById('pic').style.visibility='visible'" /〉
    〈p id="p1"〉you can hide me.〈/p〉

    ReplyDelete
  24. 〈div style="text-align: center;"〉
    〈a href="http://4.bp.blogspot.com/-gflVuWSJlAI/VSlgxQpI1vI/AAAAAAAADt8/qW_Q3Fi0yHw/s1600/sina10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"〉〈img border="0" src="http://4.bp.blogspot.com/-gflVuWSJlAI/VSlgxQpI1vI/AAAAAAAADt8/qW_Q3Fi0yHw/s1600/sina10.gif" /〉〈/a〉
    〈/div〉
    khonsamun blogspot :
    Political Poetry, Thai
    "...แลซึ้ง...ซึ่งสำเนียง รู้สึกเสียง ลึกภายใน...สู่รู ทวารไหล รินสู่ไต ตับซับซึม"

    ReplyDelete

You Can use HTML code once it converted to NCcode by NCode converter