So I only want to have one selected date on my calendar UI, however when I press a new date, the old one is still lit up, and so I can press all the days on my calendar and they'll all light up.
for(var dayCounter = 1; dayCounter <= currMonthDays; dayCounter++){
tempListItem = document.createElement("li");
tempListItem.innerHTML = dayCounter;
$(tempListItem).addClass("day");
//add a hidden element to the day that we can access when we click on it
var temp = months[currMonth] +"/" + dayCounter +"/" + currFullYear;
$(tempListItem).append("<div class = 'hidden'>" + temp + "</div>");
if(dayCounter == date.getDate() && currMonth == date.getMonth()){
tempListItem.setAttribute("id", "current-day");
}
ulDays.appendChild(tempListItem);
}
$(document).on("click", ".day", function()
{
var date = $(this).children(".hidden").text();
console.log(date);
$(document.getElementById("current-day")).removeAttr("#current-day");
$(this).attr("id", "current-day");
});
After removing the current-day class, shouldn't the element lose its CSS?
It looks like you have a small big when you try to remove the id from the current-day. removeAttr expects the name of an attribute. In this case, that attribute would be id, so try this:
$(document.getElementById("current-day")).removeAttr("id");
Related
I am manipulating a WordPress calendar plugin. I'm trying to add some CSS to the dates on the calendar for every day up to the current date. The plugin that I'm using, has the calendar in a table. The code for an individual day looks like this:
<td class="day-with-date" data-date="2017-5-10">
<div class="day-number">10</div>
</td>
I'm trying to use jQuery to loop through the dates from the data attribute.
This is my script.
$('.day-with-date .day-number').each(function(element){
var dataNumber = "[data-date=" + $(this).text() + "]";
var dataDateDay = "[data-date="+day+"]";
var textDay = $(this).text();
if(textDay <= day){
$('td.day-with-date .day-number').addClass('online-display');
}else if(textDay > day){
$('td.day-with-date .day-number').removeClass('online-display');
}else{
console.log("error douche");
}
});
What it's doing, is adding the CSS because textDay is <= than day. But it's removing the class after it's applied. I'm trying to get the CSS to add for all days up to today's date, then remove the CSS for days after.
How can I loop through the calendar dates, then apply my CSS class to all days up to the current date?
Thanks in advance!
There needs to be a change in your .each function:
$('.day-with-date .day-number').each(function(index) {
var dataNumber = "[data-date=" + $(this).text() + "]";
var dataDateDay = "[data-date=" + day + "]";
var textDay = $(this).text();
if (textDay <= day) {
$(this).addClass('online-display');
} else if (textDay > day) {
$(this).removeClass('online-display');
} else {
console.log("error douche");
}
});
You can try it here: https://jsfiddle.net/k99o5b39/
Try this
... // day has been defined
$('.day-with-date .day-number').each(function(element){
var parsedDay = Number.parseInt(element.text());
if(parsedDay <= day){
element.addClass('online-display');
} else {
element.removeClass('online-display');
}
});
I'm trying to add date on top of the messages sent and receive on a particular day in my chat app. For instance:
-----Yesterday-----
mike: Hello
Jan: Hi
-----Today----
Eunice: Help! I've been trying to do this all day
Fid: Me too. Lets ask for help.
I have written the JS to calculate the date and tried to append to the top of the messages sent daily.
Here is what I've done:
add the day of the week as a classname to messages sent on the day
use jQuery to select the first element with the classname (day of the week).
Firbase is the bomb
Yes for sure
I'm still learning it though
append html tag e.g Today to the first div
Here is my JS
last10Comments.on('child_added', function (snapshot) {
var comment = snapshot.val();
var newDiv = $("<div/>").addClass("comment ").attr("id",snapshot.name()).appendTo("#comments");
FB.api("/" + comment.userid, function(userdata) {
comment.name = userdata.name;
newDiv.html(Mustache.to_html($('#template').html(), comment));
});
var outputTime = $("<span/>").addClass("timespan "+ te.getDayName() +"").attr("id",yiu).appendTo("#comments").text(Timeformat());
var tim = $('.'+ te.getDayName() +'')[0];
$('#'+tim+'').prepend( "<p>Test</p>" );
})
This JS actually gets the first element. but the probelem is, it prepend the text based on the number of element with the same class. i.e if 5 divs contain same classname, it prepends it 5 times. e.g Wednesday Wednesday Wednesday Wednesday Wednesday
I have no way to try out, so I am just guessing here, try this:
last10Comments.on('child_added', function (snapshot) {
(function (te) {
var comment = snapshot.val();
var newDiv = $("<div/>").addClass("comment ").attr("id", snapshot.name()).appendTo("#comments");
FB.api("/" + comment.userid, function (userdata) {
comment.name = userdata.name;
newDiv.html(Mustache.to_html($('#template').html(), comment));
});
var outputTime = $("<span/>").addClass("timespan " + te.getDayName() + "").attr("id", yiu).appendTo("#comments").text(Timeformat());
var tim = $('.' + te.getDayName() + '')[0];
$('#' + tim + '').prepend("<p>Test</p>");
})(te);
})
Let me know it if works. If it fixes your problem, then I will explain in comments.
I am new to the javascript/aspx world and most of my programming was done through trial and error and lots of internet searching, but i've hit upon a problem i cannot find a solution for.
I have a popup page that has 2 input boxes, and i have managed to add default values to both of these input boxes, for dates, like so:
$(window).load(function () {
var now = new Date();
var month = (now.getMonth() + 1);
var day = now.getDate();
if (month < 10)
month = "0" + month;
if (day < 10)
day = "0" + day;
$('#FNewDate').val('01/' + month + '/' + now.getFullYear());
$('#TNewDate').val(day + '/' + month + '/' + now.getFullYear());
}
now, if the user has entered a new date and hits the submit button, the page posts and reloads with the calculated results displayed to the user AND THE DEFAULT VALUES again, but not with the new dates the user has entered, and i need it to stay with the entered information.
I have tried playing around with static members but i have not been able to get it to work.
Here is the button action:
<asp:Button ID = "Calculate" runat = "server"
style="width:40% ; font:15px arial" Text = "Calculate" onclick="Calculate_Click" />
any help on the above would be appreciated, and pls include code in your replies...
Thnks
You should change your default value setters to add
if ($('#FNewDate').val().length() != 0)
To only set the value in case the value coming from server is empty.
Then in your input
<input type="text" id="FNewDate" value="<%=someObject.getSomeDate()%>"/>
feel like im coming here way too often to ask questions but yet again I am stuck. I am attempting to select a textarea and allow myself to edit the text in another textarea, which works fine using textboxs but not with textareas. Every time I click on the div container I am getting an undefined result when looking for the textarea. Below is the code.
jQuery
$(".textAreaContainer").live('click','div', function(){
var divID = this.id;
if ( divID !== "" ){
var lastChar = divID.substr(divID.length - 1);
var t = $('#' + divID ).find(':input');
alert(t.attr('id'));
t = t.clone(false);
t.attr('data-related-field-id', t.attr('id'));
t.attr('id', t.attr('id') + '_Add');
t.attr('data-add-field', 'true');
var text = document.getElementById(divID).innerHTML;
//var textboxId = $('div.textAreaContainer').find('input[type="textArea"]')[lastChar].id;
$('div#placeholder input[type="button"]').hide();
var text = "<p>Please fill out what " + t.attr('id') +" Textarea shall contain</p>";
if ( $('#' + t.attr('id')).length == 0 ) {
$('div#placeholder').html(t);
$('div#placeholder').prepend(text);
}
}
else{
}
});
t.attr('id') should be returning textbox1(or similar) but instead just returns undefined.
I have tried .find(':textarea'),.find('textarea'),.find(text,textArea),.find(':input') and quite a few others that I have found through google but all of them return undefined and I have no idea why. A demo can be found here, http://jsfiddle.net/xYwaw/. Thanks in advance for any help guys, it is appreciated.
EDIT: Below is the code for a very similar example I am using. This does what I want to do but with textboxs instead of textareas.
$('#textAdd').live('click',function() {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Textbox " + textBoxCounter + " <br><div id='container" + counter + "' class='container'><li><input type='text' id='textBox" + textBoxCounter +"' name='textBox" + textBoxCounter + "'></li></div></br>";
document.getElementById("identifier").appendChild(newdiv);
textBoxCounter++
counter++;
});
$(".container").live('click','div', function(){
var divID = this.id;
if ( divID !== "" ){
var lastChar = divID.substr(divID.length - 1);
var t = $('#' + divID).find('input');
alert(divID);
t = t.clone(false);
t.attr('data-related-field-id', t.attr('id'));
alert(t.attr('id'));
t.attr('id', t.attr('id') + '_Add');
t.attr('data-add-field', 'true');
var text = document.getElementById(divID).innerHTML;
// var textboxId = $('div.container').find('input[type="text"]')[lastChar].id;
$('div#placeholder input[type="button"]').hide();
var text = "<p>Please fill out what " + t.attr('id') +" textbox shall contain</p>";
if ( $('#' + t.attr('id')).length == 0 ) {
$('div#placeholder').html(t);
$('div#placeholder').prepend(text);
}
}
else{
}
});
First up remove the second parameter, 'div', from the first line:
$(".textAreaContainer").live('click','div', function(){
...to make it:
$(".textAreaContainer").live('click', function(){
Then change:
var t = $('#' + divID ).find(':input');
...to:
var t = $(this).find(':input');
Because you already know that this is the container so there's no need to select it again by id. Also the id attributes that you're assigning to your textarea containers have a space in them, which is invalid and results in your original code trying to select the element with '#textAreaContainer 0' which actually looks for a 0 tag that is a descendant of #textAreaContainer. So fixing the code that creates the elements to remove that space in the id is both a good idea in general and an alternative way of fixing this problem.
how can I use the values from the code below:
<html:select property="state" >
<html:option value="0">Select State</html:option>
<html:optionsCollection name="InputForm" property="stateList" label="label" value="value" />
</html:select>
to populate a textbox with whatever the selected value is for the state with a javascript onchange event? for example if texas is the selected state I want Texas to be written in the textbox and if I change the value to Colorado I would like Colorado and Texas to both show in the textbox. I am currently getting an undefined value in the textbox. I am using the following javascript code:
function displayState(obj, state) {
var theId = obj.id.substring(obj.id.indexOf('_') + 1);
var text = document.getElementById('text' + '_' + theId);
var textVal = text.value;
var stateSelect = document.getElementById('stateCode' + '_' + theId);
var stateSelectStr = new String(stateSelect.value);
var stateSelectSplit = stateSelectStr.split(',');
var stateSelectValue = stateSelectSplit[0];
var stateSelectLabel = stateSelectSplit[1];
if (stateSelectValue == '51') {
stateSelectLabel = '';
}
if (stateSelectValue != '00') {
textVal = textVal != '' ? eval('text.value=\'' + textVal + ', '
+ stateSelectLabel + '\'')
: eval('text.value=\'' + stateSelectLabel + '\'');
}
}
First off, start using jQuery (or equivalent), it will make your life much easier. Second, why are you using eval? You already have the text element; just build the appropriate string and set the value. See here for an example.
But again, using something like jQuery makes this laughably easy--I can't recommend using a library for simple DOM manipulation like this.
See here for a comparison between raw JS and JQ.