I am a refactoring code for a website I am making and I am trying to use Flexslider jQuery plugin instead of AnythingSlider plugin I was originally used. I downloaded the plugin and followed the directions on the website (Flexslider website) for how to get started with the plugin. However, the pictures in the ul class "slides" are still in a list form and don't appear as a slideshow. Here is my current code:
$(document).ready(function(){
/*
alert('Our JavaScriipt is working!');
console.log('Our Javascript is working!');
console.warn('A dire warning!');
console.error('ERMAGERD AN ERROR!');
*/
var modalContainer = $("#modal-container");
var hideModal = function() {
modalContainer.hide();
};
var showModal = function() {
modalContainer.show();
};
var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);
var modalCloseButton = $("#modal-hide");
modalCloseButton.on("click", hideModal);
$(document).on("keyup", function(evt) {
evt = evt || window.event;
if (evt.keyCode === 27) {
hideModal();
}
});
var handleNewsletterSignup = function(evt) {
evt.preventDefault();
var newsletterHeader = $("#newsletter-header");
var newsletterForm = $("#newsletter-signup");
newsletterForm.hide();
newsletterHeader.text("Thank you for signing up!");
setTimeout(hideModal, 2000);
};
var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);
/* Begin the clock code */
var clockTime = function() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours <= 11) {
var period = "AM";
} else {
var period = "PM";
}
if (hours > 12) {
hours = hours - 12;
} else if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + String(minutes);
}
if (seconds < 10) {
seconds = "0" + String(seconds);
}
var time = hours + ':' + minutes + ':' + seconds + ' ' + period;
return time;
}
var clock = $("#clock");
setInterval(function() {
clock.text(clockTime());
}, 1000);
});
<head>
<title>Liz Lemon's Personal Website</title>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({;
animation: "slide",
animationLoop: true,
slideshow: true;
randomize: false,
});
});
</script>
</head>
<body>
<div class="page">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div class="flexslider">
<ul class="slides">
<li><img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/></li>
<li><img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/></li>
<li><img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/></li>
</ul>
</div>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</body>
So far I have triple checked every single part of my code (especially what is in the head) with the sample ones on the website and github. I also tried moving some of the JS to the JS file. Despite these changes, the pictures in slides class remain a bullet point list. Did I link the wrong files for flexslider? I think my issue is with the HTML section, but I'm not 100% positive since my code looks the same as the ones on the sample page.
I think error in your CSS and JS inclusion.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
Like it should be:
<script type="text/javascript" src="http://www.domain.com/myphysicaldirectory/js/jQuery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/myphysicaldirectory/css/flexslider.css" media="all" />
Set your JS and CSS Path properly and open your source code (ctrl + u) and check its include properly or not. also check included path open correctly in browser or not.
When you download flexslider zip file then inside that demo folder, create one test.html file and add below code in it.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Liz Lemon's Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">
<div id="container" class="cf">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div id="main" role="main">
<section class="slider">
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
</ul>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 420,
itemMargin: 1,
pausePlay: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
I already test it. its running fine.
Related
I'm currently working with news API and trying to populate different category (i.e sports, science, business etc) under different heading on the same page of the website, but failed to do so. Here I tried to use template literal, as first created a template literal in the api named category and initiated it using let. So there are two sections "Trending Blogs" and "You May Like" so here I wanna show two different category in the two different section respectively. Here I'm attaching the code in the following.
Here is the code in html
`<!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.0" />
<link rel="stylesheet" href="/styles/utils.css" />
<link rel="stylesheet" href="/styles/navbar.css" />
<link rel="stylesheet" href="/styles/body.css" />
<script
src="https://kit.fontawesome.com/e582ecfb98.js"
crossorigin="anonymous"
></script>
<title>Document</title>
</head>
<body>
<!-- <h1>This is a blog site</h1> -->
<!-- Navbar starts from here -->
<nav class="navigation max-width-0 m-auto">
<div class="middle">
<b> Blogsite</b>
</div>
<div class="left">
<ul>
<li><a class="header-elements" href="./index.html">Home</a></li>
<li><a class="header-elements" href="./about.html">About</a></li>
<li><a class="header-elements" href="./contact.html">Contact</a></li>
</ul>
</div>
<div class="right">
<input type="text" placeholder="Article Search" />
<button class="btn"><i class="fa fa-magnifying-glass"></i></button>
</div>
</nav>
<!-- Navbar ends -->
<!-- body starts -->
<div class="content max-width-1 m-auto">
<h1 class="land-heading">Welcome to Blogsite</h1>
<p class="intro">
Atameo allows travellers to capture their trips in a completely new way.
It records your route, adds your photos, videos and music and turns your
adventures into your personal travel profile. Have all your travel
experiences in one place and find out more about your travel style by
diving into your personal travel statistics: How far did you travel last
year? What’s the highest point you have been to? How much of the world
have you seen? Inspire others to go out and explore, while getting
inspired by some of the most daring journeys of our time. Explore.
Capture. Inspire.
</p>
<hr />
<h1 class="land-heading">Trending Blogs</h1>
<div class="blog-section" id="blog-section">
</div>
<h1 class="land-heading">You may like</h1>
<div class="blog-section" id="blog-section2">
</div>
<h1 class="land-heading">Categories</h1>
<div class="blog-section" id="category">
<div class="r1c1 block">
<a href=""
><img
class="img"
src="https://www.nomadicmatt.com/wp-content/uploads/2022/07/parisnm3.jpeg"
alt="img"
/>
<p class="blog-title">NM+ Weekly Update: Europe Edition</p></a
>
</div>
</div>
</div>
<!-- Body ends -->
<!-- Footer starts -->
<div class="footer m-auto">
<label for="">Feedback</label>
<input type="text" class="" placeholder="First Name" />
<input type="text" placeholder="e-mail" />
<button type="submit" class="btn btn-foot">Send Feedback</button>
</div>
<div class="m-auto copyright">
<p>copyright 2022 #md_arif</p>
</div>
<!-- Footer ends -->
<script src="./scripts/app.js"></script>
</body>
</html>
`
Here is the code of vanilla-js
console.log("Here we go");
let blogSection = document.getElementById("blog-section");
let blogSection2 = document.getElementById("blog-section2");
function generateCards(e) {
const newXHRRequest = new XMLHttpRequest();
// let source = 'the-times-of-india';
let apikey = '75da3b7678de41fcb76359935aabdc3d'
let category = '';
newXHRRequest.open(
"GET",
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&pagesize=3&apiKey=${apikey}`,
true
);
newXHRRequest.getResponseHeader("content-type", "application/json");
newXHRRequest.onload = function () {
if (this.status === 200) {
let myCards = JSON.parse(this.responseText);
console.log(myCards);
let articles = myCards.articles;
// console.log(articles);
let itemsHtml = "";
articles.forEach((element) => {
// console.log(articles);
// category="sports";
console.log(element);
let items = `<div class="r1c1 block">
<a href="${element["url"]}" target="_blank"><img class="img" src=${element["urlToImage"]} alt="img">
<p class="blog-title">${element["title"]}</p></a>
</div>`;
itemsHtml += items;
});
blogSection.innerHTML = itemsHtml;
blogSection2.innerHTML = itemsHtml;
} else {
console.log("Some error occured");
}
};
newXHRRequest.send();
}
generateCards();
I am using Cordova 6.2.0 and want to override the backbutton on Android. I found the following solution(s) but this doesn't work for me (I guess it's because of the cordova Version): link.
I am using the following code to override the backbutton:
document.addEventListener("deviceready",ondeviceready, false);
function ondeviceready()
{
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey()
{
//Do something
}
The Problem is that the backbutton only "does something" on the first page. this is my index.html page:
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Stadtwerke-App</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="js/hammer.js"></script>
<script>
$(document).ready(function(e) {
var startX, curX, startY, curY; // Variables
var newXScroll, newYScroll, genXScroll; // More Variables!
// Change the height of the sidebar, as well as a few things to do with the main content area, so the user
// can actually scroll in the content area.
function sideBarHeight() {
var docHeight = $(document).height();
var winHeight = $(window).height();
$('.slide-in').height(winHeight);
$('#main-container').height(winHeight);
$('#sub-container').height($('#sub-container').height());
}
sideBarHeight();
var outIn = 'in';
Hammer(document.getElementById('main-container')).on('swiperight', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
});
Hammer(document.getElementById('main-container')).on('swipeleft', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
});
function runAnimation() {
if(outIn == 'out') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
} else if(outIn == 'in') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
}
}
$('.menu-icon').click(function() {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
});
});
</script>
</head>
<body id="index" name="index">
<!--script>start()</script-->
<div id="main-container" class="tk-chaparral-pro">
<div id="Email" class="emailbox"></div>
<h2>News</h2>
<div class="Container" onclick='browser("http://www.tagesschau.de/inland/eeg-reform-105.html")'>
<p class="Buttonbereich" align="center"><img src="img/Tagesschau.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Wie geht es weiter mit der Energiewende?</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/metropolregion_artikel,-Nach-Unwetter-Behinderungen-im-Bahnverkehr-_arid,195765.html")'>
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Nach Unwetter: Behinderungen im Bahnverkehr</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/finanzen/meine-finanzen/geld-ausgeben/so-bekommen-sie-die-praemie-fuer-ihr-e-auto-14239079.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 18.05.2016: So bekommen Sie die Prämie für Ihr E-Auto</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/region_artikel,-Hochspannungstrasse-bei-Leimen-Nach-80-Jahren-gehen-die-Stahlmasten-in-Rente-_arid,192723.html")' >
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<p class="Buttonbereich2"> 18.05.2016: Nach 80 Jahren gehen Stahlmasten in Rente</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/wirtschaft/grafik-des-tages-woher-kommt-unser-strom-14237266.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 17.05.2016</p-->
<p class="Buttonbereich2"> 17.05.2016: Woher kommt unser Strom?</p>
</div>
<div id="sub-container">
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="nav">
<div class="navbox">
<div class="menu-icon">
<div class="bar"> </div>
<div class="bar"> </div>
<div class="bar"> </div>
</div>
</div>
<div class="navbox" style=" float:right"><img src="img/Musterwerke.PNG" style="float:right;height:100%;background-color:white"> </div>
<h1 align="center" style="margin-top:10px;">Stadtwerke-App</h1>
</div>
<div class="footer">
<a rel="external" href="infos.html" ><img src="img/Infos.png" alt="hsag logo" style="float:left;height:80%;border:5px solid white"/></a>
<div class="navbox" style=" float:right" onclick='browser("https://www.hsag.info")' ><img src="img/hsag_logo.png" style="float:right;height:100%;background-color:white"> </div>
</div>
</div>
<div class="slide-in">
<ul class="tk-museo-sans">
<li onclick='window.open("index.html","_self" )' >Startseite</li>
<li onclick='window.open("Index_Nach Registrierung.html","_self" )'>Zählerstandserfassung</li>
<li onclick='window.open("Abfallkalender.html","_self" )'>Abfallkalender</li>
<li onclick='window.open("Apothekennotdienst.html","_self" )'>Apothekennotdienst</li>
<li onclick='window.open("Stoerungsmeldung.html","_self" )'>Störungsmeldung</li>
<li onclick='window.open("Services.html","_self" )'>Kundenportal</li>
<li onclick='window.open("Spartipps.html","_self" )'>Energiespartipps</li>
<li onclick='window.open("Vergleich.html","_self" )'>Verbrauchsvergleich</li>
<li onclick='window.open("Events.html","_self" )'>Event-Übersicht</li>
<li onclick='window.open("Impressum.html","_self" )'>Impressum</li>
<li onclick='window.open("Einstellungen.html","_self" )'>Einstellungen/Account</li>
</ul>
</div>
</body>
</html>
All other Pages include the same JS-Scripts.
Try the following code .It woks for me
In HTML:
<body onload="onLoad()">
in Script:
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
}
I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:
window.location="page.html"
Now the onBackKey() function is firing at every single page.
I am new to web development so please forgive for any shortcomings.
I have been working on a website for a project for a while now and now I have to add a specific countdown on it(Keith Wood Countdown) the "Pad with zeroes:" one.
The problem is that, I do not know how to set the target date on it to countdown to and how to attach it to a particular div.
I have searched the Internet and there are similar questions on stackoverflow but they are for an older version of this countdown. And nowhere is there any answer for how to attach it to a div.
Here's my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<meta name="description" content=" Welcome to La Martiniere Model United Nations 2015">
<meta name="keywords" content="lmun,lucknow mun,la martiniere mun,la martiniere college,la martiniere model un,la martiniere model united nations,lmun 2015">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Slideshow *Starts* -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- Slideshow *Ends* -->
</head>
<body>
<div class="brdr_top"></div> <!-- A little gold border at the top -->
<div class="header" id="banner">
<img src="images/Website_bannertxtcombo.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
<img src="images/Logo_Blue_Small.png" id="banner_logo"/> <!-- The LMUN Logo -->
</div>
<div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->
<div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>
<div class="nb_item">ABOUT US <span id="dArrow"></span>
<ul id="abtus_menu">
<li class="nb_item_li"><span id="space2"></span>LA MARTINIERE COLLEGE</li>
<li class="nb_item_li"><span id="space2"></span>LMUN 2015</li>
<li class="nb_item_li"><span id="space2"></span>SECRETARIAT</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
<ul id="rgstr_menu">
<li class="nb_item_li"><span id="space2"></span>INDIVIDUAL</li>
<li class="nb_item_li"><span id="space2"></span>DELEGATION</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
<ul id="comt_menu">
<li class="nb_item_li"><span id="space2"></span>African Union</li>
<li class="nb_item_li"><span id="space2"></span>Arab League</li>
<li class="nb_item_li"><span id="space2"></span>SPECPOL</li>
<li class="nb_item_li"><span id="space2"></span>CCPCJ</li>
<li class="nb_item_li"><span id="space2"></span>UNSC</li>
<li class="nb_item_li"><span id="space2"></span>Ad - Hoc</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>RESOURCES <span id="space"></span></div>
<div class="nb_item">EVENTS <span id="dArrow"></span>
<ul id="evnt_menu">
<li class="nb_item_li"><span id="space2"></span>KEYNOTE SPEAKERS</li>
<li class="nb_item_li"><span id="space2"></span>SOCIALS</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>SPONSORS</div>
<div class="nb_item"><span id="space"></span>CONTACT US<span id="space"></span></div>
</div>
<div id="slideshow">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/ff.jpg" alt="" title="" id="wows0_0"/></li>
<li><img src="data0/images/dsc_0160001.jpg" alt="jquery content slider" title="" id="wows0_1"/></li>
<li><img src="data0/images/la_martiniere_college_building,_lucknow.jpg" alt="" title="" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/ff.jpg" alt=""/>1</span>
<span><img src="data0/tooltips/dsc_0160001.jpg" alt=""/>2</span>
<span><img src="data0/tooltips/la_martiniere_college_building,_lucknow.jpg" alt=""/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">image carousel by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div id="countdown"></div>
</body>
</html>
I want to add the countdown to the countdown div.
padZeros is now padZeroes. I've inserted variable names for the year, month and day that the countdown approaches. You attach to the target <div> by calling $("#yourDivId").countdown() with the appropriate options.
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.countdown.css">
<style type="text/css">
body > iframe {
display: none;
}
#defaultCountdown {
width: 240px;
height: 45px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
</head>
<script>
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
</script>
<body>
<h1>jQuery Countdown Basics</h1>
Counting down to:
<div id="year"></div>
<div id="defaultCountdown"></div>
</body>
</html>
According to the documentation:
<script>
$(function() {
var mydate = new Date();
mydate = new Date(mydate .getFullYear() + 1, 11 - 1, 6);
$('#countdown').countdown({until: mydate });
]);
</script>
Add this code right before your closing </body> tag.
Good day! I am using iframe and instead of an src to another page for its contents, I used the iframe's id to call a Javascript action but nothing shows. Here is my code:
#(title: Html, nav: String = "")(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
width:25%;
height:100%;
}
.mainContent {
width:75%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<link href='#routes.Assets.at("stylesheets/css/ui-lightness/jquery-ui-1.10.4.css")' rel="stylesheet">
<script src='#routes.Assets.at("javascripts/jquery-ui-1.10.4.js")'></script>
<script type="text/javascript">
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
</script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#routes.Application.index()">Home</a>
<ul class="nav">
<li class="#("active".when(nav == "add tag"))">
Add Tag
</li>
<li class="#("active".when(nav == "view edit"))">
View/Edit Tag
</li>
<li class="#("active".when(nav == "log"))">
Log Information
</li>
<li class="#("active".when(nav == "map"))">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="#routes.Tags.map(false)" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank" ></iframe>
</body>
</html>
The left iframe has no problem but the other side (where there is no src) is empty. I checked the console and it says Uncaught TypeError: Cannot read property 'contentWindow' of null. Please help me figure this out. Thanks a lot.
EDIT
This is the page-source.
<link rel="stylesheet" href="/assets/stylesheets/jquery-ui.css">
<script src="/assets/javascripts/jquery-1.10.2.js"></script>
<script src="/assets/javascripts/jquery-ui-1.10.4.js"></script>
<script src='/assets/javascripts/jquery-1.7.1.min.js' type="text/javascript"></script>
<script>
$(function() {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var scntDiv = $('#addMore');
var i = $('#addMore p').size();
$('#addRT').live('click', function() {
$('<p>'+
'<input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name" required /> '+
'<textarea name="relatedTags.relatedNotes" placeholder="Notes"></textarea> '+
'<select name="relatedTags.relationship"> <option value="parent"> parent </option>'+
'<option value="child"> child </option>'+
'<option value="peer"> peer </option>'+
'</select> '+
'Remove</p>').appendTo(scntDiv);
$( "#tags"+i ).autocomplete({
source: availableTags
});
i++;
return false;
});
$('#remRT').live('click', function() {
if( i > 0 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
function checkDuplicates() {
if ( $.trim( $('#name').val() ) == '' ) {
alert('Invalid name.');
return false;
}
else {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var input = document.getElementById('name').value;
input = input.replace(/\s+/g,' ').trim().toLowerCase();
var found = $.inArray(input, availableTags);
if(found != -1) {
alert("Tag already exists.");
return false;
} else { //does not contain the value
var k = $('#addMore p').size();
for (var i=0; i<k; i++) {
for (var j=0; j<k; j++) {
if (i!=j){
if (document.getElementById('tags'+i).value==document.getElementById('tags'+j).value &&
document.getElementById('tags'+i).value!="" && document.getElementById('tags'+j).value!="") {
alert("Duplicate entries found.");
document.getElementById('tags'+i).select();
return false;
}
}
}
}
return true;
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
float:left;
width:20%;
height:100%;
}
.mainContent {
float:left;
width:79%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
<link href='/assets/stylesheets/css/ui-lightness/jquery-ui-1.10.4.css' rel="stylesheet">
<script src='/assets/javascripts/jquery-ui-1.10.4.js'></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="/index">Home</a>
<ul class="nav">
<li class="active">
Add Tag
</li>
<li class="">
View/Edit Tag
</li>
<li class="">
Log Information
</li>
<li class="">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="/map?editable=false" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank"></iframe>
<script type="text/javascript">
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write("<div class='container'> <div class='content'> <div class='row'> <div class='span14'>
<p align="right"> Logged in as: <b>user1</b> </p>
<h1> Add Tag </h1>
<form action="/addTag" method="POST" id="form" onsubmit="return checkDuplicates(this);">
<fieldset>
<legend>Add Tag</legend>
<div class="clearfix " id="name_field">
<label for="name">Name</label>
<div class="input">
<input type="text" id="name" name="name" value="" >
<span class="help-inline"></span>
<span class="help-block">Maximum length: 100, Required</span>
</div>
</div>
<div class="clearfix " id="notes_field">
<label for="notes">Impact Analysis Notes</label>
<div class="input">
<textarea id="notes" name="notes" ></textarea>
<span class="help-inline"></span>
<span class="help-block">Maximum length: 200</span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Related Tags</legend>
<div id="profiles">
<div id="addMore" class="twipsies well profile">
</div>
<div class="manage">
<a class="addProfile btn success" id="addRT">Add related tag</a>
</div>
</div>
</fieldset>
<div class="actions">
<input type="submit" class="btn primary" value="Add Tag">
Cancel
</div>
</form>
<script type="text/javascript" charset="utf-8">
$('.addProfile').live('click', function(e) {
var template = $('.profile_template')
template.before('<div class="twipsies well profile">' + template.html() + '</div>')
renumber()
})
$('#form').submit(function() {
$('.phone_template').remove()
$('.profile_template').remove()
})
var renumber = function(phones) {
$('.profile').each(function(i) {
$('input', this).each(function() {
$(this).attr('name', $(this).attr('name').replace(/relatedTags\[.+?\]/g, 'relatedTags[' + i + ']'))
})
})
}
</script>
</div> </div> </div> </div>');
doc.close();
});
</script>
</body>
</html>
What happens is a syntax error because the #content is also an HTML. The quotation marks are messed up. Please help me. Thank you so much.
Well, you use jQuery is a tag... so I'll use a jQuery :)
What about:
$('#frame').contents().find('body').append('<div>your content</div>');
Or:
$('#frame').contents().find('body').html('<div>your content</div>');
Difference between the both examples?
.append(): http://api.jquery.com/append/
.html() : http://api.jquery.com/html/
run your javascript when the page is loaded.
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use the HTML5 canvas element in IE?
I'm not sure what I'm doing wrong. I did what it said to do but nothing works. I'm using a grid system, but I don't think that's the problem. And I don't think it's my security settings either. Here's my HTML and Javascript if that helps.
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Zack Vivier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<!-- enable HTML5 elements in IE7+8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" /><![endif]-->
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<link href="styles/1140.css" rel="stylesheet" type="text/css">
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<header>
<h1 class="hidden">Zack Vivier Home</h1>
<div class="container">
<div class="row">
<div class="fivecol">
<div class="logo"><img src="images/logo.png" alt="zack vivier logo"></div>
</div>
<div class="sevencol last">
<nav>
<h2 class="hidden">Site Navigation</h2>
<ul>
<li>Home</li>
<li>Information</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="lineone"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="caption">
<h4 id="tagLine">Image Number</h4>
</div>
<div class="slideshow">
<canvas id='showCanvas' width='1022' height='397'>Canvas Not Supported</canvas>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="threecol last">
<div class="about"><h2>About Me</h2></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="linetwo"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sevencol last">
<div class="contenthome">
<p> My Name is Zack Vivier; currently I am 19</p>
<p>years old and attend Fanshawe College for Interactive</p>
<p>Media Design and Production. I am a Designer,</p
<p>Programmer, Musician, Video Editor, and Animator.</p>
</div>
</div>
</div>
</div>
<h1 class="hidden">footer</h1>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="footer">
<h3>Copyright © 2012 Zack Vivier. All Rights Reserved.</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
// JavaScript Document
var imagePaths = new Array("images/photo_1.png", "images/game_web.jpg", "images/tattoo.jpg");
var whichImage = new Array("Graffti Project", "Game WebSite", "Tattoo Project");
var showCanvas;
var showCanvasCtx;
var imageText;
var currentImage = 0;
var currentImageText = 0;
var img = document.createElement("img");
function init() {
imageText=document.getElementById('tagLine');
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','1022');
img.setAttribute('height','397');
switchImage();
setInterval(switchImage, 2500);
}
function switchImage() {
imageText.innerHTML = whichImage[currentImageText++];
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length) {
currentImage = 0;
currentImageText = 0;
}
showCanvasCtx.drawImage(img,0,0,1022,397);
}
window.onload = init();
Canvas is a HTML5 element which IE8 doesn't supports.
Your doctype is also wrong since you're using HTML5 set it to: "".
As said in the comments: IE8 won't support the canvas tag. However there are some plugins that mimic it's behavior. I've used this one once: http://flashcanvas.net/ and it does the job, there's another called http://code.google.com/p/explorercanvas/. but i have no comment on that one, never used, don't know what to expect.
Just one note: the fallbacks will have their limitations, but as far as 2D drawing concerns, I think these will work out for you