One of the features of a website I'm working on is that you can "maximize" the contents of the page, basically removing all the outer elements of the page, navigation, banners, etc.
This is currently done in what seems like the worst possible way:
<%
if (shouldBreakFrame)
{
%><!--#include file="header.include" --><%
}
%>
// Contents of page here
<%
if (shouldBreakFrame)
{
%><!--#include file="footer.include" --><%
}
%>
The footer is basically just closing tags from the header.
So I want to clean this up and am working on a master page, but I'm not sure how to properly "remove" the HTML elements that wrap the contents when we want to maximize the page. It would be easy for tags that open/close on one side or the other of the content, but what about div/tables that open at the top and close at the bottom?
Edit: To clarify exactly what the output looks like and why I can't just "hide" the elements with JavaScript code or the .Visible property here is what the output might look like and what it should look like after the surrounding elements are hidden:
<table>
<tr>
<td>Header</td>
</tr>
<tr>
<td>
Page content here
</td>
</tr>
</table>
And after hiding stuff all that is left is Page content here.
So if I just hide the table, the content would disappear as well.
You have a few options here, both require the elements to be already contained within the markup (unless you want to go down the ajax route).
The first would be using CSS to show/hide elements via the display:none attribute thats explained here. However I would have to say may favourite method would be to use jQuery. This contains two functions, show() and hide() but interestingly also includes a toggle() function which will show/hide elements depending on their current visibility. This should allow your code to be tidier and wouldn't have to worry about if(shouldBreakFrame). I found this interesting article on it which should get you started.
The only other option I can think of is either duplicate the code (in the same masterpage) or have two seperate masterpages. After all a masterpage is basically a template, and thats the part you want to change.
Related
Here is my situation:
I am doing an ASP.Net MVC Web application and one of the page is not behaving normally.
Usually this is what it renders (visually):
Navbar (I'm using Bootstrap),
H1 Title of the page,
Body of the page,
Footer
But I have one page that behaves like this:
Navbar,
H1 Title of the page,
Footer,
Body of the page.
I tried to set a "Hello world" after my table (in the code) and this hello is at it's rightful place (between the h1 title and the footer).
The only difference with other pages is that this one is a table that is generated with a list of models. It is generated using the usual
foreach (var item in Model)
{
<tr>
Display each property of the item
<tr>
}
The model (when debugging) is not empty.
Any help will be greatly appreciated.
The error was simple enough, it failed the html validation, an end tag was missing. To fix it, simply use an online HTML validator.
Could it possible to put element in if function in ASP.NET like in ASP.NET MVC Razor view?
Maybe something like this :
<% if (Visible)
{
<div>I want to determine here</div>
} %>
But this will show error... I knew it could solve by using javascript or div with codebehind:
<div style="<%=isNotGame? "display:none":"display:block" %>"></div>
or:
<div runat="server" id="codeBehind"></div>
CodeBehind.InnerHTML="...";
Q1: Is it possible? If yes, how?
Q2: Why I want to do this is because I think if I don't want to show an element, it is better not to create the element than create and hide it, is it correct?
Yes it is possible, try this instead.
<%
if (Visible)
{
%>
<div>I want to determine here</div>
<%
}
%>
The 2nd question, in my opinion if you don't need it then there is no reason to take up the resources. Keep in mind that this is all data transferring over the wire. Depending on how many wasted elements you create it can add up fast and depending on what you are doing it may have a number of adverse affects. Many people pay for data on mobile devices. Search engines could penalize you for performance losses due to high volumes of data you never cared to send anyway.
As your original question says about razor syntax, it can be done as -
#if (Visible) {
<div>I want to determine here</div>
}
If you want more information on razor syntax, Check this
Answer to your question 2 is tricky. You can render whatever elements you want and take decision at code behind but if you want to toggle some elements by specific conditions of your scenario then it is better to do it by Javascript as for toggling requesting server to do it for client is bad approach.
It is possible to generate HTML in your razor view, as per your condition
#if(condition){
<div>show this div</div>
}
And about Question2, do not render unnecessary . But in case you need that HTML to be made visible depending on user actions, then render the HTML, use CSS to hide the same. And then on client side you can make it visible.
Does anyone know of a way to contain a nonbreaking space in an html tag to allow me to remove it based on conditions tested during runtime in the code behind?
Basically why I need this: if a condition is satisfied I will have 4 buttons, but if it's not only three. I can remove the button but then I have 4 in-between 2 of the buttons instead of just 2 .
Something like the <del> tag would work if it didn't strike through the text.
Basically I have something like this(propery values not included for simplicity):
<td><button />  <button />  <button />  <button /></td>
I can't have the function in the actual button tag because then it will render the   instead of the button text.
EDIT:
I did end editing the   tags out and using css. I appreciate all of the responses.
The main reason that I was apprehensive to go that route to being with is because trying to get my client to approve anything is like pulling teeth, but I got them to approve the changes and adjust the budget.
Thanks again!!
Does it need to be ? Based on your description of the requirement, it sounds like a bit of CSS might work better:
button.myClass {
margin-left: 1ex;
}
Much simpler than trying to put logic in your view layer (even if you are not strictly following the MVC pattern you should still try to separate your presentation and business logic as much as possible).
You should not use for layout.
If you want to output some HTML content directly on the page without controls - you can use Embedded Code Blocks:
<button/><% =GetNecessaryNbsp() %><button/>
Where GetNecessaryNbsp() in the page class would return necessary number of .
I need to display part of the exposed form in my page's sidebar, and the rest of the form and content in the $content area. There's really no good way that I can find to do this. I sort of got it to show up in a way by making a "block" view with "exposed form" set and then trying to only show the part that i needed through .tpl files. The problem is that then, when the submit button is clicked (the submit button is in the $content area), then the filters that are in the sidebar are not taken into account.
Some lateral thinking... Why not explore CSS-only options? You can place that form element playing with position:absolute ? Or (considering is a right-sidebar) float:right and then some negative right margin to push it to the sidebar? If you are using 960 grid system, play with pull and push classes.
First I am going to answer your question, then I will explain why you are asking the wrong question:
If you build the form outside of the formapi, you might have some luck. This will get upgly and will require you to take a lot of extra care about attack-vectors such as mass-assignment.
views_some_view.tpl.php:
<form name="input" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
my_custom_exposed_view.module:hook_block()
City:
That would make a form, which in most situations will start with <form>, have some input fields, then have a lot of random HTML, then some more input fields and then the closing .
As you may know, a <input type="submit" value="Submit" /> will only post everything of the form tags it is enclosed in. The submit button in the following HTML:
<form name="input_1" action="/link/to/view" method="get">
Country: <input type="text" name="country" />
</form>
<form name="input_2" action="/link/to/view" method="get">
City: <input type="text" name="city" />
<input type="submit" value="Submit" />
</form>
will only send the City. These are not the droids you are looking for.
It will need to be one, big form, but since everything between form and /form is very dynamic, and contains a large quantity of HTML, including potential other forms, this is really not what you want. Moreover: a blocks appearance (shown/not-shown) is controlled completely independent of the content. You will need a lot of sturdy code to ensure the block a) never shows up when the starting form tag is not present, and b) the block will guaranteed to be shown when that opening form tag is present. Else you have not just invalid HTML, but broken HTML that will truly render your page unusable in most cases.
You simply don't want a part of the form in a block and the other part in the content.
However, you want it visualised as if one part is in the body, the rest in a sidebar.
The good news, is that with HTML presentation structure are independant. That is where your solution lies.
Give your form-fields good ids and classes. You could use a hook_form_alter to change existing forms, but you probably simply just want to create the HTML for that entire form yourself. The theme layer allows that.
Use CSS to pick out either single form-fields by ID and position:absolute them into the correct place. Or pick out classes of fields by CLASS and position:relative them into the correct place.
Make a simple identification-routine that allows adding a class to the body-tag. (see below).
Add some CSS to shift the sidebar lower, making space for the form-fields to be moved in, when that class is in the body-tag.
<body class="<?php print $splitform ?>">
function my_themename_preprocess_page() {
if ($GET['q'] == 'path/to/view') {
$vars['spliform'] = "splitform"
}
}
From the above explanation I am assuming that you are printing same form in block and in content area and you are hiding some part of form in page.tpl , if this is true then you can use hook_form_alter() in your custom module then
Store the value of the form element(present in block) in global variable.
Now use that global variable and set form element(present in content area, this form element is not visible to user).
Provide more information if you implemented other way.
Regards,
Chintan.
There is a related issue here:
https://drupal.stackexchange.com/questions/3827/multiple-copies-of-views-filter-form-exposed-filters
which describes how to duplicate your filters. However it seems like an ugly hack.
A bit cleaner seems this solution mentioned in #6:
http://drupal.org/node/641838#comment-3247748
Haven't tested it out, but it looks good.
It will still give you some overhead (duplicate views) but it might be the easiest way doing this using views.
On the other hand you might write a module and build your own custom filter block which hooks into your view. Here is a blog post about this:
http://www.hashbangcode.com/blog/creating-custom-views-filters-exposed-form-element-drupal-6-561.html
If you use something like context you could get the exposed filters block to display twice in the same page. You could then use CSS to hide the fields you don't want to do display in each form.
The fundamental problem you're having is that to have the two forms in different places, they'll each have their own form element - when a submit is triggered, only the form fields within the same form element are sent. You need to move them into one form, or rely on JavaScript to gather the fields from both forms and construct the post.
You could create the block as an empty div and have javascript from the main page populate it with the secondary filter form and whatever else you need in there. Again, you could use javascript to copy the form values from the block form to hidden fields in the main form on submit. That gives you all the control you need from one place (the node output). Only caveat is that it relies a lot more on javascript to join it all together.
I have two tables on a webform. On a button click I want to hide one and show the other. I gave them both an Id and I want to set the tables' style="display:"
I tried this in javaScript using a function and document.getelementbyid(id).style.display='none' but it did not work.
any ideas?
Solution:
OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;"
I am assuming your tables are .net controls? If so, passing 'id' is not enough as .net does not assign the same server id as client-side id.
You need to access the ClientID property of the .net control server-side to get it's real client-side id:
MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);
The above code shows how you would attach some javascript (please don't call it java!) to a .net asp:button called MyButton and then have a client-side click on that hide a control called ControlIWantToHide.
Note: the above may need tweaking to make it work across all browsers but the .net stuff is the important factor here and I suspect the ClientID is what you needed all along.
Based on your responses to comments, the elements you are toggling are not .net controls but the button triggering them is, so: (based on the function posted by ebrown):
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
You could trigger the toggle of an element in your page by attaching the javascript event handler server-side:
MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";
..which will display the element with id tbl1 and hide the one with tbl2. This will work providing the elements you are toggling are not .net controls - ie, they do not have the runat="server" attribute. Remember, even though you are adding the javascript code to the asp:button on the server, it is only getting executed on the client when they click. Don't forget to return 'false' as shown above to stop the default post-back behaviour of the asp:button.
I think this should get you on the right track:
<table id="tbl1" onclick="javascript:show('tbl2');hide('tbl1');" >
<tr>
<td>
table 1 stuff
</td>
</tr>
</table>
<table id="tbl2" onclick="javascript:show('tbl1');hide('tbl2');">
<tr>
<td>
table 2 stuff
</td>
</tr>
</table>
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
Also make sure your ID's are unique, I noticed you gave a tr element the name 'tbl1' in your example code. Only the tables need to have the Id's
Edit: this will work for hiding Tr's instead (Just give the tr a unique id and use the same approach). However I believe if a table has an on click event you won't be able to reach the row's onclick event, so you will have to use one or the other.
Asp.net will change the id of any server tag using run="server". If you're trying to hide them using javascript you will have to use the id that asp.net spits out (You can see this using view source). Alternatively you could wrap the table in a div and show/hide the div with your usual method.
If you're using an asp:Table and trying to hide the table in the code behind you can use the .Visible property to achieve the same effect on postback.
Use document.getelementbyid(id).style.display="none" to hide
and document.getelementbyid(id).style.display="block" to show
If these are purely html based tables and not then try using -
document.getElementsByName('table1')[0].style.visibility='hidden';
or
document.getElementsByName('table1')[0].style.visibility='visible';