六和才彩特码121期:Manual of the b6+ slide framework

Author: Bert Bos <[email protected]>

Created: 8 March 2019
Updated: $Date: 2019/03/13 14:26:01 $ by $Author: bbos $

This is a note, not a slide.

What is b6+? (1/2)

b6+.js is script (JavaScript) to show slides in a browser that does not have a paged mode. It is the successor to b6 and backwards compatible with it, and also provides some compatibility with Shower. With some restrictions, style sheets written for Shower can be used with b6+.

Slides can be elements with class=slide, but can also just start with an <h1>, as in the old Slidemaker.

B6+ handles the keyboard, mouse and gesture navigation.

What is B6+? (2/2)

Below is the manual for the functionality provided by b6+.js. The script will work without any style sheet (unlike Shower), but a style sheet may provide additional features. See the The W3C slide style (b6+) for the functions provided by the style sheet used by this manual.

Document structure

The b6+.js script works with document in which slides are marked up in one of two ways:

  1. each slide starts with an <h1>, or
  2. each slide is enclosed in an element with class=slide

The b6+.js script

The script offers the following functions:

Screen and projection styles

Different styles can be applied in slide mode and in index mode. The media attribute determines what each style sheet is for.

Compatibility with Shower

B6+.js implements a subset of 白小姐特码信封料 functionality:

Fixed aspect ratio (1/2)

Slides can either have a fixed aspect ratio or adapt to the screen or projector. If the <body> element has a fixed width and height (in em, px, or any other unit), b6+ will linearly scale it up or down to fit the projector.

Advantage is that the layout is independent of the projector: if the content of a slide fits during testing, it fits in the projection as well. Another advantage is that absolute positioning things on a slide is easier, because you know the exact size of the slide in the chosen units.

Disadvantage is that the chosen aspect ratio may not match the projector and there will be some unused space either on the sides or above and below the slide.

Fixed aspect ratio (2/2)

E.g., if you set the <body> to 40em by 30em (a 4:3 aspect ratio), but the projector is widescreen (16:9), there will be black bands on the left and right.

Note that it is the size of the body that counts. Setting a width and height on elements with a class of ‘slide’ does not trigger the scaling.

Progress bar

Any element with a class=progress will get a style attribute ‘width’ with a value between 0 and 100% corresponding to the advancement of the slide show: When there are m slides and slide n is displayed, the value is n/m * 100%.

There may be any number of such elements.

That is all the script does. It is up to the style sheet to set other properties (height, location, color…) The b6+.css style sheet makes the progress element into a thin red line along the top of the slide.

Current slide number

If there are elements with class=slidenum, their content will be set to the number of the slide that is currently displayed, as a decimal number.

There may be any number of such elements. All of them will have the same content.

It is up to the style sheet to style and position such elements. The b6+.css style does nothing with them. (It uses CSS counters to number slides instead.)

Total number of slides

Any elements with class=numslides will have their content replaced by the total number of slides, as a decimal number.

E.g., this slide show has ???? slides.

There may any number of such elements.

It is up to the style sheet to style and postion such elements. The b6+.css style does nothing with such elements.

Incremental display with class=incremental

If an element has class=incremental or class=overlay, its children will be displayed one at a time. The keys (space, arrow keys), clicks or gestures that normally advance to the next slide instead cause the next child to be displayed, until all of them are visible, after which the navigation continues to the next slide. Example:

  • 看到领克02实车以后 我知道钱包捂不住了 2019-10-28
  • [大笑]那依然是按劳(劳动价值或劳动能力)分配也! 2019-10-23
  • 确认过眼神 济南这些项目强强联合置业不容错过 ——凤凰网房产济南 2019-10-23
  • 萨拉赫缺阵 埃及队遭“绝杀” 2019-10-21
  • 我发现从五+年代农业用化肥农药,在六+年代几百年长的柿树几乎死光。没人研究! 2019-10-21
  • 【理上网来·喜迎十九大】全面从严治党的核心是加强党的领导 2019-10-20
  • LADY咔咔(37)我的乌克兰媳妇儿名爵ZS 2019-10-20
  • 赤裸裸的嗜血,比英国圈地运动疯狂多了[福尔摩斯] 2019-10-18
  • 光明日报:“互联网+农产品”不能一哄而上 2019-10-18
  • 瑞典民众庆祝世界杯胜利时发生枪击 致4人受伤 2019-10-16
  • 中国资本市场开放出大招 跨境证券投资更便利 2019-10-16
  • 中国足球,就是笑博士的“责权利平滑对接”改革的必然结果! 2019-10-13
  • 2017年度合肥市政务微信十强名单公布 2019-10-13
  • 全世界球迷进入“世界杯时间”,足球与美酒一同为世界带来快乐世界杯 中国 2019-10-10
  • 被曝资金链紧张、大规模裁员 小黄车快黄了? 2019-10-10