I have several pages of a manga in .png format, around 300, and I would like to set up a section on my website so that users can read the manga, browsing through the pages using two arrows ("next page" and "previous page"). I don't care about animations between pages. The perfect example of what I want to achieve is MangaFox (not the whole website, just the window where you can read the manga).
The basic setting is: a 300px wide menu with the chapters list on the left, and manga pages appearing to the right. Either in the menu or below where the manga page img, two arrows let you go to the previous or next page.
I thought about using iframes: links to HTML pages containing each manga page would target the iframe and appear in it. However, this requires me to ceate an HTML page for each page, and set the links to the previous and next page manually. I would have 300 html pages, so this would be too heavy and time consuming.
I also tried linking the chapters list directly to the .png files, but the images are not styled as I would like (at least in Chrome, they don't appear in the center of the page, but rather in the upper left corner) and I would still have to set the previous and next arrows link manually.
Whai I dream of is:
- there's a list of the .png files, that sets a fixed order for the pages;
- a dropdown list in the left menu can point directly to a certain page in the list;
- the previous and next arrows recognize which image is being shown, and a click on the arrows skips to the next or previous item on the list. If there's no page before the current one, the "previous" arrow disappears; same for the "next" arrow in case the item is the last on the list.
Maybe there's a way simpler way to do it I didn't think of, but I can't find it.
Thank you in advance for your help!
(P.S.: I'm not using WordPress, just plain HTML, CSS and PHP)
Here's the simplest way I can think of doing this:
Left arrow
<a id="leftArrow" href="#{n-1}"></a>
Right arrow
<a id="rightArrow" href="#{n+1}"></a>
Set up onhashchange function that reads location.hash and sets the src attribute of the img element utilizing an array of pages you've defined somewhere:
window.onhashchange = function(){
var img = document.query('img');
var left = document.query('#leftArrow');
var right = document.query('#rightArrow');
var pageNumber = parseInt(location.hash);
//put some error handling here for edge cases, then...
img.src = imagesArray[pageNumber];
left.href = '#' + (pageNumber - 1);
right.href = '#' + (pageNumber + 1);
};
The page links in your side menu would have href="#{page number}" and would trigger the onhashchange function when clicked, updating the image and the arrows.
Hope this helps.
Related
I would like to place the next button of a Qualtrics survey in three positions (horizontally aligned: left, middle, right). The position must be constant for the same participant (e.g. for participant 1 always on the left), but should be randomized between participants (e.g. participant 2 on the right, and so on).
I have used the following JS code for individual questions (since I can only add JS for each question but not for the entire survey), but if I apply this to all individual questions the next button will appear in different locations for the same participant:
var Button = document.getElementById("NextButton");
var ButtonContainer = Button.parentNode;
if(Math.random() < 0.333){
ButtonContainer.style.textAlign = "left"
}else {
if (Math.random() < 0.5) {
ButtonContainer.style.textAlign = "center"
} else {
ButtonContainer.style.textAlign = "right"
}
}
Apparently, the only way to add custom code for the entire survey is via CSS (in Look & Feel settings), I'm aware I cannot implement if/else functions in CSS, thus I don't know what to do.
Any hint would be really appreciated! Thanks in advance!
You can run JS on every page in the survey by placing it in the survey header or footer inside a script tag. However, using your script would result in the button being placed in different position on different pages (it would randomize for each page).
Instead, use the survey flow randomizer to set an embedded data variable to "left", "right", or "center". I haven't done it, but you can try piping the embedded variable into your custom CSS to position the button. It that doesn't work you can pipe the embedded data variable into the header/footer JS to position the button.
I have a responsive image gallery that currently displays thumbnails on a page, which when clicked, will enlarge the image and open it up as a modal.
The limitations of this code are that when I have opened up the image, I have to press the 'X' button, and go back to the thumbnails in order to open up another image.
What I would like, is that when the modal opens up, with the enlarged image, there is a '<' and '>' button that allows you to scroll through the enlarged images.
Any ideas how this can be done?
I hope this was clear, if not then it will make more sense when you view it as a working example here.
Thank you for your help!
Supposing the image which is being displayed at the moment is pic1 and that you have pic2, pic3, pic4 as well.
First you need to create an array in javascript containing the location of these files. Now assuming that the id of that image is "mainpic".
var a=['pic1','pic2'....'pic4'];
var l=a.length;
var currentpic=0;
function changeright(){
documnet.getElementById("mainpic").src=++window.currentpic%window.l;
}
function changeleft(){
document.getElementById("mainpic").src=abs(--window.currentpic%window.l);
}
Now for the html part you need too superimpose these signs-
<> which you can do by using position:absolute and z index:-1. You can find the examples on w3school.
It should be something like
<aaaaaaa
And in css
enter code here
#superimpose{
position:absolute/relative;
top:100px//or some other value to move the text over the pic or use "left" and "right"
}
You could use slick, I used it at work and it is really good.
This ones really been bugging me, so any help would be greatly appreciated!
I have a footer with a taxonomy of the site in it. It lists links to each page, as well as sections(divs) on that page. Each div has an id, so my href reads like this sitename.com/pagename#divid.
When clicked, the corresponding page loads to the correct section. However, it aligns the top of that div to the top of the window, which is unfortunately, covered by an 80px fixed header.
I need to js to recognize that div id has been clicked and load the corresponding page with an 80px offset of windowtop. I have tried many things found on other stackoverflow posts but nothing works.
This is what I've currently put together which I feel like is on the right track. However, its not working.
Can anyone help?
$(window).load(function(){
var headHeight = $('.main-header').height();
if(window.location.hash) {
$(body).scrollTop() - headHeight;
}
});
$(body).scrollTop() - headHeight;
The above statement will not effectively do anything. (the statement is calculating the desired scrollTop target but you're not using the evaluated result)
Try instead:
$(body).scrollTop($(body).scrollTop() - headHeight);
I have a large table of data and when an item is chosen from it, I want to bring the submit button, which is below it, into view.
Currently I have been using:
elb = document.getElementById('buybox');
elb.scrollIntoView(true);
This brings the element into view at the top of the page, but, I only want it to be brought into view, say, 10% from the bottom of the page so the table data is still there and the simple page shift shows the user the button is there.
Is this possible?
Its difficult to measure content heights as they differ from page to page.
I'm using native javascript, not with the JQuery library.
Try using scrollIntoView(false) =)
Instead of bringing elb to the top, it brings it to the bottom of the page =)
Reference
Posting full answer to include 10% from bottom issue:
var screenh = window.innerHeight;
var toScroll = ''+screenh/10;
elb.scrollIntoView(false);
window.scrollBy(0,toScroll);
I'm building a progressively-enhanced, Bootstraped web application that features task-centric help on every page. The help area div (id="help_area") loads in a hidden state; generally when the user clicks on the "help" button (a id="nav_help_button"), the main content div condenses from span12 to span9, and the help area is revealed as a span3. This works well.
Because I want to support mobile and tablet, I'm using Bootstrap's responsive scaffolding. So if you are viewing the page on a narrow viewport, clicking on the help button "reveals" the hidden help area at the bottom of the page‡. I'm trying to use jQuery's .slideToggle()'s callback method to execute JavaScript (window.location.hash = "help_area";) that "jumps to" the help area after it is revealed, but having no luck with the jumping (it doesn't error; it just doesn't move browser focus to the help area).
How can I reveal a div at the bottom of a page, then jump to it? I'm also using preventDefault so the browser won't try to jump to the internal link before the target is revealed. Could that be the conflict?
Here's the relevant ECMA script:
$('#nav_help_button').click(function(event) {
"use strict"; //let's avoid tom-foolery in this function
event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
//adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
if ( $('#help_area').attr('aria-hidden')==='true' ) {
$('#content_container.span12').switchClass('span12', 'span9', 300);
$('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');
}
else {
$('#help_area').slideToggle(300).attr('aria-hidden', 'true');
$('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
}
});
I have also set up a JSFiddle that illustrates the problem.
To duplicate
open http://fiddle.jshell.net/jhfrench/HdCbu/7/show
then resize that browser window until "PTO, AIT Life, Hours Worked", etc stacks on top of each other
click on the button in the upper-right corner (the one with three white horizontal bars) to reveal the nav menu
click on the blue "help" button to execute the reveal/jump-to.
‡ As the right-most div, everything to the left of it gets stacked on top, so the newly "revealed" help area is generally below the visible portion of the page.
Related:
Javascript to make the page jump to a specific location
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/slideToggle/
Your JSFiddle does jump when I do exactly as you say (steps 1-4) for my browser, which is Chrome 24. What's your browser?
But perhaps this is your problem. If I navigate to http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area (note the appended hash tag) and perform your steps 1-4, my browser does NOT jump. Note that when you first navigate to that URL, there is no visible #help_area. Thus, the URL you're navigating to specifies a hash tag that's invisible. Perhaps the browser is a bit confused by this and just leaves the #help_area hash tag in a bad state. It won't allow scrolling to it from then on, even after it becomes visible. Speculation, but I hope it's helpful!