I have googled, but couldn't find a solution
Trust me, I've googled!
So, what happens is the following: I have bought a 20 template pack, they are plain html/css & javascript, so I can open them without a webserver in my machine: They work fine.
The problem started when I uploaded a website to my server:
Sliders won't show
Hovering the 4 boxes right under "DISCOVER THE
PLACES YOU’VE NEVER BEEN BEFORE" won't make them stand out
Hovering Video or Gallery items won't apply a fade mask to the image
Clicking on Video or Gallery won't open PrettyPortpholio overlay, instead it opens in another tab
Inspecting the website, I could see there was nothing linked wrong, all .js files were there, all images, the console don't output anything odd, it shows 2 little errors, but it's present in the template seller website as well, and it works there
This is my website:
[removed by user]
Template seller working website:
http://www.template-guide.com/preview/5500/
I've uploaded another template from the same pack to see if it works, I get the exact same bugs:
Alternative bugged template:
[removed by user]
Alternative website from template seller: http://www.template-guide.com/preview/5501/
Tried:
Downloading jQuery and adding it locally (both 1.8.2 and last)
Downloading again camera jQuery script (the .js responsible for the slider)
Downloading an camera jQuery scrip adapted to the latest jQuery
Googled, most issues were related to wrong path
Looks like you will need to update twitter name in myscript.js.
Browse for this section
$('.tweet_module').tweet({
modpath: 'twitter/',
count: 2,
username : 'your_name'
});
and update "username : 'your_name'" or simply comment the above section, if you don't want to show twitter feeds. This causes an error in JS and the JS engine stops parsing anything after that.
Related
First question but I've been using the site for over 8 years so please bear with me. All help is greatly appreciated. I've spent a couple of days and far too many hours now on this.
I have a web page that uses the default HTML validation via the input element required. In codepen the "message" is displayed if I don't populate the field. I added css to also make the background yellow. In codepen everything works great but on my laptop I get the yellow background but the majority of the inputs don't show the message. What's really strange is that some of them will give the message but the majority don't. I even have three within the same div and one gives the message while the other two don't. Same exact code except for the id & name. I know it recognizes the validation error because it triggers the css to change the background (input:invalid:focus), scrolls to it but no message.
I thought maybe it was my code so I exported the codepen and ran it from the unzipped /dist folder. Same behavior as the original code on my laptop. I emailed codepen and when they export and run from the /dist folder all of the fields show the message for them. I pushed it out to an IIS server and I get the same behavior as I do on my laptop, some messages display and some don't.
There aren't any errors in the console either. I'm at a loss. The code is too large to include and if I put a link to the codepen it forces me to include the code. I'm using Chrome 94. I ran the HTML through the W3C markup service and no errors. The codepen HTML does contain errors from the W3C markup service but still works whereas the HTML with no errors locally doesn't.
codepen:
codepen shows the message
local (exported codepen):
local no message but scrolls to it & changes background
I migrated to WP 5.5 and as many, I have issues with pictures not showing.
I tried to apply all the solutions I found on the internet but none worked:
install "Enable jQuery Migrate Helper"
disable old plugins
disable Smush, caches & co.
I even downgraded the site back to 5.4.1
...
The images are still not showing. But it must be linked to the Lazy Load anyway...
You can see an example here:https://excel-malin.com/en/excel/test123/
This is the code it shows for the picture. It looks like the browser is still showing the 1 pixel lazy load "fake" picture and don't switch to the real picture.
<img class="alignleft size-full wp-image-6373" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://excel-malin.com/wp-content/uploads/2020/09/calendrier_2018_test.jpg" alt="" width="631" height="591" data-srcset="https://excel-malin.com/wp-content/uploads/2020/09/calendrier_2018_test.jpg 631w, https://excel-malin.com/wp-content/uploads/2020/09/calendrier_2018_test-300x281.jpg 300w" data-sizes="(max-width: 631px) 100vw, 631px">
Some more observations:
It's not a file permission issue: I checked & re-assigned everything (all folders in "Upload" are 755, all files 644)
If I try to show the image in the browser directly with it's URL, it's shown correctly
When I create new post, if not saved yet and I preview it, the image is there. Once it's published, the picture disappear.
I don't care for the Lazy Load, I can live with or without but I absolutely need to make the pictures visible...
Big thanks for any help!
I could finally find the reason:
it was caused by the "WP-Optimize - Clean, Compress, Cache" plugin...
If someone encounters the same issue, check if you have this plugin installed & deactivate it!
I am using Shopify and a script located at https://app.cjdropshipping.com/static/shopify/pod/pod.js to generate mockups for a necklace product. You basically need to upload a photo and then it takes it and sends it to the server to generate a front and back side cover.
Well, this script does not always work on mobile.
You can try the mockup tool at https://purfectgifts.com/products/petnecklace as well as analyze it.
It does not always capture the whole area of the uploaded image dimensions and does not put the generated image instead of the original product image.
I need to have this fixed for mobile (iPhone & Android). It works better on Desktop.
I think this issue about the script has to do with how it loads itself...
Please help me out with this. You can make me the happiest person in the world if you can help me with that.
I am not a programmer but I tried to change how the script loads.
I think the issue is about how the script is loaded.
I appended the following code right above the closing body tag:
<script type='text/javascript' async=false defer=false src='https://app.cjdropshipping.com/static/shopify/pod/pod.js'></script>
My website project uses html, PHP, javascript, css and mysql. My page is always fullscreen. (so no browser bars etc) Everything that is being displayed, is controled by my code. However...
My page reloads a php page in an iframe every 0.5 seconds. (and more might be added) When the page is loading, I get a "connecting with 192.168.XXX.XXX", or something scimilar, in the left bottom of my full screen. How do I disable these kinds of messages?
Most of my buttons are already javascript functions, since they have to do multiple things, but with a href=, I also get that same display in the bottom of my browser. This really screws up my full-screen layout.
Things I've tryed: google, and changing z-index of my images, in the hopes it would cover up this "connecting with" info box.
I would like to get a CSS/javascript solution for this problem. If I need to change browser settings with the "about:config" page in firefox, that is also fine.
*PS: English isn't my native language, and my browser is also in another language then english. Tryed to find a solution on google, but could not get any relevant info, not even the name of that bar.
As far as I know, it isn't possible to fix this problem using any code on my web page. It is browser related.
Finding some help at the mozillazine.org forums, got me to some good search queries.
If you want to remove the status bar (that's what it's called), you can use the plugin "Status-4-evar". It gets you the ability to turn back time, and get some lost functionality back into firefox. It also allows you to disable the status bar. However... When in full-screen, firefox (version 43.something) then puts back the unwanted status bar, even if the plugin/add-on should have blocked it.
Second solution should be to create a userChrome.css file, and put it in some directory in your firefox profile. Finding this directory using the mozilla KB was really frustrating, since it isn't correct/out of date.
Correct location for your userChrome.css file should be:
C:\Users\XXXX\AppData\Roaming\Mozilla\Firefox\Profiles*random string*.default\chrome\
c:\users\XXXXX\ could be different on other windows versions. The chrome folder might not excist, so just create it.
Then create the userChrome.css file, if it does not excist already, and add the following tekst:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
.statuspanel-label {background:#FF9!important;color:black!important;font-family:"DejaVu Sans Mono"}
statuspanel {display:none!important}
statuspanel {max-width:90%!important}
statuspanel[type="overLink"] .statuspanel-label
statuspanel[type="status"] .statuspanel-label[value^="Looking"]
statuspanel[type="status"] .statuspanel-label[value^="Connect"]
statuspanel[type="status"] .statuspanel-label[value^="Waiting"]
statuspanel[type="status"] .statuspanel-label[value^="Transfer"]
After having done that, restart your firefox, and all status bar messages will be removed, even in full-screen.
Up until about a couple weeks ago, my web app was working great on desktop and mobile, using dropzone.js as a drag and drop means of uploading images. Now suddenly on my Android device things have changed.
When it was working:
Member hit the upload button and was prompted to select which app to use to select the images for upload. Typically default app was "Gallery" which doesn't allow for multiple selections, but when Google Photos was selected, multiple images could be selected and all images selected would upload. With a tool tip I was able to advise users on Android to use Google Photos vice Gallery.
Now
Same scenario, including being able to select multiple images to upload. However, when the "Done" button is pressed to initiate the upload, only the first image selected uploads.
Multiple uploads work as expected on desktop and iOS but for whatever reason something has changed with Android and/or Google Photos that for the life of me I can't figure out.
fiddle
For those of you willing to take the time to help out, please try it on both your desk top and Android device to see the difference in behavior.
Also note that the .js included with the fiddle is for reference only and is being driven by the same file externally.
Please note the above fiddle doesn't actually upload the images anywhere, but it is the exact behavior I am having issues with. The upload part of the script and db management is separate from this issue.
The actual structure when all located together is to have the following script:
<script src="js/dropzone.js"></script>
Thanks
Here is what I tried
I've updated a bit the code.
https://jsfiddle.net/_jserodio/dgq50zc3/10/
Here is what I tested
In Android 5.0 it works with Google Chrome.
But It didn't work with Firefox and/or Lightning browser.
It's not supported for Android 4.x and bellow
http://caniuse.com/#feat=input-file-multiple