smallseo.info

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz impress.js is a presentation tool based on the power of css3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js: How to run function on slide #id and class .active (or slide enter)?

How do make a video play on slide enter, and make it stop on slide exit with impress.js? Upon entering a slide, there is a class ".active". In fact, I can just use a unique ID, I just need to know how to tell impress.js to run on slide enter/exit.

I don't know how to code jQuery, but this was my attempt

document.getElementById('video-audio').addEventListener( ($.Event("keydown", { keyCode: 38 })), function () {WhenPlay()});

function WhenPlay() { 
 var classList = document.getElementById('video-audio').className.split(/\s+/);
      for (var i = 0; i < classList.length; i++) {
        if (classList[i] === 'active') {
        //console.log(classList[i]);
                        playVideo();
                     }
                  }
              }

Source: (StackOverflow)

How to remove CSS and JS from a certain content-type in Drupal 7

I've come here after looking for how to selectively add a CSS or JS to a given node based on its view mode and content type. That question is answered pretty straightforward here (http://stackoverflow.com/questions/8295498/how-to-add-css-and-js-files-on-node-pages-independent-of-the-theme).

Now I'd love to clear everything: I'm looking for a way to show my desired CSS and JS but only that, with no other JS and CSS. I'm trying to integrate Impress.js (And I don't like the available solutions) and it seems to be conflicting with Jquery, as both scripts are properly loaded but both latest Firefox and Chromium browsers throw the "old browser" message.

Any ideas on how to unset every single CSS and JS so that the CSS and JS I want to use are the only ones really active?

Thanks!

I've tried the following, to no success:

$mycss = $vars['styles'];

unset($micss[drupal_get_path('module','system') .'/system.base.css']);

...

unset($micss[drupal_get_path('module','toolbar') .'/toolbar.css']);

$vars['styles'] = $mycss;

(I added a lot of different css i want to get rid of, but this explains the idea). It didn't work, though :)

Edit. I'm sorry for the bad markup, I'm looking for a way to clean/mark code.


Source: (StackOverflow)

How does Impress.js's CSS work?

