I'm using JQuery UI so that I can slide down a div using the blind function, however, it's not working properly.
Here's the JSFiddle I started: http://jsfiddle.net/CBe3w/192/
For some reason, the sides don't register until the sliding animation is done, at which point they pop out. How can I make it so that the sides are registered from start to finish (they should always be the width of the box class)?
HTML:
<div class="box">
Click Me!
<div class="footer">
Why does it do this?
</div>
</div>
CSS:
.box {
background: #f5f5f5;
width: 250px;
padding: 25px;
}
.footer {
background: red;
padding: 15px 25px;
margin-top: 25px;
margin-left: -25px;
margin-right: -25px;
display: none;
}
JS:
$('.box').click(function() {
$('.footer').toggle("blind");
});
I think the issue is with the order in which jQuery changes the attributes of the element when it toggles it, and the fact that you have negative margins set on the footer.
You could potentially take off the left and right padding of .box, and then put your .box content in a separate div inside, which has margins. Kind of a "hacky" way to do it potentially, though.
Here's a potential solution
The jQuery stays the same, only the CSS/HTML have changed.
See the jsfiddle
HTML
<div class="box">
<div class="content">Click Me!</div>
<div class="footer">
The sides don't pop out anymore!
</div>
</div>
CSS
.box {
background: #f5f5f5;
width: 250px;
/* took off the left and right padding */
padding: 25px 0;
}
.content {
/* "simulates" the padding of .box that you had before */
margin: 0 25px;
}
.footer {
background: red;
padding: 15px 25px;
/* took off the negative margins */
margin-top: 25px;
display: none;
}
You don't need jQuery UI at all: LIVE DEMO
$('.box').click(function() {
$('.footer').slideToggle();
});
<div class="box">
<h3>Click Me!</h3>
<div class="footer">
See how the sides popped Greatly?
</div>
</div>
.box {
background: #f5f5f5;
width: 300px;
padding-bottom: 15px;
}
.box h3{
padding:25px 25px 10px;
}
.footer {
background: red;
padding: 15px 25px;
display: none;
}
The explanation : Jquery UI blind effect will set margin:0 while it's animating on the height of your element.
You will have to redesign your html to split your .box in order to remove it's padding, otherwise, patch jquery-ui javascript to remove that 'margin:0' from the effect er,
you'll be able to fix this issue by positionning your inner container 'relative', so no html remake involved.
.footer {
background: none repeat scroll 0 0 #FF0000;
display: none;
left: -20px;
margin-top: 25px;
padding: 15px 25px;
position: relative;
right: 0;
width: 100%;
}
jsFiddled here
Related
Basically the title says it all.
How do I have two divs next to each other, and when on a different sized screen ( lets say smaller ) they don't merge into one, and if there is not enough space to go down to the next line? Also if possible to scale down the elements inside ( text and image and button )
Thank you!
CURRENT PAGE WITH PROBLEM (The giveaway boxes are the dicvs btw):
Here
add a class with float:left in it for both.
And use margin to center them as you want instead of your margin-left:50%.
Something like :
.giveaway {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
.giveaway1 {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
you should use the same class for both by the way...
I used a wrapper div to contain and center the two smaller divs. Then just used a media query to make them block level at a certain window width (for smaller screens)
Of course, you can adjust the widths / #media rule to suit your own needs
html, body {
margin: 0;
padding: 0;
}
#page-wrapper {
border: 1px solid red;
text-align: center;
}
.box {
text-align: left;
display: inline-block;
border: 1px solid #000000;
box-sizing: border-box;
width: 300px;
height: 200px;
}
#media(max-width: 650px) {
.box {
width: auto;
display: block;
}
}
<div id="page-wrapper">
<div class="box">
<p>Stuff goes here</p>
</div>
<div class="box">
<p>Stuff goes here</p>
</div>
</div>
I have a div (headline) and another div (button) that appears when you hover over the headline. When you leave the headline, the button should disappear.
In my current code the button disappears when you move your cursor to it. Do you have any ideas how to keep the button displayed when you hover over headline or button, so that the button is clickable?
Thanks.
fiddle: http://jsfiddle.net/L6jtotog/
CSS:
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
right: 100%;
margin-right: 10px;
}
HTML:
<div>
<div class="headline" onmouseover="func(true)" onmouseout="func(false)">Headline 1 <div id="button">Test</div></div>
JS:
function func(showPanel) {
if(showPanel) {
$("#button").show();
}
else {
$("#button").hide();
}
}
Instead of using something like that, you can do everything with CSS alone!
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
left: -50px;
margin-right: 10px;
padding-right: 50px;
}
.headline:hover #button {
display: block;
}
<div>
<div class="headline">
Headline 1
<div id="button">Test</div>
</div>
</div>
And in your case, when you need to go to Test, it calls the mouseout which cancels the hover. So I gave an extra padding. Now you can go over the text.
When you set the position attribute of #button to absolute, position:absolute;
it makes the browser think that #button is outside of the div .headline
That is why when the mouse cursor reaches over #button, the browser actually thinks it is outside the .headline and thus, invokes the onmouseout function.
This is why you are getting this problem.
You might want to remove position:absolute from #button and use position:relative.
I am trying to get a div to show up in the correct place after using jQuery's .show().
In the image below, you can see the search div (autocomplete div) shows up to the far left, but I want it to show up where I drew the red box.
Basically I have a small header in the center of my site 1000px in width, and when the autocomplete div shows up, I'd like it to be lined up in the right place, but I'm not sure how set margins or anchors to get it to be in the right spot.
Here is my JS:
$('#sbar').focus(function(){
$('#acd').show();
});
Here is the CSS for the autocomplete DIV:
.autoCompleteDiv{
width: 428px;
height: 150px;
position: fixed;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
top: 66px;
padding: 10px;
font-size: small;
color: gray;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
display: none;
opacity: 0.93;
Basically I want to move the div into the red spot, but have it compatible between screen sizes, and have it stay lined up when the window is 'windowed'.
Any ideas on how to do this?
Regards
If you use the search div as a container for your auto complete div, then it should show in
place. I have created a quick demo that illustrates this.
the html looks like this:
<div id="search"><input value="search" type="text"/>
<div id="auto"><p>autocomplete</p></div>
</div>
and the css:
#search{position:fixed;top:20px;left:200px;}
#auto{display:none;width:auto;min-height:100px;}
To make it responsive, simply use media queries to update the position of the search box...
hope that helps...
Figured it out.
Made a 1000px container div with:
#acdContainer {
width: 1000px;
height: 150px;
top: 64px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
And changed my auto-complete div to be:
.autoCompleteDiv{
width: 730px;
margin-left: 250px;
margin-top: 2px;
height: 150px;
position: relative;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
padding: 10px;
font-family: Raleway;
font-size: small;
color: gray;
overflow-y: scroll;
display: none;
}
So that the autocomplete div saw itself as being in a 1000px window, which was always centered.
I am making something and am wondering how to get a div to overlay another div and it's contents. What I am trying to do it kinda like youtube, when you are on a video and you hover over someone's avatar it will show a small box with their channel art and things. Here is a photo of what i'm currently getting screenshot. Here are my codes for the two divs:
circular div
#staff-info {
width: 400px;
height: 300px;
background: #999;
border: 1px solid #333;
border-radius: 6px;
margin: 0 auto;
position: relative;
}
staff boxes
#staff {
width: 256px;
height: 60px;
margin: 7px 4px 7px 4px;
background: #fff;
display: inline-block;
background: #f3f6f9;
}
.staff-avatar {
width: 40px;
height: 40px;
padding: 10px;
display: inline-block;
float: left;
}
.staff-name {
display: inline-block;
padding-top: 8px;
}
.staff-job {
padding-top: -100px;
font-size: 12px;
}
Grey area (main div)
#youtuber-about {
width: 890px;
height: auto;
background: #d5d3d3;
margin-left: auto;
margin-right: auto;
font-size: 16px;
padding: 10px 0px 10px 10px;
display: inline-block;
}
html for the divs
<div id="staff-info">yolo</div>
<div id="youtuber-about" style="color: #333;">Our Staff<br>
<?php
foreach ($staff as $staff) {
echo '
<div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>';
}
?>
</div>
If you are using jQuery, you can just append the info div inside of each staff member div whenever the users moves their mouse over that staff member.
$('#youtuber-about > div').mouseover(function(){
$(this).append($('#info'));
});
And then you can style that with CSS quite easily, just setting the info div to be position: absolute; and set to fill the containing element, set to show on hover.
See Demo
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
What I would do is have a div that holds both of these two divs and play with your CSS and the nesting of the divs to overlay them properly.
Absolute and Relative positioning is pretty tricky as first but once you get a hang of it you'll be doing it left and right
So remember
Add both divs to a third empty div and then put the one you want overlaying below the other.
To move use
.something {
position: absolute
top:20%
right:15%
left:10%
bottom:20%
}
I'm a (Dutch) first year student studying ICT&Media Design and we are working with HTML/CSS/JavaScript.
While creating a page for myself to work with javascript, html and css I stumbled upon some problems.
I can't scroll down to see my footer on the page's.
I'm pretty sure im doing something wrong with the fixed position but i can't seem to find out what exactly.
Hope you guys can help me, there's probably more wrong positioning wise.
Thank you in advance.
http://athena.fhict.nl/users/i299291/WP21/index.html
(School's Server)
your footer is not appearing because you are using unnecessary using position. Remove all of your position:fixed and position:absolute from your CSS and then page will scrollable and you can see your footer.
Here is the updated CSS; you can see all position are commented, no need to use them.
#header {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative; /* remove this line*/
width: 100%;
}
#menubar {
background-color: #2C2C2D;
border: 1px solid #FFFFFF;
height: 51px;
line-height: 20px;
margin: 261px auto 0; /* remove this line*/
position: absolute; /* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
#containerIndex {
background-color: #FFFFFF;
height: 530px;
margin-top: 330px;
opacity: 0.5;
position: fixed; /* remove this line*/
width: 1280px;
}
#footer {
background-color: #C6C7C0;
border: 1px solid #FFFFFF;
height: 48px;
line-height: 50px;
margin: 880px auto 10px;/* remove this line*/
position: fixed;/* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
Your footer has a fixed position. It is displaying behind your content. Get rid of that, and you should be able to scroll down to your footer.