So I'm trying to get smooth scrolling to work. So here's what I have
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body >
<section id="page">
<ul class="cb-slideshow">
<li><span style="background: #009dff;">Image 01</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #003840;">Image 02</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #02A676;">Image 03</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #4FAAC9;">Image 04</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #FF5952;">Image 05</span><div><h3>Colourity</h3></div></li>
<li><span style="background: #96D6D9;">Image 06</span><div><h3>Colourity</h3></div></li>
</ul>
<div id="content">
Click
</div>
</section>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
So when I click on the href it just "snaps" to #page. Instead of smoothly transitioning to it. I'm not good with Javascript so any help and a reason why this is happening would be superior.
Try putting your jQuery loader after the HTML just before your other Javascript.
Related
I'm trying to create a basic website that checks whether a certain word is a palindrome or not. But, even though I assigned a value to my variable word, the Firefox console says it's null.
With wordReversed, it says ReferenceError: can't access lexical declaration wordReversed before initialization, even though I assigned a value to it and both variables are global. What's wrong in my code?
HTML5 code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="formulary">
<form>
<header>
<h1>Is it a palindrome?</h1>
</header>
<label for="word">
Word:
<input type="text" id="word" placeholder="Enter the word here..." />
</label>
<button type="button" onclick="check()">Check</button>
<div>
<p id="paragraph">And the answer is:</p>
</div>
</form>
</div>
<script src="index.js" async defer></script>
</body>
</html>
JS code:
let word = document.querySelector("word");
let wordReversed = [...word].reverse().join("");
let paragraph = document.querySelector("#paragraph");
function check() {
if (word === wordReversed) {
paragraph.innerHTML = `${word} is a palindrome.`;
} else {
paragraph.innerHTML = `${word} isn't a palindrome.`;
}
}
There is an issue in your code, because you are having the value of the text selected once and it will never be triggered again, just add the variables declaration inside the function,
few things to note:
your code didn't select the input element value
I used .split() function which return an array then you can reverse it.
here is a working snippet:
let paragraph = document.querySelector("#paragraph");
function check() {
let word = document.querySelector("#word").value;
let wordReversed = word.split('').reverse().join("");
if (word === wordReversed) {
paragraph.innerHTML = `${word} is a palindrome.`;
} else {
paragraph.innerHTML = `${word} isn't a palindrome.`;
}
}
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="formulary">
<form>
<header>
<h1>Is it a palindrome?</h1>
</header>
<label for="word">
Word:
<input type="text" id="word" placeholder="Enter the word here..." />
</label>
<button type="button" onclick="check()">Check</button>
<div>
<p id="paragraph">And the answer is:</p>
</div>
</form>
</div>
<script src="index.js" async defer></script>
</body>
</html>
The function document.querySelector("word") is returning the DOM element.
You need to call .value to get the input value.
Moreover, you select it by ID so you should append # before.
let word = document.querySelector("#word").value;
Below is the code snippet that I am using but onbeforeunload event handler is never called.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Submit</title>
<meta name="keywords" content="" />
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="Link1" runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link id="Link2" runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link rel="stylesheet" href="/Content/themes/ab1.css" media="screen">
<link rel="stylesheet" href="/Content/themes/ab2.css" />
<link rel="stylesheet" href="/Content/themes/ab3.css">
<link rel="stylesheet" href="/Content/themes/ab4.css">
<!-- LayerSlider styles -->
<link rel="stylesheet" href="/Content/themes/ab5.css">
<link rel="stylesheet" href="/Content/themes/ab6.css" id="coloroption">
<link rel="stylesheet" href="/Content/themes/ab7.css">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/themes/ab8.css">
<link rel="stylesheet" href="/Content/themes/ab9.css" id="styleswitcher">
<script src="/Content/themes/Scripts/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="/Content/themes/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Content/themes/Scripts/jquery-ui.js"></script>
<!-- jQuery with jQuery Easing, and jQuery Transit JS -->
<%--<script src="layerslider/jQuery/jquery-easing-1.3.js"></script>
<script src="layerslider/jQuery/jquery-transit-modified.js"></script>--%>
<!-- LayerSlider from Kreatura Media with Transitions -->
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="/Content/themes/Scripts/combobox/dd.css" />
<script src="/Content/themes/Scripts/combobox/jquery.dd.js"></script>
<script type="text/javascript">
function fnCallUnload() {
debugger;
var xmlData = "<Root sMethodName='SaveState'>";
fnSetCommonDataToXMLVariable(xmlData);
xmlData += "</Root>";
CallServer(xmlData, "");
}
window.onbeforeunload = fnCallUnload;
</script>
</head>
I tried onbeforeunload event in the master page and calling a function of content page in the try catch. It does work smoothly there. But this page where I am trying to use onbeforeunload does not require master page. Its a stand alone page in the application. So, I guess there is some minor concept I am not aware of regarding the use of onbeforeunload.
Any help will be hugely appreciated.
Thanks
This should work, however unbeforeunload requires a string to be returned. If not it will not fire due to security reasons.
Add this as last line.
return "Do you want to quit?";
However this thread blames jQuery as culprit
window.onbeforeunload not firing
change
window.onbeforeunload = fnCallUnload;
to
window.addEventListener("beforeunload", fnCallUnload, false);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I run the following in my browser I get two list items, but nothing is displayed within the two items. So the loop itself works but nothing is being pulled from my list.
I reedited my submission to show an accurate representation of my problem
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<!-- initial angular declaration -->
<body id="main" ng-app>
<div ng-controller ="EductationCtrl">
<ul class = "list-unstyled">
<li ng-repeat = "school in schools">
{{schools.name}}
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
Javascript
function EductationCtrl($scope) {
$scope.schools = [
{name: 'university', major: 'Computer Science'},
{name: 'College', major: 'Politcal Science and Finance'},
];
}
This is the end result:
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
You have a typo: {{peole.name}} should be {{people.name}}
Plunker Demo
Its a typo:
{{schools.name}}
to
{{school.name}}
Hello friends i am making a coming soon
HTML template and using countdown timer ,
i want to make time
refresh automatically after 1 sec
i want to make the javascript execute atumatically
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="nineforo,9foro">
<title>9foro | Coming soon</title>
<link rel="stylesheet" href="" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Philosopher:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.pack.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(function () {
$('#countdown').countdown({until: new Date(2014, 5 - 1, 1)});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h2>9fORO</h2>
<section id="timer">
<p>Estimated time remaining before official launch:</p>
<div id="countdown"></div>
</section>
</div>
</body>
</html>
Can not find your script jquery.countdown.pack.js. But you can try https://github.com/hilios/jQuery.countdown
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="nineforo,9foro">
<title>9foro | Coming soon</title>
<link rel="stylesheet" href="" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Philosopher:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.pack.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/hilios/jQuery.countdown/master/dist/jquery.countdown.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(function () {
$('#countdown').countdown("2014/14/04",function(event){
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h2>9fORO</h2>
<section id="timer">
<p>Estimated time remaining before official launch:</p>
<div id="countdown"></div>
</section>
</div>
</body>
</html>
I am developing a dynamic slideshow using MAXIMAGE Jquery. When Iam trying to append the img tag element to my HTML page it will not work. I am also outputting an alert with the image URL from the server and it gets picked up. Below is my code. I am pretty sure that something is conflicting with maximage.min.js. Note that If I change the maximage id to something else then the image will appear!
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Le Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Viessmann Slideshow</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Le CSS
================================================== -->
<link rel="stylesheet" type="text/css" href="slideshow/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="slideshow/css/style.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le Javascript
================================================== -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Le Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="slideshow/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="slideshow/images/apple-touch-icon-114x114.png">
</head>
<body>
<!-- Le Slider -->
<div id="maximage">
<img id="show" />
</div>
<script type="text/javascript" charset="utf-8">
var urlstring = "http://localhost:8000";
$(function() {
var logourl = urlstring + "/api/v1/image/?format=json";
$.ajax({
type: "GET",
url: logourl,
dataType: "json",
success:function(data){
alert(urlstring + data.objects[5].image);
$("#show").attr("src", urlstring + data.objects[2].image);
}
});
});
</script>
<!-- Le Javascript -->
<script src="slideshow/js/jquery.cycle.all.js" charset="utf-8"></script>
<script src="slideshow/js/jquery.maximage.min.js" charset="utf-8"></script>
<script src="slideshow/js/scripts.js" charset="utf-8"></script>
</body>
</html>
I found what the Mistake was. I had to call MAXIMAGE after the HTML elements have been added:
var urlstring = "http://localhost:8000";
$( document ).ready(function() {
var logourl = urlstring + "/api/v1/image/";
$.ajax(logourl,{
dataType: "json"
})
.done(function( data ) {
$.each(data.objects, function(i, obj){
var tag = $("<img>");
tag.attr("src", urlstring + obj.image);
tag.appendTo("#maximage");
});
jQuery('#maximage').maximage();
});
});