I made a simple change on my Squarespace site today, and for some reason my images on one specific page are not loading anymore. I've tried different browsers, and clearing my cache, but the image won't load and nothing has changed. Any idea what I can do to get to the bottom of this?
If you follow this link you will see what I'm talking about, and image will load for less than a second and then disappear. If you don't see it, try refreshing the page.
It appears that you are applying some custom CSS to the page in question, likely via per-page code injection. The following code is appearing on that page:
<style>
.sublogo {
z-index:1000;
position:fixed;
top:20px;
left:35px;
}
.thumb-image.loaded {
display: none !important;
}
</style>
It is the second rule, .thumb-image.loaded {...} that is causing the image to disappear once it is fully loaded.
Removing that rule should solve the issue. Of course, you'd need to consider why the rule was added in the first place and what other issue it was put there to solve.
Related
Upon page refresh using animateAnchor: false, for a second I see the first image / slide presented on the site, rather than instantly loading the slide that is anchored. It looks like a small glitch. Is there any way around this problem?
That makes total sense if you are importing the fullpage.js file before the closing body.
That way you'll have to wait for fullPage.js file to load and then to initialise and meanwhile you'll see your site as it is before using fullpage.js.
Try importing fullPage.js on the head of your site, this way initialisation will be faster.
Also, you can use the following CSS in your stylesheet so sections will be 100% height even before loading fullPage.js:
#fullpage,
.section,
body,
.fp-tableCell,
html {
height: 100%
}
Assuming #fullpage is your fullpage wrapper and that you use the default selectors for sections and slides. (.slide, .section)
Implemented a Kendo Grid exactly as stated in the examples.
Here is the pager in the example:
Here is my pager:
Notice how the arrows are right at the top of the buttons.
Why is it like this? I thought if you install KendoUI that everything should work well out of the box?
I have tried this in Chrome, Firefox and IE and the same results.
Does anyone know how to fix this?
The worst part is the refresh on the right hand side, it's completely out of alignment to the item count next to it.
I have even tried a fresh install on a new solution and that did not fix the problem either.
Can someone please help me? Is there perhaps more steps to install Kendo UI properly?
I had this similar problem some time ago. After searching problem I found out that I didn't have doctype on my page.
<!DOCTYPE html>
My page had DOCTYPE html, however the declaration was set to transitional. I removed this and it worked. It also works if you set it to strict.
http://www.w3schools.com/tags/tag_doctype.asp
This misalignment issue is occurring due to kendo icon property which is set to super.
To resolve the issue, we need to set this to middle
.k-icon
{
vertical-align: middle;
}
Include above property in inline css of that page.Like we need to include this into <style> </style>tag.
I Installed Magento and a theme from envato . However it was working with out any issue and at some point of time it started giving an additional unwanted verical scrollbar in my template
Please check the URL : http://shoptwiz.com/about-shoptwiz with 2 scrollbar on the right hand side .
Can any one point out the problem ?![enter image description here][1]
http://oi61.tinypic.com/29ftphy.jpg Screen shot Link
I have tried to disable or comment http://www.shoptwiz.com/skin/frontend/default/ves_superstore/css/styles.css
at line 4378
overflow-x: hidden;
which removes the scroller . But this gives out another bug .
There is unusual Gap below the footer and the footer of website do not stick to its place .
This is a screen shot after i try to edit css from firebug
http://oi57.tinypic.com/2s8pd9w.jpg
Any one with a good advice ???
Thats a css issue. overflow property problem. I think they have set(theme providers) multiple time the same property. Anyway just open the below file,
http://duwj1c2q9eaye.cloudfront.net/skin/frontend/default/ves_superstore/css/styles.css
at line 4378 remove or comment this css property
overflow-x: hidden;
That's it. If you have any doubt comment here.
I'm using Uploadcare for uploading and storing images, which is working.
However, it appears CKEditor 4.1.1 is choking on these images.
Adding an image via CKEditor.
The initial placement of the image is as expected. However, when the data is saved, CKEditor is clearly doing something weird, prior to committing the data.
In several tests, during the formatting and rearrangement of the HTML, CKEditor is stripping out the "style" image attribute and the first opening double quote, which I can see in the text data on the database itself.
This behavior is entirely reproducible.
Editing an image via CKEditor.
Initially, the image looks fine. But when I view the source, the HTML for the image is sanitized to render as text, and not to render as an image object.
Disabling 3rd party Plugins.
As mentioned previously, I'm using Uploadcare, in addition to Word Count & Char Count. I disabled both Plugins, but this didn't change anything.
Thoughts.
During the saving process, I merely cleanse the data via the $this->db->escape() function in CodeIgniter, which cannot to circumvented, or the data won't commit and I receive an error.
Just to be clear, during testing, the errors occured with any type of image object; either added manually, or via Uploadcare.
In my view page, I have:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: true
});
</script>
Which — according to the documentation — "will disable the filter (data will not be filtered, all features will be activated)."
However, it doesn't work and it's doing exactly the same as before; stripping out the style attribute by name and converting the HTML to their regular textual equivalents.
If I chose to define something specifically, that turns almost everything off, including the plugins, and — strangely enough — the very thing I've written a rule for:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: {
'img': {
styles: 'height, width'
}
}
});
</script>
So I have no idea what's going on.
I've also tried the advice in a thread on their forums where someone is experiencing exactly the same problem as me, but neither methods work, which leads me to believe this is a problem particular to the CKEditor itself, and not the treatment of data in and of itself.
If anyone has any advice as to how I can coax CKEditor into handing images, I'd be happy for any advice.
Setting allowedContent: true for 99.9% would stop CKEditor from stripping images if you did that correctly.
Your allowedContent setting (2nd code sample) is incorrect. It does not allow src and alt attributes. Image without src will be stripped by CKEditor as invalid. So you should have at least:
allowedContent: {
img: {
attributes: '!src, alt', // src is required
styles: 'height, width'
}
}
So point 1. or 2. should work - I did that a lot of times, so I'm pretty sure of that. Thus, I think that you have a 2nd issue with your server breaking something.
The problem here (on top of needing allowedContent: true or properly set up rules) is CodeIgniter's XSS filtering. Before we get access to $_POST (or $_GET/$_REQUEST) CI has already ran filtering over this data and in this case ruined it. This setting can't be overridden on a per-controller basis as it's already run before the controller is loaded.
So you can either disable it altogether in /application/config/config.php (not recommended)
$config['global_xss_filtering'] = FALSE;
Or a less heavy handed approach (but still not ideal) manually disabling it on certain pages (i.e. my example turning it off on all pages under /admin/help). Also in /application/config/config.php.
$config['global_xss_filtering'] = TRUE;
# Override the XSS filtering on /admin/help
if (preg_match("/^\/admin\/help/", $_SERVER["QUERY_STRING"])) {
$config['global_xss_filtering'] = FALSE;
}
I had the exact issues you were having, and this has solved the issue for me.
I am designing a single page website and want the fixed nav links to change colour whenever the user scrolls to the specified location. Seems pretty easy to do, I thought it was pretty easy to do, but I am having problems making it work.
I only downloaded the Scrollspy JS Plugin, as I am not using the Twitter Bootstrap CSS. I just require the Scrollspy Plugin.
Could you check this jsFiddle and provide some guidance? I have already checked out the documentation here, but I've had no luck. Any help is greatly appreciated :)
http://jsfiddle.net/xjTpk/28/
Ignoring the serious issues with your use of JSFiddle1, and the typographic errors2, the principle things wrong are
You need the .nav class on the <ul> in the navbar, and
The #welcome is not an existing element, causing a JS error.
Here's a fixed demo:
JSFiddle
Oh, and you don't need both data-api and js to initialize the plugin; choose one.
1 Loading Bootstrap 2.0.2 + 2.0.4 at the same time; trying to include a <body> in the html panel
2 Using upperCamelCase on a function that doesn't need it: scrollSpy();
Key thing you are missing is you have to have a "nav" class on the ul element (or some other parent element) as that is used in the scrollspy code as part of a selector.
I couldn't get yours to work for some reason but here is a simplified example:
http://jsfiddle.net/UWzeD/5/
Your ul needs a nav class, but most important for scrollspy to work properly is that your target needs to be one level about the ul. Otherwise I've found that scrollspy doesn't work.