I'm trying to achieve a countdown timer, where the value it counts down from is populated from a Advanced Custom Field date time picker. Ideally I'd like to use http://countdownjs.org/ , or similar to power the timer.
I can simply output the time date value on the page template by calling the ACF field like so.
<p>Event starts: <?php the_field('featured_event_date','options'); ?></p>
However, in order to use a JS/jQuery countdown I need to be able to use to value from ACF inside JS, not PHP? Does this sound correct as a methodology so far? Something like the example below.
var countdown = new Countdown({
selector: '#timer',
msgBefore: 'Will start at Christmas!',
msgAfter: 'Happy new year folks!',
msgPattern:
'{days} days, {hours} hours and {minutes} minutes before new year!',
dateStart: new Date('2013/12/25 12:00'),
dateEnd: new Date('Jan 1, 2014 12:00'),
onStart: function() {
console.log('Merry Christmas!')
},
onEnd: function() {
console.log('Happy New Year!')
}
})
It's pushing my knowledge out of the comfort zone, so advice, experience or examples or this would be much appreciated and help me on my way. Thanks in advance!
Related
I am developing a Server Custom Control (.NET), a "DatePicker" with the jQueryUI Plugin.
So, i have the next script, that is loaded as a webResource:
JavaScript
$(function () {
$("#" + ctrlInput).datepicker({
maxDate: MaxDate,
minDate: MinDate
});
});
As you can see, i have javascript variables, so, for loading the script and the variables, i do the next:
C#
string javascriptVariables = String.Format(
"var MinDate = '{0}'; var MaxDate = '{1}'; var ctrlInput = '{2}';",
MinDate ?? DateTime.MinValue.ToShortDateString(),
MaxDate ?? DateTime.MaxValue.ToShortDateString(),
_textBox.ClientID
);
// Load javascript variables (it will be load every time i add a control)
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dateValues" + _textBox.ClientID, javascriptVariables, true);
// Load jQueryPlugin (it is loaded only once, and this is the problem)
Page.ClientScript.RegisterClientScriptResource(this.GetType(), "[[resourceName]]");
It works fine. The problem is when i add this control to a page more than once.
And it is because the script variables are loaded fine, but the RegisterClientScriptResource doesn't load the jQuery Plugin again! And i don't know how i can force the load! Because i can't set the resource key to the RegisterClientScriptResource
Does anybody know how to solve this?
Thanks
I don't think you're taking the problem the right way.
Using global variables (in js) especially when they're actually only used locally is a very bad idea. source
Loading jQuery or a jQuery plugin more than once can also be a source of bugs. source
What i would do is to think of another way of passing variables to your javascript, something like data attributes.
You're probably having an html input generated with from server control, add data attributes for your dates :
<input type="text" ... data-mindate="01/01/2013" data-maxdate="12/31/2013" />
Next step is, instead of feeding the global variables to the datepicker function, use the data attributes :
$('#whatever').data('mindate');
or
$('#whatever').attr('data-mindate');
And a fast demo : http://jsfiddle.net/JjemN/
Is there any way I can create custom/conditional registration/profile fields in buddypress.
I tried Googling a lot about this, but I am not getting proper solution.
The condition what I am thinking of is :
I want to create 2/3 dropdowns, suppose if 1st one contains vehicles type(car, bike,),
then the second dropdown's option should change according to what user is choosing in dropdown 1.
any help would be appreciated.
Thanks a ton in advance. :-)
Currently there is no working plugin or hack for that. I saw such thing on some sites - but this is done via JavaScript and heavily modifying of a registration page source code.
It will be little tricky unless you touch register/resgistration.php source.
you can do like this if you little familiar with jquery.
Theres a hidden field ( id "signup_profile_field_ids" ) in buddypress registration form which tells server what fields in registration form, it will look like
<input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="5,11,1,10,32">
value of that field contains field ids of the registration form.
Now, you need to select a parent field to show conditional fields. you need to know parent and conditional field ids
now use this jquery code
<script type="text/javascript">
$(function(){
var childs = new Array("Child id 1","Child id 1"); // your child fields ids
var options = new Array("Car","Bike"); // your parent field options, notice option and child number is same, which means, one child for one option
var parent = "Parent Field id"; // place you parent field id
var currentFields = new Array();
currentFields = $("#signup_profile_field_ids").val().split(','); // take all current fields ids in an array
$.each(childs, function(index,value){
$('#field_'+value).parent().hide(); // hide all child fields first
currentFields.splice(currentFields.indexOf(value),1);
});
$("#signup_profile_field_ids").val( currentFields.join() );
$('#field_'+parent).after('<div id="conditional-fields-conteiner></div>"');
$('#field_'+parent).change(function(){
var option = $(this).val();
var appendField = childs[options.indexOf(option)];
var html = $("#field_"+appendField).parent().html();
$('#conditional-fields-conteiner').html(html);
$.each(childs, function(index,value){
currentFields.splice(currentFields.indexOf(value),1);
});
currentField[] = appendField;
$("#signup_profile_field_ids").val( currentFields.join() );
});
});
</script>
This may seems complex, but this is the easiest approach. if you are planning it in membership site, dont use it. user can manupulate conditional fields simply by editing html.
Theres also a plugin for this, going to release soon. I am developing it
http://rimonhabib.com/coming-up-next-buddypress-nested-conditional-fields/
I am sure there is a simple solution, but after reading existing posts and the documentation, I haven't been able to locate it just yet. This is my first post here, so any help is much appreciated.
I am integrating the FullCalendar with ExpressionEngine and the Calendar module for EE, and I have events rendering in FancyBox.
My only remaining issue is that the background of each event is the same color. What I am wanting to accomplish is on any given day, make multiple events have a different background color to identify the event as unique. In the documentation, it explains how to change the background color, but it's an "all-or-nothing" solution.
I also attempted to tweak the styles, but this made every day cell have the background color, rather than the actual individual events.
The code that builds the calendar and populates events from EE is listed as follows:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: ''
},
editable: false,
events: [ {}
{exp:calendar:events event_id="{segment_3}" sort="asc" dynamic="off"}
{occurrences}
,{title: '{event_title}',
url: '{url_title_path="path_to/event/"}',
start: new Date({occurrence_start_date format="%Y,%n-1,%j"}),
end: new Date({occurrence_end_date format="%Y,%n-1,%j"}),
allDay: true,}
{/occurrences}
{/exp:calendar:events}
],
eventClick: function(event) {
if (event.url) {
$("a").fancybox(event.url);
return false;
}
}
}); });
This would be simple to do if the events were manually being populated, but the data is coming from ExpressionEngine, rather than being hard-coded.
Any thoughts on how to make each event on a per-day basis render with a different background color than any of the other events listed for that same day?
Thanks for reading!!!
The current version of fullCalendar has a property on an event object '.backgroundColor' which can be set to change the background colour of that event. Of course you'd have to write some code to set up the background colours to all be unique within a day.
You may consider using the css3 nth child selectors here. This will allow CSS to automagically change the colors for you. See: http://css-tricks.com/how-nth-child-works/
You would of course need to target the appropriate elements, but without seeing the full DOM it will be very difficult for us to help with that here.
You can use eventAfterAllRenderwhich is triggered after all events have finished rendering in the fullCalendar from both source.
eventAfterAllRender: function( view ) {
var allevents = $('#calendar').fullCalendar('clientEvents');
}
Now, with the allevents object, you can do whatever toy wish.
Here is the one I took for me:
eventAfterAllRender: function(view) {
var allevents = $('#calendar').fullCalendar('clientEvents');
var countevents = 0;
if( allevents.length ) {
countevents = countevents + allevents.length;
}
if(!countevents) {
// alert('event count is'+countevents);
console.log('event count is',countevents);
}
}
One of my friend was able to get the id of duplicate events and now I can delete the duplicate event within a loop as:
$('#calendar').fullCalendar('removeEvents', allevents[i].id);
Now it is up to you. Very sorry because I am running a busy schedule nowadays. I'm glad if someone would generate a proper solution for Mr. Lane from this(even by editing this answer).
Thank you.
I'm using the latest Drupal 7.2 core and I have no idea how to solve my problem. I'd like to collapse all nodes comments (there's lots of them) and expose them for the user when he presses 'show comments'. I know it has something to do with the fieldsets (or maybe I'm wrong), but where, what and how ?
Every helpful answer will be appreciated.
Thanks in advance.
I wrote a begging private message to one of the contributors and he posted a working solution for collapsible comments in D7 - http://drupal.org/node/94035#comment-4674734
So i tried a bunch of ways as suggested here.
The thing I ended up doing since I was trying to basically just put all the comments stuff into a collapsible fieldset is outlined here:
Go into the Content Type -> Manage Display.
Create an empty fieldset called something like Comments (You'll need fieldset/fieldcollection modules)
Once you have the group, grab the field_groupname for later use in code.
In your theme's template.php, or whereever you have the render arrays you'll have something like this to basically add the "comments" object into the group fieldset you just created.
function mytheme_preprocess_node(&$vars, $hook){
$tempField = null;
// Copy the comments / comment form into a variable.
$tempField = $vars['content']['comments'];
// Rename some of the labels, use the markup
$tempField['#title'] = "DMS URL";
$tempField['#field_name'] = "field_comments";
$tempField[0]['#markup'] = $vars['content']['comments'];
// Add it into the group (fieldset/group name you copied)
$vars['content']['group_commentsgroup']['field_comments'] = $tempField;
}
This will basically add your comments markup into an empty fieldset/group you created using node's manage display using fieldset/fieldcollection. Also, I was using ajax_comments for this.
This is more of a tip than an answer to your problem, but our website stopped using Drupal comments since they were too basic and moved to use the free service called Disqus
After a looong time of searching For Individual Collapsible comments I found a solution, where you can put your comment replies in an individual collapsible fieldset. :)
Below code in script.js
Include the js in .info file as scripts[] = js/script.js
(function($) {$(function() {
// Hurry up and hide the comments and its replies, if present. In most browsers, this
$('.indented').hide();
// The Comment section will be turned into a toggle to
// open/close the comments
$('.comment').addClass('closed').bind('click', function() {
var $self = $(this),
$form = $self.siblings('.indented'),
speed = 250; // speed of animation, change to suit, larger = slower
if ($self.hasClass('open')) {
$self.addClass('transition').removeClass('open');
$form.hide(speed, function() {
$self.addClass('closed').removeClass('transition');
});
}
else {
$self.addClass('transition').removeClass('closed');
$form.show(speed, function() {
$self.addClass('open').removeClass('transition');
});
}
});
}); })(jQuery);
I have searched long and hard for module that would show Customer Savings(in $$). There are two ways I wish to possibly implement this.
Method One:
Customer enters a "base" $$ amount, start date, and an incrementing value per time period
Ex: Base=$1,000,000; Start:1/1/2010; Increment=$100; Time Period=Minute
This would diplay $1,432,000 after exactly 3 days (3days*24hrs*60mins*$100=$432,000 since 1/1/2010)
Each time the person refreshed the page, the amount saved would be calculated based on the difference in time between the start date and current date, and displayed to the user.
Method Two:(IDEAL)
Same setup as above, but savings would be updated every second (and possibly with some kind of odometer-looking counter that is constantly rolling over).
Has anyone seen or heard of any module like this? I have searched high and low and the only "counters" I can find are hit counters and such. If no one is aware of any pre-existing modules, how could this be coded into a DotNetNuke module? I have not yet delved into the world of coding custom modules. I have only tweaked other modules to make them work the way I need.
Any and all help is greatly appreciated!
UPDATE:
Here is my final code.
In the "footer" section (under Settings) of DNN HTML module:
$(document).ready(function(){
setTimeout('countit()',1); //1 makes it display the value quickly after loading
});
function countit()
{
var amountperyear=4000000; //THIS IS THE ONLY NUMBER TO EDIT EACH YEAR
var msperyear=31536000000; //milliseconds per year
var today=new Date();
var startdate=new Date(today.getYear(),0,00); //January 1, of the current year at midnight?
var diff=Math.ceil((today.getTime()-startdate.getTime())); //Time difference in milliseconds
var newvalue=(diff*(amountperyear/msperyear)); // (# of ms) * (amount/ms)
var displayvalue=newvalue.toLocaleString(); //Convert to currency formatting
$("#mycounter").html("$"+displayvalue);
setTimeout('countit()',500); //Have it update twice per second
}
</script>
In the Content section of the DNN HTML module:
<center>
This year, we've saved our customers:
<b><div id="mycounter"><i>Loading...</i></div></b>
</center>
NEW ISSUE:
This script is only working in Internet Explorer. In Chrome and Firefox the result in off by more than a billion. I'm not quite sure what is causing the issue, but I believe it has to do with the date math or the .toLocaleString() perhaps? Anyone who might have run into this issue before? Any insight or links would be greatly appreciated! For now, I simply but in some conditional comments but this can't be a permanent fix!
<![if !IE]>You must use IE to view this<![endif]-->
Create an HTML file on your local hard drive and put this in it. Then open it in your web browser. It will start incrementing a number. What you are looking for does not exist in DNN but it can be done with some simple Javascript. This should get you started.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var count=5;
$(document).ready(function(){
setTimeout('countit()',1000);
});
function countit()
{
var startmoney = 10;
var today=new Date();
var startdate=new Date(2010, 10, 01); //this is actually 11-1-2010 the 10 is 0 based so actually month 11
var one_day=1000*60*60*24;
var diff=Math.ceil((today.getTime()-startdate.getTime())/(one_day));
//diff is the main factor which is the difference in days between startdate & today
count=count*2;
var newvalue=startmoney*count*diff;
$("#mycounter").html(newvalue);
setTimeout('countit()',1000);
}
</script>
</head>
<body
<div id="mycounter"></div>
</body>
</html>