As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?
A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.
You can try this - DEMO
.drop-menu {
display: none;
position: relative;
height: 60px;
top: -20px;
}
.drop-menu ul::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -30px;
left: 30px;
border-width: 15px;
border-color: transparent transparent red transparent;
border-style: solid;
}
.drop-menu ul {
background-color: red;
position: relative;
top: 20px;
z-index: 999;
}
See http://jsfiddle.net/SZWmd/23/
The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.
Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do
$('.drop-menu-button').click(function() {
$('.drop-menu').toggleClass('visible');
$('.drop-menu ul').slideToggle();
});
and use this selector:
.drop-menu.visible::before
But the problem is that when is sliding up, the triangle is hidden at the beginning.
Then, you need
$('.drop-menu-button').click(function() {
if($('.drop-menu').hasClass('visible')){
$('.drop-menu ul').slideUp('',function(){
$('.drop-menu').removeClass('visible');
});
}else{
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideDown();
}
});
Edit:
You can also use
$('.drop-menu-button').click(function() {
$('.drop-menu').addClass('visible');
$('.drop-menu ul').slideToggle('',function(){
if(!$(this).is(':visible')){
$('.drop-menu').removeClass('visible');
}
});
});
See it here: http://jsfiddle.net/SZWmd/31/
Related
I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!
A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>
I've got an HTML-File.
As you can see, if you click on an image it opens a box below with some text. That works with jQuery. Is there a way to push the images under the box down?
So that the box never covers an image. Please note that it should be responsive.
Here's the fiddle:
That's the css:
#projekte {
list-style: none;
text-align: center;
width: 100%;
}
#projekte li {
display: inline-block;
margin: 10px 5px 10px 5px;
width: 300px;
}
#projekte img {cursor: pointer; width: 300px;}
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: absolute;
}
don't make the .beschreibung elements absolutely positioned, as this will take them out of the flow of the document. Change your css to:
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
}
Updated fiddle (with vertical-align:top as stated in comments)
You have to change position parameter to relative
.beschreibung {
background-color: #bec3c8;
display: none;
left: 0;
position: relative;
}
And using jQuery, you can set it's width, like:
jQuery(".beschreibung").width("desired width");
EXAMPLE FIDDLE
Also, you need to hide previous image description, like:-
$("div[id^='projekt']").hide();
You can change your CSS Class position: relative
.beschreibung {
background-color: #bec3c8;
display: none;
width: 100%;
left: 0;
position: relative;
}
So I just found an easy solution. I just put the .beschreibung in a wrap div and set the .beschreibung to 100% width. You can find the updatet fiddle here: https://jsfiddle.net/znt3npqa/9/
In short: When I have a container and some inline-block divs, the container's width shrinks around the divs. But when the divs are too-long and therefore one of them goes to another line, the container width is rendered as 100%.
In the picture the default behavior is the first one, whereas the desired behavior is the second one.
Here is a fiddle with the example:
http://jsfiddle.net/gzbx4upq/
See fiddle for desired results
Either use
display:block;
or
display:inline;
or
max-width:250px ;
That seems possible using pseudo classes.
CSS
div {
display: inline;
position: relative;
}
div:before {
content:"";
position: absolute;
left: 0px;
right: 0px;
bottom: -5px;
top: -5px;
background-color: blue;
z-index:-1;
}
div:after {
content:"";
display: block;
}
p {
display: inline-block;
background-color: red;
}
Working Fiddle
Basically, I want many(>25) divs to be displayed one on top of the other so that only one can be seen at a time. I have the jQuery UI draggable implemented, so once a div is dragged away, the next div is shown. What CSS do I need to make such a stack of divs? jQuery is also available if required.
Thanks!
Try this:
CSS
div.square {
cursor: pointer;
width: 100px;
height: 100px;
border: 2px dashed purple;
position: absolute;
top: 30px;
left: 30px;
font-size: 50px;
line-height: 100px;
text-align: center;
color: white;
}
jQuery + jQueryUI
var count = 25;
var colors = ['red','green','blue','orange','yellow'];
while(count--) {
$('<div/>',{className:'square', text:count}).draggable().css({position:'absolute','z-index':count, text:count, backgroundColor:colors[count % 5]})
.appendTo('body');
}
EDIT:
I just noticed that for some reason in IE and Safari .draggable() overrides the absolute positioning with relative, so you need to set it back to absolute after you made it draggable.
Updated the example above.
http://jsfiddle.net/p9wWA/
You mean something like this?
#relative_container { position: relative; }
#relative_container div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#relative_container div.item_1 { z-index: 100; } /* Higher index means its more on top */
I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:
EDIT: using the prototype refactor from remi bourgarel:
function socialMenuInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.
EDIT: This is the html and css I am using:
<div id="share_words">share</div>
<div id="sociable_menu"></div>
#share_words{
display: none;
border: 1px solid white;
position: absolute;
right: 320px;
top:0px;
padding: 4px;
background-image: url('/images/icons/group.png');
background-repeat: no-repeat;
background-position:7px 6px;
text-indent:26px;
color: white;
z-index: 15;
}
#sociable_menu{
border: 1px solid black;
padding: 5px;
position: absolute;
right: 275px;
top: -10px;
z-index: 20;
}
Thanks for any help.
You're not using prorotype...try this
function socialLinkInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
But i'll need your html code to be more helpful