GyanCode

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>

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

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>

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

<ul>

</ul>

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 8 March 2016

Show Hide

Monday 7 March 2016

All media query for all screen version

Reply Button like facebook

Tuesday 1 March 2016

Scrollbar css add