http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.
Related
I am watching invisionapp website some time ago and i like his website animation, now i want to apply that animation in my html page so, that i am try to find how it's work.
But i am not able to find out how that animation work and which javascripts used by devloper for apply that html page svg animation.(I am asking about invisionapp's website svg animation not invisionapp animation). i am also try by saving web page in local but not work.
if any one know how all that animation work or what js they use then help me to understand that animation.
Here is the link for invisionapp website
You can use your browser's developer tools to dig into the scripts loaded on the page.
Here is what i could gather:
Graphics/animations made in Adobe AfterEffects, exported to JSON with https://aescripts.com/bodymovin/
Greensock Animation Platform (GSAP) with plugins:
Animation
ScrollMagic
EasePack
TimelineLite
TweenLite
CSSPlugin
AttrPlugin
Also jQuery
Then the code controlling all this seems to be in https://www.invisionapp.com/subsystems/landing/assets/js/freehand.min.js
The Developer tools in the web browsers have a 'Performance', you can use it record the events happening the page and try to figure out what script is triggering the event/animation.
It will be still be difficult, because scripts are probably minified and obfuscated.
I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?
Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.
What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.
Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors
I am using the magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) but I don't need to use this one. I have just used it before and it worked well.
My questions is how to actually trigger different lightboxes from inside a SWF?
We have one SWF that has images and animation located at six different sections of the screen. It's sort of a launch page and each section has an image with some animation and when the users clicks on a section another web page will load.
This application will be hosted on a computer with a touch screen and we were using a kiosk app to run the app and it had a small navigation bar built in but now we are using a different operating system that works better with the touch screen hardware (OSX to Windows 8) but does not work with the same kiosk app. I also can't seem to find any kiosk apps that do the same thing for Windows 8.
Instead of using a Kiosk app I would like to just use Chrome in Kiosk/Fullscreen mode and have each section open in a new lightbox window instead of using a navigation bar. However, I can't seem to trigger the lightbox event from within the SWF itself.
Any help greatly appreciated.
In as2 something like this getURL("javascript: lightbox(maybe-attributes);"); or using flash.external.ExternalInterface class. I don't know in as3 if there's another class/method
Christian find perfect match with this jquery/flash.external.ExternalInterface
http://grasshopperpebbles.com/jquery/actionscript-using-lightbox-with-flash/
How would I remove all links to javascript if someone is viewing a site from an iPad.
For Example the web version would have links in the head to js files for various things on the site.
But I would want the iPad version to remove or ignore these links so no js was being linked to.
Any help would be much appreciated, thanks.
You could load them on the client side, checking browser features, after page load.
They could also be written dynamically sever side by checking the user agent.
Detect the browser using this and write your code to make use of the isiPad variable. It would be easier to do than removing code tags from html (at least without jQuery).
I'm trying to do the screenshot gallery of an app from the AppStore but in a web app in html.
I've actually get it but the problem is that it scrolls REALLY slow.
To do the touch/swipe functions I've used the code from here:
http://quirksmode.org/m/tests/scrollayer.html
In the example, the div's are scrolled smoothly but not in my site with my div's...
Does anyone know what can be happening? Does anyone know a proper way to do it?
This is my (under-developement) site:
http://www.actec.cat/iphone/#projectes_pre
I'm testing it in an iPhone 4.
Thanks.
I finally solved using webkit transforms (translate3d) instead of using javascript.
The problem was that javascript was taking care of moving the object.
For example, I was using:
testElement.style.marginLeft="newposition px";
That was painfully slow in iOS devices.
Now I use:
testElement.style.webkitTransform='translate3d("newposition px",0,0);
And it works as smooth as it should.