I really hope that one of you JS Gurus can shed light on this problem.
Currently I'm working on a webpage that has small table with 5 text lines in column one.
And an image in column two.
The client is asking for the following:
open the page, the "default image" should show
roll-on the text, the "temp image" should show
roll-off the text, the "default image" should show
click on the text, that temp image should become the "default
image"
I was able to achieve objectives #1, #2, and #3.
However, to be able to achieve #4, the client's old code simply made identical pages, each with a different "default image". And assigned each link to point to that page.
Is it possible to achieve objective #4 without having to make duplicate pages?
Maybe, there could be a javascript code that refreshes the page, and alters the default image according to the link (text) clicked?
Am I even making any sense? Sorry, I've hardly ever used forums. I'm not sure if I'm using the correct etiquette's here.
Here is the code that I'm using:
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src=' "+imageName+" ' border='0' height='207' width='400'/>";
obj.innerHTML = imgTag;
return;
}
</script>
<table cellpadding="6" cellspacing="6">
<tbody>
<tr>
<td width="33%" valign="top" nowrap><span style="font-size: 12pt;"> <a id="one" href="#"
OnMouseOver="changeIt('/images/stories/article/compressor_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/compressor_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Compressor Stations</strong></a></span></td>
<td valign="top" nowrap><strong>4,000,000 hp</strong> </td><td rowspan="5" valign="top"> </td>
<td rowspan="5" valign="top">
<div id="image1"><img src="images/stories/article/composite_experience.jpg" alt="one" border="0" height="207" width="400" /></div></td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="two" href="#"
OnMouseOver="changeIt('/images/stories/article/export_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/export_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Export, Storage, and<br />Loading Systems</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>1,000,000,000 bbls</strong> </td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="three" href="#"
OnMouseOver="changeIt('/images/stories/article/pipeline_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/pipeline_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Pipeline Systems</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>100,000 miles</strong> </td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="four" href="#"
OnMouseOver="changeIt('/images/stories/article/production_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/production_experience.jpg','image1');"
style="text-decoration: none;"><strong>Production and<br />Processing Facilities</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>2,000,000 bpd</strong> </td>
</tr>
<tr>
<td width="33%" valign="top" nowrap style="border-top:1px solid #bbb;"><span style="font-size: 12pt;"><a id="five" href="#"
OnMouseOver="changeIt('/images/stories/article/pump_experience.jpg','image1');"
onClick="changeIt('/images/stories/article/pump_experience.jpg','image1');"
OnMouseOut="changeIt('/images/stories/article/composite_experience.jpg','image1');"
style="text-decoration: none;"><strong>Pump Stations</strong></a></span> </td>
<td valign="top" nowrap style="border-top:1px solid #bbb;"><strong>300,000 hp</strong> </td>
</tr>
</tbody>
</table>
Thank you all in advance.
Related
I have one column that depends on a result from another column in SharePoint 2013 list. In my display form, if in column 1 result is Yes, than column2 should be visible. If it is No, column2 should be hidden.
Below is a script that I tried but failed to make it work:
<script>
$(document).ready(function()
{
if($("#Column1").text()=="No")
{
$("#Column2a").hide();
$("#Column2b").hide();
}
else if($("#Column1").text()=="Yes")
{
$("#Column2a").show();
$("#Column2b").show();
}
});
</script>
In my display form I added IDs to column1 and column2 tds.
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Column 1</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody" id="Column1">
<xsl:value-of select="#Column1"/>
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel" id="Column2a">
<H3 class="ms-standardheader">
<nobr>Column 2</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody" id="Column2b">
<xsl:value-of select="#Column2" disable-output-escaping="yes"/>
</td>
</tr>
What should I change in code?
EDIT:
To make it more clear, 1st I edited display form and added IDs to tds, then I created script that I put in display form page.
You need to trim your content:
if($("#Column1").text().trim() == "No")
{
$("#Column2a").hide();
$("#Column2b").hide();
}
else if($("#Column1").text().trim() == "Yes")
{
$("#Column2a").show();
$("#Column2b").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td width="190px" valign="top" class="ms-formlabel">
<H3 class="ms-standardheader">
<nobr>Column 1</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody" id="Column1">
No
</td>
</tr>
<tr>
<td width="190px" valign="top" class="ms-formlabel" id="Column2a">
<H3 class="ms-standardheader">
<nobr>Column 2</nobr>
</H3>
</td>
<td width="400px" valign="top" class="ms-formbody" id="Column2b">
test
</td>
</tr>
</table>
Just as a thought, you may want to hide the row rather than the columns (if you are hiding all columns in the row)
My end goal with this project is to basically have a spreadsheet (really just a giant HTML table) with the contenteditable value set to true. The other thing I need is to be able to create an input box, and drag it anywhere on the screen, including on the spreadsheet. Right now, whenever I try to drag an input box, it gives me the little red circle with a line through it in the top right corner of the box, telling me that I can't drop it anywhere.
My HTML is so long because it's a huge spreadsheet, but with a couple hundred fewer rows, it basically looks like this:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<form><input id=tile draggable=true type=text> </form>");
$("#draggable").append(tile);
$("#tile").draggable();
});
});
td {
border: 1px solid black;
}
#tile {
cursor: move;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
Thanks in advance!
EDIT - I don't need the generated element to be an input field. It just has to be an element that can have text in it.
Try making a droppable div
<div id="droppable">
...
</div>
And in Jquery
$("#droppable").droppable();
Have an html table as follows (# of rows vary)..
<table id="issuetable">
<tbody>
<tr id="issuerow13210" rel="13210" data-issuekey="Ticket-215" class="issuerow focused">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215" tabindex="-1" title="Ticket-215"></a> <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="IT Help" title="IT Help - For general IT problems and questions."></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215">Ticket-215</a>
</td>
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"></a>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13210" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13210/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
<tr id="issuerow13209" rel="13209" data-issuekey="Ticket-214" class="issuerow">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214" tabindex="-1" title="Ticket-214"></a> <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="Task" title="Task"></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214">Ticket-214</a>
</td>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13209" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13209/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
How can I use javascript once the page finishes loading to iterate through each row and delete the cell "issue_actions" only if the row contains an image with alt="IT Help"?
My own suggestion would be:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
The use of .empty() removes the content of the <td> elements, but does not remove the <td> itself, which should prevent the table layout being distorted by rows with differing cell-counts.
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
The following uses remove(), which demonstrates the slight visual problem:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
References:
Attribute-equals ([attribute="value"]) selector.
closest().
empty().
siblings().
Use the pseudo selector :has and then, find your element you want to remove :
$('tr:has(img[alt="IT Help"]) .issue_actions').remove();
I have a table in which rows are added dynamically using jQuery (latest row on top using prepend). If it is an errorLine, text in the first column will be “x”. If it is a successLine the text in the first column will be numerals like 1,2,3…
If the latest row is an errorLine, I need to apply background color (using class “firstErrorLine”) and replace the text “x” with an image. At the same time I need to remove image from all other lines and replace image with text “x”. I tried multiple jQuery approaches but didn’t work. Following is one of the failed approaches.
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
Any thoughts how we can achieve this?
Demo – jsFiddle
jQuery Code
$(document).ready(function ()
{
function styleFirstErrorLine(isFailureExist)
{
$("#tblVisualAidResult tbody tr").removeClass('firstErrorLine');
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
if(isFailureExist)
{
$("#tblVisualAidResult tbody tr:first").addClass('firstErrorLine');
var firstCell = $("#tblVisualAidResult tbody tr:first td:first");
$(firstCell).html('<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"/>');
}
}
styleFirstErrorLine(true);
});
HTML
<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0"
style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
<thead>
<tr>
<td class="Heading3" style="width: 20%;">
Serial No
</td>
<td class="Heading3" style="width: 30%;">
Container ID
</td>
<td class="Heading3">
Status
</td>
</tr>
</thead>
<tbody>
<tr class="Normal">
<td style="padding-left: 5px">
x</td>
<td>
TEST4
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
2
</td>
<td>
182145011
</td>
<td>
Received 2 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test3
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test2
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
1
</td>
<td>
182145029
</td>
<td>
Received 1 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test1
</td>
<td>
Case Label does not Exist
</td>
</tr>
</tbody>
</table>
If I understand correctly what you are trying to achieve, you should use td:first-child instead of td:first.
jsFiddle demo
I am trying to show small image of width 250px by using jQuery. I tried to set the width of the image, in jQuery I have use this command. here is my jQuery code, even after giving this command image comes with its original size, i.e.600px etc etc...
My html td tag shows this value, but not affect the image.
So can anyone tell how to set the size of image so that what ever its original weight and height but its shows the with of 250px?
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script language="javascript" type="text/javascript">
$(document).ready(function() {
$("table td #n1WPQ4").css("width","250px")
});
</script>
My HTML code after applying above script.
<table class="ms-formtable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td nowrap="" valign="top" width="190px" class="ms-formlabel">
<nobr>Picture</nobr>
</td>
<td valign="top" class="ms-formbody" width="400px" id="n1WPQ4" style="width: 250px;">
<img src="http://img.dashtees.com/mini-gloves/pakistan/pakistan.03.jpg" alt="">
</td>
</tr>
<tr>
<td nowrap="" valign="top" width="190px" class="ms-formlabel">
<nobr>Name</nobr>
</td>
<td valign="top" class="ms-formbody" width="400px" id="n2WPQ4">
<a onfocus="OnLink(this)" href="http://sharepoint/_layouts/15/listform.aspx? PageType=4&ListId={06ABE63D-FD6E-4EC6-A473- CF648BE5B384}&ID=2&ContentTypeID=0x0100C0EFC789E8F94545923F62567A0C1A52" onclick="EditLink2(this,7);return false;" target="_self">glove</a> </td></tr><tr><td nowrap="" valign="top" width="190px" class="ms-formlabel"><nobr>Description</nobr></td><td valign="top" class="ms-formbody" width="400px" id="n3WPQ4"><div dir="" class="ms-rtestate-field"></div> </td> </tr><tr><td nowrap="" valign="top" width="190px" class="ms-formlabel"><nobr>Article</nobr></td><td valign="top" class="ms-formbody" width="400px" id="n4WPQ4"> </td></tr></tbody></table>
You are not selecting image using selector, #n1WPQ4 is parent id of image tag.You should use:
$("#n1WPQ4 img")
or
$("#n1WPQ4").find("img")
td #n1WPQ4 will select child element under td with id n1WPQ4.
Since you've assigned id="n1WPQ4" to your td then you don't need space here.
Also, id is unique so you can change your selector to:
$("#n1WPQ4 img").css("width","250px")