I'm a designer and Framer noob trying to accomplish the following:
Similar to Instagram, I'd like to pin the header bars of modules in a scroll container and have the next module header bar push up the already pinned header bar as you scroll down.
I can easily accomplish this in Pixate where the pinned bars move at the same rate as the scroll content and stick to the top at a specified coordinate and then continue scrolling at another, but the coordinates have to be specified for each bar - the end of one is the beginning of the next.
The bars are all the same height - is there a cleaner way to do this in Framer?
Thanks in advance!
This module seems to do what you want:
https://github.com/72/StickyHeaders-for-Framer
Check out one of the demos here:
http://share.framerjs.com/4jr3dyd44bpm/
Related
How do I get an up/down arrow adjustmnet like in this image instead of the +/- adjustments. I didn't see anything the the spinbutton documentation addressing this.
You image is old school GTK (probably from GTK2). If you look at the widgets gallery from GTK3 and GTK4, you will see that the spin button has changed looks.
Looking at the different options in Glade, I found that GtkSpinButton inherits from GtkOrientable. You can set orientation to be either horizontal or vertical. I tried both options in Glade and neither gives the result you are looking for.
Vertical
Horizontal
In both cases, you have those -/+ you want to get rid of.
So to answer your question, sadly : no.
I don't know how to properly explain this.
I have a svg element which is a big rectangle. If i scroll down, then click on my element, the click isn't registered where my mouse is, but where my mouse would be if i didn't scroll down.
So, if i scroll down by 100px and click on my rectangle, the click will be registered 100px above where i actually clicked.
It's behaving as if i hadn't scrolled down.
Edit: I'm using event.clientX and event.clientY to get the mouse position.
I'm new to svg and i don't know the right keywords to describe my problem.
I'm using svg.js, though i don't think it's relevant to the problem.
I assume this is a well known thing. Can someone point me in the right direction? What kind of keyword am i looking for here?
The problem seems simple enough, i just need to know what to search for.
Thank you.
The problem was the utilization of (event.clientX, event.clientY) to get the mouse position.
In the presence of a vertical and/or horizontal scroll, using these properties caused a mismatch between where the mouse appeared within the page and the mouse position provided by (event.clientX, event.clientY).
I was using the mousedown event, with the mousemove event to create a selection rectangle, similar to what you can find in video games. When horizontal or vertical scrolling had been applied, my selection rectangle didn't appear where my mouse was.
This was solved by using event.pageX and event.pageY (instead of clientX and clientY).
Thank you to #ccprog for pointing me in the right direction.
I don't want to hide time, but want to use full screen
In the storyboard on the interface controller settings I set the checkbox "Full Screen" and "Fixed to screen edges" to ON.
In the storyboard I can see the full screen mode is working and the WKInterfaceGroup is scaled to the entire display.
But unfortunately on the watch device/simulator it does not work.
The group has alignment center/center OR center/top and width and height are set to "Relative to Container"
How can I really use the full screen mode?.
I just have to add a label equal to Time in top black space. I want to show some text here. I have seen this in some other apps, They are using this space. Even in Apple design guide lines docs, they use this space. I am adding these reference screenshots also.
In above pictures, you can see they used this top space for titles. I also want to add a label to show some text equal to time.
Any help would be greatly appreciated.
This is a really weird bug. After digging around I've found a way to fill the whole screen. It's not pretty but I'm consistently getting full screen if i'm adding a sprite kit scene into a "main group". Again; it's not an elegant fix but it works and isn't really that resource intensive. Hope this works for you too!
How can I put an icon in the top left label and make fullscreen? Apple allocates some space on top for the digital clock and back label. I would like to customize it, but I can't find anything in the SDK to enable this.
The top strip of the Watch screen is reserved for displaying the page title, or occasionally links such as "Cancel" by default for modal views, and the clock. It is not possible to hide this.
It is possible to set an empty title for a page. Some settings will alsoplace a background image behind this text (if you set the mode to 'Aspect Fill', at least in the current Xcode 6.2 beta 3). However, the portion of the image at the top of the screen is simply occluded by a black strip, so this does not achieve what you want.
Additionally, Apple have specifically recommended against displaying logos on the Apple Watch screen, with the rationale that the screen is too small to display for the user anything but actual content.
To set the Global tint:
Select the Interface Controller itself in Interface Builder by clicking on the Yellow circle at the top of the view of the screen.
Press Cmd-Opt-1 to display the File Inspector section of the Utilites on the right hand side.
Set the 'Global Tint' option in the section 'Interface Builder Document', as per the screenshot.
Not possible in the first cut but I think it will come later.
It's not actually a back label. The text in the top left of the Watch screen is the title of the current WKInterfaceController. You can change it by using -[WKInterfaceTitle setTitle:], but you are limited to content that is expressible in an NSString (so no UIImages).
It is possible to customise the status bar in watchOS 4.
Select your interface controller in the storyboard
Open the attributes inspector
Check the Full Screen checkbox
After doing this you can add your custom image to the left of the statusbar.
I know how to hide the camera controls (.showsCameraControls = NO) but if I do this I will lose the button to switch from rear to front facing camera which I need, is there a way to keep that but lose the controls at the bottom?
I tried keeping all of the controls and overlaying on top of the bottom bar but the bottom bar is always on top of the cameraOverlayView whatever I try. I think it used to work but doesn't in 5.0.
I also realise you can add your own button to switch between the 2 cameras (.cameraDevice) but I want to keep it looking as much like the proper interface as possible.
Any pointers are really appreciated, The whole point of this is that I need to call .takePicture myself but want the interface to look exactly like it normally does with all of the default buttons.