We Keep Coding

Adding Media Query

I want to make my countdown timer responsive in mobile view I want to make it responsive in mobile device such a way that it should be like a list days ,hours,min,seconds how to do that ?
jsfiddle
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="main">
<div class="content">
<div class="text">
</div>
<!-- /.Text Div -->
<div class="counter">
<h3>Registration Closes In :</h3>
<div id="countdown"><span class="days">10 <b>Days</b></span> <span class="hours">7 <b>Hours</b></span> <span class="minutes">26 <b>Minutes</b></span> <span class="seconds">58 <b>Seconds</b></span></div>
<!-- /#Countdown Div -->
</div>
<!-- /.Counter Div -->
</div>
<!-- /.Content Div -->
</div>
<!-- /#Main Div -->
</div>
<!-- /.Columns Div -->
</div>
<!-- /.Row Div -->

According to what I understood, you are asking for, How to calculate the time difference between Today and the FinalDay ?
var today = new Date();
var FinalDay = new Date("7-01-2017 18:00");
var milliSecondsRemaining = (FinalDay - today); // milliseconds between now & FinalDay
var daysRemaining = Math.floor(milliSecondsRemaining / 86400000); // days
var hoursRemaining = Math.floor((milliSecondsRemaining % 86400000) / 3600000); // hours
var minutesRemaining = Math.round(((milliSecondsRemaining % 86400000) % 3600000) / 60000); // minutes
alert("Registration Closes In" + daysRemaining + " Days, " + hoursRemaining + " Hours, " + minutesRemaining + " Minutes");
Hope this solves your problem.

jQuery fade content out and then fade new content in continuously

