I'm trying to make a better looking memberlist for my website. http://www.pimpkings.com/memberlist
<table width="100%" rules="cols" border="1" cellspacing="2" cellpadding="1">
<colgroup span="5" </colgroup>
<tr>
<td class="{memberrow.ROW_CLASS}" td align="center" width="200" valign="top" border="0" cellpadding="0">
<span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>
<div class="avatar mini">{memberrow.AVATAR_IMG}</div>
<align="center" border="0" cellspacing="0" width="200">
<center><font face="verdana" decoration="yes" size="2" color="white">Information</font></center>
<br /><font face="verdana" size="1" color="green">Interest:</font> <br />
<span class="gen">{memberrow.INTERESTS}</span>
<br /><font face="verdana" size="1" color="green">Join Date:</font> <br />
<span class="gensmall">{memberrow.JOINED}</span>
<br /><font face="verdana" size="1" color="green">Last Visited:</font> <br />
<span class="gensmall">{memberrow.LASTVISIT}</span>
<br /><font face="verdana" size="1" color="green">Post Count:</font> <br />
<span class="gen">{memberrow.POSTS}</span>
<align="right" border="0" cellspacing="2" width="200">
<center> <br /><font face="verdana" size="2" color="green">Contact</font><br /></center>
{memberrow.PM_IMG}
{memberrow.WWW_IMG}
</tr>
</td>
</body>
Problem is when I add another
<td>
It makes it duplicate the information I am calling upon. I will actually make the code the way i am talking about so when you visit the site you will see what I am talking about. I just don't want it to duplicate any members information. so basically
Member 2. Member
Member 4. Member
Member 6. Member
Is what I mean
not
1.Member 1.Member
2.Member 2.Member
...
Is there any way possible to do this? I am using a forum website and i have access to the CSS stylesheet and where this code is. Maybe a Javascript code??? Please help asap for the code I am doing is for an open site but is needed for a soon be opened site that is being paid for. Please and thank you everyone.
Also any way of making a background image repeat for the members background table??
I'd Like to have 3 columns made that is calling on the variables listed in the code without repeat.
Thanks again
You shouldn't use tables. Welcome to the world of CSS floats. Here's a shiny new example for you:
HTML
<ul class="tableHold">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS
.tableHold {
overflow: auto;
}
.tableHold li {
float: left;
width: 100px;
border: 1px solid black;
}
Here's some more information on how things work.
Here's a fiddle to play with.
HTML
<div class="tableHold">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
</div>
CSS
.tableHold {
overflow: auto;
}
.tableHold div {
float: left;
width: 100px;
border: 1px solid black;
}
Try this on http://codebins.com/bin/4ldqpak
Related
I am not sure of the best way of asking the question I would like the answer to but I will try my best. Please let me know if I am not clear or you need more information understanding what I want to achieve.
Currently, I have two tables one containing peoples name (represented by person1, person2 ....) and other a comment section. Please have a look here: https://dl.dropboxusercontent.com/u/53441658/peoplecomment.html.
The code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PersonComment</title>
</head>
<script>
function toggleTable() {
var myTable = document.getElementById("commentfield");
myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
}
</script>
<body>
<table width="300" border="1" id="people" onClick="toggleTable()">
<tbody>
<tr>
<td id="cell1"><div> Person1</div></td>
<td id="cell2"><div> Person2</div></td>
</tr>
<tr>
<td id="cell5"><div> Person3</div></td>
<td id="cell6"><div> Person4</div></td>
</tr>
<tr>
<td id="cell9"><div> Person5</div></td>
<td id="cell10"><div> Person6</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="commentfield">
<tbody>
<tr>
<td id="comment"><div contenteditable> Your comment here</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Each cell in the first table, containing peoples name contains a function that toggles on and off table 2 the comment section (commentfield).
Aim of this table
When user click on cell it should allow them to put comment in the comment section and bind that comment with the cell they clicked and not sure this comment on another cell when clicked.
What I want to achieve:
I want to share the comment section between all the peoples, so say for example, if someone clicks on person1 and puts a comment, then someone else clicks on person2, I don't want the comment of person1 to show but instead I want the person to be able to add a new comment for person2. However, when say for example, I click on person1 again, I want the comment that was added to person was to be shown in the comment section.
Little scenario:
Screenshot 1 is how the app looks like currently.
Screenshots that has orange border on them shows that someone has clicked on person and added a comment.
Screenhots that has green border on them shows that someone has clicked on person and added a comment.
Screenhots that has yellow border on them shows that someone clicked on person1 and show the comment that was added for person1 and then they clicked on person2 and show the comment added for person2.
The last screenshot shows that person2 comment has been edited and now if someone clicks on this there will see the new comment.
Note:
The commentfield cell is editable, therefore allowing people to write stuff
One approach of this would be, saving the comment of each person in a variable allocated to them based on maybe the cell id and loading back the variable value to the comment section.
Having little to no knowledge of programming I am not sure how I can do this, any help is welcomed.
You could include forms tag and use them.
They will help to trigger wich contenteditable is to be seen (CSSS or JS)
here a CSS example of the idea
input+div[contenteditable],
input[name="person"] {
position: absolute;
right: 9999px;
}
input:checked + div {
position: static;
}
label {
/* optionnal*/
display: block;
}
/* trick to simulate js toggle */
table {
position: relative;
}
[for="hide"] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4.7em;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
z-index: 1
}
:checked~[for="hide"] {
pointer-events: auto;
}
<form>
<table width="300" border="1" id="people" onClick="toggleTable()">
<tbody>
<tr>
<td id="cell1">
<div>
<!-- was the div usefull here ? if not; it can be avoided -->
<label for="c1">Person1</label>
</div>
</td>
<td id="cell2">
<div>
<label for="c2">Person2</label>
</div>
</td>
</tr>
<tr>
<td id="cell5">
<div>
<label for="c3">Person3</label>
</div>
</td>
<td id="cell6">
<div>
<label for="c4">Person4</label>
</div>
</td>
</tr>
<tr>
<td id="cell9">
<div>
<label for="c5">Person5</label>
</div>
</td>
<td id="cell10">
<div>
<label for="c6">Person6</label>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="comment" colspan="2">
<input type="radio" id="c1" name="person" />
<div contenteditable id="p1"> Your comment here person 1</div>
<input type="radio" id="c2" name="person" />
<div contenteditable id="p2"> Your comment here person 2</div>
<input type="radio" id="c3" name="person" />
<div contenteditable id="p3"> Your comment here person 3</div>
<input type="radio" id="c4" name="person" />
<div contenteditable id="p4"> Your comment here person 4</div>
<input type="radio" id="c5" name="person" />
<div contenteditable id="p5"> Your comment here person 5</div>
<input type="radio" id="c6" name="person" />
<div contenteditable id="p6"> Your comment here person 6</div>
<label for="hide"></label>
<input type="radio" id="hide" name="person" />
</td>
</tr>
</tfoot>
</table>
</form>
As I have almost no knowledge of HTML and I had no idea where to ask, I decided to come here. I am trying to edit HTML Weebly web editor generated and add a "contact us" form which will direct messages to my email. I found some source code on the web and tried to incorporate it with the form Weebly generated for me, however I have not had any success. My code is below:
<div>
<form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
<div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="466589977852666939-form-list">
<h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
</div>
<div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
</div>
<div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</div>
It obviously has something to do with the button click not being registered, so I made my own much simpler form to test it out.
<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
<td valign="top">
<label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
</td>
<td valign="top">
<textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" >
<br /><br />
<input type="submit" value=" Submit Form " style="width:200px;height:40px">
<br /><br />
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
And in this case, the function actually fired! So now I am unsure as to what the difference is between my first example, and my second much simpler piece of code. Could anyone help me out?
You could add an onclick() to the submit <a> tag to submit the form.
Like so, change...
<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
To...
<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>
This is because in your simplified example you used a Submit button.
Where as in you original form the button is moved out of the screen using CSS and only the text 'Submit' is left there. And your function triggers when the input is clicked, not the text.
This is the CSS style attributes that are hiding the button:
position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;
Replace this:
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">
By this:
<input type="submit" />
The button will reappear and clicking on it will trigger your message box.
Here is the JSFiddle demo
Any way to easily remove all HTML from text but keep all links? I know how to strip all HTML tags, but can't figure out how to keep just links...
Here's my text:
<table border="0" cellpadding="2" cellspacing="7" style="vertical-align:top;">
<tr>
<td width="80" align="center" valign="top"></td>
<td valign="top" class="j">
<font style="font-size:85%;font-family:arial,sans-serif"><br /></font>
<div style="padding-top:0.8em;">
<font style="font-size:85%;font-family:arial,sans-serif"><img alt="" height="1"
width="1" /></font>
</div>
<div class="lh">
<font style="font-size:85%;font-family:arial,sans-serif"><a href=
"http://news.google.com/news/url?sa=t&fd=R&usg=AFQjCNHlTH-LLUq2nHL30fKdJcA62JseSg&url=http://edition.cnn.com/2011/WORLD/africa/05/13/egypt.suzanne.mubarak/">
<b>Egypt's former first lady said to have suffered a heart attack</b></a><br />
<font size="-1"><b><font color="#6F6F6F">CNN
International</font></b></font><br />
<font size="-1">"Hosni Mubarak was also questioned about his luxury mansion in
Sharm el-Sheikh," al-Gohary <b>said</b>. Last month, the <b>former</b>
president <b>suffered a heart attack</b> during questioning over possible
corruption charges, <b>Egyptian</b> state television reported.
<b>...</b></font><br />
<br />
<a class="p" href=
"http://news.google.com/news/more?gl=us&pz=1&ned=us&ncl=dmv9Cur49MVVXrM">
<font class="p" size="-1"><nobr><b>and
more ยป</b></nobr></font></a></font>
</div>
</td>
</tr>
Thanks
Is this what you want?
function getLinks() {
var table = document.getElementsByTagName('table')[0];
var links = table.getElementsByTagName('a');
for (var i=links.length-1;i>=0;--i) {
table.parentNode.insertBefore(links[i],table.parentNode.firstChild)
}
}
This has got me stumped, I am testing my app on IE8 and an AJAX call is being made to the server and it is getting back a return like below. I am then doing an alert to check the output (it matches what I have below) and then it is supposed to append this to a DIV but it always fails to do this. Even if I put an alert past this line of code it still works so its not giving an error it seems, either. I figure there must be some thing with IE8 and multine-line variables or something as I am completely stumped by this, I would greatly appreciate if anyone can help.
What I am calling to append
alert(callbackReturnData)
$("#parent_tabDocumentSearch_displayMessageContents").append(
"<div id='test'>"
+ callbackReturnData + "</div>");
The contents of the callbackReturnData variable (returned from AJAX)
<div class="documentHead">
<div class="col1">
<p>
Sender: <strong><span id="dispayFileContents_sender">V Charles Weldon</span>
</strong>
</p>
<p><div id="div_subject">
Subject: <strong><span id="dispayFileContents_subject">Timesheet Revision</span>
</strong>
</div>
</p>
<p><div id="div_recipients">
Recipient: <strong><span id="dispayFileContents_recipients">Rebecca Torres</span>
</strong>
</div>
</p>
</div>
<div class="col2">
<p>
Date: <strong><span id="dispayFileContents_date"></span>12/22/2000</strong>
Rank: <strong><span id="dispayFileContents_rank"></span> </strong>
</p>
<p>
Time: <strong></strong>
</p>
<p>
Document #: <strong><span id="dispayFileContents_displayCount"></span>
</strong>
</p>
</div>
<div class="col-right">
<div class="prev-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('prev')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/prev.png"
width="25" />
</div>
<div class="next-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('next')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/next.png"
width="25" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="documentBody documentBodyScroll">
I'm taking 4 hours vacation today and have updated my previous timesheet to
<br>reflect this. Please see attached.
<br>
<br>
<br>***********
<br>EDRM Enron Email Data Set has been produced in EML, PST and NSF format by ZL Technologies, Inc. This Data Set is licensed under a Creative Commons Attribution 3.0 United States License <http://creativecommons.org/licenses/by/3.0/us/> . To provide attribution, please cite to "ZL Technologies, Inc. (http://www.zlti.com)."
<br>***********
<br>Attachment: AA- Timesheet.12-16-30-00.doc type=application/msword
<br>
</div>
<div class="documentFoot">
<div class="col1">
<p style="margin-top:10px;">
Comment: <input id="tabDocumentSearch_documentCustomComment"
value="
"
name="" type="text" /> <input type=button " class="save button"
value="Save"
onclick="tabDocumentSearch_tabDocuments_updateComment()"></input>
</p>
</div>
<div class="col-right">
<div class="col1" style="margin-right:10px">
<table>
<tr>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/hot-btn.png"
width="20">
<div id="radioHolder_h"></div></td>
</td>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/priv-btn.png"
width="20">
<div id="radioHolder_p"></div></td>
</td>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/resp-btn.png"
width="20">
<div id="radioHolder_r"></div></td>
</td>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/cold-btn.png"
width="20">
<div id="radioHolder_c"></div></td>
</td>
<td style="width: 20px;" class="center">
<img src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/custom-btn.png" width="20">
<div id="radioHolder_cust"></div></td>
</td>
<td style="padding-top:18px;" class="center">
<select style='width:150px' class='specialHidden1' id='setCustomTagForDocument' name=''>
<option selected='selected'>Set Custom Tag</option>
<option>Priv - legal</option>
<option>Priv - spouse</option>
<option>Priv - medical</option>
</select>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#setCustomTagForDocument").change(function() {
tabDocumentSearch_setCustomTag()
});
</script>
<div class="prev-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('prev')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/prev.png"
width="25" />
</div>
<div class="next-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('next')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/next.png"
width="25" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
$("#tabDocumentData_documentCustomComment").keydown(function(event) {
if (event.keyCode == 13) {
tabDocumentSearch_tabDocuments_updateComment()
}
})
</script>
I solved a similar jQuery problem that only affected IE. The <br> tags in callbackReturnData may be the culprits (plus any other unclosed tags/invalid HTML). Try closing them like: <br />.
Relevant jQuery( html, [ ownerDocument ] ) documentation:
To ensure cross-platform
compatibility, the snippet must be
well-formed. Tags that can contain
other elements should be paired with a
closing tag... Tags that cannot
contain elements may be quick-closed
or not.
(I know <br> cannot include other elements, but removing this tag fixed the problem. Also it doesn't seem to be an issue with jQuery 1.6/IE9, anymore.)
This is purely a guess but I think jQuery has issues adding html like that. does it work if you go straight javascript?
var d = document.createElement('div');
d.setAttribute('id', 'test');
d.innerHTML = callbackReturnData;
document.getElementById('parent_tabDocumentSearch_displayMessageContents').appendChild(d);
Alternatively, I think you can try something like
var $div = $("<div id='test'>" + callbackReturnData + "</div>");
$("#parent_tabDocumentSearch_displayMessageContents").append($div);
I had an extra closing tag in my appended html that was causing this issue for me. No error from IE, just a failure to add anything to the DOM.
In a form, I would like the input:text to fill the remain space after the label to the form is left and right justified.
The label have number of characters so I can't set a fixed width on the label.
Code example:
<fieldset>
<legend>User Info</legend>
<p><label>First Name :</label><input type="text"...></p>
<p><label>Last Name : </label><input type="text"...></p>
<p><label>Completed Email Address :</label><input type="text"...></p>
</fieldset>
How can I style the input to fill the remaining space after the text.
Thanks.
<!doctype html>
<html>
<head>
<style>
.grid { width: 100%; display: table; table-layout: auto; }
.row { display: table-row; }
label.cell { white-space: nowrap; display: table-cell; }
span.cell { width: 100%; display: table-cell; }
span.cell input { width: 100%; display: block; }
</style>
</head>
<body>
<fieldset>
<legend>User Info</legend>
<div class="grid">
<div class="row"><label class="cell">First Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Last Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Completed Email Address:</label> <span class="cell"><input type="text" /></span></div>
</div>
</fieldset>
</body>
</html>
Won't work in older browsers.
LE: if you don't need/want/have to support old browsers such as IE 6 and 7, use this code. Otherwise, use JavaScript. Ooor use this code an throw in some JavaScript for IE 6 and 7. Yeah, I think that's the best way to do it :D
I posted this in a comment first, but was advised to post as an answer instead. This is not a CSS solution, but a table-based one. However, it should work on all browsers (though I didn't test this). span inside label's td is needed to workaround IE's bug of not applying white-space: nowrap to table cells.
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">First name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">Last name:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
<table width="100%">
<tr>
<td width="1"><span style="white-space: nowrap;">Completed Email Address:</span></td>
<td><input style="width:100%"/></td>
</tr>
</table>
You can try using floats for the left (or right) side, and "block formatting context"ifying the right side items.
Read about block formatting contexts in css at the YUIblog
Fiddle: http://jsfiddle.net/uS3Cv/1/