how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.
Related
I have a form with green edit, when the user clicks the search button, the components in red are displayed on the screen. But I want that when the user clicks out of the component area, they disappear. I have no idea how to do this. I saw some people using a layout to cover the whole screen, but wanted to know if there was another way.
Or use the
OnFormclick event with object.visible:=false;
I use a home button on most of my slides with a link back to the agenda for quick jumps during my presentation. That way I avoid flipping through the individual slides and get straight back to the overview.
However, I don't want the home button in my lower right corner to show on each page as it spoils the clean look. I tried to use the mouseover event in combination with a macro but can't get it to run. I thought about making the home button completely transparent and on mouseover I would set the transparency to zero so the button shows up. When I click on it, it would follow the link.
Any help to get me there is highly appreciated.
You do know that you can simply press 1 then Enter to return to the first slide in the show, right?
But to follow up on your "I thought about .." idea, why not add a shape on the slide master in a place that won't get covered up by content in any of the slides, then assign it a Go To Slide 1 action setting. After testing to make sure it does what you want, give it any color you like then make it 99% transparent.
As long as you don't forget where to click, you're good to go.
The bug is described in detail here https://bugs.webkit.org/show_bug.cgi?id=134596
Relevant part is this:
Without Scrolling you should be able to click any of the radio buttons
Now scroll down the page
Trying to click any of the radio buttons on the left results in an
offset click. One of the radio buttons below your click will receive
the event.
Expected: The radio button I clicked on gets focus
Actual: The click event is offset the amount the iframe was scrolled.
Main difference is im not using an iframe, just a div, but the same problem.
If I remove either overflow:auto (but it wont let me scroll then) or -webkit-overflow-scrolling property the correct clicks happen. It looks like it was fixed in a nightly, but this has to work now and for backwards compatibility. Is there a hack to get this to work? My best idea so far is to just not have that -webkit-overflow-scrolling prop for iOS until it works, but that kinda sucks because momentum scrolling is what makes it feel much more like an app.
I was trying to simulate "tap to show/hide the fixed toolbar" when I found out that it's already the default function hahaha!
By default works charmly: it starts "show" and when it taps then "hide" and when taps again "shows" etc. PERFECT!
The problem is that I want it to start hidden and when the user taps shows and so on...
I used
$(".divBotoneraSimple").hide();
but then it doesn't show when tapped! I also tried:
$.mobile.fixedToolbars.hide(true);
$("[data-position='fixed']").fixedtoolbar('hide');
but both of them "stop my App" when triggered!
In order words I need to trigger those hides from javascript and still respond to tapping!
Use .toolbar() method with show, hide or toggle.
$(".ui-header, .ui-footer").toolbar("toggle");
Note that if you are at the top of the page, the header won't be hidden, only the footer, and vice versa.
I have a page that's like a discussion where you can make posts and reply to those posts. When there are more than 2 replies, I show the two most recent ones and hide the rest by default. There's a button that will let you expand/collapse the extra replies that uses jQuery's slideToggle function. It's operating on an unordered list of tables, where each table contains the comment along with the user's name and some other info.
Here's the problem: While the tables are actually sliding up or down, the first table in the list looks like its width has been set to auto, so it shrinks. Once it's done sliding, the formatting looks fine; it's just during the actual sliding that this happens. I'm assuming it's being set to 'display:block' or something during the slide but I don't know that for sure.
Is there a way to control what the display type is during the animation?
//this is what happens when you click the 'View all X replies' or 'Hide replies' button
$(".expandOverflow").click(function()
{
$(".overflowlist" + overflowListTarget).slideToggle(16000/*, function(){$(this).css('display', 'inline');}*/);
});