I am currently working with Foundation 5 Off-canvas menus Foundation off canvas menu. Currently the off canvas menu opens from left to right.
My question is how is it possible to change the position of how the off canvas menu loads, default is left to right fadeIn convert to eg : top to bottom fadeIn. How can this be achieved? I have used animate.css and unsuccessful in resulting the same. I have searched thourghly for solution but not have found any.
Im working on Fiddle
You can overwrite the open event to custom the animation
$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function () {
var off_canvas_wrap = $(this);
});
because Foundation 5 supports only right or left translation
Related
There is a cool effect where the bottom of the page seems to fade out located at the following link
https://css-tricks.com/examples/FadeOutBottom/
Can someone please show me how to incorporate the tool into my website.
I'm serious a novice to css and not sure where to begin with this - which is why I'm looking for a ready made tool.
Your help will be greatly appreciated
Cheers
Carlton
It's a trick using a PNG file called 'bottom-fade.png' which is a gradient from full transparent at the top to opaque white at the end. Now that the background is white, it gives a feeling of the text fading out. The image is put in a layer which is set always forward (check z-index) and with fixed position (meaning it will always be at the bottom of the page).
After much delibertation I managed to achieve this using Animate.css library for animating the fade
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).removeClass('hidden');
$(this).addClass('animated fadeInUp');
} else {
$(this).addClass('hidden');
}
});
});
});
I hope this help others with a similar problem
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
I have an Orbit slider inside a Reveal modal.
I want to reset the slider to go to the first slide when closing the modal.
How can I do this?
$(document).on('opened', '[data-reveal]', function () {
// Callback triggered when reveal modal is closed
$(this).find("[data-orbit-slide=0]").click(); // Click the link to first slide in orbit modal
});
When slider is closed (and invisible) interactions don't seem to work reliably. Hence we operate once the modal is visible.
Foundation press has changed some verbiage since the previous answer. You can also use:
$(document).find("[data-slide=0]").click();
I have a SVG chart using d3js. We can add some points to this chart and move it. When I have a big page and so when we need to scroll it, it works with the mouse. But I have an input screen with multi-touch and in more I develop my app for mobile.
The input with the chart and the scroll aren't working together with an input touch. For example if I want to move my point it's the page which scroll and not my point wich move. It's not exactly the same bugs on firefox, IE and my Windows RT app.
You can see a little example here to test if you have an input touch, I guess tablet and smartphone will have the same behaviour than my PC with a touch screen.
I have the following css to simulate a bigger app:
body {
overflow:visible;
width: 2000px;
height: 2000px;
}
There is a way to do this?
I hope you understood my problem :)
I tested this on my phone and tried to research how to force a browser to stop scrolling with little success. The good news is your app allows a mobile user to place a new point really nicely.
To get the project done quick, you might need to create a set of controls that grabs an id of each existing point and allow the mobile user to move the desired point using buttons. The UI for such a set of controls could be minimal and intuitive if done well. You could set the UI to display:none and only show when the screen width/height is iPad size or less.
I finnaly found a solution with the pointer-events property in css
var C1 = document.getElementById("C1"),
evtIn = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
evtOut = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";
C1.addEventListener(evtIn, function () {
d3.select("#C1").style("pointer-events", "all");
d3.select("body").style("overflow", "hidden");
}, false);
C1.addEventListener(evtOut, function () {
d3.select("#C1").style("pointer-events", "none");
d3.select("body").style("overflow", "auto");
}, false);
On touch start I just allow pointer events in my chart et disable overflow and in the other way for the touch end.
I am writing a simple jQuery page with two images shown. Clicking on one of them triggers a CSS3 transformation, which should end zooming on the image.
The page has to be viewed on iPad, thus I must use CSS3 3D Transformation in order to use the hardware acceleration and keep the transition smooth.
I wrote a simple demo script here: http://jsfiddle.net/andrearota/KAdmV/4/
E.g. here is how I zoom in, using scale factor. Please note that I use the z property trying to get the div over the closed one:
Carousel.prototype.openLeft = function (callback) {
var that = this;
if (this.leftStatus != 'open') {
this.left.transition({
z: '+=100',
scale: 2
}, function () {
that.leftStatus = 'open';
if (callback) callback();
});
} else {
if (callback) callback();
}
};
As you can see, if you clic on the left image, the image is zoomed in and goes over the right one. When you click on the right one, vice versa. But then, if you click again on the left one, you can see an issue on image stacking as the left zoomed image goes under the minimized right one.
Any hint?
It looks like you can remove the transform on the second image and it will go back behind the first one. So in other words, on image click I would probably first remove all occurrences of the transform property before applying to the clicked image.
Or you could also set both images to position:relative and then on click set the z-index to something like 5 and set all other images to something below it such as 3. But again, you'll need to clear these inline styles so that when another image is clicked there are remnants from before that give you un-clear results.