We Keep Coding

How to use looping settimeout on sliding page to periodically load html template inside Framework 7

I'm using Framework7 (framework7.io). The following code works fine on the main view page and uses a looping settimeout to reload signups.html every second:
<script type=“text/javascript” src=“code.jquery.com/jquery-1.7.1.min.js”></script>
<div id=“dnt” align=“center”></div>
<div id=“signups”></div>
<script language=“javascript”>
(function loop() {
document.getElementById(“dnt”).innerHTML = Date();
$(“#signups”).load(“signups.html”);
setTimeout(function () {
document.getElementById(“dnt”).innerHTML = Date();
$(“#signups”).load(“signups.html”);
loop()
}, 1000);
}());
</script>
However, if I place the code on a sliding page (signups.html) and click on it in main view (so that the signups.html slides in from right hand side of page), the settimeout does not work and the signups.html is not loaded. Here is the html of the sliding signups.html page:
<div class=“navbar”>
<div class=“navbar-inner”>
<div class=“left”><a href=“#” class=“back link”> <i class=“icon icon-back”></i><span>Back</span></a></div>
<div class=“center sliding”><font face=arial size=4 color=333333><B>Signups</b></font></div>
</div>
</div>
<div class=“pages”>
<div data-page=“signups” class=“page”>
<div class=“page-content”>
<div class=“content-block”>
<div class=“content-block-inner”>
<script type=“text/javascript” src=“code.jquery.com/jquery-1.7.1.min.js”></script>
<div id=“dnt” align=“center”></div>
<div id=“signups”></div>
<script language=“javascript”>
(function loop() {
document.getElementById(“dnt”).innerHTML = Date();
$(“#signups”).load(“signups.html”);
setTimeout(function () {
document.getElementById(“dnt”).innerHTML = Date();
$(“#signups”).load(“signups.html”);
loop()
}, 1000);
}());
</script>
</div>
</div>
</div>
</div>
</div>
I don't know what I'm doing wrong. Any tips would be appreciated.
Dave

You can use setInterval() to call a function periodically which loads your data.
Read more here
function loop() {
//Uncomment below 2 lines in your code
//document.getElementById(“dnt”).innerHTML = Date();
//$(“#signups”).load(“signups.html”);
console.log("In loop");
}
setInterval(function(){
loop();
}, 1000); //keep your own time interval

Run countUp.js when user scrolls certain amount of pixels from top of screen

Hi Please can someone help me, basically i want to run the Javascript when #stats become fully visible around center of the page. Once the javascript has run once i dont want it to run again unless they revisit the page.
Any help would be much appreciated thanks in advance.
My Code is below.
<div id="stats">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h2><span id="totalFranchises" class="franchise-number">108</span></h2>
</div>
<div class="col-xs-12 col-sm-8">
</div>
</div>
</div>
</div>
<script>
var options = {
useEasing : true,
useGrouping : true,
}
var countUp = new countUp("totalFranchises",108, 256, 0, 3, options);
countUp.start();
</script>
Cheers,
Wes.

I did this recently and I used the heights of the divs above the div that contains the countUp. If you want to understand more read here, here and here. This if you don't want to use jQuery.
My solution looks something like this in the controller:
$window.onscroll = function() {
myFunction()
};
function myFunction() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; //this makes it work in all browsers
var height = document.getElementById("previousDiv").clientHeight; //the height of the previous div for example
if (bodyScrollTop > height) {
//start the countUp
} else {
//something else
}
}

Can't avoid a div step on another div

Here is the problem site.
Let me explain in case I will solve it, so everyone can know about it.
I have two divs with the following html code
<div id="dataview" class="data-views" style="width:100%; height:580px; padding:0; border:solid; margin-bottom:10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
The two divs I am talking about are the "col-md-8" and "col-md-4"
If you try to resize the window, then the second div will move on the bottom of the first one, but it covers everything else behind it. I try to play with css, but without a success. Any suggestion?
Edit:
Screenshots from the problem
How it is on full window: screen1
How it is after resize: screen2
Edit 2: I think something as a sollution but it is to complicated for me. Maybe someone could help. If the size of the screen is less than col-md-8 (so the second div will move to the bottom), I will change the height of the div (data-views) to 580+(height of map).
I tried this:
<script>
$(window).resize(resizemap);
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995) <--on 995px the map doesn't fit and move on the bottom.
{
var Hmap = $("#map").height();
$('#dataview').css("height", 580+Hmap);
}
}
</script>
The problem is that instead of change the size of the whole div, it changes the height only of the timeline. And the map moves again.

I figure how to do it. Here is the result:
HTML:
<div id= "dataview" style = "height:590px;border:solid;">
<div class="data-views" style="width:100%;height:580px;padding:0;margin-bottom: 10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
And here is the javascript:
<script>
$(window).resize(resizemap);
window.onload = resizemap;
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995)
{
var Hmap = $("#map").height();
$('#dataview').css("height", 590+Hmap);
}
}
</script>
The only problem is that if I resize the window with the maximize button of the browser, the dataview height stay the same.

