I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
Related
I uploaded a website online, and some of the images on of the pages does not display.
I have checked the path multiple times and I copied and pasted the src link, then just changed the name of the file, which was a number. eg: product1.jpg then product2.jpg, but the image of product 1 would display and not the image of product 2.
Is there anything else I can do to try fix it? Or find where the problem is?
Here is the product page of the current website.
Try using the debugger of the browser
On Chrome you can press F12, then go to the Sources section and check (and preview) the files the browser has recieved. If you see both pictures and you can preview them, then it is the HTML/CSS code of the page which, creates the problem. If you don't see them, the problem must be in the paths(check if you're using relative or absolute paths)
On Firefox you can press F12 and go to the Debugger section, and from there is is the same process.
I am wondering if someone can help me with a problem I am encountering with iPhone/iPad. I have an email the generates a report as an HTML attachment. In that HTML attachment, there are two images. One is a static image that pulls down a logo using a normal HTML img tag.
The other is dynamic. It also uses the normal HTML img tag, however it calls out to a web api with some information identifying the user.
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
The Web API uses information on the user to return appropriate images to them. For some reason the dynamic image does not show up with the attachment is opened on an iPad/iPhone.
The image works just fine when the attachment is opened from a computer. I thought maybe something might be blocking images, however then I would expect the static image not to display as well. I verified that the "Load Remote Images" setting is turned on.
I am at a loss here. Is there something with iOS that prevents dynamically generated images from showing in HTML attachments?
Thanks
Ok, I can't explain why the above is not working, but I did find something that does. Instead of using the following URL
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
use
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm.jpg}/" >
The final param needs to end with ".jpg/". If the slash is not there, you will get a 404 error.
Then in the API method, you simply strip off the .jpg part of "OtherParm" to get the intended value for "OtherParm".
I am having trouble getting the proper image to show up when I a link to my website in a status update. It is either grabbing an image from the front page which I don't want it to use (links to the front page) or no image at all (links to specific pages).
I found several tutorials that all gave the same advice about using a meta tag to specify which image to use, which I have done. Example Tutorial. Example:
<link rel="image_src" href="http://URL-TO-IMAGE" />
This had no effect. The article mentions that Facebook caches these lookups and provided a link to a URL Debugger, which was supposed to scrub that cache for me. I used it to verify that my meta tag was inserted properly (it was), but it had no effect on new status updates. Am I missing something? The way the tutorials talk gives me the indication that using this debugger will clear the Facebook cache for the page so that the next lookup will load and re-cache the proper image. Instead it seems that all this does is bypass the cache this one time for the purposes of testing.
Is there a way to actually force clear this cache, or do I just need to wait? It's been several days. How long does this cache take to expire?
Steps to Reproduce:
Visit Facebook News Feed or Timeline
Enter URL of my website in status update (can provide if neeeded)
Expected Outcome
The Favicon of my website is loaded as the icon for the status update
Actual Outcome
An image of a person (appears in the sidebar of our site) is used as the icon (for links to the front page. Links to the inner pages of the website load no icon at all.)
Further:
Visit the URL Debugger
Enter URL for website
Verify proper icon is loading
Post link in new status update.
Expected Outcome
FB's cache will be updated and the Favicon will now be used.
Actual Outcome
Nope... still the person from the sidebar on front page links and no icon at all for inner page links.
UPDATE 2/22/2013:
The image that loads when I post my URL to Facebook has changed! But it's still wrong :(.
I went to test it this morning and I now have an additional image as an option, which means Facebook did update what it's loading from the site, but it's still not the image that I specified in my tag. It's just grabbing another image from one of my other side bars, and I'm still not getting an image at all for my inner page.
It's weird.... the URL Debugger tool grabs the correct image, so I don't think the problem is my Meta tags. That's what the URL Debugger is supposed to help me identify. I think there's some disconnect between the lookup and what Facebook actually posts. I think this is a problem with Facebook, unless I'm missing something huge, but I don't see it....
UPDATE 2/25/2013:
I've made progress, but there's still something weird going on. Martey set me straight on the using the og: meta tags rather than just the tag. The tutorial I had been following said to ignore the Open Graph warnings, but once I started paying attention to them, I got some good information. Like, it actually said that my image is too small and that it will use another image instead. Guess I should have paid attention :)
Anyway, so the issue was that the favicon is too small. According to the Open Graph warning, it needs to be 200 pixels in both directions. So I grabbed the actual header logo and tried to use that. It's 340 pixels wide. Oops, it was only 164 pixels tall.
So I used The GIMP to set it onto a transparent background that was 200 pixels tall and tried again, but it's still telling me it's too small. It's no longer telling me that it needs to be 200 pixels. It just says that it's too small.
I'm stumped again...
Update 2/25/2013: Issue Resolved
The problem was transparency. I filled the background in white and tried again and now it's loading fine.
Thanks for your help, Martey!
Instead of using a third party tutorial, you should refer to Facebook's official OpenGraph documentation. They recommend using an og:image metatag to refer to document images.
As I noted in my comment, issues with data not updating on Facebook is likely to be the result of misformatted or wrong OpenGraph metatags. Without the URL of the troublesome page, or information on the URL Debugger's warnings, it is difficult to recommend solutions.
My multi-page jQuery Mobile app spans a couple directories. One stateful page is cached with data-dom-cache="true". When I navigate to it, the base path used for relative links ($('base')[0].href) isn't restored to the proper subdirectory; it's one level up. Seems like a jQuery Mobile bug.
To work around, I tried $('base')[0].href = 'subdir';. But executing that sends it down a rabbit hole of subdirs. Inside the page it gives me subdir/subdir, and from the Chrome console it's subdir/subdir/subdir.
Is this a quirk of Chrome or jQuery Mobile, and what else can I do to work around? It's not easy for me to test with another browser.
Woops, I forgot to answer this back then. I believe the solution was to add another <base>, rather than modifying the existing tag, to avoid any quirks with relative URLs.
I have a code snippet that is installed on third party websites. I can't get into the details, but it loads HTML, CSS and JS onto the page through the use of a <script> tag.
Part of the code is a JS function that executes when this link is clicked:
?
If there are JS errors on the page that prevent the function from executing, clicking the link obviously just adds the hash to the URL and takes the user to the top of the page. This is the expected fallback behavior.
However, on one third party site with a multitude of JS errors, clicking the link removes everything after the top level domain, adds the hash, and directs to that page (the home page). For example, the link would take the user from:
http://www.example.com/2010/05/14/very-interesting-blog-post/
to
http://www.example.com/#
Notably, the issue occurs in Firefox and Chrome, but not IE9. I know it may be impossible to properly diagnose the issue without more detailed code, but I'm not at liberty to provide it. I'm just hoping to get some kind of reasonable explanation for this strange browser behavior.
If it helps at all, the site in question is a WordPress blog. Thanks in advance.
EDIT: This is apparently not caused by any JS on the site, because turning off JS and adding the link with the inspector produced the same behavior.
I had a similar error where clicking on any <a href="#"> causes a full page reload. I managed to solve this by removing the <base href="/"> tag from the <head> of the page. I couldn't find any informations on this (yet). I'll add more if I can find any additional info.
This problem happens when you use windows.onpopstate to handle back or forward buttons and load page using ajax. Try to solve your js code for handling history.