As you can see I'm a giant noob when it comes to javascript.
I'm creating a practice job interview for students.
What I'm trying to achieve is 5 interview questions appearing one after the other (3 mins each) which redirects the page at the end of the 5th question.
There is also a looping video which has a 3 minute countdown.
I'm trying to add a button which enables the user to move to the next question, which also resets the video timer.
Any help would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css"/>
<link rel="stylesheet" href="../css/stylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<img src="../images/banner.jpg">
</header>
<div id="jobInterview">
<h1>Allied Health Assistant Job Interview</h1>
<img src="../images/panelinterview.jpeg" alt="interview panel">
<h2>Answer the questions provided</h2>
<p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>
<h2 id="message"></h2>
<video id="myVideo" width="160" height="120" autoplay loop>
<source src="../videos/timer.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>
<script>
var questions = [
"Question 1 <br> What interests you about this job?",
"Question 2 <br>What new skills are you looking to develop as an allied health assistant? ",
"Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
"Question 4 <br>What is your greatest strength?",
"Question 5 <br>What are you passionate about? "
];
var vid = document.getElementById("myVideo");
$( document ).ready(function() {
function showQuestion() {
if (questions.length == 0) {
window.location.replace("../finish.html");
}
else {
$('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);
}
}
});
function nextQuestion() {
$('#message').html(questions.shift()).fadeIn(500).delay(180000).fadeOut(500);
vid.currentTime=0;
}
</script>
<button id="next-question" onClick="nextQuestion()">Next Question</button>
</div>
</div><!-----CLOSE WRAPPER DIV------>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Choose your own career adventure</title>
<link rel="stylesheet" href="../../css/normalize.css">
<link rel="stylesheet" href="../../css/stylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<header id="theheaderhasissues">
<img src="../../images/banner.jpg">
</header>
<div id="jobInterview-no-recording">
<h2>Allied Health Assistant Job Interview</h2>
<img src="../../images/panelinterview.jpg" alt="interview panel">
<!--<h3>Answer the questions provided</h3>
<p>Note: when the timer finishes it will reset for the next question until the interview is finished</p>-->
<h2 id="timer">Timer</h2>
<video id="myVideo" width="160" height="120" autoplay>
<source src="../../videos/timer.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>
<blockquote class="triangle-isosceles">
<h3 id="message"></h3>
</blockquote>
<script>
var questions = [
"Question 1 <br> What interests you about this job?",
"Question 2 <br>What new skills are you looking to develop as an allied health assistant? ",
"Question 3 <br>Tell me about a successful team project that you have been involved in. What was your role and what made it a success?",
"Question 4 <br>What is your greatest strength?",
"Question 5 <br>What are you passionate about? "
];
$('#message').hide();
showQuestion();
function showQuestion() {
var vid = document.getElementById("myVideo");
if (questions.length == 0) {
window.location.replace("../../finish.html");
}
else {
vid.currentTime=0;
vid.play();
$('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, showQuestion);
}
}
function nextQuestion() {
var vid = document.getElementById("myVideo");
if (questions.length == 0) {
window.location.replace("../../finish.html");
}
else {
vid.currentTime=0;
vid.play();
$('#message').html(questions.shift()).fadeIn(100).delay(180000).fadeOut(100, nextQuestion);
}
}
function reload() {
location.reload();
}
</script>
<ul id="buttons">
<li><button onclick="reload()">Start Again</button></li>
<li>Finish</li>
<li><button id="next-question" onclick="nextQuestion()">Next Question</button></li>
</ul>
</div><!--CLOSE SETTINGS NAVIGATION DIV-->
<footer>
<ul>
<li><a href="javascript:history.back()"><img src="../../images/left-arrow.png"></li>
<li><a href="../../index.html"><img src="../../images/home-button.png"></li>
</ul>
<br>
<br>
<p>© Can Stock Photo Inc. / goldenKB , http://www.canstockphoto.com/job-interview-26160264.html</p>
</footer>
</div><!-----CLOSE WRAPPER DIV------>
</body>
</html>
Related
I have a file, which needs to have 90 modals with lots of long texts, because I need to create a modal when a link is clicked.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="inc/bootstrap.css" rel="stylesheet">
<script src="inc/jquery.min.js"></script>
<script src="inc/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function(){
$('a').click(function(){
var link = $('#name').html(); // I need sent this to my calculator file
$.ajax({
url : "result.php",
type : "post",
dataType:"text",
data : {
name: link
},
success : function (a){
$('#result').html(a);
}
});
});
});
</script>
<div id="result"></div>
I need this text for php script
</body>
</html>
resuilt.php
/* I used PHP becase i need more functions, this only a example how
* to creat and call a modal after click on a link.
*/
function create_modal($modal_ID = 'myModal')
{
return "<div class='modal fade' id='$modal_ID' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button>
<h4 class='modal-title' id='myModalLabel'>Nhãn</h4>
</div>
<div class='modal-body'>
Nội dung
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>";
}
echo create_modal();
?>
The result is, I need to click on the link two times to show my modal. But it can't close or does anything.
Where did it go wrong? And is there any way to make my idea better?
you can add
success : function (a){
$('#result').html(a);
$('#myModal').modal('show');
}
just add $('#myModal').modal('show'); when ajax load your modal in #result
I don't think 90 modals is a good idea.
Try saving data maybe in a databas.
Assign your links different ids.
Use jquery to listen to click events
Get data from your server
Populate modal with values from the server.
Check this stack overflow link.
Let me know if you need help
Im inserting an widget within template like this:
<script id="example-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>#= example #</h3>
</div>
</script>
But the widget is does not initialize, just show as plain html.
Some people suggest to use kendo.mobile.init and it works, but looks like a hack. This method is not at least documented.
My question is: what can I do to properly initialize widgets inside template?
Complete example:
<!DOCTYPE html>
<html>
<head>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
<script>
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
}
function expandHandler(){
console.log("expand");
}
</script>
</body>
</html>
Not sure how you do that mvvm way, go on with this initializing it on the javascript instead if it is okay
See the example :
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function expandHandler(){
console.log("expand");
}
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
$(".test").kendoMobileCollapsible({
expand: expandHandler
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div class="test">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
</body>
</html>
Does anyone know of a jquery plugin that has a background slide show and a gallery that changes background images every time someone opens the site or every hour or so?
There are lot of jQuery slideshow plugins. I would recommend you to look at the following:
Slide JS - http://www.slidesjs.com/
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body>
Also, check some good slideshow plugins here
I am trying to implement photoswipe inside my jquerymobile application.
I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages.
Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.
On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts)
I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages.
So I need to know how to setup the code for photoswipe before page load.
The code below is from the itemPage level( I put the code from the photoswipe demo inside)
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script>
</head>
<body>
<div data-role="page" id="Home">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
</ul>
<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>
<ul data-role="listview" data-inset="true">
<li>Code Computerlove</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<ul class="gallery">
<li><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
</div>
</body>
</html>
I put the script to handle the gallery inside <div data-role="page" id="Home">
since If I put the code in the head is never executed for the ajax call.
However when I executed the code above, the page doesn't show the last level(itempage never appears)
I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <div data-role="page" id="Home">
$( document ).delegate("#Home", "pagebeforecreate", function() {
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
but how I can call the photoswipe script, If I replaced the code from alert function with
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
it doesn't work? the page doesn't load
Hope you can help me!
Thanks
You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.
I'm using this, which also ensures you can call more than one photoswipe-gallery on a multipage and also allows different HTML containers for the images. Feel free to modifiy to your need:
(function (window, $, PhotoSwipe) {
// still using live for photoswipe vs. on()/off()
$('div:jqmData(role="page")').live('pageshow', function (e) {
var currentPage = $(e.target),
options = {},
// allow multiple galleries
swipesOnPage = currentPage.find('.photoswipeable');
// no photoswipe, we're done
if (swipesOnPage.length == 0) {
return false;
}
// if there are swipes init each
swipesOnPage.each(function (i) {
// make sure swipe is initialized once in case events bubble
if ($(this).data('photoswipe') != 'init') {
$(this).data('photoswipe', 'init');
// init - make sure you add a class of swipeMe to your images!!
var photoSwipeInstance = $(this).find(":not('.cloned') a.swipeMe", e.target).photoSwipe(options, currentPage.attr('id'));
}
return true;
});
// un-init when leaving the page
}).live('pagehide', function (e) {
var currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
}(window, window.jQuery, window.Code.PhotoSwipe));
Add data-ajax="false" to the page calling the sub pages.
Similarly, add to index.html to link to portfolio.html.
If you have a slide show on home page add to link on portfolio.html for index.html as well.
I am trying out knockoutjs at the moment, with my fairly rudimentary knowledge of javascript. I have set up a basic ASP.NET MVC 3 app for this purpose. Here's the snippet I set up in the Home/Index.cshtml view:
#if(false)
{
<script src="../../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
}
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript">
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
</script>
<h2>#ViewBag.Message</h2>
<p>
Registration: <span data-bind="text: registration"></span><br />
Name: <span data-bind="text: registeredName"></span><br />
Class: <span data-bind="text: entryClass"></span><br />
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
For some weird reason nothing is showing, not even the default values. If I debug through Firebug the ViewModel is showing the properties as being empty too. Have I missed something here?
Many thanks,
Dany.
ADDED: the content of the _Layout.cshtml - it's all stock standard stuff, except for the addition of knockout, and using jquery 1.6.3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/knockout-1.3.0beta.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
The answer I voted above only worked when I tried it in a plain webpage - not when I tried it in my MVC view. As it turned out I put the script block in the wrong position. I moved it to the end of the view, after the page elements have been processed. The other option is to wrap it within $(document).ready() then you can put the script block containing ViewModel and call to ko.applyBindings() anywhere you want...
use $(document).load(function(){:
<script type='text/javascript'>
//<![CDATA[
$(document).load(function(){
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
});
//]]>
</script>
Have a look: http://jsfiddle.net/S8Rh5/ - it works just fine.