I have a site that I have limited control over. There is an existing template that is using jQuery Mobile v.1.0a3 along with all custom styles.
I am creating a new template - within the same site - that is using all updated libraries of jQM and jQM css (via cdn).
When I navigate directly to my new page, everything is great; it looks/functions perfectly. However if I start at my new page, then navigate to any existing (older) page - the old page is inheriting the cached file(s) of the updated libraries. I am struggling to find a way to tell the system to completely reload everything.
For example, page "A" uses template "A", page "B" uses template "B". I am trying to figure out a way to have the system reload everything when navigating from "A" to "B" (or vice-versa). The paths to the css and js are different for each template.
I've tried setting cache-control meta data but no luck. Are there any other options?
I think I found a solution. I don't know if this is the correct way, but it seems to be working. Efficiency is in the drain, but this is the only thing I've found (so far) that is working like I need.
I've put this on every anchor tag that links outside of any given template:
HTML:
My Link
So for any link that links from an old page to a new page (or vice-versa) will have that data attribute.
Related
I have created multiple custom .html pages and placed them in /themes in my project. To use these custom pages in my project, I am using iFrame widget, which is placed in a dataview and all the settings are done correctly as I have used this widget previously as well. When I navigate to this page with widget using iFrame, it works fine the first time and displays the page correctly. However, after first time, no link to any of the pages works and gives an error "Page Not Found". Can someone point out what I am doing wrong here or guide me to a different/better solution to achieve this?
Note: I have also tried the same with iFrame tag inside HTML Snippet, and the behaviour is exactly same.
A common mistake is that people use just the filename instead of complete url in iframe url property. Try changing the filename to complete url e.g. http://example.com/file.html instead of file.html.
For my Jekyll-created web site, hosted on github, I'd like to use different CSS locally vs published.
Specifically, when I access it via http://localhost:4000/blah-blah, I'd like some extra page elements to be visible, and when I access it via http://mysite.github.io I want those extra elements to be invisible.
I want to add things like an "Edit Me" button to load the page with http://localhost:4000/admin.
I don't think I can do this with liquid, because the variables are processed at build-time, and I need different values at view-time.
How can I make my Jekyll-built site load different CSS based on the base URL (or hide/show page elements based on the base URL)?
You could do this with JavaScript. You could use document.domain to get the domain you are in.
var localsite = "localhost:4000/blah-blah";
var livesite = "mysite.github.io";
var domain = document.domain;
if(domain == localsite){
// display edit button
}
Something like that might work. I'm no expert at Jekyll (yet). There might be some code in jekyll that will help you do this differently and better. You may want to spend some time in the Jekyll docs first.
I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).