Gyancode

A free library of HTML, CSS, JS

Search This Blog

Thursday 10 March 2016

A Larger Image OnClick With JavaScript With Thumbnails On Same Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
            function showImage(imgName) {
                var curImage = document.getElementById('currentImg');
                var thePath = 'images/';
                var theSource = thePath + imgName;
               
                curImage.src = theSource;
                curImage.alt = imgName;
                curImage.title = imgName;
            }
        </script>
<style type="text/css">
#mainContainer, #footerArea {
    clear: both;
    width: 700px;
    margin: 10px;
}
#leftNav {
    float: left;
    width: 150px;
    margin-right: 15px;
    border-right: 1px solid #000;
    text-align: center;
}
#rightDisplay {
    float: right;
    width: 530px;
    margin: 0;
    text-align: center;
}
img {
    margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<!--<h1>Showing A Larger Image OnClick With JavaScript / DOM<br/>
  Example 1: With Thumbnails On Same Page </h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>-->

  <div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
    <img src="images/bridget_moynahan_01_tn.jpg"  onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
    <img src="images/bridget_moynahan_02_tn.jpg"  onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
    <img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
    <img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
    <img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
  <div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>

</body>
</html>
Posted by at No comments :

Tuesday 8 March 2016

Show Hide

HTML

<a href="#" onclick="showHideDiv('div-1')">Awards</a>
<a href="#" onclick="showHideDiv('div-2')">Awards</a>
<a href="#" onclick="showHideDiv('div-3')">Awards</a>
<a href="#" onclick="showHideDiv('div-4')">Awards</a>
<a href="#" onclick="showHideDiv('div-5')">Awards</a>

<div id="div-1" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

<div id="div-2" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


<div id="div-3" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


JAVA SCRIPT

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
function showHideDiv(id){
 var obj = document.getElementById(id);
if (obj.style.display=="none"){
 obj.style.display='block';
} else if(obj.style.display=="block"){
 obj.style.display='none';
}
}
</script>
Posted by at No comments :

Monday 7 March 2016

All media query for all screen version


bootstrap media query use in simple style 
 
    @media (max-width: 1224px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 768px) {} 
    @media (max-width: 640px) {}
    @media (max-width: 420px) {}
    @media (max-width: 320px) {}
    @media (max-width: 220px) {}
Posted by at No comments :

Reply Button like facebook

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<script type="text/javascript">
var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";


var allElements = document.body.getElementsByClassName("replybtn");

var addCommentField = function() {
  for (var i = 0; allElements.length > i; i++) {
    if (allElements[i] === this) {
      console.log("this " + i);

      if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {
        document.getElementsByClassName("replyform")[i].innerHTML = varHtml;
      }

    }
  }
};


for (var i = 0; i < allElements.length; i++) {
  allElements[i].addEventListener('click', addCommentField, false);
}
</script>
</body>
</html>
Posted by at No comments :
Labels:

Tuesday 1 March 2016

Scrollbar css add

css here......
.mousescroll::-webkit-scrollbar {
    width: 7px;
}
.mousescroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 


    }
 
.mousescroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
div#chatlist {
    width: 50px;
    height: 140px;
}
div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

html demo
<div id="chatlist" class="mousescroll">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
Posted by at No comments :
Labels:

Thursday 25 February 2016

All Source Disable in Web page

<!--disable right click--->
<script language=JavaScript> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
<!---end here-->

<!--using f12 disable-->
<script>
            document.onkeypress = function (event) {
                event = (event || window.event);
                if (event.keyCode == 123) {
                    return false;
                }
            }
            document.onmousedown = function (event) {
                event = (event || window.event);
                if (event.keyCode == 123) {
                    return false;
                }
            }
            document.onkeydown = function (event) {
                event = (event || window.event);
                if (event.keyCode == 123) {
                    return false;
                }
            }
        </script>
     <!---end here-->
     
<!--for ctrl+U--- disable code here-->

<script>
/*function check(e)
{
alert(e.keyCode);
}*/
document.onkeydown = function(e) {
        if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) {//Alt+c, Alt+v will also be disabledsadly.
            alert('not allowed');
        }
        return false;
};
</script>   
        
 <!--end here ctrl+u--->
Posted by at No comments :
Subscribe to: Posts ( Atom )