I am trying to animate my accordion headers to simulate a ribbon dragged on to the wrapper on hover, and on hover out its dragged out of the wrapper.
Now if you check this first jsFiddle everything works fine, but when I try to animate the width of the h2 the ribbon bit outside of the wrapper disappears for a second and returns when the width animation is done. Check this jsFiddle to see the problem.
Am I doing this wrong? Is there a way to animate both the h2 and the span at the exact same time?
H2 gets an 'overflow:hidden' while animating, that's why your ribbon disappears. It seems that jQuery does this automagically, when animating a width.
What you could do is to use a different animation library like emile, or to animate an emtpy property set and use the step callback of $.fn.animate to set the width.
Or you can modify your css that an overflow hidden on the H2 does not affect you.
Related
Hi I'm trying to get 2 plugins to work so that when you scroll there's a 'slide' transition from one full page container to another along with a background color fade transition.
Plugins
Magic scrolling colour
http://codepen.io/daveredfern/pen/zBGBJV
Fullpage.js
http://alvarotrigo.com/fullPage/
However the 'magic scrolling colour' doesnt seem to work if I contain all the ".panel" divs in any other tag/div other than - the issues is that I need a container div in order for fullpage.js to work.
Even if I change the background colour js to target that container div name
(i.e. )
$body = $('#fullpage') or $body = $('fullpage')
...it still won't work. I find it hard to believe it wouldn't work with anything between the variable divs and body tag.
I've mocked up an example of the issue here: https://codepen.io/anon/pen/qmbmMm
I would be grateful if you could offer any assistance!
Cheers
The problem is that you have
#fullpage {
background: #f4f4f4;
}
and
.color-indigo {
background-color: #4332CF;
}
In CSS ID's have a higher priority than classes, so it overrides the custom color always. Easy fix, change the classes to
#fullpage.color-indigo {
background-color: #4332CF;
}
The scroll event won't get fired in fullPage.js unless you use the fullPage.js options scrollBar:true or autoScrolling:false as detailed in the fullPage.js FAQs.
So, you need scroll bar in order to register the scroll event that is being used by Magic Scrolling Color.
If you do not want to use a scroll bar and just want to recreate a fading effect, I would encourage you to go for the fullPage.js Fading Effect extension.
So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.
I have a weird problem and i cant find a solution no matter what i tried.
I have a simple menu that toggles few divs (slide up/down), like this:
<div class="navigation">
<ul class="left">
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</div>
and a few divs that are being toggled.Pretty simple but there is a lot of code, so i wont paste it here.
Script that makes it work is:
$('.navigation a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.top-drawer').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
Once the user clicks on the link, the div slides down more than it should, flickers and then it becomes the real height (the height is should be).
Here is a Fiddle. Please be sure to have the "Result" Window at at least 1000+ px wide otherwise it wont work (the error wont be shown).
See my suggestion on this JSFIDDLE
Here an explanation of the changes in there:
The Problem
With all those floating elements inside each .top-drawer jQuery has a lot of issues calculating the height of the div because the elements will move around while sliding up and down.
Suggestion
Switching to inline-block instead. But for that to work with your CSS, particularly with the padding on each .top-drawer, you need to use box-sizing: border-box; on anything that is using padding, inline-block and width with %. If curious you can read about this HERE.
New problem
If you go the route of inline-block (best practice now). You will need to use jQuery 1.8.xx or higher. I noticed in your fiddle you use 1.7.2, which has a bug with border-box that was fixed in versions after that.
Try to understand the code you are using.
This is the way I think jQuery's slideUp(), and slideDown() works; mainly the algorithm changes the height of the element, and display after the height is equal to the height of the element or at "0".
So when you will have your element's position set to relative you will see what you're calling "flickers", specially when you have multiple element at the same position. You will also see these "flickers" when you use fadeIn(), fadeOut() etc, because the display of the element is not instantly set to "none" or anything visible in these cases, but after the animation completes.
Solution:
Set the element's position to absolute. That should solve your issue;
example.
Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?
Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/
You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});
Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.
You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.
You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/