gm all.
am looking at this.
http://api.jqueryui.com/slide-effect/
It works just fine and it should take direction and distance. but am not sure where to enter that info. I tried.
$( "#art1Toggle" ).click(function() {
$( "#articles1" ).toggle( "slide", 200+'px' );
});
and it didn’t work. Where would i put in the info for the direction and amount of pixel i want it to slide?
thx
D
Probably something like this:
$( document ).click(function() {
$( "#toggle" ).toggle("slide",{
direction: "down",
distance:100 },
1000 );
});
Hello Paul, gm…
i think i kinda solved it.
this is what i have
var hideOpt = { "direction" : "left", "mode" : "hide"};
var showOpt = {"direction" : "left","mode" : "show"};
$( "#art1Toggle" ).click(function() {
$( "#articles1" ).effect( "slide", hideOpt, 200);
});
$( "#bgImg1" ).click(function() {
$( "#articles1" ).effect( "slide", showOpt, 200);
});
basically i have two divs absolutely positioned, when the one on top slides over it reveal the one below. I click on the image below & it brings the top one back.
So far so good.
but I want the image on top to leave just of display for ui purposes so the user knows to click on it to bring it back. i temp solved w/the user being able to click on the bottom image to bring it back.
but so far have not been able to restrict the distance of the slide.
thx
D
so for example this is a bit of what i am working on.
http://codepen.io/pdxSherpa/pen/OPZBJy
2 issues.
1.even with margin the two div overlay each other (not this bad in my page. only about 20px of an overlay…still, trying to fix it) my impression is that the height of the underlying div is affecting this.
2. when the user clicks on the black vertical toggle on the right hand side the top div goes off the screen entirely
gm Ryan. not really & no need to flag. am going more for an “easter egg” effect. i want the user to find that they can see additional image or info that is hiding behind a top div.
thx
D
I can’t really work out the exact effect you are going for from that demo but it seems to me you won’t accomplish it with jqueryui “slide” function because although you can control how much the element slides (an integer less than its own width and height) the element will ultimately disappear (i.e. it will disappear when it has animated by xxpx within itself). It will not remain visible at the final distance.
You would be better off just using jquerys animation to move the element or for a smaller more compact and smoother animation use velocity.js.
If only modern browsers support is required then you could probably do that with css3 animation and a simple class change to trigger the animation.
However, I may b wide of the mark because I couldn’t really work out what you were trying to do from the demo and how you envisaged it working:)
no, that is a good point. thx. it was my impression that one should be able to limit the slide. but one of my co-worker also mentioned that eventually it goes for a full disappearance. so will try something else.
however…can you advise as to how to fix the overlap? I tried various solutions. i got one w/the percentage but when i re size the browser the divs overlap again.
thx
d
Hi,
The problem I have is that I still don’t know what effect you are going for 
It seems you have two absolute rows of text and then you click the right edged and the text slides off the screen.
Why are the elements absolutely placed?
What is the point of sliding then to the side? Is there an image or something underneath?
Or were both divs supposed to be directly on top of each other so that you can see the one underneath when the top one slides out of the way?
If you can clarify the above (or draw me a picture) I might be able to make some useful suggestions
Hey there!
so basically playing w/the idea of layering content.
$( "#art1Toggle" ).click(function() {
$( "#articles1" ).toggle( "slide");
$( "#art1Toggle" ).toggleClass("toggleArrowRight");
});
$( "#art2Toggle" ).click(function() {
$( "#articles2" ).toggle( "slide");
$( "#art2Toggle" ).toggleClass("toggleArrowRight");
});
$( "#art3Toggle" ).click(function() {
$( "#articles3" ).toggle( "slide");
$( "#art3Toggle" ).toggleClass("toggleArrowRight");
});
but still have some issues getting right the margins between the artWrap divs. And some issues w/the responsiveness but i’ll deal w/that as i flesh out the design.
you know…never mind
thing i got it w/an overflow:hidden!
thx
D
Glad you managed to sort it out and sorry I couldn’t grasp what you were after earlier 
my bad! next time i’ll try to be clearer.
thank you all and have an awesome sunny warm weekend.
D
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.