I am trying to create a thumbnail widget that, when fed a document as a url, will show a thumbnail for each page of the document; The number of pages should be configurable (10, 20, 50 pages etc.).
The problem I face is how to direct a thumbnail to show an intermediate page of the document, such as page 5, instead of just showing the cover page, which is the default option. Does anyone know how I can do this?
You could use HTML anchors like this :
<div id="page1">page 1</div>
<div id="page2">page 2</div>
<div id="page3">page 3</div>
<div id="page4">page 4</div>
<div id="page5">page 5</div>
and to browse to page 5 on the same HTML page create a link like this :
Go to page 5
Related
I have experienced problem I have never faced before and even googling it did not help.
I have basic code from the official page of script TurnJS, which is the problem I have with.
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
This works as it should but is has transparent background so when you have any text on pages it overlays themselves so you cannot read the text properly.
When I add
#flipbook div{
background: white;
}
It somehow breaks. Pages skew when hovered etc.
I cannot insert a jsfiddle example because the link for turnjs script is not https and I am not allowed to insert http links. And here it shows me error in code.
The skewed page is shown on image below.
Does someone know how to add a bg-colorto that flipbook?
I would aprreciate any comments.
You can add another class to your pages which specifies a background colour:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="pageStyle"> Page 1 </div>
<div class="pageStyle"> Page 2 </div>
<div class="pageStyle"> Page 3 </div>
...
And then specify everything you need in that class. The other method is to load background images for each page. This is generally how a magazine would be created in TurnJS as it's easier to automate.
Although I just went over their docs looking for this (I know it works, I've done it before) and couldn't find much about it.
I'm using slick.js slider for a mobile website where users can swipe/slide from view to view.
In one of those views, I need to display another slider for images. The problem is that when I slide the image-gallery, the main slides are activated and vice versa. I have named each slider differently, but I can't seem to find a way to disable the 'Big slider' when I'm interacting with the 'image gallery'.
Here's what I've done:
<div class="carousel">
<div>View 1</div>
<div>Vliew 2
<div class="carousel2">
<div>Image 1</div>
<div>Image 2</div>
<div>Image 3</div>
</div>
<div>
<div>View 3</div>
</div>
The goal is that when 'carousel2' is interacted with, the carousel should not be moved, and when carousel1 is interacted with, carousel2 should not move.
Any ideas of how to achieve this?
http://jsfiddle.net/q1qznouw/471/
You could force the carousel1 to stay at the current slide when mouse interact with the carousel2
$('.carousel').slick();
$('.carousel2').slick();
$('.carousel2').on("mousedown mouseup", function() {
$('.carousel').slick("slickGoTo", 1);
});
This is not perfect though
http://jsfiddle.net/q1qznouw/468/
I am having trouble trying to figure out how to show a specific item when clicking on a specific button and then hiding the other siblings.
So, what I have is 6 buttons.
Service 1-6
If someone would click on service 1, I would want my service-display-box section to appear (I have it set as display:none on page load) and then for just the Service 1 content to appear.
The way I have it now, it hides the sibling buttons I have and doesn't show the service-display-box or any of the service areas.
I have included a fiddle below.
Service buttons - When you click on Service 1
<div id="service-tabs-container">
<div class="service-tab-block" id="service_tab1">Service 1</div>
<div class="service-tab-block" id="service_tab2">Service 2</div>
<div class="service-tab-block" id="service_tab3">Service 3</div>
<div class="service-tab-block" id="service_tab4">Service 4</div>
<div class="service-tab-block" id="service_tab5">Service 5</div>
<div class="service-tab-block" id="service_tab6">Service 6</div>
</div>
</div>
I want to show this:
<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>
</div>
Fiddle
You will need to get the number from the id on the service tab you want, then append that to the id of the service item box:
$('.service-tab-block').click(function() {
$('.service-tab-block').css({"background":"purple"});
$(this).css({"background":"#000", "color":"#FFF"});
//To get the service display box to show
var item_number = $(this).attr('id').replace('service_tab', '');
$('#service-display-box').show();
$('#service'+item_number).show().siblings().hide();
})
https://jsfiddle.net/esayoaqg/1/
I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.
I wonder if this possible, let's say I have controller which returns me some parameters, let's called module, so I basically generate html content based on this, and this refresh each certain amount of time via ajax.
So, one of the properties is an alert, if alert is true, I add a class to the element, let's called it warning, so at the end, it generates something like this:
<div class="mod1"></div>
<div class="mod2"></div>
<div class="mod3"></div>
<div class="mod4"></div>
<div class="mod5 warning"></div>
If there any chance to place the divs with the warning class on top only using javascript???
Any adviced would be appreciated.
Regards.
If you are using jquery, this is a one approach:
CodePen
HTML:
<div id="messages">
<div class='message'> message 1</div>
<div class='message'> message 2</div>
<div class='message'> message 3</div>
<div class='message warning'> message 4</div>
<div class='message warning'> message 5</div>
</div>
JavaScript:
$(function(){
var clones = $('div.warning');
$('div.warning').remove();
$('#messages').prepend(clones);
})