I got a very strange problem with my website. It happens randomly Let me take an example of the main CSS file from my website
http://www.xxxxx.net/oxwall/ow_static/plugins/base/css/ow.css
which defines background image for alot of widget, for example
ow_console_lang_ai{background:url(images/flags/AI.png)
this one is correctly located at
http://www.xxxxxx.net/oxwall/ow_static/plugins/base/css/images/flags/AI.png
At runtime, ow.css is included by every single pages. And most of the time, things go smoothly, but sometime, (just sometime!!) all urls messed up. All images (by all, it is around 200-400 images) is appended to the resquesting url.
For examples: this one /oxwall/photo/useralbum/EltonJohn/109 may trigger 200+ requests of of wrong urls from ow.css:
/oxwall/photo/useralbum/EltonJohn/images/flags/GT.png
The number of images is huge that occupies all available process of my preforked Apache..
I have been googling for days. I thought it was mod_deflate but no... Any idea?
Try to add a slash:
Old code:
ow_console_lang_ai{background:url(images/flags/AI.png)
New code:
ow_console_lang_ai{background:url(/images/flags/AI.png)
Some you're sayin' when you write this /oxwall/photo/useralbum/EltonJohn/109 it's searching /oxwall/photo/useralbum/EltonJohn/images/flags/GT.png ? I'm not sure to understand
EDIT :
So i was thinking, if you call your css as before , but before your file you can externalize your specific class and put your relative url in javascript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
height:100px;
width:100px;
}
</style>
<script>
var url = location.href;
</script>
</head>
<body>
<div class="test-image box"></div>
<script>
document.write('<style> \
.test-image { \
background-image:url('+url+'); \
} \
</style>');
</script>
</body>
</html>
This is not a best idea , but hope this help
Allan
Perhaps the problem is not the code but the picture.
Once I had a image that has a ".PNG"-ending and not ".png"-ending and my website doesn't load it.
Related
I have some code to take content out of a page within an iframe and adding it to the parent page. The parent and iframe source page are in the same directory so no cross domain issues.
This will work on a server but apparently not if all the files are running local on your computer. I was tearing my hair out before I figured that out. Running the files locally just gives cont2 an undefined value.
I need to run this locally without a server because of the sensitivity of the files I'm dealing with. I don't know how to do that though.
I tried setting document.domain="local.com" in both files but that didn't work.
Any way to do this?
Thanks
Parent Page:
<html><head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script></head><body>
<iframe id="frame1" src="page1.html"></iframe><br>
<button id="button2">Something</button>
<script>$("#button2").click(function(){
cont2 = $("#frame1").contents().find("div").html();
console.log(cont2);
$("#div2").html(cont2);
});</script>
<div id="div2">TBD</div>
</body></html>
iFrame Source:
<html>
<head></head>
<body>
<div id="div1">TODO write content</div>
</body>
</html>
Some versions of IE will allow this to work out of the box. Seems like it treats local files as on the same server.
For Chrome, you need to temporarily disable a couple things. See:
Disable same origin policy in Chrome
I'm trying to figure out how to add CSS in Genshi to some markup which is dynamically generated. I'm trying to avoid inline CSS, and ideally the rules would appear in the <head/> tag of the parent document.
I'm working with existing code that looks like this (I rewrote this from the original, to simplify, so I might have some syntax mistakes; but the original works, so I think you can ignore syntax mistakes if any):
templates/widgets/file_widget.html
<html xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude"
py:strip="">
<head>
<style type="text/css">
.file-widget {
background-color:#eee; display:inline-block; padding:4px;
}
</style>
</head>
<py:def function="file_widget(file_name)">
<div class=".file-widget">
...
</div>
</py:def>
</html>
widgets.py
class FileWidget:
...
def html():
markup_template = genshi.template.MarkupTemplate('''
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude">
<xi:include href="my_project/widgets/file_widget.html" />
${description}
${file_widget(file_name)}
</html>''')
markup = markup_template.generate(file_name = self.file_name, description = genshi.core.Markup(self.description))
return markup.render('html', doctype = 'html')
templates/main_page.html
<div py:for='widget in app.widgets'>
${ genshi.core.Markup( widget.html() ) }
</div>
Unfortunately, the <style/> tag gets rendered twice: once, as I want it to be, inside the original document <head/>, and then the widget <head/> gets rendered again.
How can I change the code to properly include the CSS in the right place? Since this is collaborative code, little changes and clearer code are appreciated!
Thanks for reading and for your help.
You might want to use a widget library like ToscaWidget2 which is meant to actually manage widgets with resources.
Otherwise you might want to use a static files framework like fanstatic which provides support for resources inclusion: http://www.fanstatic.org/en/1.0a5/quickstart.html#including-resources-with-fanstatic
If you want to roll your own custom solution you should register the resources somewhere whenever the widget is rendered (like in request) and then add them to the head tag when template is rendered. This is actually what tw2.core.resources does: https://github.com/toscawidgets/tw2.core/blob/develop/tw2/core/resources.py
I have a grok'ed plone.directives.form code below:
class EditForm(TreeFormMixin, form.SchemaForm):
"""
Edit form for our model.
We got one dummy button which allows us to manually inspect the data postback values.
"""
grok.context(ISiteRoot)
grok.name("dgftreeselect-test")
grok.require('zope2.View')
ignoreContext = True
schema = IFormSchema
label = u"Tree selection demo and manual testing"
#button.buttonAndHandler(u'Turbo boost')
def handleApply(self, action):
data, errors = self.extractData()
if errors:
self.status = self.formErrorsMessage
return
raise ActionExecutionError(Invalid(u"Please see that data stays intact over postback"))
it results to this form - which is not that good looking:
Since it is a demo form I'd like to keep all the related material in the same .py file. However, as the form is ugly looking, I'd like to inject a <style> CSS block on the page from a Python source code string to fix some of the most outstanding issues with the CSS styles.
What kind of hooks plone.app.forms / BrowserViews provide to inject your own <style> block in the <head> or in any part of the resulting HTML page? I prefer not to create any additional files and CSS registrations for this task.
Full source:
https://github.com/miohtama/collective.z3cform.dgftreeselect/blob/master/src/collective/z3cform/dgftreeselect/testform.py
plone.app.z3cform and Zope browser views don't provide any hooks to inject custom things into the head directly, but you can use a custom template by specifying the template attribute in the form class:
template = grok.Template('path/to/template.pt')
And then in template.pt, fill the style_slot to include your styles. The entire template could look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<body>
<metal:block fill-slot="style_slot">
<style type="text/css">
/* insert styles here */
</style>
</metal:block>
<metal:content-core fill-slot="main">
<metal:content-core define-macro="content-core">
<tal:button metal:use-macro="context/##ploneform-macros/titlelessform" />
</metal:content-core>
</metal:content-core>
</body>
</html>
This is not a best practice since the styles must be served every time the widget is rendered. Instead it's usually better to register CSS in the portal_css tool.
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.
I have a vertical left menu in my asp.net page.
using jquery .load,i try to load other aspx page in the midlle div(content div)
depending on the link click.Like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx");
});
this solution doesn't work,i have followed the jquery doc.Do i should add some thing in mypage.aspx,all the examples i found i found googling don't work.
Can someone pls give me a working link or an example for that.
The best thing you can do (short of only responding with the requested content) is have a container in there, like this:
<div id="ContentDiv">
<div id="ContentInner">
</div>
</div>
This is to prevent multiple IDs in the page when doing the .load(). Since .load() takes a selector you'd then use that to get the content, like this:
$('#LeftMenu1_HyperLink1').live("click", function(event) {
event.preventDefault();
$("#ContentDiv").load("mypage.aspx #ContentInner");
});
Now this loads only that inner <div> onto this page.
Some considerations to this approach you're taking:
Scripts/styles in the <head> won't be loaded
Be sure your <form> is inside that <div id="ContentInner">
You're embedding a full HTML document into a <div> element. The result will look like this:
<html>
<head>
.
.
</head>
<body>
<div>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
<html>
</div>
.
.
</body>
</html>
The browser won't be able to do anything with that. Try loading your page in an <iframe> element instead of a<div>.