I'm currently working on a gallery to my photos. Besides some bugs, I'm finished with the gallery but I want to add a new and fresh theme to the front page. I'm very in love with how Google+ shows the photos and I'm asking you now, how can I add this effect for my list of photos in my own gallery?
Thanks in advance.
It appears they are using divs for rows and sub-divs for columns. You could, dynamically or statically, determine which of these formats you will have for the row:
//1
[ ][ ]
[ ][ ]
[ ]====
[ ][ ]
//2
[ ][ ]
[ ][ ]
From there style the rows and columns as { float: left } and make images { width: 100% }. Here is a tutorial on infinite scrolling image galleries: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/ and you could just fade in images as you display them.
Related
I'm implementing my custom marker pin in MapView component. Are there a way to hide or remove third party markers, like hotels, restaurants, sales stores, etc...?
I have searched in component docs but found nothing.
As far as I know, there is one way to turn off the business texts and markers. It is when we are applying a style to <MapView>'s customMapStyle property.
From this site, https://mapstyle.withgoogle.com/
, skip to styling selecting "use the Legacy JSON styling wizard"
Then select "more options" for a more specific styling.
Select Points of Interest, then select Business, then select Text fill and Text Outline and make their visibility as hidden.
We'll click "Finish" button, then "copy JSON" button. Now we have JSON formatted data copied.
You may hold this info in a variable named, say mapStyle
mapStyle=
[
{
"featureType": "poi.business",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
}
]
The last thing to do is to use mapStyle and making it equal to customMapStyle property like this..
<MapView
customMapStyle={mapStyle}
{/*other properties*/}
/>
I have mutiple (more than 2) categories in the sidebars.json，it only render the first and the last one in the page，I can't find how to fix online. thanks.
Here is a producible repo: https://github.com/nianiaJR/doc-demo
Here is my sidebars.json: https://github.com/nianiaJR/doc-demo/blob/master/website/sidebars.json
I expect all navs config in the sidebars.json show in the page. But only the first and the last one show.
{
"type": "subcategory",
"label": "Quick Start",
"ids": [
"doc1",
"doc2",
"doc3"
]
},
{
"type": "subcategory",
"label": "design-and-architecture",
"ids": [
"doc1",
"doc2",
"doc3"
]
}
You have duplicates ids in a different category. You should not do that. The docs is confused whether 'doc1' belong to quick start or design and architecture
https://github.com/nianiaJR/doc-demo/blob/6323eb2207b63cb53918e677681593a9cda9a08d/website/sidebars.json#L13-L29
In my case I had a file named docker-compose.md with an id=docker-compose. My .dockerignore file contained an entry **/docker-compose.
In this case changing the entry to */docker-compose.yml fixed the issue.
Please consider this simple rebol2 code to illustrate my problem:
REBOL []
a: make face [
offset: 0x0
color: yellow
size: 20x20
]
b: make face [
offset: 0x0
color: red
size: 60x60
pane: reduce [
make a [offset: 0x0]
make a [offset: 10x10]
make a [offset: 10x20]
]
]
view layout [
box 200x200 white with [
pane: reduce [
make b [offset: 0x30] ;; one 'instance' of b
]
]
]
The main point here is for a layout (or face) to be able to display a bunch of faces inside its pane block in such a manner that multiple creations of the same face (b in this case) should be possible. The shown code works well, and the only instance (let me call it this way) of b is displayed as it should be.
But now suppose I change the code so I have, say, 2 instances of b:
view layout [
box 200x200 white with [
pane: reduce [
make b [offset: 0x30]
make b [offset: 0x10]
]
]
]
At this point I get the error
** Script Error: Face object reused (in more than one pane): none
** Where: view
** Near: show scr-face
if new [do-events]
From the message I presume here that face b is somehow getting reused and messing exactly what I'm trying to achieve. I've done lots of research on this and at some point I found that it is possible to get around it by cloning (using make) the face to be passed to pane; that's what I thought I was doing, but with no success at all.
Given this scenario, my question is: how can I go about to solve this? is rebol2 ok to provide this "face-instantiation" or it is best to try something else outside rebol2 (perhaps rebol3)?
Any help will be greatly appreciated.
Rebol2 is definitely ok to do this.
When you MAKE b second time you are using the same instance of a. That is the problem.
You can write a function that creates necessary faces and append them to a block and return.
Don't forget to create 'a (first face) every time.
Additionally, check for the iterated faces in the documentation.
Here I added an example:
REBOL []
make-pane: func [ofst [pair! block!] /local a b faces] [
a: make face [
offset: 0x0
color: yellow
size: 20x20
]
faces: copy []
either block? ofst [
foreach o ofst [
append faces make a [offset: o]
]
] [
append faces make a [offset: ofst]
]
b: make face [
offset: 0x0
color: red
size: 60x60
pane: faces
]
]
view layout [
box 200x200 white with [
pane: make-pane [5x30 0x10 20x5]
]
]
You can change the function to get more parameters to change color and other facets as well.
As is already pointed out the problem is that a is reused, not b!
the layout function uses a field called init for handling things like this. As I understand it init is first bound to the face and then called with do after the face itself is instantiated (at least partially).
In this case I would be using the style command in layout (still partially using face object a )
view layout [
style
bb box 60x60
with [
append init [
pane reduce [
make a [offset: 0x0]
make a [offset: 10x10]
make a [offset: 10x20]
]
]
]
panel 200x200 white [
at 30x0 bb
at 0x0 bb
]
]
The other alternative, a bit more similar to your would be:
b: make face [
offset: 0x0
color: red
size: 60x60
init: [
pane: reduce [
make a [offset: 0x0]
make a [offset: 10x10]
make a [offset: 10x20]
]
]
]
view layout [
box 200x200
with [
append init [
pane: reduce [
make b [ offset: 0x0 do init ]
make b [ offset: 0x60 do init ]
]
]
]
]
Note that init is manually called within the make clause in this case. I'm not all sure why it is needed.
Finally the everything could elegantly be solved with style
view layout [
style a box yellow 20x20
style b panel red 60x60 [
at 0x0 a ; we can in this style use the just defined a style
at 10x10 a
at 10x20 a
]
at 0x0 b
at 0x60 b
]
I've said on a comment that I would get back to share my findings and I think I got something interesting. As well pointed out by #endo64, iterated faces are tricky and perhaps not best suited to what I intended to do when I first asked the question - to achieve a simple/straigthforward way to instantiate objects thru panels.
I came up with the code bellow, which implements a kind of instantiator. It was inspired in part by the face-maker approach of #endo64 along with some tinkering with iterated faces. This instantiator has a core limitation, which is not accepting multiple types of objects being passed to the constructor to be created at same pane.
Anyway, I found it was an interesting exercise and I would like to post it here in case it could be useful to someone.
I use the same code from the question, now solving/circumventing the limitation of creating multiple b objects inside the main layout pane. a and b now hold an instantiator object, which receives an object to create inside its pane and a block of positions (pair offsets) where objects should be placed.
a: make face [
offset: 0x0
color: yellow
size: 30x20
]
b: make face [
offset: 0x0
color: red
size: 100x100
inst_b: _instantiator/new reduce a [10x10 10x70 80x80 30x30] ; instantiator here
pane: get in inst_b 'pane_function
]
The instantiator code is:
_instantiator: make object! [
_obj: copy []
_offsets: copy []
new: func [
obj [object!] "object to create inside pane"
offs [block!] "instances offsets"
][
make self [
_obj: obj
_offsets: offs
]
]
pane_function: func [face index] [
if integer? index [
if index <= length? _offsets [
_obj/offset: to-pair reduce [_offsets/:index/x _offsets/:index/y]
_obj
]
]
]
]
Code for main layout is:
_inst: _instantiator/new reduce b [0x0 50x50 130x130] ;;3 b objects are created in the positions indicated in the pairs block
_lo: layout [
mybox: box 500x500 white with [
offset: 0x0
pane: get in _inst 'pane_function
]
]
view center-face _lo
I can't get this to work at all:
renderContentOn: html
html form: [
html textInput
on: #newEmp of: self.
html submitButton
callback: [ self addEmployee: newEmp ];
text: 'Add Employee'.
self employeeNames do: [ :eachEmp | html text: Character cr asString. html text: eachEmp.]
]
I just keep getting my output on one line. Am I missing something? I've tried several variations of cr but none have worked thus far.
Don't rely on carriage returns to display your data in the browser. The employee names obviously belong either in a list or a table (you are providing a list of names):
html unorderedList: [
self employeeNames do: [ :eachEmp |
html listItem: [
html text: eachEmp ] ] ]
You most certainly want html break instead of html text: Character cr or any variation thereof. HTML intentionally treats newlines in text as simple spaces.
Other than that, the idea of max-leske to use item lists is much to be preferred.
How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.
Should I implement this:
Straight into index.html
Somehow add it in the view which holds the menu as well
Some other magical way
The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
});
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
Ext.create('Ext.Panel', {
html: 'Floating Panel',
left: 0,
padding: 10
}).showBy(button);
For your top view, I would use something along the lines of a Ext.TabPanel though.
http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel