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.
Related
I am volunteering on a website-based project that is trying to make all pages fully operable JavaScript free before adding any JavaScript for enhancements, and I was asked to investigate whether or not a particular scenario could be handled purely through HTML/CSS.
What we have is a form that is populated to help us filter a list of tickets that are displayed on the screen after a page update through a GET action, which itself works fine, but the concern with the current implementation is that the URL cannot be made into a permanent link. The request, however, to keep the permanent link as minimal as possible, is to only send GET parameters for fields that are populated with something (so, suppressing GET parameters for fields that are blank) instead of having a different GET parameter for each form field on the page.
I have thought of several ways that could be done, most including JavaScript (example: create fields with ids but no names and a hidden field w/ name that uses JS to grab the data from the fields), but also one that would be a POST action with a redirect back to the GET with a human readable string that could be permanently used. The lead dev, however would prefer not to go through the POST/redirect method if at all possible.
That being said, I'm trying to make sure I cover all my bases and ask experts their thoughts on this before I strongly push for the POST/redirect solution: Is there a way using only HTML & CSS to directly suppress GET parameters of a form for fields that are blank without using a POST/redirect?
No, suppressing fields from being submitted in an HTML form with method of "GET" is not possible without using JavaScript, or instead submitting the form with a POST method and using a server side function to minimize the form.
What fields are submitted are defined by the HTML specification and HTML and CSS alone cannot modify this behavior and still have the browser be compliant with the standards.
No, you cannot programmatically suppress any default browser behavior without using some kind of client scripting language, like JavaScript.
As a side note, you say "JavaScript for enhancements", but JavaScript is not used for enhancements these days. And no one in the real world would except a decent front-end without the use of JavaScript. I would suggest you simply use JavaScript.
I do not think you can avoid Javascript here to pre process before submission to eliminate unchanged /empty form fields.
i created a site, And added pages to my site, since page size exceeds i need to create pagination in html i have created this method
123
in this way i created
Problem is when i add new page i need to replace all code again like this
1234
ever time when i add new page i need to replace all code is ther a way to do this without PHP
Can sombody help me any idea to do this in html
Do not re-invent the wheel. Use datatables, they provide sorting, pagination (client side and server side), export and a number of additional features.
http://datatables.net/
Include the files and just add this.
$(document).ready(function() {
$('#example').dataTable();
} );
This is a very basic and good example, you should go for it.
http://datatables.net/examples/data_sources/dom.html
This cannot be done purely in HTML. You must use something like PHP, or you could use Javascript.
You can make just one HTML file called "Pagination.html" include all your links there and then include that Pagination on every page using one of the following methods.
You can use Javascript: javascript
Or you can use html5: html5
Or there are also, others solutions to solve your problem like this: other
You better use some Javascript oriented solution, html5 support for including files still very poor.
unfortunately, this won't be possible without using some other technology that is not HTML. You can dynamically generate pages using javascript (JS), PHP or other technology, but not just raw HTML.
You can name your pages something like:
page_1.html
page_2.html
and then whichever editor you are using probably has a search & replace function, so you could use that to speed up things. I hope this helps.
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.
Is it possible to create a drop down list in html with a large amount of data without using
<option>Something</option>
for each content.
For example, I want to make a drop down list with numbers 1-100. Is it required to define each one by one?
Yes I tried the same after reading your question and it is possible to create a drop down list in html with a large amount of data:
I tried using Jquery because according to me it was simple to write and understand.
in your html you just need to write tag with id.
<html>
<select id="select">
</select>
</html>
Now in your Javascript(Do not forget to import jquery) you have to just write:
$(document).ready(function() {
for(i=1;i<=100;i++)
{
$("#select").append("<option>"+i+"</option>");
}
});
In this way you can make drop down list of 1 to 100 in easier way.Hope this helps you :)
You are not obliged to place your data in <select><option>... if you want to create a drop-down interface component. The <select> is a standard, default and definitely a preferred way to do so. But you can imitate its behavior with other tags available.
Now, I see you want to put in lots of data and probably you don't want to do it by hand. HTML doesn't have markup structures that allow for automated content generation, so yes, you have to define all those options in drop-down list yourself. And every separate option has to be inside its own tag.
Now, that would be a tedious task, right? Never fear! Programming languages to the rescue. It is possible can create those tags automatically based on some data, be it predefined, generated in accordance to some parameters, or just random.
I'm not sure why everyone assumed that the question is about creating <option> tags in jQuery... there are many other options available.
Server-side generation: if you are using PHP, Python, or any other language on the server, you can build your <select> structure on the server, insert it into the html and present it to the user. If your data is static - you have a benefit of caching which reduces load on the server and on the network.
Client-side generation: you can use JavaScript to create those options as the page is being loaded (or on user request). Of course if you want to use some JavaScript framework that facilitates the process - you can use jQuery, Prototype, Zepto... whatever you wish to include with your page.
I'm not showing any code here because there's not much information in the question. For example, do you want to build your drop-down out of some predefined data. If yes - where and in which form do you think it will be stored? Will it be static or dynamic? Etc. etc. etc.
If you update your question with more details, then we can update our answers with more information. Thanks.
I would consider creating the markup server side (e.g. using PHP) or with JavasScript/jQuery.
Here's a jQuery example:
var options = [];
for (var n = 1; n <= 100; n++){
options.push('<option value="' + n + '">' + n + '</option>');
}
$('<select/>', {
'id': 'my-select',
'name': 'my-select',
html: options.join('')
}).appendTo('body');
And a Fiddle: http://jsfiddle.net/XffwR/1/
Of course you may not want to go that route, in which case yes you would need to add HTML markup for each option manually, as John Conde says.
Yes, you must define each one in it's own <option> tag.