I've a web page having some equal-sized boxes. Some of them are hidden (.dummy), other are visible having class lets say .A,.B & .C as shown in the image below:[The dummy have only been shown here in the image for simplicity. In actual HTML code they don't have any background/border, hence invisible.]
Now, if a user clicks on link A, all boxes expect those of class '.A' will fadeOut. Similarly, for the other links as shown here.
I want only the div#1 box to change dimensions, when the pointer is hovered. However, when I apply the .hover command, the whole page gets distorted. I want every box to remain as it is and only the width of #div 1 gets increased. Similarly, only the height of #div 2 to increase. For this purpose, do I have to write separate classes for each effect?
EDIT #1
These are my relevant codes:
.dummy {
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
background:none;
}
.A, .B, .C{
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
If all of the Class A divs are under the same parent, you can try nth-of-type selector,
e.g.,
<html>
<head>
<style>
.A {
width: 50px;
height: 50px;
border: 1px solid #CCC;
}
#outer div:nth-of-type(1) .A:hover {
width: 300px;
}
</style>
</head>
<body>
<div id="outer">
<div>
<div class="A"></div>
</div>
<div>
<div class="A"></div>
<div class="A"></div>
</div>
</div>
</body>
</html>
Regerence:
W3C CSS Selector Reference
Related
When i have multiple div's with sticky position the first div is overlapping the second div while at the end and not staying locked at the position without overlapping.
How do i make it lock at a position when it ends the corresponding div
Here is a copepen for that
HTML :
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-header">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
Codepen
Original problem in website
https://ibb.co/BCq4Pnd
First calculate the height of first element i.e( 80px including border and paddings ) in your case.
Give 80px top to the second element.
Third element will have a top of 160px and so on.
All elements will have position:sticky
Try this,
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:sticky; top:0px;}
div.main-header{top:80px }
.main-footer{position:sticky; top:160px }
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-header">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
First change the class of your body component, you gave it the wrong class and for me the result is good?
My example: http://jsfiddle.net/kwnk8qup/
My code:
<div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;">
<div id="container1" style="position:absolute;margin-top:130px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;">
</div>
</div>
The container (parent div) position is relative container1 (child) position is absolute. I set the container2 top location as 130px, it can be calculated from container (parent div) top position but I need to show 130px from document position. How to resolve with out changing positioning?
I don't know if I got your question, but you could just move #container1 outside of the #container so it would be relative to <body>-element instead of #container-element.
<body>
<div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;"></div>
<div id="container1" style="position:absolute;margin-top:130px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;"></div>
</body>
http://jsfiddle.net/q29ey2qt/
Try Margin-top: -50px for the container1 and top:130px
http://jsfiddle.net/30owkpv7/
Css
#container {
position:relative;
margin-top:50px;
margin-left:50px;
width:200px;
height:300px;
border: 2px solid red;
}
#container1 {
position:absolute;
margin-top:-50px; /*you need 130 from body (-50) of container */
top:130px; /*top from body*/
margin-left:30px;
width:50px;
height:50px;
border: 2px solid #a1a1a1;"
}
HTML
<div id="container">
<div id="container1"> </div>
</div>
I need a fixed-height, fixed-width div centered (horizontally) and middled (vertically) on the viewport. There'll be a navigation bar which must be 'fixed' to the top of that div. I have content which overflows and requires a scrollbar. However, instead of the scrollbar on the div, I want it to resemble a more traditional scrollbar - on the right most position of the browser.
A close solution came from a related question, however their solution does not keep the content div fixed-height/width.
Here's what I have now. I would prefer a purely-CSS solution, but I understand Javascript might be necessary.
HTML
<div class="verMidOut">
<div class="verMidMid">
<div class="verMidIn">
<div class="scroller">
<div id="headerContainer" style="visibility: visible;">
<p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
</div>
<div class="mainContainer index">
<p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
</div>
</div>
</div>
</div>
</div>
CSS
html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
.scroller {width: 100%;overflow: auto;overflow-x:hidden;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}
An early solution I had can be found here, which uses jQuery, however, the scrollbar only appears when the content overflows the body, and not the content div (black/red in the jsFiddle).
Then I added a spacer in the content div which dynamically changes its height depending on the window height and div height. This forces the scrollbar to appear even though there's nothing there.
HTML
<div class="verMidOut">
<div class="verMidMid">
<div id="headerContainer" style="visibility: visible;">
<p>This (navigation bar) has to stay 'fixed' to the top of the red box</p>
</div>
<div class="verMidIn">
<div class="mainContainer index">
<p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p><p>ee</p>
<div class="spacer"></div>
</div>
</div>
</div>
</div>
CSS
html, body {margin: 0; padding: 0; width: 100%; height: 100%;overflow-x:hidden}
.verMidOut {width:100%; height:100%; display:table; position:relative; border: 4px solid blue; overflow: hidden;}
.verMidMid {width:100%; display:table-cell; top:50%; vertical-align:middle; *position:absolute; border: 4px solid green; background-position: center;overflow:hidden;overflow-y:auto;}
.verMidIn {width:100%; position:relative; top:-50%; border: 4px solid red;}
.mainContainer {border: 5px solid black;margin: auto;width: 512px;height: 325px;}
#headerContainer{visibility: hidden; margin-left:-256px;width:512px;height:80px;left:50%;position:absolute;top:15px;z-index:10;}
.spacer {display:inline-block;visibility:hidden;}
jQuery
//When the window is more than the height of the black box, it will calculate the 'top' for the headerContainer
function posNav() {
if($(window).height() > $('.mainContainer').height()) {
var diff = (($(window).height() - $('.mainContainer').height()) / 2);
var newTop = diff + 15;
$('.spacer').css({'height': diff});
$('#headerContainer').css({'top': newTop});
}
}
$(document).ready(function(){
posNav();
$(window).resize(function(){
posNav();
});
});
I'm creating a personal site to showcase demo material, and I would like to allow users to click on a thumbnail which causes a small window to animate downward and display details. Currently, I have it working perfectly, but as I continue to add items, the code is getting very repetitive. I'm having to repeat all of this code for "item2," "item3," etc... Is there a more efficient way to handle this with possibly 1 script and maybe 1 animated containing box for my content? I'm new to jQuery and Javascript, and I'd like to get better at streamlining my code.
Here's what I'm using:
<script type="text/javascript">
$(function() {
$('#activator_item1').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box_item1').animate({'top':'250px'},500);
});
});
$('#boxclose_item1').click(function(){
$('#box_item1').animate({'top':'-500px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
CSS
.box_item1{
position:fixed;
top:-800px;
height:400px;
width:550px;
left:30%;
right:30%;
background-color:#fff;
color:#333;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
text-align:left;
}
.box_item1 h1{
border-bottom: 1px solid #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#1E87BE;
color:#fff;
font-family:"Arial Black", Gadget, sans-serif;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
a.boxclose_item1{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
a.activator_item1{
width:153px;
height:150px;
position:relative;
top:0px;
left:0px;
z-index:1;
cursor:pointer;
HTML
<div id="item1"><a class="activator_item1" id="activator_item1"><img src="images/item1_button.png"/></a></div>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box_item1" id="box_item1">
<a class="boxclose_item1" id="boxclose_item1"></a>
<h1>Title</h1>
<h2>Content</h2>
<h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3>
</div>
</div>
You are quite close. Instead of selecting elements by "id", select them using their associated class (using a dot "." rather than "#"), ex. $('.activator_item1') - this will apply the same code to all activator_items.
This can be solved with better naming. You have a distinct class for each element, which robs you of the grouping power of classes. Consider separating the class for better access to the iterator. For example, you have <a class="activator_item1" id="activator_item1"> where you could have <a class="activator item1" id="activator_item1"> instead. This would allow you to select all of the activators in JQuery and iterate over them:
$('.activator').each(function() {
//your code
});
I need to shape ONE div tag in the following shape:
Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.
Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/
It's essentially using three divs to aggregate the mouse events, like so:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
And I use a :hover rule on the outer element to affect the border colors on the inner divs:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.
A one div solution using pseudo elements:
/* relevant styles for shape */
.tab {
border-top-left-radius: 0px;
margin-left: 100px;
}
.tab:before {
content:"";
display: block;
position: relative;
height: 50px;
width: 50px;
right: 52px; /* width + border width */
top: -2px;
background-color: white;
border: inherit;
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* styles to look like example */
div{
box-sizing: border-box;
background-color: white;
border: 2px solid red;
height: 100px;
width: 200px;
border-radius: 5px;
}
div:hover {
border-color: green;
}
<div class="tab"></div>
See this jsFiddle example:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>
You can either use a map or use 2 divs and alter the borders so it looks like one shape.
two options that I can think of:
1) give the div a background image and use CSS pseudo class :hover to change the background image to one that indicates a hover state
2) put three div's inside a wrapper, and position them so so you have one in the upper left hand corner, and then two stacked on top of each other, so that you can simulate the top half of a larger div missing the upper left half border. I don't think CSS alonw can target all the divs in order to change their borders, so will probably have to use JS to execute the hover behavior, by applying an event handler to all three divs.
No. Divs are ALWAYS rectangular. You could fake it in a number of ways (using a background image would be one option).
As for using two DIVs, sure you could. The hover could be done with CSS3 and child selectors of a parent div or you could JavaScript to change the class of both divs when hovering over either one of them.
Definitely requires two or three div's unless you use a background image
Here's a three-div solution
http://jsfiddle.net/pxfunc/SUuF6/
Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support
HTML:
<div id="fancyShape">
<div id="main"><div></div>
<div id="panHandle"></div>
</div>
CSS:
#fancyShape {position:relative;width:504px;height:304px;}
#main {
margin-left:100px;
width:400px;
height:300px;
border:solid 2px #000;
border-radius:0 15px 15px 15px;
}
#panHandle {
width:100px;
height:120px;
position:absolute;
top:0;left:0;
border-top:solid 2px #000;
border-left:solid 2px #000;
border-bottom:solid 2px #000;
border-radius:15px 0 0 15px;
}
/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}
Perhaps you could use Border-radius along with 2 or 3 div's to get the look you want. The only issue then is it's not supported in all browsers.
Use multiple divs, as others have suggested.
http://jsfiddle.net/thomas4g/7B5MA/14/
Keep in mind that it'll be very hard to flow content in this.
<!DOCTYPE HTML>
<html>
<head>
<style>
html{height: 100%; width: 100%;}
body{height: 100%; width: 100%;}
#wrapper{
position: relative;
top: 50px;
right: 25%;
width: 565px;
height: 440px;
margin: 0 auto;
padding: 0px;
}
#left{
position: absolute;
width: 100px;
height: 50px;
border: 2px solid black;
border-right: none;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
background-color: #ffffff;
}
#right{
position: absolute;
left: 100px;
width: 440px;
height: 440px;
border: 2px solid black;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
border-radius: 10px;
padding-left: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#wrapper').hover(
function () {
$(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid red'});
},
function () {
$(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid black'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="right">Some content here</div>
<div id = "left"></div>
</div>
</body>
</html>
You can use CSSPIE for rounded orners for IE