I'm building a simple gallery system using predominantly PHP and MySQL. One of the requirements is for moving to the next image using keyboard arrow keys.
When doing this, the next or previous image should load into the image div without reloading the entire page.
The choice of which image to show is based on PHP GET using a URL structure like below, where 273 is the photo ID in the database:
/photos/photo.php?id=273
This is the code for housing the image:
<div class='single-image-container'>
<img src='/photos/" . $row["event_id"] . "/" . $row["filename"] . "' />
</div>
Is there a straightforward method to load the next image into the div 'single-image-container' when the right arrow key is pressed, by incrementing the value in the GET? The image filenames are in the format of event_id-id.jpg, i.e. 1983-101.jpg, 1983-102.jpg and so on.
The goal is also to update the browser URL with the updated id.
I'm a little bit at sea with this one and wondered if someone has some pointers. Thanks.
No there is no way (apart from iframe witching). Php is a server-side programming language. If you want new data from the server you have to reload the page first. But no problem, there is javascript. You can load all images directly with php and hide the unnecessary ones with javascript. Then you can build your own control (it's not that hard) or choose one of the hundreds of javascript slider libraries.
If you want to try it yourself, this will help you:
https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/
But the slider from this tutorial does not support keyboard. But you can use that: addEventListener("keydown", event =>
https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event
If you want a library. I have used the splide-slider quite often and know that it is easy to use.
https://splidejs.com/
Related
I want to fetch this site
https://www.film-fish.com/modern-mindless-action
to fetch the IMDB IDs of all movies listed there.
The problem is that the page loads all movies listed there just after scrolling down. So, a simple wget doesn't work.
Even if I scroll to the bottom of the page and view the source code, I do not see the last movie in the list (Hard Kill (2020)).
So the problem seems to be that the content is being created via JavaScript.
Has anybody a tip on how to achieve that?
So the problem seems to be that the content is being created via a js
script. Has anybody a tip on how to achieve that?
Indeed, executing JavaScript code is beyond scope of GNU Wget. You would need browser automation tool. If you know some Node.js or JavaScript I suggest taking look at PhantomJS Quick Start, Page Automation. Please take look at first example in 2nd link, you should be probably able to rework to your needs, i.e. instruct page to scroll down using JavaScript then extract what you need using JavaScript.
I'm trying to write JS code so that when a button is pushed in the first HTML page, in the second HTML page some content is displayed. I tried to do it in one JS file but it did not work, so I'm asking if maybe I have to use two separate JS files and in that case how do they communicate with each other? I'm using jQuery.
I'm not sure if you mean that two HTML pages are of the same website or they are two pages apart.
But if you mean the both are of the same website, I advise you to do the functionally of the page 2 on a div in page 1 and then only change the content dynamically by clicking the button on page 1 by jquery. "append()" function must be very usefull for this.
If the two pages are not related and they are of the same website, you can pass a JSON to the LocalStorage and then use it in page 2 by appending the JSON values between the html tags.
Whatever, if the two pages are so different or are not of the same website, you have to develop a websocket with "socket.io" or just use another "listener" library (like "datatable" for jquery) to show the data dynamically in page 2 in the case data comes from a db (should be the best way).
Please let me know if this is usefull or how can I help more.
I'm making a site that will show an endless series of images. The random list of images would be produced by a php script reading urls from a .txt. In the client side I need to show this images in different divs with random size and position. The question is: I had to produce a list that I insert in the rendered html that the JS could take? any direction for this JS that reads the urls and creates divs on the fly with random width/margins while scrolling?
excuse the noobness. and thanks a lot for any help.
The PHP script will execute ONCE at the loading of the website, so unless you're using ajax calls or something, you can't just output an "infinite" amount of data with PHP because you will sooner or later timeout.
You should use jQuery and learn how to use $.ajax to call the php to load more images using jQuery append. That should be an easy and clean way to do it (calling the event everytime the user reach the bottom of the website.
You can use some kind of infinite loading library like masonry. Here is the example demo here. It's help material can be seen here.
I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.
Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.
IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.
In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/