I have a website that allows a user to save text content and then display it as is.
The user can use HTML tags to create his data the way he wants - design, fonts, divs, tables and so on...
To display the data been saved I direct the user to a page with a header/footer of my own and he's data in the middle. The problem happens when the user has some invalid HTML tags or un-closed ones, then it interfere with my own header/footer HTML and the whole page gets messed up.
Is there a way to encapsulate the user's data so it would not harm the page?
You can try to load it in iframe. Haven't tested it, but I think it should work.
you can use iframe with fixed width and height.
The Iframe suggestion are good but was not enough. Because i wanted it to show like it was a part of the page and I didn't know what is the length and size of the user data, the solution i've used is like that:
Created a page that shows the user data alone. Opened it in an iframe which was located between my main page header and footer.
Now for the trick - for when the user has a lot of data, to avoid scroll bars in the middle of the page i have used this script on the iframe onload event:
function setHeight()
{
//get page height
var the_height=
document.getElementById('userFrame').contentWindow.document.body.scrollHeight;
//set iframe height
document.getElementById('userFrame').height=the_height;
}
This way, when the page loads, the iframe height will change according to it's size, pushing the footer to the bottom.
After that just needed to set the iframe border to "none" and the page looks normal.
Related
I am in the process of creating a site where visitors can preview(not THUMBNAILS!) another url on mypage in an input text box and click on"preview" button-
I am using CURL from php to extract the contents of the site
and have divided my page into two halves one for accepting url and the other half which will display the previewed content, basically i do not want image of the url site like GOOGLE.
though the CURL fetches me the contents and I am able to see the content on the preview half what is annoying is the CSS of the previewed html is getting applied across even my page :(
since my knowledge of css is very limited can anyone help me with the following
css of the previewed section must not get applied to my part of the page
How to scale down the previewed site just to fit into the preview section of my page.
thanks,
Jay
Use an iframe to keep the preview site separate from your own. Something like this should work:
<iframe id="preview" src="about:blank"></iframe>
<script>
function previewUrl(location) {
document.getElementById('preview').src = location;
}
</script>
I have a pinterest style gallery. I want to make it so when you click on the images it opens a fancybox with a larger image and then comments and other stuff below it in a box. But I want each image/ image fancybox to have it's own url so people can share the links and stuff. Any Ideas on how to do that?
Thanks in advance
Just use fancybox as default. When the onComplete event is raised, manipulate the DOM and serach for the fancybox container and just append the comments and stuff.
You can change the url in the browser with HTML5 history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
And then on full page load you can get the url with window.location and modify the DOM to fit your need.
There are kinda two ways:
1. like Facebook does: http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page
2. like Twitter does:
you can access and change the #-part of url using location.hash
//example.com/
location.hash = 'foo'; //becomes example.com/#foo
I would go about this by creating a PHP script that takes in the id of the image e.g. outputimage.php?id=123 and then outputs the html of the image, comments etx. This script could be called with a jQuery ajax call that requests the html from the script and then places it in the fancybox div.
Another page called image.php?id= that again takes in the id of the image and uses outputimage.php to display the html in a separate page layout. This page would then be your standalone layout.
I have popup modalbox Iframe which can be open by onclick function using jquery. It's open fine. And in Iframe popup dynamic content is displayed. But it takes some time. I want to put preload image until content of Iframe is displayed. For example:
$('#preloadingImgDiv').fadeIn('slow', function() {});
url ='something.php?somethingname='+somethingname+'&somethingid='+somethingid;
$("#iframeId").attr('src',url);
$('#preloadingImgDiv').fadeOut('slow', function(){});
It works. But before coming dynamic content in Iframe popup box, preload image are disappeared.I need preload image is displayed continuously until dynamic content of Iframe popup Modalbox has been come. And another thing, this preload image is needed to display in the middle of content of Iframe popup Modal box.I have design like that
div html, Iframe, dynamic content coming in php. how to fix it.
I need your hand
Thank you
I'm not sure that i get your question clearly but i think you want to display your loading image untill content is fully loaded. You are calling .fadeIn and .fadeOut at the same time so it becomes visible and invisible before your ajax(or any other) request completed, but you need to call .fadeIn when your loading request started and .fadeOut when it's completed.
Here is a question and answer like yours: https://stackoverflow.com/a/4240660/1241723
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
So I have my own webpage here, which is a sortable thumbnails page. The load() event activates each thumbnail when the first related image is loaded. Since I'm grabbing <img> tags and text content from a hidden div on the page, the thumb activation prevents the user from clicking through to a yet-unloaded image and then waiting while the preload takes place in the background.
The call is pretty simple:
$('#content img:first-child').load(activateThumb).each(function(){
if(this.complete || this.complete === undefined)this.load();});
the .each() catches any cached images and manually triggers the load() event. Worked great and was a fast and lean website. Now, as the site continues to grow, there are over 100 <img> tags in the single HTML file and I'm wondering if there's a conventional limit that I'm approaching. Should I split the page onto 35 different html files? Should I lose the tags and the slick preloading effect in favor of a server-side request for the images on demand?
What's your instinct, as a good programmer?
Well there is no clear limit. You can continue doing the way you have done on your site for as many images as possible.
But it's just that the user might get frustrated while waiting for all the images to get 'activated'.
So in turn what you could do is to have pagination & display say 20 images per page. This way you make the image loading relatively faster.
Also after you load page1, if the user is still in page1 you could start pre-fetching page2. So as the user clicks page2 he sees a very responsive site :)
There is no one rule here. In fact if you see Google Images now a days they do something like what you have done.
You can do it like many Web 2.0 sites do it:
In the beginning, load the images displayed on currently visible part of the page.
Then load other images when user scrolls the page down.