I've got the following control working called Uploadify. So I've placed the control inside a table. Here's a rough example:
<tr>
<td>
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
</td>
<td> OTHER STUFF </td>
</tr>
<tr>
The control is placed in a div called "holdcontrol". It is not possible to use hide or attr to disable the uploadify control because of its flash content. The simple solution is to simply set the height of the div to zero.
So I used $(#holdcontrol).css("height", 0); - so this "disables" the control which really 'hides' the button.
The problem is that it only partially closes down on the Uploadify control - Half of it - Which means that I can see "half of the control button". When I want to use the control again, I issue the command:
$(#holdcontrol).css("height", null); - that rebounds and it works fine. It's the setting of the div height inside the table cell to "hide" or to "disable" the Uploadify control that is bugging me.
Any thoughts or tips to truly setting that div height value to 0?
thanks and Happy Holidays!
After uploadify is loaded it changes your HTML code using JavaScript. In one of my Projects it adds an object outside of #holdcontrol so hiding #holdcontrol won't do anything.
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
<object
width="226" height="24" type="application/x-shockwave-flash"
data="http://www.example.com/ext/flash/uploadify.swf"
id="flashfileUploader"
>
<!-- even more code-->
</object>
As you can see the object gets the id #flashfileUploader - so if you just try to change #flashfileUploader instead of #holdcontrol you should be fine.
You can find this kind of undocumented stuff using FireBug (https://addons.mozilla.org/de/firefox/addon/1843/).
so long,
Tim
Related
I have a s:checkbox inside a html div. When the code is run, the checkbox is outside (both) the div and the divs seem to be empty and nonexistant. Why is this occuring and how can I fix it? When I place random text inside either div, the div contains it. I set the background color to red so I can detect the div.
<div id="outer">
<div id="inner">
<s:checkbox name="chBx" id"chBx" fieldValue="false" value="true" label="Check
This" />
</div>
</div>
Like described in this answer (that you should consider upvoting too), Struts2 generates (or not) a certain kind of HTML when rendering Struts Tags, basing on the Theme you have chosen.
The default one is xhtml, that will generate a lot of stuff for you. It may be handy, but also annoying, according to how you work. Personally I prefer to generate the HTML by myself, and then I use the theme that won't generate almost any HTML: the simple Theme.
Note that when working on big projects or with multiple projects with the same, particular needs, you can also write your own custom theme (for example for generating security tokens automatically).
You can use a theme globally (in struts.xml)
<constant name="struts.ui.theme" value="simple" />
or locally to a single tag / form:
<s:checkbox name="chBx" id"chBx" fieldValue="false"
theme="simple"
value="true" label="Check This" />
In this case, you may need to write the <label> object by yourself.
I am a newbie to html and css so sorry if this sounds dumb.
How do I create a clickable area that contains two images, text, and whitespace that when clicked, opens ANOTHER html file within the page?
So far I got an html file to appear inside an html file like this:
<object data=EXAMPLE.html width=100% height=100% /> Error </object>
But the problem with that is that you must scroll within the content box to view it, and I would prefer if it expanded the content box indefinitely downward based on how big the html file was.
As #Jarred Farrish pointed out: Regular frames do what you describe. You don't need object elements.
I believe this question becomes a duplicate of this question.
You can make a "button" by creating a div, placing the other elements within the div, and setting an onclick handler on the div itself. You are free to have as much "empty" space, because the emptiness is really the div.
<div class=my_button onclick=my_button_press();>
<img src="..."></img>
<img src="..."></img>
<span class=my_text>My text here</span>
</div>
<iframe id=my_frame></iframe>
<script>
function my_button_press() {
document.getElementById('my_iframe').src = "...";
}
</script>
Check this example http://jsfiddle.net/b6sdunqj/1/.
You'd want to combine the instruction in the question referenced above with my_button_press() to complete everything.
i'm using bootstrap CSS for my application. I have asp:login control with "remember me" checkbox.
my problem is there is a space between checkbox and the word "remember me". i removed all checkbox css from my css files, but still couldn't fix the issue.
I tried this css code to remove the white space
.chkbox{margin-left:0px;padding-left:0px;white-space:nowrap;}
and this is my Login control
<div class="contact-address span3" style="/*width:250px;*/margin-top:15px;padding-left:5px;">
<h3 style="color:#1872AB;font-weight:normal;">LOGIN:</h3>
<div class="login">
<asp:Login ID="user_Login" runat="server" OnAuthenticate="user_Login_Authenticate" RememberMeText="Remember me" TitleText="" UserNameLabelText="Email:" PasswordLabelText="Password:" OnLoggedIn="SAP_Login_LoggedIn" >
<LoginButtonStyle CssClass="con-tbutton"/>
<CheckBoxStyle CssClass="chkbox"/>
</asp:Login>
<table style="width:100%;">
<tr><td style=""><label>Forgot your password</label></td></tr>
</table>
</div>
but still, it looks like the image below
any ideas?
I just quickly made a sample aspx page, and it works just fine:
This is unstyled. As you see, the checkbox aligns just fine. I don't see any bootstrap styling in your example, or classes for that matter. It might be the closing </div> tag you're missing... This is the best I can give you without a live html example from you on JS Bin or somewhere simlilar. Try what I suggested in my last comment.
I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrameļ¼
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/