I want to use sIFR in my blog posts also. But there's a major problem that I couldn't fix.
Let's say the blog post is between these divs:
<div class="post">BLOG POST IS HERE</div>
So, my selector is .post.
When I insert an image tag inside this div, the image isn't being showed by the browser. Just like this:
<div class="post"><img src="myimage.jpg" align="left" />BLOG POST IS HERE</div>
Is there a way to use sIFR with images?
As far as I know sIFR is not capable of displaying images. It is not intended to change an entire blog post. You should concentrate on the headlines.
i would recommend you place your blog post paragraphs inside <p> tags and then sIFR .post p in your css if you're going to do it, but as said above sIFR on a large amount of text is a bad idea...
I'd recommend reforming your markup so that the headline is in some sort of header element. like so...
<div class="post"><img src="myimage.jpg" align="left" /><h2>BLOG POST IS HERE</h2></div>
Then you could select on .post h2 in your sIFR declaration. This should achieve the effect you're looking for, and be much better for SEO.
Not really meant to be used for huge blocks of text. It's a fairly elegant solution for problems, but it's still flash, so don't go mental because you'll begin to degrade the user's experience, and that's counter to what you're after.
Related
i know <h2>Hamburger</h2> are good, but how about this:
<div><h2>Food ยป Hamburger</h2></div>
or thats are ok for google seo?
The tag with an anchor link inside it will work same as a normal tag for Google SEO. Both the methods are Ok, but the problem that can occur is your readers may go away because you added a hyperlink in the Heading text of your webpage. So, it is not a good practice to use hyperlinks in tags or any tag.
Is there an alternate way I can get this to process with Thymeleaf? Thymeleaf doesn't like the open tag, but I want to only render it for ROLE_A.
<span sec:authorize="hasRole('ROLE_A')">
<div class="col-xs-10">
</span>
bunch of text not specific to ROLE_A
<span sec:authorize="hasRole('ROLE_A')">
custom text specific to ROLE_A
</div>
</span>
I tried using
<sec:authorize="hasRole('ROLE_A')">
and
<div sec:authorize="hasRole('ROLE_A')">.
The former also doesn't run due to the same open tag issue and the latter is mixing up the closed div tags.
I have numerous blocks like this, so duplicating sections for different roles is not a great solution.
Not in the style you want. You need to close those elements.
My advice is then consider using fragments and load them as required with the needed data/
That way you reuse existing code thus making it cleaner and smaller.
For more examples and way you can do the above check out the Thymeleaf page http://www.thymeleaf.org/doc/springsecurity.html.
I'm looking for a way to insert a flex div into a document programmatically in Dart. Nothing crazy; just replicate:
<div flex></div>
It seems it should be easy, but I've read a lot of documentation and I couldn't find anything on the topic. I know I can simulate the behaviour using CSS display: flex and flex-grow, but I can't believe there's no way to do this programmatically. Is there a way of doing that?
This should work:
document.body.append(new DivElement()..setAttribute('flex', ""));
I haven't tried it but I would expect the result to look a bit different like
<div flex=""></div>
but this should have exactly the same effect.
I've been writing some tutorials, and I'm trying to figure out an elegant way to add line-by-line annotations to the code in the tutorials.
For example, suppose I have some code like this:
<h1>Demo of web page</h1>
<p>This is a paragraph</p>
I'd like to be able to add something (maybe a tooltip or some kind of lightbox effect) that allows me to present an explanation of each line to the reader, while still letting them see the line in context. The best I've been able to come up with is prose explanations that say things like "The line that starts with <h1> is a headline."
Anyone ever seen something like this?
You might want to check out docco:
http://jashkenas.github.com/docco/
It's written in CoffeeScript and generates an HTML doc from a source file breaking up the comment sections and the code. It sets up the comments as annotations for each section in one column and the corresponding properly highlighted code in the other column. I think it's a great simple way to grok annotations while keeping the code in context. Oh, and it also knows markdown.
What about using title attributes?
<h1 title="your hover text">your text</h1>
I think I might have found something to rival Docco: the popover feature of Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#popover
I'm not sure that it will actually look good, but it seems like a good start.
Old but good question, I was searching for similar things when I found this. There are tons of ways of doing HTML annotation, see this article for a very nice listing and explanations.
If you want annotation that simply tells the user what each line does, I would write HTML comments for small pieces of code, and larger external annotations for large amounts of code. You could then parse them using custom JS to show prettier boxes if you so wish.
<h1>Heading</h1> <!-- A heading element -->
<p>paragraph</p> <!-- A paragraph element -->
<p>Paragraph with
<b>Bold</b> <!-- An inline Bold element -->
text</p>
For larger amounts of code, I would consider using something like the documentation that Docco creates. Sure, it's for JavaScript but who says a similar one can't be done for HTML. As this was tagged with jquery-UI, you also might be interested in a jQuery text annotater.
How does the DiggBar work?
I'm trying to make an ASP.NET MVC DiggBar clone just for learning purposes and does anyone have a suggestion on how to specify the url of the content for the lower frame? How would you go about constructing that in MVC?
Also, I know that it is an iFrame, but how do they position it so regardless of scrolling it stays positioned at the top? Is it CSS magic?
Edit: I'm not interested in whether or not you like them. I am not putting one into production and I'm not asking for whether they are good design or not. I simply ~want~ to make one.
I find the DiggBar useful and I like it. Hell, you can turn it off in two clicks! Similarly, reddit has a reddit bar which is opt-in (probably better approach).
The basic html is:
<html>
<head>
<style type="text/css">
#toolbar {position: fixed; top: 0; height: 40px; width: 100%; ... }
#page {width: 100%; height: 100%;}
</style>
</head>
<div id="toolbar">
All your toolbar stuff here.
</div>
<iframe id="page" name="page" src="http://url.to/page" frameborder="0" noresize="noresize"></iframe>
</html>
You would have a slug on your own URLs that maps to the page's URL, e.g.
d1oKo3 => http://news.bbc.co.uk/2/hi/technology/7991708.stm
All your view would have to do is look up the mapping and put the page's URL into the iframe's src. Just make sure you have a way for users to opt out, as some people don't like this sort of toolbar.
It may well be a horrible blight on the interweb in your opinion but that wasn't what the man asked - why do you think anyone cares whether you think these tool bars should exist out there or not? no ones asking you to use em.
If you feel that they shouldn't then simply butt out and let someone else answer the question. After all if they really are so unpopular folk will vote with thier mice and go elsewhere and the sites that deploy them will dwindle to nothing. Thats whats so great about the web, it doesn't need impotent geeks dictating whats good and whats not folk can decide for themselves.
Happy coding your way.
First of all, please don't do something like that, I don't know anyone that likes those things.
Something can be kept at the top like that using the CSS:
position: fixed;
As for specifying the URL, I'm not sure exactly what you're asking. When you click on a link on digg now, the destination URL is something like this:
http://digg.com/d1oIyx
The "d1oIyx" would just be used as a primary key into a database where they're storing the URL to be loaded in the bottom iframe.
thanks , i found a solution that work ( attached ) , but how i make it full page iframe ?
working link : http://www.clalit.org/2.php?link=http://cnn.com
<?php
$link=$_GET["link"];
echo "<iframe src=\"$link\"/>";
?>