Develop Reference

I want to change Javascript Font , Size and to be Bold

this is my Javascript code and I want to change the results Font , size and to be Bold. which part of my code should I add them ?
<script>
<!--
var today_obj=new Date()
var today_date=today_obj.getDate()
var tips=new Array()
var tiptitle=''
tips[1]='2-1'
tips[2]='1-1'
tips[3]='2-0'
tips[4]='0-1'
tips[5]='3-2'
document.write(tiptitle)
document.write(tips[today_date])
//-->
</script>

Use some CSS in a span tag.
var tiptitle = "cheeseburger";
document.write('<span style="color:green; font-size: 30px">'+tiptitle+'</span>')

Include HTML tags between them. like this:
document.write('<p class="result">'+ tiptitle +'</p>');
document.write('<p class="result">'+ tips[today_date] +'</p>');
And then style them with css. like this:
.result{
font-famiy:Arial;
font-size:25px;
font-weight:bold;
}
There are other ways too using querySelectors. https://www.w3schools.com/js/js_htmldom_css.asp

How to use Javascript transition in show/hide

I am using this code in the JavaScript to show/hide div. Now i wanna add transition in JavaScript, But can't seem to get it to work.
Div Code
<div class="checkout_other"> <a class="jmbag" href="javascript:void(0);" onclick="showCheckoutOther(this);"><span>+</span>Order Message</a>
<div class="subbox_other">
<div class="p-message-title">Leave a message for Admin:</div>
<textarea name="postscript" cols="100" rows="2" id="postscript" class="message-text ui-textfield ui-textfield-system multiple no-hit" placeholder="Mention If Any Special Request / Instructions About Your Order">{$order.postscript|escape}</textarea>
<p class="message-text-tip">Max. 1,000 English characters or numerals only. No HTML codes.</p>
</div>
</div>
JavaScript Code
<script type="text/javascript">
{literal}
function showCheckoutOther(obj){
var otherParent = obj.parentNode;
otherParent.className = (otherParent.className=='checkout_other') ? 'checkout_other2' : 'checkout_other';
var spanzi = obj.getElementsByTagName('span')[0];
spanzi.innerHTML= spanzi.innerHTML == '+' ? '-' : '+';
}
{/literal}
</script>
Is it possible to make some animation, like fadout, easeout instead of just showing it?

html to pdf conversion using javascript (jsPDF and html2canvas)

I've been looking into converting an HTML page into a PDF on the client side. I found a method with Javascript using html2canvas to parse the DOM and calculate the styles applied, and jsPDF to create the PDF. Link to my page - http://www.choosenj.com/html-to-pdf/
I'm struggling with a couple issues I need resolved:
The Canvased image is rendering the whole page as a single PDF, is there a way to split the long image into a multi page PDF?
Currently panels load as you scroll down, is there a way to load the entire page when clicking the "Create PDF button"?
If I wanted to canvas only panels that had a checkbox selected, how would I edit my JS?
Here my code below (Note: Most include html2canvas and jsPDF javascript libraries):
// Html to PDF
$(window).load(function(){
var
form = $('#Content'),
cache_width = form.width(),
a4 =[ 850, 2000]; // for a4 size paper width and height
$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit:'px',
format:'a4'
});
doc.addImage(img, 'JPEG', 0, 0, 180, 630);
doc.save('choosenj.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas(){
form.width(cache_width).css('max-width','none');
return html2canvas(form,{
imageTimeout:2000,
removeContainer:true
});
}
}());
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .Main Content -->
<div class="sections_group">
<div class="entry-content" itemprop="mainContentOfPage">
<div style="margin: 10px 0;"><a id="create_pdf" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-green" style="margin:0 20px;cursor:pointer;color:#fff;font-family: 'FranklinGothicStd-ExtraCond', Arial, sans-serif !important;text-transform: uppercase !important;">Create PDF</a> </div>
<?php
while ( have_posts() ){
the_post(); // Post Loop
}
?>
</div>
<!-- Contact Section-->
<?php wp_reset_postdata(); ?>
<?php get_template_part('contact-us') ?>
</div>
</div>
</div>
Any insight would be greatly appreciated,
Chris G

How to Combine the Condition of PHP and CSS with JavaScript

I made a page for the mobile version. I made a condition based on the title and the size of the screen. Here is the condition :
If the Title > 17 characters and screen size < 392px
then do:
.postContent img {
bottom: 65px;
}
else and screen size > 391px
.postContent img {
bottom: 50px;
}
Here is image preview : http://i.imgur.com/59IG7UG.png
(sorry, i need at least 10 reputation to post image)
The first article should position the picture as the image to the second article.
How to combine PHP and JavaScript to change CSS :
<?php if (strlen(trim($post->getTitle())) > 17): ?>
<script type="text/javascript">
//do something
</script>
<?php else: ?>
<script type="text/javascript">
//do something
</script>
<?php endif; ?>
I have read this : PHP conditions depending on window width (media queries?)
but don't know how to implemented it.

Maybe try to add class to your .postContent? By printing it into div with PHP.
<div class="postContent <?php
if (strlen(trim($post->getTitle())) > 17) print 'bot65';
else print 'bot50'; ?>
">
// content
</div>

How do I move a php call to another div and have it still work

I've looked around a bit, and found issues similar to mine, but not quite the same. I have a page template that is laid out in 4 columns in HTML. Inside column 4, I have a php function echoing a gallery of images.
<div id="homepage-layout">
<div id="homepage-column-1">
<div class="homepage-small"><?php echo get_homepage_img_small_1(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_2(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_3(); ?></div>
</div><!-- End Column 1 -->
<div id="homepage-column-2">
<div class="homepage-large-left"><?php putRevSlider("homepage"); ?></div>
</div><!-- End Column 2 -->
<div id="homepage-column-3">
<div class="homepage-med"><?php echo get_homepage_img_med_1(); ?></div>
<div class="homepage-med"><?php echo get_homepage_img_med_2(); ?></div>
</div>
<div id="homepage-column-4">
<div class="homepage-large-right"><?php putRevSlider("home_small"); ?></div>
</div><!-- End Column 4 -->
</div>
I'm using jQuery to change the layout of the site based on the width of the window.
var column3 = $("#homepage-column-3").contents();
var column4 = $("#homepage-column-4").contents();
var swapped = false;
$(window).on('resize', function() {
if( $(window).width() <= 700 && !swapped){
$("#homepage-column-3").html(column4);
$("#homepage-column-4").html(column3);
swapped = true;
} else if( $(window).width() > 700) {
$("#homepage-column-3").html(column3);
$("#homepage-column-4").html(column4);
swapped = false;
}
});
However, when the window size triggers the jQuery, the RevSlider from Column 4 freezes on the image it was displaying at the time, and the only way to get it running again is to refresh the page.
Any thoughts? Or, if this question has been answered already, please point me in the right direction.
Thanks!

jeroen had the right idea. I was able to take the 4 columns, and split them into 2 chunks. I was then able to make them both flex containers, and with a of media query, was able to make the columns swap places while keeping the RevSlider initialized.
Thanks to all for your help!