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.
Related
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.
First: I know you should not use href javascript: to put javascript o a link. It is bad practise and all I can find on the forums is don't use it and questions regarding this are rejected. But I am not generating the html. It is salesforce who is generating html and I suppose they don't know better.
Now this is not working in Firefox and IE. Only in chrome. The strange thing is that if I try to write the same href in a test html page all 3 browsers seem to happily execute the javascript following the javascript: so it is not that is not supported by all browsers.
However with the visual force page embedded in the lightning interface such links no longer work. So I was wondering if there is anything I could investigate or do to get these working so any general information about why such links would not work or more specific why salesforce would be doing this for VF pages in the lightning interface could help me.
Such links are generated with the
<apex:outputLink target="_top" value="{!UpdateLink}">/apex:outputLink>
and to check that such links do not work when embedded in the lightning page I inserted the following snippet of html both in my VF page and in a blank html page
<script type="text/javascript">
function DebugClick ()
{
alert ('click');
return false;
}
</script>
debugger
In the html page it works in all three browsers. In the VF page it only works in chrome.
I also forced a break in the code and inspected the code using javascript to see if either the href attribute or the onclick of the link were changed but they seem intact. Here is my console output copy where I inspected the actual link not working, not my test link
window.getElementByIdCS('j_id0:j_id1:j_id2:updatelinkpnl').childNodes [0].onclick
null
window.getElementByIdCS('j_id0:j_id1:j_id2:updatelinkpnl').childNodes [0].attributes ['href']
href="javascript:srcUp('https%3A%2F%2Fbvdep.na5.visual.force.com%2Fapex%2FBvDAccountLink%3Faction%3DUpdate%26id%3D0017000001THUbxAAH%26objType%3DAccount%26product%3Dorbisneo%26isdtp%3Dp1');"
I finally cracked it (and see more or less where it is coming from) so here is for anyone encountering a similar issue what seem to be the key factors.
The is in an iframe. And the target is _top. I know this is a strange combinbination, but the original url was a simple link that needed the top target. It is only the lightning interface that substituted this to use javascript but doesn't remove the top.
Apparently IE and firefox then refuse to execute it. It might be that some security policy headers are part of the equation, but since I found a solution (make the target=_top dependant on the inteface I had no need to search further
I've encountered weird problem with anchor links. I have some on a page, and they suddenly stopped working (checked in chrome and firefox).
I noticed that after clicking anchor, let's say <a href="#news">, address changes to http://mydomen.net/index.html#/news and anchor doesn't work. If i manually remove that / after # and open new link it works as intended, but adds / again.
Did I miss some changes in HTML? Or what could it be? Thanks!
The only possibility is that this is coming from either your script (but you are only talking about HTML, so there is no clue for that) or URL rewriting on your server.
There is absolutely no possibility for plain HTML with your provided example code to behave like this.
(Browser extension is not an option since you tried different browsers)
Still don't know what caused this, but renaming anchor target to <div id='/news'> worked.
I have an issue-
I'm creating an html 5 app and including external websites in with an iframe. Inside the external website some of the links have
target="blank"
When clicked, this exits out of my app and opens up and entirely new window. Ideally, I want to keep them inside the iframe which allows them to use my app navigation (and is the point of an app).
Unfortunately I don't think I'm going to be able to achieve this with frontend technology alone. I'm looking for ANY solution. What I need is to basically get the "iframe" to act as its own window and my nav to be an entirely separate piece.
My current code base is html5, css, javascript, php (but possibly looking into integrating in node.js).
Here is a fiddle showing the issue: http://jsfiddle.net/zmx9e/
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.