I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.
To put it simply the content will keep switching between #fade1 and #fade2.
HTML:
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="opactiy:0">test</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
JS:
$(document).ready(function () {
// runs fade code for homepage content
fadeThem();
}
// fades content in and out on homepage
function fadeThem() {
$("#fade1").fadeOut(3000, function() {
$("#fade2").fadeIn(2000, fadeThem());
$("#fade2").fadeOut(2000, fadeThem());
$("#fade1").fadeIn(2000, fadeThem());
});
}

Why don't you put your code in : $( window ).load(function() {} ;
Something like this :
$( window ).load(function() {
// -- Snipped -- //
$(".right-image-crm").addClass('right-image-up');
$(".left-image-crm").addClass("left-image-up");
$(".center-image-crm").addClass("center-image-up");
$(".loader").fadeOut(1000,function(){
}
});

Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/
You can have any Number of PlaceHolders in this code. I have made 4.
var _toggle = {
totalNodes: null,
lastNode: 0,
duration: 1000,
init: function () {
_toggle.totalNodes = $(".toggle").length;
_toggle.next();
},
next: function () {
var nextNode = _toggle.lastNode + 1;
if (nextNode >= _toggle.totalNodes) {
nextNode = 0;
}
//
$(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
$(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
_toggle.next();
});
_toggle.lastNode = nextNode;
}
}
$(document).ready(function () {
_toggle.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p class = "toggle" style = "display: none;">test</p>
<p class = "toggle" style = "display: none;">Ahsan</p>
<p class = "toggle" style = "display: none;">http://aboutahsan.com</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->

Try using .fadeToggle()
$(document).ready(function() {
var p = $("p[id^=fade]");
function fadeThem() {
return p.fadeToggle(3000, function() {
fadeThem()
});
}
fadeThem();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="display:none">test</p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- text slider -->

equalHeight on row and columns

I have a html structure with a lot of rows and columns.
Now I want that all columns in the same row have the same height.
I have make a script that doing equalHeight. But this script put the same height on all the columns. Below you find the html and the script.
What I'm doing wrong? Thank you for helping me!
<div class="row">
<div class="column">
</div><!-- /column -->
<div class="column">
</div><!-- /column -->
</div><!-- /row -->
<div class="row">
<div class="column">
</div><!-- /column -->
<div class="column">
</div><!-- /column -->
<div class="column">
</div><!-- /column -->
</div><!-- /row -->
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).outerHeight();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
};
equalHeight($('.row .column'));

Take this script http://jsfiddle.net/mmSeU/2/
function equalHeight(group) {
$(group).each(function(i,eachrow) {
tallest = 0;
$(eachrow).children('.column').each(function(j,eachcolumn) {
thisHeight = $(eachcolumn).outerHeight();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
$(eachrow).children('.column').height(tallest);
});};equalHeight($('.row'));

on click generate anew tab using jquery

there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.
<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo — Component Library</title>
<script type="text/javascript">
function displaydetails() {
document.getElementById("tab2").style.display = "";
}
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- tabpanel_customer_data -->
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active">Tab 1</li>
<li id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>
</ul>
<!-- Tab_content 01 -->
<div id="content01" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-1">tab 1</h3>
<div class="texts">
<p>
click me
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 01 -->
<!-- Tab_content 02 -->
<div id="content02" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-2">tab 2</h3>
<div class="texts">
<p>
Content of the 2nd tab
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 02 -->
</div>
<!-- /tabpanel_customer_data -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->
js
var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass = "tabpanel-tabbar-item";
var linkClass = "tabpanel-tabbar-link";
var panelClass = "tab_panel_content_2";
var spanClass = "span_tab";
$(document).ready(function() {
$("."+panelClass).addClass(hideClass);
$("div."+tabClass+" ul li."+itemClass).each(function() {
var link = $(this).children("a");
$(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
$(this).children("span."+spanClass).hide();
});
$("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
});
$("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
$(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
return false;
});
});

If this is your new tab try this:
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show().focus();

Bootstrap modal not firing following partial ajax load

I'm using Bootstrap with the latest version of jQuery and am having an issue displaying a modal following a partial update of the page via Ajax.
The modal fires ok multiple times before the UpdateRegister function runs after 60 seconds, after that I receive a "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'" when I click on the button to open the modal again.
The button that fires the modal ('#cmdAdd') is outside the Div updated by the Ajax call.
The javascript is as below:
$(function() {
// Display Add Visitor modal
$("#cmdAdd").on("click", function () {
var url = "/Visitor/Add/";
$.get(url, function (data) {
$("#myModal").html(data);
$('#myModal').modal('show');
});
});
// Update register every 60 seconds
setInterval(function () {
UpdateRegister();
}, 60000);
});
function UpdateRegister() {
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var thisDate = month + "/" + day + "/" + year;
var url = "/Visitor/RegisterList?date=" + thisDate + "&filter=current";
$.get(url, function (data) {
$("#RegisterList").html(data);
});
}
HTML is as follows:
<div class="row">
<div class="col-lg-12">
<h2>#Model.Date.DayOfWeek #Model.Date.ToLongDateString()</h2><br />
<div class="btn-group pull-right">
<button type="button" class="btn btn-danger" id="cmdEmergency">Emergency</button>
<button type="button" class="btn btn-default" id="cmdAdd">Add Visitor</button>
<button type="button" class="btn btn-default" id="cmdAddBulk">Add Bulk Visitors</button>
</div>
<ul class="nav nav-tabs">
<li class="active">Current Register <span class="label label-success" id="CountIn">#Model.VisitorsIn</span></li>
<li>Visitors Expected <span class="label label-success">#Model.VisitorsExpected</span></li>
<li>All Visitors <span class="label label-success" id="CountTotal">#Model.TotalVisitors</span></li>
</ul>
<div class="tab-content">
<!-- Visitors currently in the building -->
<div class="tab-pane active" id="register">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="RegisterList">
#Html.Action("RegisterList", new { date = Model.Date, filter="current" })
</div>
</div>
</div>
</div>
<!-- Expected visitors not yet arrived -->
<div class="tab-pane" id="expected">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="ExpectedList">
#Html.Action("RegisterList", new { date = Model.Date, filter="expected" })
</div>
</div>
</div>
</div>
<!-- All visitors for the day -->
<div class="tab-pane" id="all">
<br /><br />
<div class="row">
<div class="col-lg-12">
<div id="AllList">
#Html.Action("RegisterList", new { date = Model.Date, filter="all" })
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal">
<!-- Modal content goes here -->
</div><!-- /.modal -->
How can I ensure that the modal still works after the update?

I know it sounds trivial but are you possibly missing a reference to bootstrap.js within the AJAX Html? Adding a reference worked for me when I faced the same error.

I think your #myModal just disappear when #RegisterList is set the data. You should go to check about it.