I was reading about Impress.js and I have some questions about the code below (Part of the Inpress's demo).

.impress-enabled .step {
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

My questions:

  1. What is .impress-enabled class here for?

  2. So class .active is applied on the step currently displayed? And thus, its opacity changes to 1 when its displayed and back to .3 when its next one is displayed; as described in .impress-enabled .step above it, right?

Thanks for help


Source: (StackOverflow)

Screen-size dependend values for data-x in impress.js

Say one has the following impress.js code:

<div id="title" class="step" data-x="0" data-y="0" data-scale="5">
Foo
</div>
<div id="toc" class="step" data-x="10000" data-y="0" data-scale="1">
bar
</div>

This renders fine on a 1920x1080 screen, because 5 (data-scale) times 2000 (screen width with some buffer) is 10000.

But:

  • It doesn't render nice on smaller screens (because 1920 is large compared to for instance 800); and
  • For larger screens, the slides can still overlap.

How can one set the slide location, based on the viewport size? Thus something like 500vw? (tried that, but that didn't work).


Source: (StackOverflow)

RevealJs like rotation in ImpressJs

Playing with impress.js

I'm trying to acheive a Reveal.js like slide transition, but using impress.js. The basic effect did come, but i feel, the slides are taking a 'wider' turn making it look a lil slower.

Note : In the fiddle, maximize the output section to see the said problem more clearly

I dont know how else to put it, but if you see http://lab.hakim.se/reveal-js/#/fragments and http://jsfiddle.net/8ukwex3x/1/, you will be able to make out the difference.

<div id = "impress">
    <div class = "step">
        Slide 1
    </div>
    <div class = "step" data-x = "500" data-z="-400" 
    data-rotate-y="90">
        Slide 2
    </div>  
</div>

What should I do to make it work just like Reveal.js' transition.


Source: (StackOverflow)

How can I offset the view position for a step in impress.js

I am using impress.js to build a presentation. I have several steps arranged around a central image (a diagram). I can successfully position the steps around the image using data-x and data-y but when the presentation is 'on' each step, I want to offset the view so that you can see more of the central image.

How do I offset the presentation view for each step?


Source: (StackOverflow)

Impress.js set Slide Width to 100%

I was just trying out impress.js plugin. i tried setting the width of slides to 100% but it seems to be not taking the width in percentage....

Any fix for this will be very helpful.


Source: (StackOverflow)

Smaller slide margins in impress.js?

Impress.js seems to default to slides with a huge left margin (or padding -- I can't quite get Firefox's Inspector to tell me clearly). I have a slide with a pretty wide <pre> block that would fit if it was actually left aligned, but won't fit on a default slide.

I've played with the CSS and I can't seem to figure out how to get one slide (or some slides) to take up the full available screen space. FWIW, this is what I'm trying to fit (and yes: if you're a Nationals fan you'll notice something is fishy in the content. I have reasons for that.). This is my slide:

    <div class="step slide" data-x="2000" data-y="850"><pre>
NAME: Sean Burnett POS: RP AGE: 30 WT: 200 BORN: Dunedin, FL SALARY: 2350000
NAME: Tyler Clippard POS: RP AGE: 27 WT: 200 BORN: Lexington, KY SALARY: 1650000
NAME: Ross Detwiler-Smith POS: SP AGE: 26 WT: 174 BORN: St. Louis, MO SALARY: 485000
NAME: Christian Garcia POS: RP AGE: 27 WT: 215 BORN: Miami, FL SALARY: N/A
NAME: Gio Gonzalez POS: SP AGE: 27 WT: 205 BORN: Hialeah, FL SALARY: 3335000
NAME: Mike Gonzalez POS: RP AGE: 34 WT: 215 BORN: Robstown, TX SALARY: N/A
NAME: Ryan P. Mattheus POS: RP AGE: 28 WT: 215 BORN: Sacramento, CA SALARY: 481000
NAME: Craig Stammen POS: RP AGE: 28 WT: 200 BORN: Coldwater, OH SALARY: 485000
NAME: Drew Storen POS: RP AGE: 25 WT: 180 BORN: Indianapolis, IN SALARY: 498750
NAME: Jordan Q. Zimmermann POS: SP AGE: 26 WT: 218 BORN: Auburndale, WI SALARY: 2300000</pre>
    </div>

And I end up with this: enter image description here

The text would fit fine if I could use the full screen.

Can anyone suggest some CSS that would let me force that slide to use the full available screen space in impress.js? I tried playing with float: left; and margin widths, but the CSS here is out of my league, and I haven't seen a single impress demo that doesn't hang onto that huge margin.

I've looked at a ton of demos and example slide shows and they all seem to live with giving over the left 20% of the screen to open space.


Source: (StackOverflow)

Simple impress.js does not work

Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.

<html lang="en">
    <head>
        <title>Impress Demo</title>
    </head>
    <body>
        <div id="impress">
            <div id="start">
                    <p style='width:1000px;font-size:80px;
                text-align:center'>Creating Stunning Visualizations</p>
                <p>Impress.js </p>
                </div>

            <div id="slide2" data-x="-1200" data-y="0">
                    <p style='width:1000px;font-size:80px;'>
                First Slide Moves From Left To Right</p>
                <p>Impress.js </p>
                </div>
        </div>
        <script type="text/javascript">impress().init();</script>
        <script type="text/javascript" src="js/impress.js"></script>
    </body>
</html>

And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16. enter image description here


Source: (StackOverflow)

Can I render a webkit page to HD video?

First I was wondering if it would be possible to make a good HD video from a prezi slideshow or something like impress.js.

I've seen people trying to make screencasts from their browser page, but the quality is often sub optimal. (motion often not fluent)

So, is it possible to render a - speaking more generally - html page with animations to a video? (Perhaps using the webkit engine?)

  • without interaction, just playing the normal jquery animations (perhaps slowing down the webkit engine to be able to render the pages to some video file)
  • with interaction recording all animations on the page

Update: Using Jan Dvorak's tip I tried this:

<a rel='nofollow' href="javascript:(function(){
   var factor = 10; 
   function slower(x){
      return function(){
        return x.apply(this,arguments)/factor;
      }
    }
function longer(x){
      return function(f, time){
        time = time * factor;
        return x.apply(this,arguments);
    }
  }
  Date.prototype.getTime = slower(Date.prototype.getTime);
  Date.now = slower(Date.now);
  setTimeout = longer(setTimeout);
  setInterval = longer(setInterval);
  alert('Warning, jQuery slowed down'); 
 })();">Test bookmarklet!</a>

But this not seem to have any effect on a this page for example: http://bartaz.github.com/impress.js/#/bored


Source: (StackOverflow)

Impress.js hide a slide on a condition

I'm building a presentation using impress.js which will generate a slide only upon a certain condition being true using JQUERY.

    <div id="condition_slide" style="display:none;" class="step" data-x="12000" data-y="5000" data-z="2000" data-rotate="375" data-scale="1"><p>TEST</p></div>

By setting the display attribute to none, I thought I could have the slide not be part of the original deck until I run my Jquery function for it to appear.

function generateSlide($ID,$isThere)
 {
   if($isThere)
   {
     $('#condition_slide').css("display","block");
   }
 }   

However, the presentation still transitions to a blank slide despite having the initial div styling of display:none.

I have also tried not including the div in the html page and approaching the problem as follows

    function generateSlide($ID,$isThere)
 {
   if($isThere)
   {
     $div = '<div id="condition_slide"  class="step" data-x="12000" data-y="5000" data-z="2000" data-rotate="375" data-scale="1"><p>TEST</p></div>';
     $('#impress').children().first().append($div);

   }
 }

This allows the slide to appear corresponding to the condition, but it is embedded in the background of each of my slides and does not seem to be recognized as its own individual slide as part of the presentation.

Any help or advice would be greatly appreciated!


Source: (StackOverflow)

Create an animated bullet point list using Impress.js

I'm using impress.js for a presentation I have to give tomorrow and all I'm wondering is how (or if it's possible) to have my list items in my unordered list animate in one by one on click just like it would work in powerpoint/prezi.

Here's my template

<h2>Presentation</h2>
<ul>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
</ul>

and here's my CSS I have so far which animates all the li's in together, but not one at a time on click.

.notes {
    display:none;
}

.step h2 {
    font-size: 78px;
    font-weight: bold;
}

.step ul {
  list-style-type: square;
  font-size: 1.4em;
  text-align: left;
  line-height: 1.5em;
  list-style-position: inside;
  transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -o-transform: translateX(-300px);
  -webkit-transform: translateX(-300px);
  transition: all 1s ease-in 0s ;
  -moz-transition: all 1s ease-in 0s ;
  -ms-transition: all 1s ease-in 0s ;
  -o-transition: all 1s ease-in 0s ;
  -webkit-transition: all 1s ease-in 0s ;
}

.step.present ul {
  transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

any ideas?


Source: (StackOverflow)

Inject javascript code into html with Express

I am writing a web application using Express framework to generate Impress.js presentations and apply a visual editor on them. I have set up the app.js for only getting the .html file but I want to inject a javascript code from a separate file before the body closing tag of the .html file.

For example, I will have a route handler /edit and then the script will be triggered after it have been injected into the html code.

var express = require('express');

var app = express();


app.configure(function(){
    app.use(express.static(__dirname + '/public'));
});

app.get('/:file', function(req, res) {
  res.sendfile(__dirname + '/public' + file);
});

app.listen(3000);
console.log('Listening on port 3000');

Any ideas on how to achieve this would be more than welcome!


Source: (StackOverflow)

Why impress.js does not rotate

I am messing a around with impress.js a little. I wanted 4 slides and wanted to make it to look like there is a square in the middle.

My code looks like this:

<!doctype html>
<html>
    <head>
        <title>my first presentation using impress.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel='nofollow' href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
        <link rel='nofollow' href="css/impress-demo.css" rel="stylesheet" />
    </head>
    <body>

        <div id="impress">
            <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
                <p>This is my first slide.</p>
            </div>
            <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
                <p>This is my second slide.</p>
            </div>
            <div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
                <p>This is my third slide.</p>
            </div>
            <div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
                <p>This is my fourth slide.</p>
            </div>
        </div>
        <script type="text/javascript" src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>

It has to look like this in the end. enter image description here

I do not know why it is not working. Help is appreciated.


Source: (StackOverflow)

Bootstrap slides in impress.js

I'm looking for a way to enable the Bootstrap style for certain slides in an impress.js presentation. I've tried to do this by adding the bootstrapslide style to these slides and compiling Boostrap Less such that it is applied only to these div items with that style. However the slides show little of the Boostrap Style.

This is probably because impress.js first empties all styles (h1, pre,...) and that bootstrap adds some attributes, but fails to make the changes visible. I have however no immediate solution to this problem.

Minimal Working Example:

presentation.htm:

<!doctype html>
<html lang="en">

<head>
  <link rel='nofollow' href="http://netdna.impressjscdn.com/impressjs/0.5.3/css/impress-demo.css" rel="stylesheet" />

  <!-- custom.css -->
  <link rel='nofollow' href="http://pastebin.com/raw.php?i=dTdEky6N" rel="stylesheet" />
</head>

<body>
  <div id="impress">
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
      <h1><center>Presentation</center></h1>
      <span><center>November 30, 2014</center></span>
    </div>
    <div id="slide0" class="step slide bootstrapslide" data-x="1800" data-y="0">
      <h1>Title1</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div id="slide1" class="step slide bootstrapslide" data-x="3600" data-y="0">
      <h1>Title2</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://netdna.impressjscdn.com/impressjs/0.5.3/js/impress.js"></script>
  <script>
    impress().init();
  </script>
</body>

</html>

custom.css is compiled from custom.css and the Bootstrap Less package:

custom.less

div.bootstrapslide {
    @import "bootstrap.less";
}

Source: (StackOverflow)