I have an html file that I'm "including" via object:
<object type="text/html" data="try.html">
</object>
I'd like to use CSS to control how the contents look, but the CSS code seems to be ignored for the HTML in the object. If I pull in pieces directly the CSS works so I know it's "right". If I look at the HTML with a debugger, I can see there's another BODY & HTML tag, but since I'm using an ID I figured it would still find it.
Any suggestions ?
EDIT
so I got this to work using the jquery with $.get() like this :
<div id="here">
</div>
<script>
$.get("try.html", function(data) {
$('#here').html(data);
});
</script>
but I'd still like to know why, the CSS didn't apply to the HTML code included by the object tag. I haven't found a good explanation of that yet.
Related
Is it possible to insert -- dynamically generated -- content with CSS into the same website a second time, let's say a div-container like this: <div id="duplicate-me">dynamically generated content</div>
CSS is used to style content that exists or will eventually exist on a page. It can't load or insert dynamic content to a page. It can control showing/hiding content on a page, but the content needs to be placed there first (with the exception of psuedo-classes, but that's not really "dynamic"). As others have mentioned, Javascript/jQuery is what you are needing to use to achieve what you are wanting.
Using pseudo element's in CSS we can kind of create an element and style it in CSS. But then this has it's own limitations.
Javascript is what will essentially help you achieve this using document.createElement() method and other methods line appendChild() etc
CSS cannot be used for duplicating, but you can use javascript to duplicate div,p or any other element. We do it like
In the html file
<head>
<!--all other stuff-->
<script src='sketch.js'></script>
</head>
in the sketch.js file
var dupElem = document.createElement('div');
dupElem.id = "duplicate-me";
document.body.appendChild(dupElem);
//to manipulate the text content we do
dupElem.textContent = "some lorem ipsum"
//or else you can do a for loop
for (let i = 0;i < 3;i++){
document.body.appendChild(dupElem);
}
It is possible to make a copy of a node element but you need Javascript to do that.
<div class="duplicate-me">dynamically generated content</div>
In your Javascript:
let nodeToClone = document.getElementsByClassName("duplicate-me")[0];
let newClone = nodeToClone.cloneNode(true);
document.body.appendChild(newClone);
Please note that id needs to be unique in the document. That is why I used class.
Here you can learn more about clone.
O.K., JavaScript then. I'll look into it. Thank you for the answers. :-)
I've used gridsetapp.com in the past to create responsive grids, but on the one I've recently tried creating just isn't working and I can't figure out why.
The link to the css is here; https://get.gridsetapp.com/37722/
Just trying to get something basic:
<html><head>
<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />
</head>
<body>
<div class="d1-d5" style="background:#aaa">ffggg</div>
</body>
</html>
Any thoughts?
Despite an unusual CSS link, the browser should recognize the CSS file your referenced.
However, looking at your reference, you are just trying to apply CSS to the class d1-d5. However, as best I can tell, there is no exact match in the CSS file to Just d1-d5. Use the Development tools (F12 on most browsers); they are your friend. It will show you what CSS is applied at that moment including, any applied through JavaScript or Linked files.
With CSS, you need to make sure that you call out exactly what the browser can identify, but not more (unless going for a higher order of precedence). For example, the most you could call out to select your d1-d5 is:
html body div.d1-d5{...}
Whereas in you linked CSS file, I see a lot of parents or children when searching d1-d5, such as .d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5.
If you wanted the last one in this chain (.d1-d5 .d5), you would need an HTML such as:
<html>
<body>
<div class='d1-d5'>
<div class='d5'>
This text will have the CSS applied.
</div>
</div>
</body>
</html>
The CSS written as .d1-d5 .d5 literally means "select the element with class d5 as a descendent of an element with class .d1-d5". Your HTML doesn't match any of the classes in the CSS file, including the parent and child selectors. If you were to try the above HTML, you would see width:18.05273834%; applied (which isn't a very obvious thing to see... why not try background:yellow; or something like that for an easy verification).
Finally, why are you inline styling when you have the CSS? This is bad form, and only appropriate if you can't control the CSS file.
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 some html stored in database.
I dont know that html stored in databse has extra closing div like </div> or not.
I want to find extra closing div in html string.
I have tried to find using HTML Agility pack but not find the way to achieve this.
Example:
<div class="readers">
A total of 218 users are reading this article.
</div>
</div>
</div>
How can i find these two extra closing div and extract fully valid html.
Use this pure javascript parser before rendering the html: http://ejohn.org/blog/pure-javascript-html-parser/
You can check out by pasting your code here,
http://ejohn.org/apps/htmlparser/
it removes the extra </div>s.
You just need to pass your html to the HTMLtoXML function as:
HTMLtoXML(your_html);
and it would remove the extra closing tags. Infact what it does is that it converts it into xml format, but since you are dealing with html strigs & all tags are expected to be valid in html, you can be safe to use this.
EDIT: You can easily call javascript functions from a C# file. See this question for more details.
Click here to find both unclosed (hanging) as well as extra div tags: tormus
I'm using KML and the GGeoXml object to overlay some shapes on an embedded Google map. The placemarks in the KML file have some custom descriptive information that shows up in the balloons.
<Placemark>
<name />
<description>
<![CDATA[
<div class="MapPopup">
<h6>Concession</h6>
<h4>~Name~</h4>
<p>Description goes here</p>
<a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
</div>
]]>
</description>
<styleUrl>#masterPolyStyle</styleUrl>
...Placemarks go here ...
</Placemark>
So far so good - the popups show up and have the correct text in them. Here's the weird thing: I'm trying to use CSS to format what goes in the popups, and it halfway works.
Specifically:
The <h6> and <h4> elements are rendered using the colors and background images I've specified in my stylesheet.
Everything shows up in Arial, not in the font I've specified in my CSS.
The class names seem to be ignored (e.g. none of the a.Button formatting is applied; if I define a style like the one below, it's ignored.)
div.MapPopup { background:pink; }
Any ideas? I wouldn't have been surprised for the CSS not to work at all, but it's weird that it only partly works.
Update
Here's a screenshot to better illustrate this. I've reproduced the <div class="MapPopup"> markup further down on the page (in yellow), to show how it should be rendered according to my CSS.
As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:
It's stripping out all class attributes from my HTML.
It's throwing all kinds of hard-coded styles around.
Here's my HTML along with the first couple of wrappers inserted by Google:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
<div>
<h6>Concession</h6>
<h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
<p>
Description goes here</p>
<a target="_blank"><span />View details </a>
</div>
</div>
</div>
As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.
Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.
More related obnoxiousness related to the HTML in a KML <description> block: Any links are given the attribute target="_blank", whether you like it or not. I'm currently exploring ways to undo that, using jQuery, but what a drag. I really don't understand why Google feels the need to tamper with this HTML.
See also this thread on the official Google Group.
I've had similar issues. I don't know how you are implementing your Marker, or if you are using InfoWindow, or .addListener, but they way I have had to get css styling to work inside of the "pop up bubble" (over the Marker) is to use what is called "inline styling." So I have a variable that I pass into InfoWindow. Assuming you have initialized a variable "marker" with some options, and have the "map" instance created, some example code would look like this:
/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/
var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
/*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow2.open(map, marker);
});
I know the css styling code is cumbersome, but I haven't found a way to use complicated css styling inside "the bubble pop up" using css in the head, or from a style sheet There are always conflicts, and some features don't render properly.
My first guess is that you're running into an issue with CSS specificity. There is a good article on it at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, so if you can include a container element ID, that may help.
Let me know if this doesn't turn out to be the problem and I'll come up with more ideas.