Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I trying to make a slide up panel the reveals a hidden menu with css/jquery If you look at this link http://www.responsivefilemanager.com/filemanager/dialog.php you will notice that when you hover over the file, a hidden menu is revealed. Can someone give me an example as to how I can accomplish this?
Try This.
http://jsfiddle.net/aqm7kjbg/2/
HTML
<div class="main">
<div class ="samp1">
Content
</div>
<div class="description">
Description
</div>
<div class="icon">
Icon
</div>
</div>
CSS
.main{
width:100%;
height:140px;
}
.samp1{
background-color:grey;
padding:10px 10px 20px 10px;
}
.description{
position:absolute;
background-color:red;
width:97.1%;
}
.icon{
background-color:blue;
}
JQUERY
$('.main').hover(function(){
$('.description').animate({'margin-top': '-18px'}, 500);
}, function(){
$('.description').animate({'margin-top': '0px'}, 500);
})
Demo
HTML
<br/><br/><br/>
<div class="container-two-div">
<div class="contain-things back">
Back
</div>
<div class="contain-things front">
File
</div>
</div>
CSS
.container-two-div , .contain-things
{
height:50px;
max-height:50px;
min-height:50px;
overflow:visible;
background-color:gray;
width:100px;
}
.front
{
position:relative;
top:-50px;
transition: all 1s; /* transition when the mouse over */
background-color:red;
color:white;
}
.container-two-div:hover .front
{
top:-100px;
}
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I have had the desired effects, but have updated the HTML/CSS since, and JS has gone back to zilch.
The fiddle is here -
jsfiddle.net.
$( "#allies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
});
$( "#enemies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
});
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});
/*css*/
#bg{
background-image:url('https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png');
}
#wrap_main{display:block;
width:80%;
margin-left:auto;
margin-right:auto;
}
#fam{
display:block;
margin:auto;
border:double white 30pt;
width:100%-30pt;
float:center;
background-color: black;
font-family:fantasy, impact;
font-size:30pt;
text-align:center;
padding-bottom:2em;
}
#fam img{display:inline-block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:40px;
}
#fam a{text-decoration:none;
color:white;}
#fam a:hover{color:gold;}
#ae_seg{display:block;margin-left:auto;margin-right:auto;
}
#allies{
display:inline-block;
border:double 30pt;
background-color:white;
top:20%;
width:34%;
font-family:fantasy, impact;
font-size:30pt;
}
#allies ul li a{text-decoration:none;
color:black;}
#allies ul li a:hover{color:gold;}
#enemies{
display:inline-block;
border:double rgb(179,33,7) 30pt;
background-color:white;
float:right;
width:34%;
color:rgb(179,33,7);
font-family:fantasy, impact;
font-size:30pt;
}
#enemies ul li a{text-decoration:none;
color:black;}
#enemies ul li a:hover{color:gold;}
div img{
width:120px;
height:70px;
display:block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:5px;
}
#footer{
display:block;
margin:auto;
border:double white 30pt;
width:100%-30pt;
float:center;
background-color:rgb(179,33,7);
}
#footer img{height:120px;
}
#footer img:hover{
transform: rotate(-10deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="bg">
<div style="padding-bottom:10px;" id="fam">
<img style="display:block; margin-left:auto; margin-right:auto; pagging-top:10px;padding-bottom:40px;" src="http://fontmeme.com/permalink/170208/c2e98ece9088b3589606aa5f59e629f2.png">
BBTG_VENG<span style="font-size:24pt;color:white;"> & BBTG tags</span>
</div>
<div id="wrap_main">
<div style="padding:4em;">
</div>
<div id="ae_seg">
<div id="allies">
<img src="http://fontmeme.com/permalink/170203/949c0c2c2c0c34c044b9b45585717a70.png">
<ul>
<li>ON HOLIDAY</li>
<li>AKD_FLGSHP<span style="font-size:24pt;"> & AKD tags</span></li>
<li>MOOzing<span style="font-size:24pt;"> & Cow related tags</span></li>
<li>S N G</li>
<li>CRIME CITY</li>
<li>BOUTIQUEOG</li>
<li>RKNHVK 1<span style="font-size:24pt;"> & RKN tags</span></li>
</ul>
</div>
<div id="enemies">
<img src="http://fontmeme.com/permalink/170203/e8d4db59e876e5c94bd8f072137e33e2.png">
<ul>
<li>PHOENIX<span style="font-size:24pt;"> & PHX/PX tags</span></li>
<li>THEFALLEN</li>
<li>FALLENONES</li>
<li>CAULDRON</li>
<li>BC TA</li>
<li>DIMINISHED2</li>
<li>CLF WMD<span style="font-size:24pt;"> & WMD tags</span></li>
</ul>
</div>
</div>
<div style="padding:5.3em;">
</div>
</div>
<div style="padding-bottom:10px;" id="footer">
<a href="index.htm">
<img src="http://www.iconsdb.com/icons/preview/black/home-5-xxl.png">
</a>
</div>
</body>
</html>
I can't see anything wrong with it, but then I'm really not that experienced.
$( "#allies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
});
$( "#enemies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
});
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});
It is working now please add jquery in your project.
fiddle here
Others already explained it in the comments, your using jQuery and not plain JavaScript.
You need to attach the jQuery library into your project.
CDN
If you want to use jQuery via CDN use following code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
See jQuery CDN
Download
If you want your own copy of the jQuery library in your project download it here and implement it like this:
<script src="jquery-3.1.1.min.js"></script>
Keep in mind, if your using another version of jQuery, you need to change the version number in this snippet.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Example Of One I am trying to create a popup which when the user clicks on the button inside the pop-up it takes them to a brand new pop-up. I can't seem to find the correct HTML script for it. So I was wondering if anyone had any ideas!
With the Foundation and nested modals, this is possible.
$(document).foundation();
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js" type="text/javascript"></script>
Example Modal…
<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal>
<h2>This is a modal.</h2>
<p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
<p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
<p>Second Modal...</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="secondModal" class="reveal-modal" data-reveal>
<h2>This is a second modal.</h2>
<p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
<a class="close-reveal-modal">×</a>
</div>
Pen: http://codepen.io/anon/pen/rOdPqK
ALSO.. you can do it with Customized modal div where no need for any other plugin also full style-customization the way you want and can include any type of content.. as in the following code: JSFIDDLE
$('.modal a').on('click', function (evt) {
evt.preventDefault();
});
$('.open-modal').on('click', function (evt) {
evt.preventDefault();
$('#overlay').show();
});
$('.modal-close').on('click', function () {
$('#overlay').hide();
$('#modal1').show();
$('#modal2').hide();
});
$('#modal2').hide();
$('#pg1btn1').on('click', function () {
$('#modal2').show();
$('#modal1').hide();
});
$('#pg2btn1').on('click', function () {
$('#modal1').show();
$('#modal2').hide();
});
$('#pg2btn2').on('click', function () {
$('#overlay').hide();
$('#modal1').show();
$('#modal2').hide();
});
#overlay {
display:block;
width:100%;
height:100%;
z-index:100;
position:fixed;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.5);
font-family:verdana, sans-serif;
}
.modal {
display:block;
width:400px;
height:250px;
position:fixed;
top:calc(50% - 100px);
left:calc(50% - 200px);
background-color:#EEE;
border:2px #AAA solid;
border-radius:5px;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);
font-size:24px;
padding:5px;
}
.modal-head {
display:block;
height:30px;
padding:5px;
font-weight:bold;
text-align:right;
}
.modal-head a {
text-decoration:none;
display:inline-block;
width:15px;
height:15px;
margin-right:5px
}
.modal-action {
display:block;
background-color:#DDD;
width:60px;
position:absolute;
left:calc(50% - 30px);
margin-top:10px;
bottom:10px;
padding:5px 10px;
border:2px #CCC solid;
border-radius:5px;
text-align:center;
cursor:pointer;
text-decoration:none;
}
.modal-action:hover {
background-color:#BBB;
border-color:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Crema crema chicory viennese sugar medium, rich mazagran americano aftertaste cinnamon rich. Filter, frappuccino that decaffeinated siphon caffeine so sit dripper. French press shop carajillo cappuccino mocha medium white lungo.</div>
<div>Activate Modal
</div>
<div id="overlay">
<div id="modal1" class="modal">
<div class="modal-head">x
</div>
<div class="modal-body"><strong>Page ONE: </strong>Ristretto spoon galão bar, lungo siphon whipped variety seasonal half and half. Dripper plunger pot saucer crema extraction filter arabica. Next
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-head">x
</div>
<div class="modal-body"><strong>Page TWO: </strong>Roast, steamed, robust, chicory qui kopi-luwak, cappuccino, roast half and half cappuccino aromatic variety. Rich a mazagran qui cup barista chicory. PrevClose
</div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
For the moment, my application only uses simple checkboxes with label. Our app designer wants us to change this into clickable images which works like checkbox.
Here an example:
I have no idea how to proceed, should i try to create a div (the square) filled with the image and then set my current checkbox in the bottom right corner of that div ?
Or maybe there's a simplier way to do it ?
http://jsfiddle.net/pwoojpv1/
HTML
<div class="check-img" style="width:100px;height:100px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/883px-Tux.svg.png" >
<div class="check">✓</div>
</div>
CSS
*{
box-sizing:border-box;
}
.check-img{
position:relative;
top:0px;
left:0px;
}
.check-img img{
border:solid 2px gray;
width:100%;
height:100%;
cursor:pointer;
}
.check{
padding-left:5px;
color:grey;
height:20px;
width:20px;
background:grey;
position:absolute;
bottom:0px;
right:0px;
}
.check-img.checked img{
border-color:orange;
}
.check-img.checked .check{
background:orange;
color:white;
}
JS
$(document).ready(function(){
$(".check-img").click(function(){
$(this).toggleClass("checked");
});
});
Put the <img> inside a <label> element that's tied to the checkbox <input> element's id. So when you click on the label (the image), it's the same as clicking on the checkbox. Then wrap the <input> and the <label> inside a <div> so you can position the checkbox on the bottom right corner.
HTML:
<div class="container">
<input id="checkbox1" type="checkbox" />
<label for="checkbox1">
<img src="http://i.imgur.com/rpUZ96Y.jpg" />
</label>
</div>
<div class="container">
<input id="checkbox2" type="checkbox" />
<label for="checkbox2">
<img src="http://i.imgur.com/fKRGSmS.jpg" />
</label>
</div>
CSS:
.container {
display: inline-block;
font-size: 0;
position: relative;
}
.container input {
bottom: 0;
position: absolute;
right: 0;
}
Here's a fiddle.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am not sure why the last image 6.png is selected, when all the images are direct descendants of the div shape. Thanks for your help its much appreciated.
From what I understand it should select all the divs because they are all direct descendants of the div #shape.
<!DOCTYPE html>
<html>
<head>
<title>3D image</title>
<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
body{
background:-webkit-gradient(radial,800
64,950, 500, 400, 40, from(#1F1F1F), to(#FFFFFF));
}
#container{
width:100%;
}
#shape{
position:relative;
top:160px;
margin: 0 auto;
width:200px;
height:200px;
}
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="shape">
<div class="one"><img src="images/2.png"></div>
<div class="two"><img src="images/3.png"></div>
<div class="three"><img src="images/4.png"></div>
<div class="four"><img src="images/1.png"></div>
<div class="five"><img src="images/5.png"></div>
<div class="six"><img src="images/6.png"></div>
</div>
</div>
</body>
</html>
All of them are selected.
They are overlapping eachother, as in they all have the same position.
Replace
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
for
#shape > div{
position:relative;
float: left;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
And you should see the difference.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Is this Link possible without javascript?
I'm trying to learn css and floating layouts.
I've searched on the forums and people's links to this site, and even if this is looks like a good solution I would like to broaden my skills in css and html.
Using CSS3 Columns you can easily achieve the same result on modern browser:
Example jsbin: http://jsbin.com/ivumoq/1/edit
relevant CSS
body > div {
-webkit-column-count:3;
-webkit-column-width:200px;
-moz-column-count:3;
-moz-column-width:200px
column-count:3;
column-width:200px;
}
You may also define the number of columns according to a specific mediaquery. E.g. if you wanto to display 4 columns when the viewport is larger that > 960px
#media all and (min-width:960px) {
body > div {
-webkit-column-count:4;
-moz-column-count:4;
column-count:4;
}
}
So you could emulate the reflow of masonry on browser resize.
Example with mediaqueries: http://jsbin.com/ivumoq/2/edit
Otherwise, using float you need to define three floated containers (as three independent columns) and place approx.ly 1/3 of the images on each container.
Working Fiddle
HTML:
<div class="parent">
<div class="left-col">
<div class="small"></div>
<div class="medium"></div>
<div class="large"></div>
<div class="large"></div>
<div class="medium"></div>
<div class="small"></div>
</div>
<div class="right-col">
<div class="large"></div>
<div class="medium"></div>
<div class="small"></div>
<div class="small"></div>
<div class="medium"></div>
<div class="large"></div>
</div>
</div>
CSS:
.parent {
width:400px;
height:auto !important;
background:yellow;
}
.left-col {
max-width:200px;
height:0 auto;
width:200px;
float:left;
display:inline-block;
}
.right-col {
max-width:200px;
height:0 auto;
width:200px;
float:left;
display:inline-block;
}
.small {
width:190px;
margin:10px;
height:100px;
background:green;
display:block;
}
.medium {
width:190px;
margin:10px;
height:200px;
background:blue;
display:block;
}
.large {
width:190px;
margin:10px;
background:brown;
height:400px;
display:block;
}
it is possible, but you'll have to have different columns. If you use display: inline-block the images will not align properly, and if you float them, you'll have a problem when the first one on a row is taller then the last one.
I fiddled it up:
http://jsfiddle.net/VeecS/
one column html:
<div class="col">
<h2>Column1</h2>
<img src="http://placehold.it/300X150" />
<img src="http://placehold.it/300X320" />
<img src="http://placehold.it/300X120" />
</div>
css:
.col {
width:24%;
padding: 10px 0;
background: #f1f1f1;
float: left;
margin-right: 1%;
}