I am having monumental difficulty using ModX. It's great if you just upload everything once and forget out about it, but making changes to a CSS file that isn't a resource seems to be an absolute nightmare. If the CSS is loaded from a file and cached inside ModX, getting rid of that seems impossible. There is no documentation on this and I have seen a few threads about managing CSS via docs, which I want to try but I can't get a clean slate to start again.
EDIT: links to threads
CSS as ModX Resource
CSS through snippets
I have tried clearing the cache, deleting the cache folder, deleting the css files and then deleting and clearing the cache (which I then tested to see if the css had in fact been dropped but nope, still loads even though it's non-existent from where I can see)
My question is this: what is going on here? How come I can't clear the cache properly? Is this a bug? Am I missing something fundamental to ModX? How do I start again without re-installing ModX? Should I put CSS in a document or a snippet?
No, I don't want to use Sass or cssSweet. Just raw boring normal CSS, please. I'm not building the next Facebook, just want to use this for easy back-end deployment and content management for clients.
My header is a chunk named 'header', as follows. (NOTE: the CSS is found, no issues with initial loading. I have since completely deleted the CSS file, cleared the cache and deleted the cache folder, CSS still loads somehow)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link title="timeline-styles" rel="stylesheet" href="assets/timeline/css/timeline.css">
<link rel="stylesheet" href="assets/lightbox/dist/css/lightbox.css">
<link rel="stylesheet" href="assets/fonts/Southampton.ttf">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body id="section-body">
My main page is a template, as follows:
[[$header]]
[[$navbar]]
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<section id="section-banner" class="parallax">
<img id="welcome-banner-words" src="images/web_ready/welcome_banner_words.png" class="w-100" alt="">
</section>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<section id="section-timeline" class="w-100 h-100">
[[$timeline]]
</section>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="section-gallery-start" class="divider"></div>
<section id="section-gallery" class="w-100">
<header id="header-gallery">Party Photos!!!</header>
<hr class="horizontal-row-style">
<p class="para-gallery">
Please return to this section after the party to see the photos</p>
<!--[[$gallery]]-->
</section>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="section-special-start" class="divider"></div>
<section id="section-special" class="w-100">
<section id="section-special-intro-blurb" class="w-100 h-100">
<header id="header-special-intro-blurb">Special Thanks</header>
<hr class="horizontal-row-style">
<p class="para-special-intro-blurb">
</p>
<hr class="horizontal-row-style">
<p class="para-special-intro-blurb">
</p>
<p class="para-special-intro-blurb">Marnie Nana and Grandma Broome</p>
<p class="para-special-intro-blurb"></p>
</section>
[[$special_thanks]]
</section>
</div>
</div>
</div>
[[$footer]]
Mate hope is not late, a simple solution is use MinifyX to process and compress your css, every time you clear the cache it creates a new compressed file with a new name, that means there is no way to save your css path in memory.
Cheers.
When dealing with a browser's cache you can't be certain your viewers are getting the most recent copy of the files that make up the page they're looking at. So by appending a GET value to, for example, a cascading stylesheet, you can make the browser think the stylesheet is dynamic, thus reloading the file every time the modification date changes.
Below is a solution I came up with to combat this little annoyance.
lastModified MODx Extra
It's a snippet I created which you may download via the package manager. Basically, it adds a UNIX timestamp to the end of the path to your file you do not want cached.
I commented out the link to the stylesheet and then saved my header chunk, cleared the cache and then saved the chunk again. This seems to have worked.
However, this is very hacky.
To my other related issue:
Having experimented with a few things, I have found the easiest way to implement CSS is to put it in a chunk called 'css_stylesheet', ensuring that the "Clear Cache on Save" checkbox is checked (which it is by default) so we can play with with code in a live setting if there are bugs, and then reference the chunk in style tags on the header chunk like so:
<style>
[[$css_stylesheet]]
</style>
I guess this is ok, in general it's considered best practice to avoid nesting chunks too much, but it is only one level deep and we do use the same syntax when swapping out php includes so this is fine. It's fine.
Although it would be nice if this consideration were made more obvious in the docs. There should be some notes on translating a site from a php base to ModX, which should highlight the types of documents that should be included as static resources (i.e. bootstrap, jquery etc) and which should be as chunks (custom css, custom js etc)
One other way to break cache would be to add a variable after the css url.
<link rel="stylesheet" href="assets/css/style.css?v1">
You'd have to change the value each time you saved the file, its not sustainable, but it should break css cache so you can see your work.
Really though, you shouldn't need to do anything other than clear your browser cache. I know that some browsers REALLY like to hold onto cache though.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 months ago.
Improve this question
I was testing my application which is written in flutter and suddenly I keep getting
CDN: trunk URL couldn't be downloaded: https://cdn.cocoapods.org/CocoaPods-version.yml Response: 403 error. I am not sure why this is happening. This is the error I am getting in the log. Note: This project was working fine but however suddenly I keep getting these errors.
[!] CDN: trunk URL couldn't be downloaded: https://cdn.cocoapods.org/CocoaPods-version.yml Response: 403 <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
<title>Attention Required! | Cloudflare</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/cf.errors.css" />
<!--[if lt IE 9]><link rel="stylesheet" id='cf_styles-ie-css' href="/cdn-cgi/styles/cf.errors.ie.css" /><![endif]-->
<style>body{margin:0;padding:0}</style>
<!--[if gte IE 10]><!-->
<script>
if (!navigator.cookieEnabled) {
window.addEventListener('DOMContentLoaded', function () {
var cookieEl = document.getElementById('cookie-alert');
cookieEl.style.display = 'block';
})
}
</script>
<!--<![endif]-->
</head>
<body>
<div id="cf-wrapper">
<div class="cf-alert cf-alert-error cf-cookie-error" id="cookie-alert" data-translate="enable_cookies">Please enable cookies.</div>
<div id="cf-error-details" class="cf-error-details-wrapper">
<div class="cf-wrapper cf-header cf-error-overview">
<h1 data-translate="block_headline">Sorry, you have been blocked</h1>
<h2 class="cf-subheadline"><span data-translate="unable_to_access">You are unable to access</span> cocoapods.org</h2>
</div><!-- /.header -->
<div class="cf-section cf-highlight">
<div class="cf-wrapper">
<div class="cf-screenshot-container cf-screenshot-full">
<span class="cf-no-screenshot error"></span>
</div>
</div>
</div><!-- /.captcha-container -->
<div class="cf-section cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<h2 data-translate="blocked_why_headline">Why have I been blocked?</h2>
<p data-translate="blocked_why_detail">This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.</p>
</div>
<div class="cf-column">
<h2 data-translate="blocked_resolve_headline">What can I do to resolve this?</h2>
<p data-translate="blocked_resolve_detail">You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.</p>
</div>
</div>
</div><!-- /.section -->
<div class="cf-error-footer cf-wrapper w-240 lg:w-full py-10 sm:py-4 sm:px-8 mx-auto text-center sm:text-left border-solid border-0 border-t border-gray-300">
<p class="text-13">
<span class="cf-footer-item sm:block sm:mb-1">Cloudflare Ray ID: <strong class="font-semibold">709ac7f028be46eb</strong></span>
<span class="cf-footer-separator sm:hidden">•</span>
<span class="cf-footer-item sm:block sm:mb-1"><span>Your IP</span>:..</span>
<span class="cf-footer-separator sm:hidden">•</span>
<span class="cf-footer-item sm:block sm:mb-1"><span>Performance & security by</span> <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing" id="brand_link" target="_blank">Cloudflare</a></span>
</p>
</div><!-- /.error-footer -->
</div><!-- /#cf-error-details -->
</div><!-- /#cf-wrapper -->
<script>
window._cf_translation = {};
</script>
</body>
</html>
Any instructions how i could solve this?
There seems to be a problem with CloudFlare at the moment, status: https://github.com/CocoaPods/CocoaPods/issues/11355
also getting this error!
until fixed, you can try to bypass the CDN:
run:
pod repo remove trunk
and add to Podfile:
source 'https://cocoapods-cdn.netlify.app/'
or without CDN at all:
source 'https://github.com/CocoaPods/Specs.git'
I found a temporary workaround that worked for me very well:
source 'https://cdn.cocoapods.org/'
target '...' do
...
end
require 'typhoeus'
Typhoeus::Config.user_agent = 'CocoaPods'
After that start pod deintegrate and pod install
This should be fixed now. It seems that CloudFlare started to falsely detect CocoaPods traffic as a DDoS attack, and Orta Therox, a CocoaPods maintainer, had to change some configuration in order to get it working properly. Quoting from one of their comments on the GitHub issue:
The DDoS detection was triggered which can happen occasionally because CDN activity is still going up overall. It looks like traffic bounces over a threshold for stricter rules now. The way DDoS detection works in Cloudflare is through a series of rules/heuristics which can be individually tuned ( which is what I looked at in #11355 .)
After tuning the one people were hitting to "off", we paused a bit to determine if it was making changes. After seeing no changes, we flipped every rule/heuristic to off #11355
What we were seeing was still similar CDN traffic patterns but some traffic occasionally getting through correctly. This was when we reached out to Cloudflare support. With their help we determined that it was likely that the migration of our rules from the central settings repo to the different CDN edges (e.g. for simplicity think the servers closest to users each time) were using the cached (older) settings.
This meant some regions didn't have the new rules saying ignore the rule about 'allow the custom user-agent' - the Cloudflare support folks clears up the cache and now its looking like everything is working fine.
I have a header, in that i am trying to user a icon on the left side corner. I have used jquerymobile icons in that page. But i cant able to see the icon symbol, only empty icon i displayed. Find the attached screenshot for reference. below is the code from html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"> </script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-theme="a">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Just tried it in a fiddle and it seems to work OK for me. http://jsfiddle.net/LYCjv/
Might be worth downloading jQueryMobile hosting the files on your own server and referencing the css/js files locally, might be some issue with the CDN?
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
I created a new test project in MVC4 to test if I could use Facebook Helper from the Nuget gallery. I followed the instructions which are very simple, point and click to install the Facebook helper from Nuget, edit your page, and insert like button.
When I run the project I can actually see the facebook likebutton being generated when I view it through firebug, but it does not appear on the page.
Here is my default index page
#{
ViewBag.Title = "Home Page";
}
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
our forums.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<div>
#Facebook.LikeButton()
</div>
I´ve gone through several pages regarding Facebook helper and they all describe the process in the same way. Does anyone know if I should config any files before using this library?
Edited:
I will paste my html code that is loaded into the markup after execution. I will abbreviate some scripts and stuff since it has many hundreds of line of code :)
<html id="facebook" class="" lang="en">
<head>
<meta charset="utf-8">
<script>
<script>
<noscript><meta http-equiv="refresh" content="0; URL=/plugins/like.php?href=http%3A%2F%2Flocalhost%3A13876%2F&layout=standard&show_faces=src&width=450&action=like&colorscheme=light&height=80&font&locale=en_US&ref&_fb_noscript=1" /></noscript>
<meta content="noodp, noydir" name="robots">
<meta id="meta_referrer" content="default" name="referrer">
<meta content="Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet." name="description">
<link href="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flocalhost%3A13876%2F&layout=standard&show_faces=src&width=450&action=like&colorscheme=light&height=80&font&locale=en_US&ref" media="handheld" rel="alternate">
<title>Facebook</title>
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/-WUN6qLbp5n.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/gd49XKRAMNQ.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/XaOowWd9_Aq.css" rel="stylesheet">
<link href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/Dpn1SKTH3-z.css" rel="stylesheet">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/Vm1JnKckidu.js">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y-/r/ARN_8tuLdws.js">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yq/r/XboiPeV3jQI.js">
<script>
<script>
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yP/r/eTzqwp1jxjF.js" async="">
<script src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yh/r/aTzvHAZI_Jd.js" async="">
</head>
<body class="plugin ff4 win Locale_en_US">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<script>
<script>
<script>
</body>
</html>
See where in the Url it generates (link href="https://www.facebook...) it says "&show_faces=src"
That causes the problem; it should be "&show_faces=true"
Even though true is supposed to be the default, if you have this issue try changing it to: #Facebook.LikeButton(showFaces: false)
EDIT: this only helps if you set it to false. Same issue with LikeBox and all boolean properties.
If the HTML is being rendered I can only assume the problem it's a CSS problem, check the styling of the elements in FireBug and make sure they aren't being hidden e.g. check for display: none or visibility: hidden or make sure there isn't float applied which is taking it off the screen.
I am building a web application using Grails. I decided to use dojo and I added a dojo fisheye menu for begining in the main.gsp so it would be available on all the application's pages.
It works fine for the (home) index.gsp page, but once I select another one, the fisheye menu disapears. If I go back to home it is there. I revised my settings and everything looks ok to me. I am not using anything fancy, just simple things. I am missing something but not able to figure it out.
here is the code in my main.gsp simplified for clarity:
<html>
<head>
...
<g:layoutHead />
<!-- use dojo library ... this has not effect at all -->
<g:javascript library="dojotk"/>
<!-- Load Dojo -->
<script type="text/javascript" src="js/dojotk/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false"></script>
<!-- need fisheye -->
<g:javascript type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
</g:javascript>
<!-- required css for dojo fisheye -->
<style type="text/css">#import "js/dojotk/dojox/widget/FisheyeList/FisheyeList.css";</style>
</head>
<body >
...
<!-- fisheye bar -->
<div id="fisheyebar"><g:render template="/common/fisheyebar"/></div>
<g:layoutBody />
</body>
And here is the _fisheyebar.gsp
<g:javascript>
function load_app(target){
window.location.href=target
}
</g:javascript>
<center >
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
>
<div dojoType="dojox.widget.FisheyeListItem"
onClick= "load_app('${createLinkTo(dir:'/something')}');"
iconsrc="images/icon_something.png" caption="Web Browser">
</div>
.....
</div>
</div> <!-- outbar -->
</center>
All the pages including the index.gsp have the following:
<head>
<title>some titel</title>
<meta name="layout" content="main" />
</head>
Please not that the usage of template (_fisheyebar) is not the cause, I put the code directly in the main and had the same effect. So what am I missing?
it is in the relative url to dojo's location. it is relative to the root so that's why the index works and not the other pages.
using absolute URLs fixes the problem.
Did you try to move your dojo declaration and imports to your layout template page instead of putting it in your main.gsp ?