I am trying to build a Windows 8 Metro style page which has a bunch of unordered lists which hide and show list items every few seconds, each with different animation effects. So I am trying to build a few different types of transition effects that I can use.
If you have a look at my jsfiddle (or see below for code) you can see that I have a few effects working (fade and slide up/down) but my explode and fold effects don't work.
Why is explode and fold not working?
Update: explode and fold are now working, thanks to dsundy for pointing out my stupidity, but still hoping for some help with...
Also, although slide left/right is working, is it possible to make the new item slide in at the same time so there is not a long gap between one LI sliding left and the other sliding in from the right?
With explode and fold is it possible to make the new LI appear underneath the outgoing LI?
Any suggestions for any more interesting transistions?
$(el).hide("explode", { pieces: 4 }, 1000, function () {
$(n).show("explode", { pieces: 4 }, 1000);
});
$(el).hide("fold", { }, 1000, function () {
$(n).show("fold", { }, 1000);
});
Explode and fold aren't working because you don't have click functions for those buttons.
Related
I'm new to the whole VCM programming structure and more specifically to objective-c.
Right now i'm working on an iOS app that is like the game "connect 4." This Xcode project is my practice project that i've been using to play around/learn how to make iOS apps so there are several files and lots of commented out code, so Ill try my best to provide the necessary content from my project.
App State:
Right now I have a 10x10 grid of blue square/buttons. I'm still in the early stages of implementing the functionality of the game. Rather than making each square its own button, I created 10 frames and 10 buttons. Each row is a single button, which is broken up into 10 squares.
I currently have the squares change their color to red and become disabled once clicked. If I click multiple times.. the squares turn red when pressed. Heres a screenshot example run:
What Im wanting to do:
I want to build off of what I have, but not exactly sure how to keep track of which "players turn" it is. For example.. I want the first clicked square to turn red, representing player1's move. I want the second click to turn the button, say green, representing player2's move.. then the next move will be player 1's move.
I know Ill have to make sure the button is/was ENABLED and valid before switching which players turn it is.
How should I go about doing this? This is more of a general question, but I'll provide needed code snippets if necessary. Thanks!
In your .h file add an integer (variable)
int Turn = 1;
In your .m file you can do:
if(Turn == 1)
{
// Player one is playing
Turn = 2;
}
else if(Turn == 2)
{
// Player two is playing
Turn = 1;
}
I allow users to record mouse combintations for my add-on. However I'm curious what happens when a 4th or 5th button is pressed? Will event.button be 3 and 4? I'm hoping it is.
function detect(e) {
console.log('button pressed = ', e.button); //e.button is 0 for left, 1 for right, 2 for middle/wheel button
}
document.addEventListener('click', detect, false);
if e.button is not 3 or 4 is there a way to get it to be?
In theory, you could get this from MouseEvent.buttons. In practice, however... Well, see the Gecko Notes section of the docs for yourself.
I have been looking around but I have not found a problem like this.
Gmaps4rails works great for me!
The trouble is when inserted into a JQuery tab. It loads half of the map. It actually looks like is missing pictures. I can move/resize as usual. But only shows a part of the map.
And the part missing is usually the left/bottom part. But the size of the empty part varies all the time.
At the same time, the hand that shows the mouse cursor when hovering the map turns into arrow when hovering this empty part(but this part is still inside the Google container).
If I place the gmaps container out of the JQuery tabs, it works perfectly. Has anyone seen this before?
view
#tabs-4
#gmap
=gmaps("map_options" => { "detect_location" => true, "auto_zoom" => false, "center_on_user" => true, "zoom" => 17},"markers" => { "data" => #json })
Thanks a lot!
See this link http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F
But resize is called differently in V3
Try calling google.maps.event.trigger(map, 'resize')
EDIT
Every method I found refers to a change in JavaScript.
Another way I found http://snipplr.com/view/57003/
$('#tabs').tabs({
show: function (event, ui) {
google.maps.event.trigger(map, 'resize');
}
});
Although this question is a year old, it describes exactly what I was experiencing but the accepted answer did not work for me. Here is what finally worked...
$('#tabs').tabs({
activate: function (event, ui) {
var center = Gmaps.map.map.getCenter();
google.maps.event.trigger(map, 'resize');
Gmaps.map.map.setCenter(center);
}
});
Maybe Im using newer versions. I needed to use activate: instead of show: and the map was off center once it expanded to fill the container so the need for the centering code. Hope this saves someone some time!
It's a common problem. You need to ensure that the map size is known to the API (currently it thinks it has zero size).
Trigger the resize event when the map is made visible. From the docs:
Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize')
Ok just a slight modification on the things posted above. If you use the selected answer you might get a bug with the map not being focused correctly. What #SteveO7 said works well. I also had to adjust it a little for bootstrap. Here it is in CoffeeScript:
$('a[data-toggle="tab"]').on 'shown', (e) ->
if $(e.target).attr('href') == '#tab2'
center = Gmaps.map.map.getCenter()
google.maps.event.trigger map, "resize"
Gmaps.map.map.setCenter(center)
I am using a parallax effect with javascript but I'm having issues with iPad.
I know the "$(window).scroll" is not triggered on webkit touch devides - only when we release the screen - so i'm using:
window.addEventListener("touchmove", triggerScroll, false);
function triggerScroll(event)
{
var scrollTop = $(window).scrollTop();//event.touches[0].pageY; //window.pageYOffset();
$("#allCanvas .divCanvas").each(function(index, element) {
var speed = $(element).data('speed');
var initialTop = $(element).data('initialtop');
$(element).css('top', initialTop-(scrollTop*speed));
});
}
The problem is that it flickers the .divCancas a few pixels to the top or bottom depending if I'm scrolling to top or down.
I tracked the TOP value passed on $(element).css('top', initialTop-(scrollTop*speed)); and it's every time correct. The correct "TOP" value, eventhough webkit move it for a few milleseconds to the wrong position.
I tried also:
-"margin-top" rather than "top" with no difference.
-Removing all other objects and making the ".each" loop through only one div, so I guess is not a jQuery performance issue.
Has anyone came across this problem?
Many thanks
Diego
Maybe try using some of the -webkit css animation features... these run very smoothly on iOS devices. Here's a great demo of that (webkit only): http://jibjub.com/demo/HTML5/cube.html
I'm using a GRAILS UI (1.2-SNAPSHOT) an it's implementation of the YUI menubar (YUI 2.7.0.1). I am seeing flakey mouseover behavior in IE (Firefox is ok). When I mouse over the menu item with a submenu, it will show. As I try to mouse over the sub-menu, the submenu disappears before I can click. This happends in a pattern I haven't fully figured out. Usually the first time I select a menu it's fine but if I move around the menu back to a menu item, the submenu begins to display this behavior. By clicking and holding the mouse button I can usually get the sub-menu to stick around.
I've palyed with various configurations like keepopen and automenudisplay but they don't seem to change the behavior. I have not seen much posted about this. But I also don't see menu's documented in the UI plugin either. I could really use some feedback if UI menu is not ready for primetime yet or I'm missing something else. I've not worked with much AJAX before.
Below is the code with the added options I played with that did not have a positive impact.
<gui:menubar id='menubar' renderTo='mainmenu' autosubmenudisplay="false" shadow="true" keepopen="true">
<gui:menuitem url="/esmzone">Home</gui:menuitem>
<gui:submenu label='Profile'>
<gui:menuitem url="${createLink(controller:'memberProfile', action:'view')}">View</gui:menuitem>
<gui:menuitem url="${createLink(controller:'memberProfile', action:'profile')}">Edit</gui:menuitem>
<gui:menuitem url="${createLink(controller:'user', action:'account')}">Settings</gui:menuitem>
<gui:menuitem url="#">Subscription</gui:menuitem>
</gui:submenu>
Here is the code generated by the plugin:
<script>
YAHOO.util.Event.onDOMReady(function() {
GRAILSUI.menubar = new YAHOO.widget.MenuBar("menubar_div", {'autosubmenudisplay': false,
'shadow': true,
'keepopen': true});
GRAILSUI.menubar.render('mainmenu');
});
</script>
I made some progress on this by researching the YUI library. There is a documented bug with IE7. Apparently the grails-ui plugin does not address the fix. I'm testing with IE8 but I assume it's still there.
http://developer.yahoo.com/yui/menu/#knownissues
It appears that you should set the zoom property to 1 (zoom:1) for the bd class.
I added the following code to my style sheet
div.yuimenubar .bd {
zoom: 1;
}
and it seems to help. I see no side effect in Firefox but I didn't dynamically check for the version of browser as I would need to hack the code that generates the YUI javascript and put in
if (YAHOO.env.ua.ie === 7) {
YAHOO.util.Dom.addClass(document.body, "ie7");
}
after the render() call. Then instead of the style I added you could do an IE7 (probably >=7) style.
This is what the Yahoo site had to say about it:
The following application of
"zoom:1" sets the "hasLayout"
property to "true" and prevents
first tier submenus of a MenuBar
from hiding when the mouse is moving
from an item in a MenuBar to a
submenu in IE 7.
For more on the "hasLayout" property:
http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx