I want to give some css value to my one of the element from the below code.
_strInnerHtml += "<h3>"+ p_strDay + "-" + dictCalendarmonth[p_strMonth] + "-" + p_strYear + "</h3>" + "<h4>" + value.cati_tithi_name + "</h4>";
I want to show the <h3> & h4 in the same line. How can I put the css there?
_strInnerHtml += "<h3 style = "color:blue">"+ p_strDay + "-" + dictCalendarmonth[p_strMonth] + "-" + p_strYear + "</h3>" + "<h4>" + value.cati_tithi_name + "</h4>";
This way its not working..
Either escape double quotes or put single quote for css color property.
But the best solution will be adding specific CSS class
Don't process the elements as String. Use document.createElement() to create new element (any HTML DOM element). Then you can set style easily. Like:
var h3= document.createElement('h3');
h3.style.property= 'value';
See more:
HTML DOM createElement()
Changing CSS using JS
And create a parent div to keep h3 and h4 elements.
you should add CSS class like
.heading{
//css property
}
and add into JavaScript
_strInnerHtml += "<h3 class = 'heading'>"+ p_strDay + "-" + dictCalendarmonth[p_strMonth] + "-" + p_strYear + "</h3>" + "<h4>" + value.cati_tithi_name + "</h4>";
if you want to show both h3 and h4 in a same line
add this CSS class in both
.half{
width: 50%;
float: left;
}
Related
I have this JavaScript code that does createElement, but how can I style it from my separate CSS file?
JavaScript
emails.forEach(function(email) {
const element = document.createElement('div');
element.innerHTML = email.sender + ' ' + email.subject + ' ' + email.timestamp
document.querySelector('#email-container').append(element);
});
HTML
<div id="email-container">
</div>
CSS
#email-container .element{
border-width:2px;
border-style:solid;
border-color:black;
}
if you're styling it that way, then you expect the div to have class element. So you just need one extra line to add that class to the element. Full code here:
emails.forEach(function(email) {
const element = document.createElement('div');
element.classList.add('element');
element.innerHTML = email.sender + ' ' + email.subject + ' ' + email.timestamp
document.querySelector('#email-container').append(element);
});
weird little bug I can't figure out, I have the following line:
$("#ingredientlist").append('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor);
Basically, in a previous statement I get curColor, which is different depending on what value I'm on. I checked the colors and they're different each time. I want each <li> to be styled to a specific color, so I tried setting the .css() to that, but all my entries are the same color. Any ideas?
Thanks
Currently you are appending li to $("#ingredientlist") then setting its color
You need to set color of li not its parent.
Use
$("#ingredientlist").append(
$('<li></li>')
.text(value + ' parts ' + capitalize(index + ''))
.css("color", curColor)
);
The issue is because append() returns the parent element, not the one which was appended. This means that your code is actually setting the color of the #ingredientlist element, not the li. Try this instead:
$('<li />', { text: value + ' parts ' + capitalize(index + '') })
.css('color', curColor)
.appendTo('#ingredientlist');
You're applying the .css call to the #ingredientlist set, not the li you're appending.
Instead:
$("#ingredientlist").append($('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor));
// Changes -----------------^^-------------------------------------------------------------------------------------^
Breaking that up into parts just to make it clearer:
var $li = $('<li>' + value + ' parts ' + capitalize(index + '') + '</li>');
$li.css("color", curColor);
$("#ingredientlist").append($li);
I need help with a little script ...
when i append content and drigger create tho content is loaded...
but then when i use $('#set').empty(); for the second time the content is loaded but no JQM style is added (just plain text)
i have read about this problem but i dont find any solution ... i guess that $('#set').collapsibleset('refresh');as it should... any idea ?
thanks
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
Instead of
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
try
$('#set').empty();
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content);
$('#set').collapsibleset().trigger("create");
In this way you only call trigger('create') once after all content has been added.
Here is a DEMO
I have a small .each() loop that checks if span is visible, i'd like to then check if a checkbox is checked or not witin that span tag.
function is
function processReports(){
$("#processedReports").html('');
var repName = $("#reviewType").val();
var divHTML = "<table style='width: 300px;'><tr><td style='width:30%; text-align:left; font-weight:bold;'>Report</td><td style='font-weight:bold; width:50%; text-align:right; padding-right:4px;'>Date/Time Run</td><td style='font-weight:bold;'>Progress</td></tr>";
var d = new Date();
var strDate = (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
var strTime = d.toLocaleTimeString();
$("#reportChecks span:visible").each(function(){
var reportName = $(this).attr("reportType");
**if($('input.checkbox').is(':checked')){**
divHTML += "<tr><td style='width:30%; text-align:left;' class='" + reportName +"' advID='" + $(this).text() + "'>" + reportName + "</td><td style='width:50%; text-align:right; padding-right:4px;'>" + strDate + "," + strTime + "</td><td><a href='/Applications/help/Reports/Prospect_reports/Prospect1ClickReview.pdf' target='_blank'>View</a></td></tr>";
}
//alert($(this).text());
});
divHTML += "</table>";
$("#processedReports").prepend(divHTML);
$("#processedReports").show();
$("#IndReports").show();
}
basically where i have if($('input.checkbox').is('checked')){...... doesn't work. The span tags only have the single checkbox within them, so all i want to do is know if that element is checked or not, if it is append the divHTML if not, continue through the loop
thank you!
Check with the .prop() value:
if($(this).find('.checkbox').prop('checked'))
With no assignment, this returns a boolean for the value it has. It's also faster than .is(':checked'):
jsPerf comparing .is(':checked') and .prop('checked')
Of course, if there is only one checkbox, you could use the vanilla JS way:
if($(this).find('.checkbox')[0].checked)
This is faster by a large margin, also seen in the jsPerf provided.
You need to search the descendant of current span object to get the input within it. You can use find() or pass this in context of selector. If you use context it will be translated to find() so I would prefer using find. I assume .checkbox is class of checkbox element you are trying to access.
Using find()
if($(this).find('input.checkbox').is(':checked'))
If checkbox is not class but type then
if($(this).find(':checkbox').is(:checked'))
Using context
if($('input.checkbox', this).is(':checked'))
I have the following code:
$("#stats-list")
.append("<li>Elapsed: " + ajaxElapsed + "</li>\n" +
"<li>Display: " + tableElapsed + "</li>\n" +
"<li>Total: " + (ajaxElapsed + tableElapsed) + "</li>");
This was originally three appends that I concatenated into one. Is there anything I could do with jQuery that would clean up this code even more. What I was wondering was if jQuery has any string formatting with tokens that I could use.
function format(formatString) {
var args = Array.prototype.slice.call(arguments,1);
return formatString.replace(/\{(\d+)\}/g, function(match, num) {
return args[Number(num)];
});
}
format("<li>Elapsed: {0}</li>\n<li>Display: {1}</li>\n<li>Total: {2}</li>",
ajaxElapsed, tableElapsed, ajaxElapsed + tableElapsed);
afaik there is none built-in, but a powerful templating-subsystem, see jQuery Templates
just for completeness, i think this could be done more elegant:
var list = $('#stats-list');
$('<li />').text('Elapsed: ' + ajaxElapsed).appendTo(list);
$('<li />').text('Display: ' + tableElapsed).appendTo(list);
$('<li />').text('Total: ' + (ajaxElapsed + tableElapsed)).appendTo(list);
If you have many items you can do something like this to avoid missing + and writing li so many times. You can add any number of items inside the array and they will be joined with lis appropriately.
var list = '<li>' + [
'Elapsed: ' + ajaxElapsed,
'Display: ' + tableElapsed,
'Total: ' + ajaxElapsed + tableElapsed
].join('</li><li>') + '</li>';
$("#stats-list").append(list);
As a note I wouldn't use \n. li is a block element by default, so you'd be better styling it with css.