Hide/ show div outline - javascript

How can i show and hide div outline? I want the content inside the div to display at all times but the outline of the div display only on mouseover.
function show_sidebar() {
document.getElementById('boxes').style.visibility = "visible";
}
function hide_sidebar() {
document.getElementById('boxes').style.visibility = "hidden";
}
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">
<div class="container5" id="boxes">some thing</div>
</div>

The simplest way to achieve what you want is by using just CSS:
#boxes {
border-color: transparent;
}
#wrapper:hover #boxes {
border-color: red;
}
Snippet:
.container5 {
background-color: transparent;
width: 160px; /* resized it to fit inside the screen */
height: 200px; /* resized it to fit inside the screen */
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
position: absolute;
overflow: hidden;
}
#boxes {
border-color: transparent;
}
#wrapper:hover #boxes {
border-color: red;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container5" id="boxes">some thing</div>
</div>
Alternatively, you can use JavaScript to set the border-color property to transparent on mouseout and back to red on mouseover:
JavaScript:
document.getElementById('wrapper').onmouseover = function () {
document.getElementById('boxes').style.borderColor = "red";
}
document.getElementById('wrapper').onmouseout = function () {
document.getElementById('boxes').style.borderColor = "transparent";
}
jQuery:
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
Snippet:
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
.container5 {
background-color: transparent;
width: 160px; /* resized it to fit inside the screen */
height: 200px; /* resized it to fit inside the screen */
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid transparent;
position: absolute;
overflow: hidden;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container5" id="boxes">some thing</div>
</div>

You can either use a separate class to conditionally toggle it, or use the :hover property. In the interest of JavaScript, I'll show the former. Demo: https://jsfiddle.net/h8c33x9d/
CSS
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}
.my-border {
border: 1px solid red;
}
JavaScript
function show_sidebar() {
$('#boxes').addClass('my-border');
}
function hide_sidebar() {
$('#boxes').removeClass('my-border');
}

You don't need Javascript for that, as suggested by #KarthikeyanSekar, you only need a :hover effect to your container element.
An example to help you visualize can be found on this fiddle, but essentially it goes like this:
The css:
/* Remove the border from the .container5 style */
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
/* Add only the border when the mouse is hover it */
.container5:hover {
border: 1px solid red;
}
And the HTML remains the same, only removing the javascript binds:
<div id="wrapper">
<div class="container5" id="boxes">some thing</div>
</div>
Hope it helps,
Cheers!

/*Change border to transparent */
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
border: 1px solid transparent;
}
/*Add border color*/
.container5:hover {
border: 1px solid red;
}

Related

Trying To Make A Div Disapear And Reapear OnClick

I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn't make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Try this:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
What are you going to click in order to show the hidden box,since you have made it disappear ?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}
<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x++;
char.classList.remove('show')
char.classList.add('hide')
}else{
x++
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
}
<body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>

