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\"/>";
?>
Related
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 am currently creating an MVC 4 web application.
I have an action that has a base background image which is always the same then an arrow image which changes in degrees depending on the information that is collected within the action.
I call this action using
<img src="#Url.Action("trend-image", "NonReg_Reports")" alt="background" width="245" height="105" />
This works fine when it is called and is just displaying a HTML webpage. It gives me the HTML.
<img src="/nonreg-report/01495344/trend-image" alt="background" width="245" height="105">
I am then using Rotativa / Wkhtmltopdf to convert this HTML page into a PDF. This runs the same piece of code as above.
The problem is I am just getting a white box with the alternative text in it if I use the code above.
If I use <img src="~/Content/images/trend_back_medium.png" alt="astuff" /> which is the actual background image in my project it works fine.
The image from the code above can not be saved anywhere due to how it is used. I am thinking that it is a path problem, but after trying lots of different things I can still not get it to work.
Any suggestions or help would be greatly appreciated Thank you.
I had the same problem. Normal html view was ok with pictures, pdf was not display it. I used Server.MapPath to point to picture and it was ok...
<img src="#Server.MapPath("~/Folder/SubFolder/Subfolder/ImageName.png")" />
I hope this will help
Adam
I faced the same problem and I found a workaround, not a nice one, but it suits my needs.
It seems that Rotativa(Wkhtmltopdf?) have a problem with images which are returned from http handler (at least my case). So to handle this situation, in controller action before return new ViewAsPdf... my code manually save file to some local 'temp' folder and replace 'src' of images in rendered view with paths to that local files in server path manner, eg: http://localhost/img/temp/trend-image.png.
This is not a nice solution, if you already found better one, let me know.
Adding the attribute [System.Web.Mvc.AllowAnonymous] to the controller method returning the image solved the problem for me.
It seems to work okay via css...
I was trying to display a logo at the top of the page and switched it with a div and set the height and width to that of the image.
CSS:
div.logo {
background-image: url("/images/logo/logo.png");
height: 53px;
width: 185px;
}
HTML:
<div class="logo"></div>
I found that with my pages, the images were not showing because they were .gif files.
Rotativa can have problems with gifs.
When I changed the images to .jpg or .png everything worked well.
I think it might come down to basically the ".png" bit being missing.
You could add a mapping like this /nonreg-report/01495344/trend-image.png ยป /nonreg-report/01495344/trend-image and have both of the urls active, why not? That way wkhtmltopdf is fooled and you still have your dynamic image without saving it anywhere on disk. Dynamic urls can work, I do that for live-converting gif2png for wkhtmltopdf.
Also it might help to have an absolute url, which I think you can do with something like this:
src="#Url.Action("trend-image", "NonReg_Reports", null, Request.Url.Scheme)"
If you are specifiying height and width then make sure you should write it in style tag
like <some-tag style="height: 100px; width:100px">
Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.
I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.
This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:
No.
UPDATE:
"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible.
"Redirecting" IS possible.
Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:
TOP WINDOW:
<html>
<head></head>
<body>
<iframe src="http://yoursite.com/iframe_test.html" />
</body>
IFRAME TEST:
<html>
<head>
<script>
window.onload = ready;
function ready()
{
document.getElementById("link1").onclick = linkClick;
document.getElementById("link2").onclick = linkClick;
}
function linkClick(e)
{
e.preventDefault();
window.top.location.href = this.href;
}
</script>
</head>
<body>
<a id="link1" href="http://youtube.com">Link1</a>
<a id="link2" href="http://facebook.com">Link2</a>
</body>
EXPLANATION:
Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.
I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.
Yes, you can, but it's not a straightforward solution and it has some limitations
changing
You can use Web API messages and history API together to get what you want.
Example
Jsfiddle
redirecting
You can use the example above and replace the push history with a window.location.replace
Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).
I created a website that works quite nice but later went over to a friend's house and the website was disproportioned and almost hideous on his widescreen monitor. Without extensive rewriting of the website, is there perhaps a script that resizes my website for those on widescreen monitors, or other alternatives? Any suggestions besides "redo your website properly" welcome. Thanks!
EDIT:
Here is how my website should look like:
http://img843.imageshack.us/img843/4453/22425853.jpg
Here's how it appears on widescreen:
http://img851.imageshack.us/img851/7494/racism.jpg
It depends on how you did the layout. If you did not use absolute or fixed positiong, the simplest way could be to use a wrapper div around your content and give it a maximum width, like this
<body>
<div id="wrapper">
<!-- all the content goes here -->
</div>
</body>
and the CSS
#wrapper {
max-width: 960px;
margin: 0 auto
}
EDIT: If you do not have access to the HTML you can leave the CSS as shown and use this jQuery line (it should work but I have not tested it)
$('body').wrapInner('<div id="wrapper" />')
EDIT: I see you are not familiar with jQuery. Code that should be run only when the page is ready should be wrapped as follows:
$(function() {
$('body').wrapInner('<div id="wrapper" />');
});
Please let me know if that works for you. You can try
$('#wrapper').attr('id');
in the Firebug console to check that the wrapper div has been created.
Set a max-width in your css on the wrapper of the site.
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.