I am parsing data from a JSON, where one of the fields on the table is an image.
Although, I want that image to fit a specific size.
I have already made so many changes, that I got lost why it doesn't work.
JSON
var products=[];
$.getJSON('products.json',function(data){
$.each(data.products, function(i, f){
var tblRow = "<tr><td class='prod_img'><img src=" + f.image_url + "></td></tr>" + "<tr><td class='title'>" + f.title + "</td></tr>" + "<tr><td class='price'>" + f.price + "</td>" + "<td class='price_org'>" + f.old_price + "</td>" + "<td class='add_cart'><img src='img/buynow-green-5.png'>" + "</td></tr>"
$(tblRow).appendTo("#list_products tbody");
});
});
CSS
#list_products{
position:absolute;
width:100%;
border: 5px solid #B9FFFF;
margin-top:80px;}
.prod_img{
height:200px;
width:300px;}
So, after sleeping some hours, I finally realized what was missing.
I had a tag for the image container, but no for the image.
Sometimes, the answer is simple. You just need to go away for a moment.
Related
hello someone can help me with this ?
I what to change my process indicator from SAPUI5 to make something like this
enter image description here
the idea is show how much percent are favor about something and how much percent is against
thanks
you can create a custom control like this or added some code to the onAfterRendering event.
ProgressIndicator.extend("ProgressIndicatorEx", {
renderer: {},
onAfterRendering: function() {
if (ProgressIndicator.prototype.onAfterRendering) {
ProgressIndicator.prototype.onAfterRendering.apply(this, arguments);
}
var percentValue = this.getPercentValue();
this.$().find("#" + this.getId() + "-bar").html('<span id="' + this.getId() + '-textLeft" class="sapMPIText sapMPITextRight" style="color: #FFF; margin-right:8px">' + percentValue + '%</span>');
var rightBar = this.$().find("#" + this.getId() + "-remainingBar");
rightBar.html('<span id="' + this.getId() + '-textRight" class="sapMPIText sapMPITextRight" style="color: #FFF">' + (100 - percentValue) + '%</span>');
rightBar.css("background-color", "#c00")
rightBar.css("border-color", "#c00")
}
demo: https://jsbin.com/yawiqam/edit?js,output
I'm working on a small app where the user move the background with his mouse or his finger on the screen.
You can find a demo here: http://kaleidoscope-experiment.herokuapp.com/
The background-position is defined by the position of the cursor/finger using this kind of code:
// mobile
position = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';
// desktop
position = e.pageX + 'px ' + e.pageY + 'px';
However, I have significant lags on mobile and tablet and the background is "clipping".
Do you know if there is any alternative to background-position (transform?), to move the background based on the cursor/mouse position?
If you want to roll your own just use a combination of the jQuery mousemove function in combination with CSS3 transforms. Something along the lines of this:
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log( "<div>" + msg + "</div>" );
$("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)');
});
Here is the reference fiddle that i got from stackoverflow
http://jsfiddle.net/ZmZhw/
There are number of js plugin that are available which will give u some smooth transition and performance also.
I have some tag clouds placed within a div. For each tag cloud there is a thumbs down icon and I used sliding tag css from http://www.cssflow.com/snippets/sliding-tags
If a tag cloud is greater than 80px, it does not fit inside that div. I used word wrap and also fittext plugin from jquery but I could not manage to make it work. Could you suggest what could be the possible solution for it?
I have created fiddle for it: http://jsfiddle.net/aexqoe8n/1/
In Js side :
resultDiv = document.getElementById('tokenCloudResultDiv');
resultDiv.innerHTML = '';
resultDiv .innerHTML="<ul class='tags blue' style='list-style-type: none;padding:5px;'>";
for (i in json) {
addToken(resultDiv, i, json[i]);
}
resultDiv.innerHTML=resultDiv.innerHTML+"</ul>";
function addToken(target, key, result) {
var str;
var weight;
if(result['tagWeight']>80)
$("#tokenCloudResultDiv").fitText(1.2);
weight= "style='font-size: " + result['tagWeight'] + "px;'";
if(addedAutomatically)
str = "<li><div><a " + weight + " >" + result['tagName'] +"</a><span class='thumbsDownIcon' id ='" + tagId + "' style='display:block;cursor:pointer;' ></span></div></li>";
target.innerHTML += str;
}
I have Department Dropdown on change of this I made jquery-ajax request to get the Department Details.
I'll be binding this result to a Div.
that works well till here.
When I click an asp.net button or any server side control after post back the div element is emptied.
How can I get the previous result in the div element.
Success function for Ajax call goes like below:
function OnSuccess(response) {
var List = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
DeptDetails = "";
$.each(List, function () {
DeptDetails = "<table cellpadding='0' cellspacing='0' class='grid' border='0' width='94%'>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Store Name:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["DeptName"] + "</td></tr>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Address:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["Address"] + "</td></tr>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Zone:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["ZoneName"] + "</td></tr>";
DeptDetails = DeptDetails + "<tr><td align='right' style='padding-left: 10px; padding-top: 3px;'>Zone Manager:</td><td align='left' style='padding-left:3px;padding-top:3px;'>" + this["ZoneManager"] + "</td></tr></table>";
$('div[id*="divDeptDetails"]').html(DeptDetails);
});
}
Thanks in advance.It is urgent guys.
jQuery(document).ready(function(){
// check here if the drop down has a selected item different than the default one
// make the same ajax call you are doing on the drop down
})
Anand, you need to persist the data by adding the data to the viewstate or by sending it along with a hidden input.
I am trying to create an infoWindow in google maps v3 which contains multiple lines of content. However the "\n" I am using to insert a newline doesn't seem to work. What is the recommended way to insert a newline?
see code:
//set content of infoWindow
window.setContent(inspStates[i].name+ "\n"+"total: "+inspStates[i].totalInsp+ "\n"+ info);
The easiest thing to do it wrap the content in a div or in a p and then use <br /> for line breaks.
So something like
//set content of infoWindow
window.setContent("<p>" + inspStates[i].name + "<br />" +
"total: " + inspStates[i].totalInsp + "<br />" + info +
"</p>");
Use HTML for the content, and put each line in its own paragraph. Line separation helps with readability, especially if any of the lines is long enough to wrap.
window.setContent(
"<p>" + inspStates[i].name + "</p>" +
"<p>Total: " + inspStates[i].totalInsp + "</p>" +
"<p>" + info + "</p>");