I create a table
I want to change the status column with a green image if 778. and a red image if 779.
this is my html form code
<td> {{$penalty}} </div>
<td> {{$Total)}} </div>
<td> <span id="status">{{$status}}</span> </div>
So, if people open the webpage, they will not see the status column with number again, but become an image.
var status = document.getElementById("status").innerHTML;
if(status == 778){
$('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png');
}else{
$('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png');
}
Any javascript idea?
thanks in advance.
Your html is invalid, because:
id needs to be unique, not repeated in each row - use a class instead.
You're closing <td> elements with </div> tags.
Assuming you fix that, you then have the problem that your JS is trying to set the src of a <span> element, but you need an <img>. It is simple enough to insert the appropriate images using the :contains() selector and the .html() method:
$(document).ready(function() {
$('.status:contains(778)').html("<img title='778' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png'>");
$('.status:contains(779)').html("<img title='779' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'>");
});
img { height: 30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">779</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
</table>
I've set each <img> element's title attribute to either 778 or 779 so the user can see the values if they hover the mouse over the images. Note that using .html() will overwrite the text of the <span> with the <img>. If you want the numbers to be displayed beside the images then use .append() or .prepend() instead of .html(). If you want the images as background with the number on top of the image then do something with CSS like in O_Z's answer.
If you can use CSS it's better then script.
<style>
.im{
background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png") no-repeat;
display:inline-block;
height:10px;
width:10px;
background-size: contain;
}
.im[status="778"]{
background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png") no-repeat;
background-size: contain;
}
</style>
<table>
<tr>
<td> {{$penalty}} </td>
<td> {{$Total)}} </td>
<td> <span id="status" >{{$status}}</span> <span class="im" status="{{$Total)}}"></span> </td>
</tr>
</table>
I added a property status="{{$Total)}}" to the span which affects the CSS. This way you will not have on load issues, and it will work faster.
Here is the fiddle:https://jsfiddle.net/ngdtfuej/
Just change the status property from 778 to something else,click the fiddle run, and see how red becomes green (or reverse it if U like).
Use ng-src with ternary operator
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.elems = [{
penalty: 0,
total: 100,
status: 778
}, {
penalty: 0,
total: 200,
status: 779
}, {
penalty: 0,
total: 300,
status: 778
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
<tr>
<th>Penalty</th>
<th>Total</th>
<th>Status</th>
</tr>
<tr ng-repeat="el in elems">
<td>{{el.penalty}}</td>
<td>{{el.total}}</td>
<td> <span class="status">
<img ng-src="{{el.status==778?'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png':'https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'}}" alt="">
</span>
</td>
</tr>
</table>
Fiddle Demo
Related
I've been searching a lot for this question and I found some answers but none of them were compatible for my situation.
I am working on Chat Application and one of its functionalities is to show older messages for some chat channel. The element which holds the messages is <table> and it is set in <div> ,and I've set a fixed height and width for this div.
I bring channel's messages from SQL table by calling the appropriate servlet,and show them in the table using AngularJS .In this situation:is there a way in html/css/angular/javascript to scroll the div automatically after finishing to upload all the messages?
my code is like that:
HTML:
<div ng-show="channelmsg">
<div style="max-width: 500px; max-length: 500px; height: 500px; overflow: auto;" id="mydiv">
<table>
<tr ng-repeat="c in ChannelMsgResult">
<td style="border: 1px; border-color =light gray; max-width:400px;">
<span><img ng-src={{c.Photo}} style="border-radius:0.5cm; width: 50px; height: 50px;" />
{{ c.Nickname }} : </span>
<br /> {{ c.Content }} <small>reply</small>
see replies <br />
<label style="color: #9fa1a3;"><small>{{ c.DateTime }}</small></label>
</td>
</tr>
</table>
</div>
</div>
The Controller's function that calls the servlet and shows (by ng-show) the div "mydiv":
$scope.displayChannelMsg = function(x) {
$http.get("http://localhost:8080/ExampleServletv3/displaychannelmsgservlet",{
params:{
channelid : x.ChanID
}
}).success(function(response) {
setTimeout(function () {
$scope.$apply(function(){
console.log("went to servlet and succeeded")
$scope.ChannelMsgResult = response;//this variable will hold the channels
$rootScope.channelmsg=true;
});
});
});
};
Can I do this in a simple way without using any external libraries (like angular-glue)?
Please guide me.
Thanks
Assign an id to each message and then use $anchorScroll("latest message id"); to scroll to the message
Can you try putting:
setTimeout(function () {
var objDiv = document.getElementById("mydiv");
objDiv.scrollTop = objDiv.scrollHeight;
}, 0);
after your first timeout function?
I want to show multiple tables in a web page with header and the image displayed inside the table cell.
To achieve that i have created one table and used <div> tag to assign the width and height of the <td>.
Please find the code below
<table width="100%" height="100%"><tr><td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header1</header>
</section>
<img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
</div></td>
<td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header2</header>
</section><br><br>
<br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</div></td>
</tr></table>
I want to display that image in the whole cell of <td>. The header section should be displayed follwed by the image in the whole space. Please suggest what code do i need to add to make it work. Currently i could not able to set properly the image inside the border of the <td>. Or is there any good approach to achieve this.
jsfiddle:http://jsfiddle.net/4S6gR/103/
I want to achieve this using html/css.
After looking at you fiddle I think you meant you want the image to cover rest of the area in the cell other than header.
If so:
Check this Fiddle
Added a new div to cover the div, gave a height to the header 18px, as was rendered by browser and then gave height of 182px to the div containing image.
I want to display that image in the whole cell of td.
Forget img tags, there is a way easier way.
<td style="background-image:url('asd.jpg');">
you should use th instead of formatting inside td with div to create header, also you'll need to remove the height width from header
.mytable{
width:100%;
height:100%;
}
.mytable header{
background: gray;
text-align: center;
}
.mytable img, header{
width:200px;
}
.mytable td img{
display:block;
}
<table class="mytable">
<tr>
<th>
<section>
<header>Header1</header>
</section>
</th>
<th>
<section>
<header>Header2</header>
</section>
</th>
</tr>
<tr>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
</tr>
</table>
I have a table with each row representing a song.
When a song is clicked, the parent td should be highlighted a light blue color with the .active class and if any song was highlighted previously the parent td's .active class should be removed.
This part works fine and is represented with this jquery:
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
I also want to have a next button and a previous button. This where I am having issues. When the next button is clicked, the next song on the list should be highlighted and the previously highlighted song should be unhighlighted (I am using the class .active to do the highlighting and unhighlighting). This part is not working:
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
Here is the jsfiddle link:
jsfiddle Link
Here is my html code:
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Here is my css:
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 200px;
background-color: lightgreen;
}
Here is my jquery
$(document).ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
});
If you could help me solve this issue, I would greatly appreciate it. I feel like this should be so easy but I just can't seem to make it work.
Thanks!
The trick is to get the row index of the current song, add 1, and then do a modulo with number of rows that way if the current row+1 overflows the number of rows, it will start from the beginning:
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
//here .parent() will get the current <tr>
//.parent().index() will get the index of the current <tr>
var currentID = $('td.active').parent().index();
//here .parent() will get the <tr>
//.parent().parent() will get the <tbody>
//.parent().parent().children() will get all the rows
//.parent().parent().children().length will get the row count
var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
$('.songs').parents('td').removeClass('active');
$('td').eq(nextID).addClass('active');
});
});
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 2d00px;
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
3
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
4
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Something like this? http://jsfiddle.net/y5ntap04/3/
You needed to go up the DOM and then where all the siblings are, you can go to the next() one.
Plus added a previous button for you.
$().ready(function () {
$(".songs").click(function () {
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
});
$('#previous_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
});
});
in your code you have each td in its own tr meaning there is no next td to go to.
you should adjust your jquery to focus on the rows, as in this fiddle (shown below)
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('tr').removeClass('active');
$(this).parents('tr').addClass('active');
});
$('#next_button').click(function(){
var current = $('tr.active');
$('.songs').parents('tr').removeClass('active');
current.next('tr').addClass('active');
});
});
You'll also notice I'm using .next() which will just grab the next element or the next element which matches the argument (in this case tr) - no need to get all then restrict to just the first.
All this will make your fiddle behave as expected, however, if you want to target the td's within each of the tr's you'll have to add .find('td') to get the td out of the retrieved tr, like this. Here the only line that is changed is the one that adds the class on click of next, which is now: current.parent().next('tr').find('td').addClass('active');
Refactoring out $('.songs').parents('tr').removeClass('active'); into it's own function would also clear your code a bit and make it easier to follow, a good habit! (also +1 for using a variable to store a returned JQuery DOM object - var current = $('tr.active'); - another good habit for code clarity and efficiency, especially when you are deraling with more complicated DOM structures and functions)
I'm currently working on a project where I can only change the css to adjust anything on the site. I have a table which has js calling the image which is 125px x 125px and has a style hardcoded into the html to scale image to 125px × 125px (scaled to 66px × 95px). What I am looking for is to at least square it up to 66px x 66px? style="height:95px;width:66px;border-width:0px;" The issue I am having is the id ctl00_MainCartDisplay_Image_21313_208_0 is unique to the product being called, so when we tried
#ctl00_MainCartDisplay_Image_21313_208_0 img {height:50 !important;}
worked great, remove _21313_208_0 and now nothing? Any help would be great, the Code below and Thanks
style="height:95px;width:66px;border-width:0px;"
<table class="SCNVSCProductSubTable" cellspacing="0" cellpadding="3" border="0" style="width:200px;border-collapse:collapse;">
<tr>
<td valign="top" style="width:66px;"><input type="image"
name="ctl00$MainCartDisplay$Image_21313_208_0"
id="ctl00_MainCartDisplay_Image_21313_208_0" src="../art/NoImage66x95.jpg"
onclick="javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$MainCartDisplay$Image_21313_208_0", "", false, "", "ProductDetail.aspx?CatalogueID=208&ProductID=21313", false, false))" style="height:95px;width:66px;border-width:0px;" />
</td>
<td align="left" valign="top"> </td>
</tr>
</table>
You can use attribute selectors to select the elements where the id begins with a specific string. Doesn't work for IE8 and below though.
http://www.w3.org/TR/css3-selectors/#attribute-substrings
CSS
[id^="ctl00_MainCartDisplay_Image"] {
height:50 !important;
}
I have the following site:
http://www.pachamber.org/www/advocacy/index.php
When a user clicks the 'General Commerce' href tag towards the bottom, it should slide out the hidden contents. All of the other tags work correctly except this one.
The function behaves unexpectedly only in IE. It looks to be fine in Chrome and FF. When debugging the function, it seems not not grab the height attribute from the div:
<div id="general" style="display: none; height: 30px; overflow: hidden">
The height attribute is showing as 1px on this line:
this.height = parseInt(this.obj.style.height);
Here is the snippit of HTML and the function call:
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td colspan="2" style="width: 100%;">
<div class="subheading2" style="border-bottom: thin solid gray; cursor: pointer; color: #000099" onClick="doSlideOut('general');"><a name="general"></a>General Commerce</div>
</td>
</tr>
</table>
<div id="general" style="display: none; height: 30px; overflow: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="53%">
• <a href="gc/testimony/index.php" >Testimony & Comments</a>
</td>
<td width="47%"> </td>
</tr>
</table>
</div>
Any ideas what I am missing?
Thanks.
Beware of id and name attribute when using getElementById in Internet Explorer describes the stupid behaviour of IE which causes the problem of yours.
If there are two elements with the same value for id and name (in your case its the div with id general-commerce and the link General Commerce) IE will grab one of both of them when using getElementById.
The solution would be to change either the name-attribute of the link or the id of the div-container.
One thing I saw was and error in your script.
Errors like these break JS from running properly.
Check out one of my websites to see how to do this with jQuery (look at the links under "Our Curriculum").
$('.lgroup').on('click', function () {
if ($(this).hasClass('directLink')) {
return true
} else {
$('.links').slideUp();
$('.lgroup').removeClass('lactive');
if ($(this).next().css('display') == 'block') {
$(this).next().slideUp()
} else {
$(this).addClass('lactive').next().slideDown()
}
}
});