<!DOCTYPE html>
<!-- Html -->
<html lang="en">
<!-- Head -->
<head>
<title>Coming soon</title>
<!-- Meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tags -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><!-- stylesheet -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><!-- Supportive-JavaScript -->
<!--fonts-->
<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext" rel="stylesheet">
<!--/fonts-->
</head>
<!-- //Head -->
<!-- Body -->
<body>
<!-- main-section -->
<div class="container clock">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="myCanvas"></canvas>
<div class="main-title">
<h1>Temperature Sensor <br /> coming soon</h1>
<div class="between"></div>
<p class="agileinfo txt-center"> © Janneke 2018</p>
</div>
</div>
</div>
</div>
<!-- /main-section -->
<!-- Counter required files -->
<link rel='stylesheet' href='css/dscountdown.css' type='text/css' media='all' />
<script type="text/javascript" src="js/dscountdown.min.js"></script>
<script src="js/clock.js"></script>
<script>
jQuery(document).ready(function($){
$('.between').dsCountDown({
endDate: new Date("Januari 17, 2018 17:30:00"),
theme: 'black'
});
});
</script>
<!-- //Counter required files -->
<!-- particles effect -->
<script src="js/particles.min.js"></script>
<script>
window.onload = function() {
Particles.init({
selector: '#myCanvas',
color: '#6a446b',
connectParticles: true,
minDistance: 70
});
};
</script>
<!-- //particles effect -->
</body>
<!-- //Body -->
</html>
<!-- //Html -->
How can i get a redirect in this code, tried alot of solutions from the internet even with the setTimeout, but when adding a setTimeout the page will only show the text Temperature Sensor coming soon but it wont show the time and date anymore, the page has an particle effect but i need to know how to get an redirect in the countdown part.
Anybody that can gelp me to get it redirecting to a new page
From what I can gather is that you are struggling to redirect your page at the end of the countdown?
You've missed a property method onFinish in your countdown script. It goes like this:
onFinish: function(){
window.location = "https://www.google.com";
}
I've set up a sample application based on your code here, which redirects to google after 1 minute: https://jsfiddle.net/fatgamer85/a6dhjs2y/1/
Hope this helps?
It's simple, you can use the onFinish option of the dsCountdown plugin.
$('.between').dsCountDown({
endDate: new Date("Januari 17, 2018 17:30:00"),
theme: 'black',
onFinish: function() {
window.location.assign('http://your-page.it');
}
});
I found this option (onFinish) in the dsCountdown library, here:
https://github.com/iwayanwirka/dscountdown/blob/master/dscountdown.js
A piece of code of how I do it, I hope it's going to help you.
window.setTimeout(function(){
// Move to a new location or you can do something else
window.location.href = "https://www.google.co.in";
}, 5000);
Related
guys im trying to implement jquery mobile listview just as this example with thumbnails
http://demos.jquerymobile.com/1.4.3/listview/
however, if i copy past the source code into my html it works fine, however if im trying to add it to the list using javascript it doesnt work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>App Title</title>
<!-- Framework's CSS Files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Our CSS Files -->
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h2>PolyMovie</h2>
</div>
<div data-role="main" class="ui-content">
<form onsubmit="getMovies(event)">
<input type="search"id="searchText"/>
</form>
</div>
<ul data-role="listview" id="movies">
<!-- if i add it here it works fine, but using the javascript the image is not formatted -->
</ul>
<div data-role="footer">
<h2>Copyright 2018</h2>
</div>
</div>
<!-- APIs js scripts -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Our js Scripts -->
<script type="text/javascript" src="js/main.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
and this is my javascript function
function getMovies(event) {
var searchText = document.getElementById("searchText").value;
event.preventDefault();
axios.get("https://api.themoviedb.org/3/search/movie?query=" + searchText + "&api_key=" + api_key + "&language=en-US&page=1&include_adult=false")
.then((response) => {
console.log(response);
let movies = response.data.results;
let output = '';
$.each(movies, (index, movie) => {
output += `
<li><a href="#">
<img src="http://image.tmdb.org/t/p/w185/${movie.poster_path}">
<h2>${movie.title}</h2>
<p>${movie.release_date}</p></a>
</li>
`
});
document.getElementById("pageone").innerHTML = "<ul data-role='listview' id='movies'>"+output+"</ul>";
})
.catch((err) => {
console.log(err);
});
}
I really dont understand why this is happening, but i think it's because of the innerhtml
any help would be appreciated
Whenever a jquery element is added dynamically, the element needs to be refreshed for the styling to take effect. The format is:
$(selector).elementName("refresh");
so in your case it would be
$("#movies").listview("refresh");
PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});
Jquery is not working. when, have not add it js in other page. Here, I present small example. I have 2 pages(index.html and about.html). Slideshow banner add in index page. but, banner is not available in about page. So, if, I have not add banner js(owl.carousel.min.js) in about page. So, Other jquery(back to top function) is not work in about page.
Here, I know, I can add slideshow jquery function in index page & remove from custom.js file. So, It is working fine. but, I don't want. because, this is small example. Our site is big(lots of page & js).
what can i do?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>HomePage</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<div class="owl-carousel">
<div class="item"> <img src="image/image1.jpg" alt="" /></div>
<div class="item"> <img src="image/image2.jpg" alt="" /></div>
</div>
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
custom.js
$(document).ready(function(){
//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
});
//
});
Include the owl.carousel.min.js file in the about page as well.
--About Page--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
Edit the custom js with the following
$(document).ready(function () {
//====== Slideshow ======//
if($('.owl-carousel').length > 0){
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
}
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function () {
jQuery('html, body').animate({
scrollTop: 0
}, 'slow');
});
});
keeping the owl slider script inside the condition will solve your issue.
Not sure why my fancy box isn't working. Hoping someone can help
HTML Code:
<div class ="homeimage">
<a class ="fancybox" rel="group" href ="images\image9.jpg"><img src ="images\image9.jpg" alt ="Photo by Tom Harper"/></a>
</div>
Import and JavaScript Code:
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
The folder which contains all the fancybox files is in the same directory as the webpage. All that happens when I click the image is that the image opens in a new page because of the <a> tags that are now reference the image.
First: Download the Fancybox plugin here
secondly: unzip fancybox plugin and implement into your header.
exp...: link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" "fancybox" is my
unpacked plugin directory.
thirdly: Follow this Documentation or just copy and paste HTML and JavaScript part.
and it will work.
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Tom Harper - Videographer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Add jQuery library -->
<!-- Add mousewheel plugin (this is optional) -->
<!-- Add fancyBox -->
<!-- Optionally add helpers - button, thumbnail and/or media -->
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
<body>
<a id="single_1" href="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_b.jpg" title="Bos 3 (p.vanhaastrecht)">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
</body>
</html>
My phonegap project is having multiple html's(more than 4) with some single-paged and multi-paged.
When I move around pages, sometimes javascript breaks. maybe I am linking pages wrong... i've been googling..and got so many different answers.
some say to include all the same heads' because .js won't load by ajax-type page loads
some talk about app.initialize(); some talk about 'pageinit'. some recommends to use onload(); in body tag. some say pageshow: function(){}.
some talk about .Deferred()/ $.when(deviceReadyDeferred,jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
so many ways to initialize!
WHAT IS THE BEST PRACTICE IN INCLUDING JS FILES?
Also, there are so many ways to link pages.
i guess if an anchor leads to multi-paged html, use data-rel='external' is good practice. but some say data-dom-cache="true". some say $.mobile.changePage();
WHAT IS THE BEST PRACTICE IN LINKING PAGES?
from single-paged .html --> multi-paged .html
from multi-paged .html --> single-paged .html
from single-paged .html --> single-paged .html
from multi-paged .html --> multi-paged .html
can you give me a good foundation tutorial? or links to one of them?
thank you in advance.
You can try my method.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the compiled Ratchet CSS -->
<link href="css/ratchet.css" rel="stylesheet">
<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/ratchet.js"></script>
<script src="js/main.js"></script>
</head>
<body onload="init()">
</body>
</html>
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
function init(){
$("body").load(path + "pages/ListPage.html", function(){
$.getScript(path + "js/ListPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
ListPage.js
currentPage = {};
currentPage.init = function(){
console.log("ListPage :: init");
};
currentPage.loadPage = function(pageIndex){
console.log("ListPage :: loadPage :: pageIndex: " + pageIndex);
$("body").load(path + "pages/" + pageIndex + ".html");
$.getScript(path + "js/" + pageIndex +".js", function() {
if (currentPage.init) {
currentPage.init();
}
});
};
ListPage.html
<script>
$.getScript(path + "js/ListPage.js");
</script>
<header class="bar bar-nav">
<button id="LoadAddButton" class="btn pull-right" onclick="currentPage.loadPage('AddPage');">Load Add.html</button>
<h1 class="title">ListPage</h1>
</header>
<div class="content">
<div class="content-padded">
<button id="LoadDetailButton" class="btn btn-positive btn-block" onclick="currentPage.loadPage('DetailPage');">Load Detail.html</button>
</div>
</div>
Let me know if you need more clarification about this navigation.
Reference: http://blog.revivalx.com/2014/07/15/simple-hybrid-mobile-app-using-cordova-and-ratchet-2-complete/
Not important when you load your pages. Because all of your html files are included your app package.
I've used jQuery Mobile like the following;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.css">
<script src="js/dependencies/jquery.js"></script>
<script src="js/dependencies/jquery.mobile.js"></script>
<script src="js/dependencies/ejs.js"></script>
</head>
<body>
<div data-role="page" id="page-homepage" class="my-page" data-theme="b">
<div data-role="header" class="div-header">
// some header contents
</div>
<div role="main" class="ui-content">
// some contents
</div>
</div>
.
.
<div data-role="page" id="page-login" class="my-page" data-theme="b">
<div role="main" class="ui-content">
// login contents
</div>
</div>
.
.
<script>
/* jQuery Mobile pagecontainer change function's options */
var changePageOptions = {
transition: 'none',
changeHash: true,
reverse: true,
showLoadMsg: true
};
$("#btn-page-login").on("tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page-login', changePageOptions);
});
</script>
</body>
</html>