I followed the instructions on the lightbox page (https://lokeshdhakar.com/projects/lightbox2/#getting-started) and everything works just as it should in Live Preview of my code editor, Brackets - but when I upload the page to my server, although the modal opens correctly from the thumbnail, I don't get the nav controls (prev and next and close button), or the image caption or numbering ("Image 1 of x") on the bottom left. Not sure why this would be. Can anyone assist? Thanks.
Super-embarrassed here to admit my mistake, but I neglected to upload the Lightbox css and js files to my server - which was why the code worked in Live Preview but not on the server. Duh! Couldn't see the forest for the trees ...
Related
Description:
I've checked similar issues, but none of the provided solutions seem to work in this case. My assumption is that this has something to do with pdf document itself, appreciate if anyone could take a look.
Steps to reproduce
Here is the sandbox with the example
https://codesandbox.io/embed/gallant-thunder-x3o7v7?fontsize=14&hidenavigation=1&theme=dark
Expected behavior
Links are clickable. Please see the online demo https://projects.wojtekmaj.pl/react-pdf/
Actual behavior
Links are not clickable
Interesting fact, that google viewer does not open the links either (pages 4, 5), but if you download the document, links are working. I'm using default previewer on MacOS
Environment
React-PDF version: 5.7.2, same behaviour on 4.1.0
React version: 18.0.0, same on 16.4.0
Also, I used iframe and embed, and really it make link clickable but its not display pdf on safari IOS
The problem is you are using a "virtual PDF reader" (GoogleDocs/Mozilla PDF.js) which produces images and searchable text as separate layers, the link is there but it is the highlighted yellow zone not the blue underline text. also due to browser security I have to right click to open at my choice in new tab or new window (my choice would be save link as PDF for offline viewing).
In a true PDF viewer like Chrome embedded PDF Plugin or the users iFrame / offline viewer, the links would work perfectly. Again whichever way the user decides.
So I am having a really weird problem. I'm not sure if it's my server thats is causing the problem or it's my react code. Right now I am trying to load an image using this code in my app:
<Image style={styles.image}
source={{uri:'http://www.test.com/admin/images/profile/'+this.props.active.bid+'.jpg'}}
/>
The link is a correct link and image displays if you go to the actual link, however in my app it doesn't display the image.
The file permissions on the image are 644 and I have 1 image working, however whenever I try to remove that image from the server or rename it to be the correct image for the 2nd profile it still shows up for the 1st profile and not the 2nd. If I delete the image the app still receives it for the 1st profile even though it shouldn't show up, if I go to the weblink the image doesn't appear.
Does anyone have any ideas?
To fix this problem you just have to reset the simulator.
To do this go to Simulator - > Reset Content and Settings...
This deletes all of the data on the device so beware if there is something on there that you cannot restore.
I finally finished my phonegap app. I put the config.xml file and all my html, css and js files in a folder and uploaded it to phonegap build. I downloaded the ipa file to test it on my iphone.
The app has a page where articles are loaded from a json page that I am hosting on a server. The articles load properly. However when I hold the screen and scroll up or down, the screen starts shaking vigorously. I looked at other forums to see but all I found is DisallowOverscroll. But DisallowOverscroll set to true makes sure that the screen doesn't bounce if scrolled entirely to the bottom or to the top. But my problem is once I put my finger on the screen and scroll down, the page starts shaking up and down. I tried everything for the past two days but nothing worked. Any help is really appreciated.
I also made a video to make it easier. https://www.youtube.com/watch?v=O-Nd4ntZ46E
EDIT: I figured that the problem is arising from pull hook feature (pull to refresh. When I tested the page without the pull to refresh hook, it is working absolutely fine. But I am not sure how to use pull to refresh hook and not make the page judder at the same time.
Theres a mistake on your resolution for iPhone 6, it should be 750 x 1334, also check the image file is the correct size too.
You'll need to show code for the other problem.
In Chromium / Chrome I can use "Inspect element" to view a list of the current page's resources, including JS, images, videos. Basically, all files that have been downloaded in service of that page.
When I "Inspect element" in Firefox I can't find an equivalent. Am I missing it, or is there another way to access the list of files?
From the Tools menu, pick Page Info
In the Page Info window, select the Media tab
...the list of files downloaded for that page will appear under the Media tab.
In order to view resources like js or css files, you would select Network in the developer tools panel to open the Network Monitor. This will show all resources downloaded by the page (including images, media etc.)
From there you can narrow your search based on the type of resource you're looking for by selecting the appropriate tab at the top of the window. To inspect its contents, select the resource from the list and click the Response tab in the window that appears to the right.
On Windows, press 'F12' to open developer tools then select 'Network'. Under 'Network' select the filter labelled 'Images'. Reload your page and the images will be listed there along with their links. You can open them in a new tab and save them on your device.
After opening the Inspect Element console; Look for the Toolbox options at the TOP RIGHT CORNER (highlighted in BLUE as shown in the Picture link below)
Click on it and under the "Default Firefox Developer Tools" ; Click on the ones that you want to get displayed. (As per the link you gave for the Google Chrome that displayed the "Resources" - the equivalent in Firefox would be "Storage", as shown below
Toolbox Options--> Storage
Hope this helps :)
Has anyone tried using the wijmo widgets in DNN 7.+ ?
For my example I'm trying to use the upload widget.
If I upload to a path on my server and test, it works (As in the dialog appears to choose a file... the popup)
If I load it within a page on the site, the button shows but nothing happens when clicked.
All script files and necessary markup are correct.
No console erros, nothing. Very confusing.
Wijmo widgets work in DNN 7.+.
The “action” option should be changed to the server’s address of upload.ashx file.
Note: the upload sample can’t be opened by file path(d:/……/upload.html), please make sure it is opened on server.
Thanks,
Richa