We Keep Coding

Make Bootstrap cards clickable

I made a page with several bootstrap cards and if you hover over the card the zoom effect appears. Now I want to make the whole card clickable. That means, when you hover over the card (courser: pointer) you should be able to click and get to another page. There might be a possibility to stretch an a-tag? OR is there something else. Thank you for your help!

document.getElementById("click").onclick = () => {
console.log('clicked')
document.getElementById("click").textContent = "click me (clicked)"
// if you want to redirect ( remove the "//" in the next line ):
// window.location.href = "http://example.com"
}
<span id="click">click me</span>
There's also other ways to do the Javascript such as:
document.getElementById("click").addEventListener('click', () => {
//lines 2-5 from above
})
I do, however, recommend that if you just want to take the user to a new page that you wrap the whole thing in an <a> tag. Why? Sometimes the user has javascript disabled, plus most search engines will not see this as a link if you add it with JavaScript. As a general rule that I use with HTML, you should only use JavaScript when needed. (And I think most others will probably agree).

Scrolling to top inside an accordion

In my page I have 2 scrolls.
One is apparent in the page ( They are not loaded with ajax or something.)
The other one is inside an accordion.
I want these scroll to be always at the top. They have same class names.
With the snipets I can achieve my first goal, scrolling to top in apparent scroll
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
As well as with this one
var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
However, the scroll inside the accordion menu is not affected by this change.
If I open the accordion and run this snippets it scrolls to top.
So that either
I need to find a way to run this snippet not only to apperent but also all scrolls in the page or
when I click the accordion this javascript code needs to be executed.
I would like to solve this problem with the first solution.
I tried this and I couldn't succeed as well. If I put alert() rather than scrolltop inside this function, I got the alertbox.
$(".m-accordion__item").click(function() {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});
How can I achieve this goal?

This solved my problem. BTW this is bootstrap4. So that it may apply to any of bootstrap 4 templates.
$('.collapse').on('shown.bs.collapse', function(e) {
$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

Select the second tab in a section of a page

index.html#section navigates you to a certain section of a page. But I want to select the second tab in a section of a page. I don't know if it can be done without javascript but using Tab Content Script (v 2.2) with the method instance.expandit(tabid_or_position) would seem to work. However, I'm having a hard time figuring out how to select the second tab in a section of a page.
Hope you could help me with this. Thanks!

As mentioned in the comment, you want to navigate to the tab when a button is clicked.
Though not a clean way, but you may simulate a click action on tab once the is button clicked.
var element = document.getElementById('coupon-navigator');
element.addEventListener("click", function(e) {
document.getElementById('tab2').click();
}, false);

EmberJS: Jquery datepicker stays active when changing routes

I have an emberjs web app where one of my views is a search page to query a database of records. I have the ability to filter by date and am using JQuery's datepicker.
The problem I am having is that if a user opens the datepicker and then hits either the browser back or forward button it stays active on the screen until a user clicks away. To clarify the process is as below:
Navigate to search page
Click select date
Datepicker appears
User clicks the browsers back button
Previous page loads BUT with datepicker still lingering around
Does anyone have any suggestions of how to hide or destroy the datepicker when a browsers back button is pressed?
Thanks!!
EDIT----------------------------
Current code:
Formal.Route.Search = Ember.Route.extend({
deactivate: function () {
console.log("hi");
$("ui-datepicker-div").datepicker("destroy");
},

Put the removal logic at View instead Route. Lets assume your template name is "search", then
App.SearchView=Ember.View.extend({
didInsertElement:function(){
$("#ui-datepicker-div").datepicker();
},
willDestroyElement:function()){
$("#ui-datepicker-div").datepicker("destroy");
}
});
Note: I assumed your selector is ID, if it is css class then use $(".ui-datepicker-div")
If you would like to write datepicker as component which can be used across the application then do watch the Screencast here http://eviltrout.com/2014/06/03/jquery-component.html
P.S. If you still could not figure out, please show your code in http://jsbin.com/

Thank you all very much for your help!
I resolved the issue with the following:
Formal.View.Datepicker = Ember.TextField.extend({
destroyDatepicker: function () {
this.$().datepicker("hide");
},
});
For some reason "destroy" was not doing the trick but "hide" does. If anyone has any insight into why this is I'd love to hear.

FullCalendar Not Rendering in Tabs

I have some basic custom tabs setup that function using click events that show/hide DIVs.
FullCalendar isn't showing up on one of those tabs despite using the render function (docs).
$(".tabs .tab").click (e) ->
...
$("#calendar").fullCalendar "render"
The #calendar DIV is initially hidden, but from my understanding, the render function should force the calendar to render with each click. All of the other tabs work properly, so I know that it's not a problem with the show/hide functionality at all.
Does anyone know what might be going wrong here?

The problem ended up being related to the way I was showing/hiding DIVs-
The CSS selector that I was using to hide DIVs was too broad and ended up assigning display: none; to the calendar DIV (which was a child of the tab content DIVs).
The solution was to change:
$("#tab-contents div").hide()
To:
$("#tab-contents").children().hide
In the HTML the calendar was shown like this (in HAML):
#tab-contents
#tab-calendar
#calendar
#tab-other
...
Thanks for the help and suggestions, and I should have posted more code in the beginning.

There usually are problems with some scripts no being able to work correctly on hidden DIV's.
I usually load page with everything visible, and after about 200ms I hide everything, that needs to be hidden.
For bootstrap tabs, I set every tab container "active" class and for tabs menu, I use this trigger script.
setTimeout(function() {
$('.my-tabs-control a').first().click();
}, 200);
You could try this solution for your own script.