Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Monday, December 17, 2012

How To Change DIV Content/Data On Mouse Click?

This Article Was Live On: Monday, December 17, 2012 And Till Now HaveNo comments.
How To Change DIV Content/Data On Mouse Click?

ToDay The Question Is How To Change DIV Content, Data, Text On Mouse Click Using HTML, CSS, DOM Effect Without <script> Tag? And Can Also Customize Both DIVs With Estra CSS. Many Guy's Are Asking About It To Make There Widgets, Sites And Blog Awesome By Adding Something Uniques Throught This Code. For This Purpose They Are Using JQuery But In The Eye Of SEO, It's UseLess Because It's Need Time To Load The WebPage.

So Here I Am Again With The New Code That Only Contain HTML, DOM, CSS Effect And Even No <script> Tag To Make The Code Light And The Load Time Also. It Is Quick To Load And Easy To Install. And You Can Also Customize It With Extra CSS According To Your Desire.

It's Working Is Very Simple, The Whole DIV Content Will Be Changed After Click On EveryWhere Of The First DIV. When You Click On The First DIV, There Will Be Automatically A New DIV Came Up From Behimg That Will Hide First DIV And Show Itself Instead Of First DIV, From Here Your Visitor Can See Your Second DIV Data Easily. And The User Can Not Open Or Show The Firtst DIV Again Because It's Completly Hidd From The Click.

So Without Any Delay, Just Proceed To The Code And Get It On Your Websitye/Blog To Make It Awesome But Before Proceeding To The Code, Have A Look On Features Too And The Live DEMO.

Features:

1.) The Whole DIV Content Will Be Changed After Click On The First DIV.
2.) No <script> Tag To Make The Code Light.
3.) Only HTML, DOM, CSS Effect.
4.) Quick To Load And Easy To Install.
5.) You Can Also Customize It With Extra CSS.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


<style>
#exediv1 {
width:250px;
height:35px;
cursor:pointer;

position:absolute;
}
#exediv2 {
display:none;
position:absolute;
}
</style>
<div style="position:absolute;width:250px;height:35px;background-color:#000; color:#fff;">
<div id="exediv1" onmouseup="document.getElementById('exediv2').style.display='block', document.getElementById('exesdiv1').style.display='none' ">
Div 1 Content
</div>
<div id="exediv2">
DIV 2 Content
</div>
</div>


Customization:

1.) Change Div 1 Content And Div 1 Content With Your Own Data.
2.) You Can Also Change CSS In Bold Text Only.
3.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



No comments :


Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.