DateTimePicker in modal popup no longer shows after cancel

I use the DateTimePicker plugin made by Trent Richardson in a modal popup, to select the date from which to archive items. All works fine when the modal pops up. In this modal I have two buttons: Archive and Cancel.
If I select a date and press Archive, all works well and at the next pop up, the datetimepicker works fine.
However, if I press Cancel, the next time I use the popup, the datetimepicker doesn't work. Weirdest yet, I have another popup to show archived items that also has a datetimepicker. If I cancel the action in either popup, the datetimpicker will not show in neither popup.
Here's the code javascript to initialize the popup:
var modalBackground = $("#modalBackground");
var Notifications_ArchiveHolder = $("#Notifications_ArchiveHolder");
var Notifications_ShowArchivePopupHolder = $("#Notifications_ShowArchivePopupHolder");
var ArchiveURL = "#Url.Action("Archive")";
var ShowArchiveUrl = "#Url.Action("ShowArchive", "Notifications")";
function ArchivePopup() {
$.get(ArchiveURL, function (content) {
if (Notifications_ArchiveHolder.html().length <= 10) {
Notifications_ArchiveHolder.html(content);
}
})
InitArchivePopup();
}
function InitArchivePopup() {
modalBackground.show();
//set up positon
var h = $(window).height();
var w = $(window).width();
var hh = Notifications_ArchiveHolder.height();
var hw = Notifications_ArchiveHolder.width();
var posx = (h / 2) - 100;
var posy = (w / 2) - 200;
Notifications_ArchiveHolder.css("position", "fixed");
Notifications_ArchiveHolder.css("top", posx);
Notifications_ArchiveHolder.css("left", posy);
Notifications_ArchiveHolder.show();
$("body").css("overflow", "hidden");
}
function Cancel_Archive() {
Notifications_ArchiveHolder.hide();
Notifications_ArchiveHolder.html("");
modalBackground.hide();
}
A div is used for the background and another to host the popup:
<div id="modalBackground" class="graphicScreen" style="display: none; position: fixed; top: 0px; left: 0px;"></div>
<div id="Notifications_ArchiveHolder" style="background-color: white; display: none; z-index: 9999;"></div>
And the code for the partial view rendered in the popup:
<link rel="stylesheet" href="#Url.Content("~/Resources/styles/Notifications/NotificationsPage.css")" />
#using (#Html.BeginForm("Archive", "Notifications", FormMethod.Post))
{
<div class="popupTitle">
Archive notifications
</div>
<div class="popupNotifications">
<span>Archive to date (inclusive)</span>
<input type="text" name="olderThan" id="chooseDate" />
</div>
<div style="margin: 15px">
<input class="goVariant" type="submit" value="Archive" />
<input id="cancelBtn" class="goVariant" type="button" value="Cancel" onclick="Cancel_Archive()" />
#*<div class="tooltip_Holder" keyword="notif_admin_archive" onclick="showToolTip();"></div>*#
</div>
}
<link href="#Url.Content("~/Resources/styles/jquery-ui-timepicker-addon.css")" rel="stylesheet" />
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-migrate-1.2.1.js")"></script>
<script>
$(document).ready(function () {
$('#chooseDate').datetimepicker();
})
</script>
Any idea would be appreciated.

Please try to use the following code. As you loading content on you modal so you need to use the live function which can be achieved using the following code.
$('body').on('click','#chooseDate',function(){
$(this).datetimepicker();
});

After thorough clean-up of script files (no longer passing them from the partial view), it sorted out.

Problems with manipulating divs within simplemodal dialog popup - Further Edit

Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.

Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?