How do I create buttons on Impress.js slides - buttons which allow me to go to other parts of the presentation.
I'm aware that there is code for next/previous steps but I would like to go to a completely different location/step.
Also, is there a way of overlaying hte button on top of an existing image.
Thanks
Nicole
Option 1: You can use normal html links and anchors.
(Note: In the following html, I've stripped out a lot of stuff to make the principle as clear as possible, so cutting and pasting as is probably won't work, but trust me, the idea does :) )
<div class="step" step="0" data-x="0" data-y="0">
<h1>This is the first slide</h1>
<p>Here comes some text.</p>
<p>Jump to Last-Slide</p>
</div>
<div class="step" step="1" data-x="1200" data-y="0">
<h1>This is the second slide</h1>
</div>
<div class="step" step="3" id="LastSlide" data-x="-800" data-y="0" data-z="r2000" data-rotate-y="90">
<h1>Last Slide</h1>
<p>How did I get here?</p>
</div>
The key pieces here are the link in the 1st slide (you can replace this with a button, image or whatever you want): Last-Slide
and then defining that id in the target slide: <div class="step" step="3" id="LastSlide"... >
Note: After jumping to the target slide, you history is lost, i.e. page-up takes you to whatever slide is logically before the target slide in the presentation. So if you want to go back to where you came from, either place additional links/buttons in the target slide, or use the 'back' button on your browser.
Option 2: Use the impress.js api instead of hyperlinks: impress().goto("LastSlide")
Related
Ok, I've been trying to figure this out for a while, and not quite sure it's possible in pure CSS.
I'm trying to create a bit of custom styling on a page of FileRun links that I send to clients. Sending a bunch of subfolders of large TIFF images (I split them up to make the download manageable). Most clients can figure out that they should go into each subfolder and download them individually. However, the "download all" button appears on the main page of the link, and plenty of not so tech-savvy clients send me angry emails complaining that they hit the "download all" button, and can't open or download the 5GB zip file that FileRun creates of the entire main folder link.
An example of a page is here:
https://demo.filerun.co/wl/?id=T2Gv5oGiGMxO3welkXbaqs92fZ6meJmU
The main limitation is that FileRun is encoded in IonCube, so I only have access to the CSS file, so no way I can add javascript or PHP code.
I've been trying to find a way to write CSS to hide the DOWNLOAD ALL button <a class="actionBtn"> by changing the CSS to .actionBtn {display:none;} in the main link page, but not any subfolders. I have found you can tell when you are in a subfolder page when there is a 2+ level breadcrumb containing a carat.
e.g. in the 'elf' subfolder, this can be detected by the presence of the > in the breadcrumb, and the presence of <span class="bcSep">></span>
Is there any way to change the attribute of actionBtn or right div on the right, depending on the presence of the <span class="bcSep">></span> or number of elements in the breadcrumb?
The nesting order in the header div on the root page is:
<div class="left">
<a class="breadCrumb">xxx</a>
</div>
<div class="right">
<a class="actionBtn">DOWNLOAD ALL</a>
</div>
On any subfolders it is:
<div class="left">
<a class="breadCrumb">xxx</a>
<span class="bcSep">></span>
<a class="breadCrumb">xxx</a>
...
</div>
<div class="right">
<a class="actionBtn">DOWNLOAD ALL</a>
</div>
I've tried child selectors, but can't find a way to target the actionBtn or right element from the breadCrumb or left element... Any ideas or am I asking for the impossible from pure CSS?
Since all three of your products (colored, samba and skaven) as well as the DOWNLOAD ALL anchor link have unique URLS, you can just use the href attribute value to only select the anchor tag on the homepage using a css attribute selector like this:
a[href="http://someUniqueURL.com/"].actionBtn {
display:none;
}
Check and run the following Code Snippet for a practical example of the above approach:
/* CSS */
a[href="https://demo.filerun.co/?module=weblinks§ion=public&multidownload=1&id=T2Gv5oGiGMxO3welkXbaqs92fZ6meJmU"].actionBtn {
display:none;
}
<!-- HTML -->
<p>Homepage Link</p>
Download All
<hr/>
<p>Product 1</p>
Product 1
<hr/>
<p>Product 2</p>
Product 2
<hr/>
<p>Product 3</p>
Product 3
<hr/>
When I open an HTML file in Chrome, the page loads with some random h3 tag from the middle of the document (see last h3 tag in code below) at the top of the window, instead of the actual top of the page. All of the content above that point is loads, but I have to scroll up to get to the top.
Same thing happens when I use Firefox, although it loads with the first h3 tag in my example at the top of the window. Safari loads with the "Here is an example of bold text" paragraph at the top. Any idea why this might be happening?
<h3>Audio</h3>
<audio src="07 Wake Up.mp3" controls>Here is some audio</audio>
<p>
Back to top
</p>
<hr />
<h3 id="B">Bold text</h3>
<p>Here is an example of <b>bold text</b></p>
<h3>Bi-directional override</h3>
<p><bdo dir="rtl">This text will go from right to left.</bdo></p>
<p><bdo dir="rtl">.tfel ot thgir morf og lliw txet sihT</bdo></p>
<h3>Blockquotes</h3>
<p>Blockquotes specify a section that is quoted from another source, like in the passage below:</p>
<blockquote cite="http://www.archives.gov/exhibits/charters/declaration_transcript.html">We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.</blockquote>
<h3 id="button">Buttons</h3>
I think I know what's going on now. The issue isn't with the tags that are loading at the top of the page, but with an autofocus button that appears a few lines down:
<h4>Autofocus button</h4>
<button type="button" autofocus>Autofocus button</button>
For anyone playing around with autofocus buttons, it seems like they cause the browser to "autofocus" (duh) on that point upon loading. In my original case, my page loaded with the autofocus button on the bottom of the window, some headings from a few lines up at the top, and the actual top of the page nowhere in sight.
Without being able to see you code, I would guess that you have an anchor tag somewhere that it is trying to navigate to. If you have a hash (#) in your URL, is in 99% likely. Otherwise, check your JS for a random scroll function that is attached to the wrong thing or perhaps running too early.
Without being able to see the code, this would be my best guess.
Using this library Angular File Upload I'm trying to make nested dropzones but running into an issue with dragleave events.
<div class="full-area">
<div class="outer-dropzone">
<ol>
<li>
<div class="container">
<div class="drop-zone-inner"></div>
<div class="align"> </div>
<div class="align"> </div>
</div>
</li>
</ol>
</div>
</div>
What I want to achieve is something along the lines of the follow:
When dragging into the browser window and the .outer-dropzone is entered it changes css (background color yellow for example).
If you drag onto .drop-zone-inner it reverts the .outer-dropzone then changes the drop-zone-inner to a new css background.
Third if you leave .drop-zone-inner it re-applies the .outer-dropzone css change.
The issue I'm having is if I have several items in the .drop-zone-inner field (i.e text and image etc). It causes flashing in where it tries to unapply the drop-zone-inner and repply the outer-dropzone.
I've tried a lot of different setups and layout, but I'm not sure the best way to actually approach this.
Edit: Basically I'm trying to accomplish something similar to Dropboxs dropzone highlights
I'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.
A preview of the site is available here : http://dev.cuonic.com/cuonic.com/
I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)
All of then content within //*[#id="content"]/div[2] is floated to the left. Floating elements don't affect the height of their containing block-level elements. If you add this:
#contact-me { clear:both; }
to your CSS somewhere, the <span id="contact-me"> tag will reposition to where you actually want it. Your page still isn't long enough for the contact form to go all the way to the top (at least on my monitor), but it will still scroll to the end of the page.
Change this section of code:
</div>
<span class="anchor" id="contact-me"></span>
<h1>Contact Me</h1>
<div class="text">
To this:
</div>
<h1>Contact Me</h1>
<span class="anchor" id="contact-me"></span>
<div class="text">
In creating this webtop app, I've created stacks of contenteditable divs exactly like this one, which is part of a homemade widget. But for some reason this one isn't working.
<div class="draft combobox" title="Draft">
<ul>
<li>
</li>
</ul>
<div class="text" contentEditable="true"> <!-- Right Here -->
<img class="arrow button" src="icons/scroll-down-white.png" />
Now just a little background around the issue. I am in the process of rewriting the html, well turning it into haml anyway (with Phamlp). It was just getting too illegible. I'm also using lessphp on the css.
These are the only changes I've made. The output remains the same, only now the contenteditable div doesn't work... It accepts focus, but there's no cursor... and no response to key events.
Also I'm yet to attach any javascript to it. So there's nothing going on there that could be hindering it.
So what's wrong with this div!
OK I worked it out... turned out that I had '-webkit-user-select:none' set in the css on an ancestor div!