How to make DIV in center dynamic [duplicate]

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 2 years ago.
I want to make DIV always in center, no matter when scroll to any place, div always in center of screen. I copy the source code from google search, but it seems like it is only on the top of the screen, however, when I scroll down the center and click the button again, it is on top, not in the screen anymore
function buttonTrigger() {
document.getElementById("centerDIV").style.display = "block";
}
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div {
width: 200px;
height: 200px;
background-color: #1E90FF;
}
body {
height: 2000px;
}
.center-in-center {
border: 1px red solid;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
display: none;
transform: translate(-50%, -50%);
z-index: 100;
}
<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>
Try position: fixed
function buttonTrigger() {
document.getElementById("centerDIV").style.display = "block";
}
* {
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div {
width: 200px;
height: 200px;
background-color: #1E90FF;
}
body {
height: 2000px;
}
.center-in-center {
border: 1px red solid;
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
display: none;
transform: translate(-50%, -50%);
z-index: 100;
}
<input type="button" value="button" onclick="buttonTrigger()" />
<div class="center-in-center" id='centerDIV'></div>

CSS, express and bootstrap : overflow and margin error

I stack two circles over an image, using the position and overflow properties.
It works fine but I have the circle running over the image on left and right (not top and left.
Here is the image : Circle overflowing
Here is the CSS.
.mainContainer {
background-color: #A6A4AA
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
}
.ajustement {
opacity: 0.5;
}
The code source (ejs+bootstrap) : the row is a child of mainContainer
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
How can I draw my circles into the images only, without running out the border ?
Here is what I would like :
Do you looking something like this:
body{
margin: 0;
background-color: #A6A4AA
}
.mainContainer {
background-color: #A6A4AA;
margin: 15px auto;
width: 98%;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border-radius: 0 0 8px 8px;
background: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
border: 3px solid #2C3756;
line-height: 0;
border-radius: 12px;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: 3px solid #2C3756;
left: -45%;
top: -78px;
height: calc(100% + 78px);
}
.impact{
width: 20px;
height: 20px;
border-color: #000;
left: 10%;
top: 10%;
}
.ajustement {
opacity: 0.5;
}
<div class="mainContainer">
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/800px-Papageitaucher_Fratercula_arctica.jpg">
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
</div>

How to achieve fullscreen editor on button click using jquery

I have a editor. I want to make it fullscreen on certain button click.
Actually I want to acheive CKEditor like maximize feature through jauery,
Please see this link:
http://ckeditor.com/demo
This demo maximize button is there. I want to achieve same using jquery.
Besides from appending (and removing) a CSS class on it when a button is clicked with JavaScript, you can also use a few CSS tricks:
#full-screen-toggler:checked ~ #youreditor {
z-index: 9999;
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
margin: 0px;
}
#youreditor #fslabel::after {
content: "enter fullscreen";
cursor: pointer; /* optional */
}
#full-screen-toggler:checked ~ #youreditor #fslabel::after {
content: "exit full screen";
}
/* Styles for preview */
#youreditor { background: green; padding: 10px; }
#youreditor #fslabel::after { color: white; padding: 3px 5px;
border-radius: 2px; border: 1px groove white; }
<input id="full-screen-toggler" type="checkbox" style="display: none;" />
<div id="youreditor">
<label id="fslabel" onclick="" for="full-screen-toggler" />
</div>
Assign the user window's dimension to container, by window.innerWidth and window.innerHeight
css:
.container { width:200px; height:100px; background:#ccc; }
html:
<div class='container'>
<button class='maximize'>Maximize</button>
<button class='minimize'>Minimize</button>
</div>
javascript:
$('.maximize').on('click', function(){
$('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
$('.container').css({'width':'200px' , 'height': '100px'});
});
working example
link: http://jsbin.com/raduqihibo/edit?html,css,js,output
Working Fiddle
You could acheive that using custom css class :
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Hope this helps.
$('#maximize').on('click', function(){
$('#container').toggleClass('full-screen');
})
.full-screen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
div{
width:100px;
height:100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<button id='maximize'>[]</button>
</div>

How to line up images horizontally and center with css when using a premade javascript magnifying glass?

I've been working on placing a javascript magnifying glass on site.
I need help positioning the images in a straight horizontal line, right next to each other, with no white space in between. Setup must also be centered in middle of page.
Like this: http://s17.postimg.org/6nwizreov/Screenshot.png
Code: http://jsfiddle.net/NightSpark/dtsqcpv8/
(The two js files and css are from magnifier.js, by Mark Rolich)
Thanks
.magnifier-thumb-wrapper {
position: relative;
display: block;
top: 0;
left: 0
}
.magnifier-lens {
position: absolute;
border: solid 1px #ccc;
z-index: 1000;
top: 0;
left: 0;
overflow: hidden
}
.magnifier-loader {
position: absolute;
top: 0;
left: 0;
border: solid 1px #ccc;
color: #fff;
text-align: center;
background: transparent;
background: rgba(50, 50, 50, 0.5);
z-index: 1000;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}
.magnifier-loader-text {
font: 13px Arial;
margin-top: 10px
}
.magnifier-large {
position: absolute;
z-index: 100
}
.magnifier-preview {
padding: 0;
width: 100%;
height: 150px;
position: relative;
overflow: hidden
}
.magnifier-preview img {
position: absolute;
top: 0;
left: 0
}
.opaque {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
}
.hidden {
display: none
}
demo - http://jsfiddle.net/dtsqcpv8/2/
adding this you can center it replace body with the parent of the element
body{
text-align:center;
}
.cont{
display:inline-block;
}

Categories