A question recently came up in my programming class as to whether it would be possible to create something similar to an iframe but using only divs and javascript/css. The instructor said it was possible, but since I'm new to the whole deal of programming I'm at a loss as to how to write such code. Does anyone have a quick example as to how this would be done?
If you're talking about displaying external content in the page without the use of an iframe, you can use AJAX to load content from another page or even from a service and render it into a div. See this explanation and demo on CSS-Tricks.
Most likely your instructor was thinking of using something like
<div style="width:500px;height:500px;overflow:scroll;"></div>
Or
<div style="width:500px;height:500px;overflow:auto;"></div>
Both of which can be used to produce a fixed-size div with scroll bar overflow. You can even load content from another page using AJAX and insert it into the div. However, unlike an iframe, they cannot be used to display content from another domain (unless it allows CORS.)
I would say it is possible and iframe is essentially embedding a content resource from another location be it on the local domain or external domain. Replicating this could be easy or difficult in the type of request you are wanting to make a simple way using jquery would be to have something like this
$.ajax({ url: urlToResource, success:function(data){
$('.contentDiv').html(data);
});
<style type="text/css">
.contentDiv {
overflow:auto;
width:200px;
height:200px;
}
</style>
<div class="contentDiv"></div>
Again this is all dependant on what type of resource and whether the remote domain has an ajax block on it there would be another way to get round this though with a simple php file;
<?php
print file_get_contents("http:://pathToResource.com");
?>
That should be enough to start investigating yourself. But as a tip try and avoid ever using iFrames they are more hassle than they are worth and are quite dated in regards to current technologies such as html5 etc.
Related
** This is just a theoretical question **
If I have a website containing, for example:
<head>
<style>
body {
background-color: red;
}
</style>
</head
<body>
<p>blah</p>
</body>
And embed it in another website, that has a white background, using an iframe, could I use the css in the iframe to format the current website to give it a red background. Thanks in advance
Personaly I think it is not possible directly. Because the DOM-Elements are different. Your own website has some DOM-tree you have formated it with your own CSS.
The included iframe website has an own different DOM-tree.
I think the iframe is not the right way for that. If it's possible, you can read and parse the output source code of your iframe website and modify it via php.
Or with Javascript Inspired from here:
How to change content of website loaded in iframe?
For php you can use that snippet:
$iframe_source = file_get_contents('http://www.example.com/');
Look here at the php documentation for more information:
https://www.php.net/manual/de/function.file-get-contents.php
Now you can echo and modify also the DOM-tree of the iframe-page. You've got the content and output from the page. You only need to echo $iframe_source.
Than you can use your CSS file and take the .class or id of the element which you want to format.
It has some advantages but also some disadvantages:
advantages
content of iframe is also indexable
better than iframe
you can modify it
its JavaScript free
disadvantes
you need php and an server which allows file get contents
maybe some dynamic elements in the iframe wont work
Update because it's some special case:
itty.bitty.site is very different idea from normal webpages, you can finde something about the technique behind here:
https://itty.bitty.site/#How_it_Works/XQAAAAK4CgAAAAAAAAAeHMqHyTY4PyKmqfkwr6ooCXSIMxPQ7ojYR153HqZD3W+keVdvwyoyd+luwncAksxo8PWJs+831jtAVty8rDpGXmyebtxMTP3PSa4g8/593sWue8MDcpOgi1bQyEtfa0JNQZ6T1I/xyNULg1rpwWgE2Y9BnqDq8fDN1N+nd58bizHxZrkeBhdg8inSQ/xKDX7JxpEnuwOAh4FOfn3+EHSxzhJsdQjZfh3lk4tTCDexgFND30Ea3NmmJGK84pdMtEVlcmKC5lrnUNmgoJa3QFsHJkr5595tk03idElTDVhmcQI3jSvPrkTVFTnSLeARVZXV/EUiF0y7+cR3bVkLoTkamZWDMiCTY2Xhv0LdNqWlb/xxyk6takRLrNnS8DkifXEbevTbJOUamuK7uy55kL61btF+/lYNHLWGbh1ckCYglReWWMlM0k4uuqM24okcS74tHtOW3Y5HZYBmPvRR+ItSrZPvbj3kbztOrWapUp7nAzgfIjYoBV/4xOXpFbbaHRft5GICE5Mr1PQhmW/nB63nTpnR+7UdHag8WIMa7nf+NvTPKC5MmQnKzhaMuqEnwGgcM5vkWbekimBclkGJwTGeyhxL7N6hivY+KS3H7vcOSFHXGr7K3PBIQZbywqQiimQ6B6zu4RvH7ZZ3ZN++ii00HKM0FPMcNHuOnL99vAxEl6TEFnx4J4+fwzJwNbuut30TFMBgcrE4iKAGncFIHmvOstFWxE+VlvTLC+uy6XArTO8BdfmbByGiyFv8Al7HqLAzGShdGWNzJ6cPpRwMAmWl5GNRA4qwjQAlfF1dtTwfIXSWOL7AyRwxPs27uY2cvVHCdmVVTNDYiTzHeKX6D9e2ApDRFD6pgcA9VMVP6UeOdVdmwRJ+iLTwQuCdLbVWzQ5T2i/chlihD+RawylXJQ8bKvxW9egXGcrgR5dyKaZCr8nBrArAgtRLR7PdqBQQbr5VodBvPc2FP3fZ6UuQVI1Kg4KcY44GIU5vnlM029TU+ibO2iSX3FhusTFhyOxl4TjjkuXBqA1V7Ha/Op2m8QZaP68p7AAZPOcTHAwP5PxENqIf8qS2aaG2Fiwp5rNED3LhPMjtN54klBYylr5hSAr0TD8J+XwFds8Gq9LToLE8Cq7XNJnE9RqNudIozaMWkfc6PRFjp/aH87x97nPDelKKHGyUEnGJyobw45BOhJMKzZST0VA5v+uQQo0djDXc0UXwzNRIWeBLuUJQpaXZY2gZMuLiSERgyDHg2MBI6trWsyb3ZWbFS4rm8Gq2dxfih3Kj6MdNapUo/jltQ31nx2LepJCQe9DNNF6JEMecls6dHTAM2RfHxEODSSKkF17FfjRLRAfxCK927UvizAxxggP5S/HrX6mGc5xonBy3StLd16thiAG860IdvFyBKfE6+CIhe2jzIwIofNiBILYlKA61vKkjlfZjqsUGDLi426U/Y8bdpxfg7FX1gqNEHeVM17dlBTO7pNOnKyeM2xmLoE7lr92/VIrxJ2OqNfcHu9XjrD6l71vU083VwwAq8Vencm9xLAlDyy3/6BB0kRBiJbjayYrLUbQyMGTFfEvOPmc/zJjfdnqHmg5O/0kuzf2+w5CHD426iPngjmiTo5Snlf+qW8emK/ltnQQIv2ufykH+Px3XZM+zsOclAyHI5MbCKBKeT6j5geCiz3uqci1w5ZlpRjtJWUT6zCj8Fx1eg4F4ov51gaODKV+QQWeFJSyuVTm3Nu2i7AbhKikNzb3RBeQinEh9KrhHc+o4JGezOU55h1UZtonB0+J5dfBRqHnc+6HaXfTmcLrMZjWErq15cBmC0Kx6BNyqP3uGhMUSF+OuIzffEX9fGUNDpUtCjKdbml8uF43e4fN8o10TxYkbggTcyYKI+xWHMyKM2tjOideyDwt33minfEy/JgSLsihBnBua9sfXCg32/+i2okk= there is some base64encoding ans some differnt algorithm. Maybe you can ask the dev directly on
Maybe you can use some javascript to decrypt the base64 encoded strings:
But if you read the code with file_get_contents, you only get advice that you should activate javascript. That won't work ;(
The source of this itty-bitty you can find here: https://github.com/alcor/itty-bitty
I want certain content on the website (data tables) to be available for including in other pages (like articles) on the same web site. I imagine the "Paste this code into article where you want the table: [..]" route.
I don't want an iframe, I want the html directly inserted (I already have the GET API that returns html table as one of the possible formats).
Is there a way how this is intended to be done in HTML?
I have looked around another questions but those seem to mainly struggle with CORS which is not an issue in my case.
My naive attepmt would be to make embed code like this:
<div
class="replace-me-by-src-content"
data-src="http://the.long.url" >
</div>
And the loading would be done by some ever-present javascript that would take care of each .replace-me-by-src-content element.
Is there a cleaner way without using javascript? You know - we can directly insert images or stylesheets by just providing the src attribute in certain tags and the browser takes care of doing the GET request and inserting the response. Can the same be done for plain html inserts?
You can use object to load the external page.
<object type="text/html" data="http://www.example.com" style="width:100%; height:100%"></object>
Or else you need to use jquery.
<script>$("#testLoad").load("http://www.example.com");</script>
<div id="testLoad"></div>
<object type="text/html" data="https://www.example.com" style="width:100%; height:100%"></object>
I am making a website which will have lots of photographs. When a user clicks on a particular photo, a new page will be loaded with that photo being displayed bigger in size. There is a next button which will take the user to another page where there is another photograph. Therefore, my website will have lots of sub webpages( a little more than the number of photographs I have on the website). So is it usually how these kinds of websites are made,i.e., with lots of webpages or is there any other alternative for it?
No, that's not the usual aproach, al least on these days.
When we encounter with a similar situation like your case, we usually try to make it dynamic.
For example, if you need to show a lot of photos with the same markup and format, maybe the best option is to have a template with a variable.
The variable will be the photo url and the template will be everything surrounding it.
The page is the same, but only the photo changes.
There are a lot of advantages of doing this. Mainteneance, simplicity, work-load, cache...
Of course that can be use in another cases, like viewing a new details, when you would have only a ViewNew page, and you pass a parameter with the identifier of the new so you can show the correct request.
There are plenty ways to achieve this, most of them require server side code, to handle and process the request, like:
PHP
ASP/ASP.NET
Java
ColdFusion
Perl
Ruby
Phyton
...
But, some of this operations, could be also achieve by javascrip, a client side script code.
You could work with pure javascript or use a framework to make things easy and compatible. Here's some examples of javascript frameworks:
jQuery
YUI
Mootools
Dojo
Midori
...
I don't know if you want a particular examples using one of this languages or only know alternatives. If you need examples or need more information I'll be pleased of provide some.
Also, It's common that even if you are using a server side code, use javascript too, because can handle the behaviour on the website and/or make ajax request for asyncronous requests.
EXAMPLES
JavaScript simple:
jsFiddle
HTML:
<div>
<button id="previous" onClick="previousImg();">Previous</button>
<button id="next" onClick="nextImg();">Next</button>
</div>
<div>
<img id="imgViewer" src="http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-1-icon.png" />
</div>
JavaScript:
var imgUrlTemplate = 'http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-$number$-icon.png';
var imgCounter = 1;
var imgViewerNode = document.getElementById("imgViewer");
function previousImg() {
if(imgCounter > 1) {
imgCounter--;
imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
function nextImg() {
if(imgCounter < 9) {
imgCounter++; imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
If you have 1 html page and in that you write the PHP include 'photographlink' in the body with a case system of some sort. It will use 1 html page and it will include a different photograph depending on which photograpg is clicked
http://www.php.net/manual/en/function.include.php
I think the better way is to use javascript, my tip is to use jQuery framework to dynamically load and visualize images. You can find in the web some plugins that can simplify your life.
demo of one plugin
I would like to be able to show some values on the page but hide them in the page source. Im pretty sure this is not possible, but i figured i would ask.
Edit
I am writing my own verification system to prevent hackers/spammers. Im using encryption when passing the data, but the original value can be currently viewed in the page source ( thus someone can write a loop on the source and pull the data ).
Officially as per your tags not including javascript: No...
However, it's possible to write to the DOM after load but probably not going to achieve what you want in the end.
You can do something like this:
<div id="something">
</div>
Then on page load use javascript in your footer to inject the value of that div:
<script type="text/javascript">
document.getElementById("something").innerHTML = "This is a previously hidden value";
</script>
This will write it to the dom after load and not write it to the page source. The real question is what are you actually trying to do? If you want to totally hide something then this is pretty much just an inconvenience. Anyone wanting to drill it out will be able to track this down.
If you update your question with your real intentions then maybe we can offer a better solution.
EDIT
As per your edit that you want a validation system that does not display the original values.
One option is to store the values in a database and only pass the reference id of the row to the form, assuming that's what you mean. You can do all your processing on the server side and minimize the amount of sensitive data passed to the client side.
The immediate answer is no, this is not possible -- because the browser must receive anything it intends to display.
With that said, depending on your intentions there are ways to display content to the page but hide it in the source.
One common place where this is an issue is with emails that you wish to hide from spambots, but need to display to your user -- if this (or something similar) is the case, I present a couple of solutions:
Use HTML character entities to obscure words: See here.
Use Javascript to dynamically generate it
Use HTML encoding: Here is a nice tool.
Use a plugin such as SilverLight with DRM: See Here.
Serve an image (note, some spambots know how to use OCR)
Use something like reCaptcha mailhide
At the end of the day, the user will almost definitely be able to copy whatever it is you are trying to hide - but if you are only trying to defend against spambots or automated tools, one of these options might work for you.
The way to do this is to have a <div id='fillme'> (or some other container) on your page, and then use AJAX to populate it with information after the page loads. That way, when someone clicks on "View Source" they'll see the contents of the html (or php or whatever) file that was loaded, rather than the end result after the javascript runs. jQuery has wonderful AJAX functionality, and you'll end up with code like this:
$.ajax({
type: 'POST',
url: '/server/side/script.php',
dataType: 'json',
data: { thing: value, thing2: value },
async: false,
success: function(data) {
$('#fillme').html(data);
},
error: function() {
alert('oops');
}
});
Since the page source is all the data a browser needs to generate everything on the page, it isn't possible no.
Ofcourse you could show images instead of values, isn't directly readable from the source code. Or use a html5 canvas or something.
Unfortunately, the short answer to this question is, you can't. There have been various methods put forth, but all of these are easily circumvented. In the end, the only sure fire way to make sure no one can steal your source code is to never put it on the Internet at all.
I have a web page that allows users to insert form input objects with a label. When they add a new object I automatically add it to a 2 column table, the left column is the label and the right is the form control.
I want to give the user more control over how the page is layed out. I was wondering if there are any examples, patterns or suggestions that would help me achieve this. The only example I found is in Liferay, where you can choose different layout templates and then position portlets on that page according to the layouts and ordering.
Update:
I would like to persist the layout they design.
I already have the form itself persisted. The HTML is not persisted, I generate it on the fly when the form is requested. I would like a way to also persist the layout of the form as well.
I am not looking for anything too detailed. Mainly just thoughts and suggestions.
Thank you
Here's how I've done something similar in the past using the .sortable() method. Use jQuery to keep track of the data that has been rearranged. Ajax the order to a database field, which can then be recalled at a later time. The database field would end up with something like "42,12,6,4"
function saveSortChanges () {
var qString = $("#sortable").sortable("serialize"); // this should produce something like 'artOrder[]=5&artOrder[]=27&artOrder[]=3
$.ajax({
type: 'get',
url: 'ajax.php',
data: qString,
success: function(txt) { }
});
}
$("#sortable").sortable({
cursor: 'move',
update: function(event,ui) {
saveSortChanges();
}
});
and the html is like
<div id="sortable">
<div class="editindex" id="artOrder_22"><!--stuff--></div>
<div class="editindex" id="artOrder_12"><!--stuff--></div>
<div class="editindex" id="artOrder_4"><!--stuff--></div>
</div>
The easiest and most secure way to do this would be via jQuery or another JavaScript library. Check out jQuery UI and YUI. Both feature widgets which allow repositioning, resizing, and other customizations. It grows more complicated if you want to make the user's changes persistent, however.
Do you have a login system? If so, I guess you need to have a separate table where you store user preferences in the database.
Else you can use cookies or SESSION variables as per your needs.
A clean way is to have separate CSS files, and just store the css file ID/name in your session variable (or db table). Let the main HTML that you emit remain the same, just change the css rel link (dont use inline css).
There is a way to have CSS with parameters (I forgot the technical term), but apparently IE has stopped supporting from IE9 onwards, so it might not be very cross browser compatible.
JP19 had very good general advice.
What are using for your back-end? If you are using ASP.NET, because they have Personalization and Themes that are specifically designed specifically for this purpose. It may be worthwhile to examine Personalization as well as ASP.NET WebParts to get an idea of how to implement this.
Take a look at DropThings. It might have what you are looking for.
I think layout is mainly about some css attributes, like width, height, position, float, margin, padding, etc. you can let the user edit these attributes and stores them with the input object in your persist layer.