We Keep Coding

replacing and hiding gridcontainers

This is what I have:
I have a gridcontainer with three cells where one cell contains three buttons. Each button displays an image below the container.
My javascript code is supposed to make the image disappear if a button is pressed twice butdoes not do so atm. The only way to make it disappear is to either press another picture hence replacing it with a new pic or reload the page.
This is what I want to do:
Instead of replacing and hiding images, I want to replace and hide gridcontainers. So instead of buttons showing pictures they will show a couple of cells with a mix of text and images. The content and layout on this will change when a new button is change, and will totally disappear when the same button is pressed twice. Is this doable.
This is my current javascript:
function changeImage(element){
if(document.getElementById('imageReplace').src==element){
document.getElementById('imageReplace').src="";
} else{ document.getElementById('imageReplace').src=element; }
it is activated by this html:
<div class="cell"><h2>Top reasons you should have a digital self
defense</h2>
<button class="infobutt"
onclick="changeImage('survcap1.jpeg');">Intellectual
freedom</button>
<button class="infobutt"
onclick="changeImage('survcap2.jpeg');">protect vulnerable
groups</button>
<button class="infobutt"
onclick="changeImage('survcap3.jpeg');">Take control over your
life</button></div>"
and correponds further with this html (Situated outside and below the container, also below main tag):
<img src="" alt="Images" id="imageReplace"/>
What is wrong with my current code and how can I improve it to suit my purpose?

Bootstrap checkbuttons with icons does not works

I have the need to add checkbuttons to my table and I want use the Bootstrap Button for this.
I found a snippet on the web that combine icons with buttons and the JS code to define buttons behavior. Cause this code is with Glyphicons, in another discussion I asked for an alternative and I obtained it; now I'm using fontawesome.
So, I've done this steps:
Copy the folder with the min.css file in my app folder, under: src/main/webapp/static/font-awesome-css/font-awesome.min.css
Include the folder path in my home page with this syntax: <link href="../../static/font-awesome-css/font-awesome.min.css" rel="stylesheet" media="screen">
Use this snippet: BootStrap Checkbutton With Icons; in particular, I used only one button in my Data Table, this one:
{
"data": null,
"render": function ( data, type, full, meta ) {
return '<span class="button-checkbox"><button type="button" class="btn" data-color="primary">Select</button><input type="checkbox" style="display: none" checked /></span>';
}
},
while for the JS function i tried both an external file to include and to put directly inside the data table file.
Well, the problem is that when i load my app, the button does not have the icons, does not change after click and it's not selected: at start, this is the situation (the not working button is "Select"):
Can you see the grey buttn without icons? Well, after clicking the situation does not change.
What I am doing wrong?
UPDATE 01 Sept: seems that the problem is where the js code is putted.
As first try, I've putted it in the section where I define the table printing; the results are showed after a form interaction, so I've associted the code with the submit button behavior. The problem persist, but I've noticed a change: when the table appair, for 2 second the button are showed correctly and then they became grey.

My best guess whould be that the JS isn't implemented correctly since this is the part that does everything you want:
EDIT:
This might be more helpfull to post too, if you look at there source code they implemented the JS directly into there HTML with a script so I guess you also need to do this.
Source code: view-source:https://s.bootsnipp.com/iframe/7nQMK

fullcalendar and bootstrap visible-print

I am trying to include two fullcalendars on one page. The first should only be visible on screen and the second should only be visible on print.
<div class="hidden-print">
<h1>This is hidden in print</h1>
<div id="calendar"></div>
</div>
<div class="visible-print">
<h1>This is visible in print</h1>
<div id="calendar2"></div>
</div>
But when I print the page, the second calendar is not visible and if I check the source the contents of the second calendar is not rendered. I created a plunk to demonstrate it: http://run.plnkr.co/plunks/RQx1Up2Y1jbzs9Ixm2aX/
(code: http://plnkr.co/edit/RQx1Up2Y1jbzs9Ixm2aX)
It makes sense since this is expected behaviour according to the fullcalendar docs:
"Notice that this example calls render whenever any tab is shown, not just the tab that the calendar is within. This is okay, because FullCalendar is smart enough to only render calendars that are visible to the user." http://fullcalendar.io/docs/display/render/
Is it somehow possible to override this behaviour and put a fullcalendar within a "visible-print"-class anyway?

This isn't a great answer and I would love to see a better one. But it should work if you have a fairly static fullcalendar.
Essentially, start with the FC outside of the visible-print, render it, then move it in.
$('#calendar2').fullCalendar({});
$('#calendar2').fullCalendar('render');
$('#calendar2').appendTo(".visible-print");
Plunker
Note that every time you make a change to it, it will need to be moved out and rendered again.

Can I cache an empty form template as a second page in browser?

can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.

Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).

One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.

Combining SlickGrid Filter Examples

I like the functionality of the Filter in this example:
http://mleibman.github.com/SlickGrid/examples/example-header-row.html
where each column has its own filter, but I also require the functionality of the Filter from:
http://mleibman.github.com/SlickGrid/examples/example4-model.html
In that it can be hidden and shown via button click.
Is it possible to have the Filters from the first link, with the "hide-ability" of the Filter from the second link? Thanks!

Yes, it is. You may use the method grid.hideHeaderRowColumns() in the first example to hide the filter bar. Then use grid.showHeaderRowColumns() to show it again.
For example, navigate to the first link, and replace the contents of the URL bar with:
javascript:grid.hideHeaderRowColumns()
and hit Enter. You should see the filter bar slide up and away. If you are building your app from the first example code, you should be able to call these functions from almost anywhere, ie.
<input type="button" onclick="grid.hideHeaderRowColumns();" value="Hide Filter" />
Note that in the second example, the author uses the following code to add a predefined, but hidden, element to the styled header bar:
// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
.appendTo(grid.getTopPanel())
.show();
And the hidden element:
<div id="inlineFilterPanel"
style="display:none;background:#dddddd;padding:3px;color:black;">
Show tasks with title including
<input type="text" id="txtSearch2">
and % at least
<div style="width:100px;display:inline-block;" id="pcSlider2"></div>
</div>