I have a share point calender and i want to color code difrent blocks depending on what reg number they contain (its for a school's minibuses)
How do i set the background color of .ms-cal-eworkday if a.ms-cal-tweekitem contains "EF04 WTR"
I need to do this in js/jquery as i don't have the abity to edit the aspx (council politics)
Each entry looks like this.
<td class="ms-cal-eworkday" rowspan="6">
<table cellpadding="0" cellspacing="0" border="0" class="ms-cal-tweekitem" dir="">
<tbody><tr>
<td valign="top" href="/schools/ecclesfield/newdemosite/minibus-booking/Lists/Minibus/DispForm.aspx?ID=3" onclick="GoToLink(this);return false;" target="_self">
<div>
<img src="/_layouts/images/blank.gif" width="50" height="1" alt=""><br>
<img src="/_layouts/images/recursml.gif" class="ms-cal-hidden" alt="" align="absmiddle">
<a onfocus="OnLink(this)" class="ms-cal-dayitem" href="/schools/ecclesfield/newdemosite/minibus-booking/Lists/Minibus/DispForm.aspx?ID=3" onclick="GoToLink(this);return false;" target="_self" tabindex="5">
<nobr>03:00 PM</nobr>
<br>
<b>test2</b>
<br>
EF04 WTR
</a>
</div>
</td>
</tr>
</tbody></table>
</td>
I know the code is a bit of mess that's just how sharepoint works :(
Thanks in advance.
Lewis
Well one way is too loop through the table and check each cell.
$(function(){
$('.ms-cal-dayitem').each(function(){
if( $(this).text().indexOf("EF04 WTR") != -1 ) {
$(this).closest('.ms-cal-eworkday').css("background-color","blue");
}
});
});
Obviously change the colour to suit, but this would set the background red for any td.ms-cal-eworkday that contains a.ms-cal-dayitem with the text EF04 WTR...
$("a.ms-cal-dayitem").filter(function() {
return $(this).text().indexOf("EF04 WTR") != -1;
}).closest("td.ms-cal-eworkday").css("background-color", "red");
filter() means it will only return the elements that match the criteria, which in this case is containing the relevant text.
In the same line that above answers my only change on the aproach would be to create classes in the css and then add or remove class with jQuery, but just a detail
Related
<tr><!-- 8 -->
<td id = "8A"><!-- A -->
<img src="Media/empty_square_white.png" height="160px" width ="160px">
</td>
...
<script>
function changeSource(){
document.getElementById("8A").src="empty_square_brown.png";
}
</script>
<button onclick="changeSource">change</button>
This is what I have tried to do however when I press the button nothing seems to happen. I have also tried to do this without the button however that didn't seem to work either, I have defined the id using internal CSS as well. Thanks
Your id references to the surrounding td which has no attribute src. You need to set the id on the img element or reference to the child element.
Also your new value "empty_square_brown.png" is missing the path which is set in the original source "Media/" and the onclick call needs the function brackets. Here some working example. With a title attribute to show the effect.
<tr><!-- 8 -->
<td><!-- A -->
<img id="8A" src="Media/empty_square_white.png" height="160px" width ="160px" title="empty_square_white.png">
</td>
...
<script>
function changeSource(){
document.getElementById("8A").src="Media/empty_square_brown.png";
document.getElementById("8A").title="empty_square_brown.png";
}
</script>
<button onclick="changeSource()">change</button>
You may try this.
function changeImg(){
document.getElementById("image").src = "https://images.unsplash.com/photo-1581618048854-b2f6f877cef3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
}
img{
width:50px;
height:50px;
}
<table border=1>
<tr>
<td >
<img id="image" src="https://images.unsplash.com/photo-1626285094808-143d7bb02f14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" onclick="changeImg()">
</td>
<td>
<img src="#" alt="">
</td>
</tr>
</table>
I have the following code, a simple three column layout with an animation running on hover in each.
The animation works fine, but I cannot make the animation button a link. It has the image as the link, and if I change the href, it fails (which makes sense) but I cannot figure out where to add the link in.
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>
<a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children-anim.gif" target="_blank">
<img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif" width="323" height="323"></a>
</td>
<td>
<a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers-anim.gif" target="_blank"><img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers.gif"
data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers.gif" width="323" height="323"></a>
</td>
<td>
<a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents-anim.gif" target="_blank"><img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents.gif"
data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents.gif" width="323" height="323"></a>
</td>
</tr>
</tbody>
</table>
Run by the following javascript.
<script type="text/javascript">
$(function(){
$('table a img').hover(function(){
// on mouse enter
var customdata = $(this).parent().attr('href');
$(this).attr('src',customdata);
}, function(){
// on mouse leave
$(this).attr('src',$(this).attr('data-orig'));
});
});
</script>
Is on page here Link to homepage of site.
Your question is confusing.. I'm not sure what link you actually want or why your current implementation is wrong. I'm going to assume that you don't want a link to an image as the actual link. If that assumption is right, here's your answer...
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>
<a href="[Your Link Goes Here]" target="_blank">
<img
src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-img="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-animation="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children-anim.gif"
width="323" height="323"></a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$('table a img').hover(function(){
var element = $(this);
var animateUrl = element.data('animation');
element.attr('src', animateUrl);
}, function(){
var element = $(this);
var staticImage = element.data('img');
element.attr('src', staticImage);
});
});
</script>
I am new to the site (and coding) so please bear with me!
I am trying to add the following clickable slideshow to my site in a way that means I can change the images in one file (HTML or JS) and this be reflected on every page on which the slideshow is called:
<table border="0" cellpadding="0">
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
</p>
</center>
</div>
</form>
</td>
</tr>
Currently I have used:
<script type="text/javascript" src="images.js"></script>
in the relevant html div. to call a simple .js file which displays the images in one long list, e.g.
document.write('<p>Image One</p>')
document.write('<img src="image1small.png" alt=Image One; style=border-radius:25px>')
document.write('<p>Image Two</p>')
document.write('<img src="image2small.png" alt=Image Two; style=border-radius:25px>')
I have tried every way I can think of, and searched many posts on here to try and get the slideshow to display within the same div. I have copied the html code into the .js file and appended it with document.write on every line, I have tried / on every line, I have tried 'gettingdocument.getElementById', but nothing works!
The slideshow code itself is fine; if I put this directly onto each page then it works correctly, I just can't seem to 'link' to this code and have it run so anything appears.
Please provide the simplest possible solution for this, without any need to install jquery plugins, or use anything other than basic HTML and JS.
There were alot of small bugs, i fixed them for you. you didn't put a semicolon after your javascript statements, tey aren't neccesary but it's cleaner code, you didn't exit alot of html tags
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center>
<p>
<p id="description" style="width:200px" size="50"></p>
<p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
<p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
</p>
</center>
</div>
</form>
</td>
</tr>
Javascript:
(function() {
var photos=[];
var text= [];
var which=0;
var what=0;
photos[0]="image1.bmp";
photos[1]="image2.bmp";
photos[2]="image3.bmp";
text[0]="Image One";
text[1]="Image Two";
text[2]="Image Three";
document.getElementById('description').innerHTML = text[0]
backward = function(){
if (which>0){
which--;
window.status='';
what--;
console.log(which);
document.images.photoslider.src=photos[which];
document.getElementById('description').innerHTML = text[what];
}
}
forward = function(){
if (which < (photos.length-1)){
which++;
console.log(which);
document.images.photoslider.src=photos[which];
what++;
document.getElementById('description').innerHTML = text[what];
}
else {
document.getElementById('description').innerHTML = 'End of gallery';
}
}
function type()
{
alert("This textbox will only display default comments")
}
})();
And last but not least i've created the fiddle to show you it's working:
http://jsfiddle.net/45nobcmm/24/
You can create a javascript file that search for an element and change the innerHTML of the element to the slideshow you want to show.
For example this could be the script:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
and your main html page should have a slideshow div.
but you need to know that it's not the best solution, you should learn PHP or another back-end language and than you could use include('page.html'); for example
This will run when the page loads
<TD width=115 >
Expand All
</TD>
<TD align=left>
<IMG id="img1" border=0 alt="" src="expand.png">12345
</TD>
By default, expand.png image will be displayed with 12345..
My question is If I click expand all link, I need to change the image "expand.png" to "collapse.png"..Is it possible in javascript?
Does it need to be pure JS?
Jquery:
$('#button').click(function(){
$('#withImage').attr('src', 'collapse.png');
});
You would have to give the TD's a class or an ID
pure JS:
document.getElementById('button').onClick(runFunction());
function runFunction(){
document.getElementById('withImage').src = 'collapse.png';
}
First line of code is telling the script that when a tag with the id "button" (
In the function you are telling the script that the tag with id "withImage" should change its attribute "src" to be 'collapse.png'.
I think this will solve your issue.
Expand All
<IMG id="img1" border=0 alt="" src="expand.png">12345
JSfiddle: http://jsfiddle.net/zJ85X/
You can use this:
<TD width=115 >
Expand All
</TD>
<TD align=left>
<IMG id="img1" border=0 alt="" src="expand.png">12345
</TD>
<script>
function expand(){
$('#img1').attr('src','collapse.png');
}
</script>
Just add below code to your function of Expand All, if its Jquery
$('#img1').attr('src', 'collapse.png');
<div id='popup'>
<input id='btnConfirm'/>
</div>
$("#btnConfirm").click(function () {
var frame = $('#[id$=ReportViewer1ParameterArea]'); //get the frame
//s57 is a table element in the viewer
frame.contents().find("#Preview")
.click(
function () {
alert('hover!');
}
);
});
Below is part of the HTML rendered by Telerik Report Viewer
<iframe id="ctl00_ctl00_MainContent_MainContent_ReportViewer1ParametersArea" scrolling="auto" width="100%" height="0px" frameborder="0" align="left" src="/Telerik.ReportViewer.axd?instanceID=0001be3494c046c69b091014203c2914&culture=en-US&uiculture=en-US&optype=Parameters" style="height: 26px;">
<table id="parametersTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
<tr id="parametersRow">
<td valign="middle" align="center" rowspan="2">
<input id="Preview" type="submit" onclick="return ParametersPage.Validate();" value="Preview" name="Preview">
</td>
</tr>
Question :
I need to access the Preview button ID="Preview" in the Report Viewer from a DIV that contains button with ID= btnConfirm on the ASPX page as given above in the JQuery script. The ASPX page contains the Telerik Report Viewer. I put code in the
$("#btnConfirm").click(function () event but that does not work. Can you give me ideas please?
Try using this selector:
var frame = $('[id$="ReportViewer1ParameterArea]"');
Removing the # and adding quotes " around the value.
The below code is what I developed to make my code work:
var reportFrame = document.getElementById('ctl00_ctl00_MainContent_MainContent_ReportViewer1ParametersArea');
var reportDocument = reportFrame.contentWindow.document;
var body = reportDocument.getElementsByTagName("body")[0];
$(body).contents().find("#Preview").click();