Can't get jQuery scrollTop to work - javascript

Im trying to make a jQuery script that makes a nav bar appear after scrolling down the page 800px.
This is the file:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('#fixedBar').fadeIn();
} else {
$('#fixedBar').fadeOut();
}
});
Here's the CSS:
#fixedBar {
display: none;
position: fixed;
background-color: rgba(255,255,255,.9);
top: 0;
left: 0;
width: 100%;
height: 80px;
}
Im not too sure why this jQuery isn't doing anything. All help is appreciated.
Here is the HTML in use:
<div id="fixedBar">
<h1>Company</h1>
</div>
Heres the head
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Links to JS/CSS/Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen"/>
<link rel="stylesheet" href="../css/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/navView.css" />
<link rel="icon" type="image/ico" href="../img/favicon.ico"/>
<title>George | New Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../js/navBar.js" type="text/javascript"></script>
<script src="../js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="../js/jquery.maximage.min.js" type="text/javascript"></script>
<script src="../js/modernizr.custom.25376.js"></script>
</head>
Just checked the js folder and it contains the file navBar.js which has the jQuery code.

It's working fine for me: http://jsfiddle.net/8kzdx9wz/
<div id="fixedBar">nav bar</div>
Is your HTML written correctly and do you have enough content to scroll down to 800px on the page?

Related

How to make 'Swipe div tag' in js / jQuery

I'm looking for new datetime picker look like datetime picker on android. I searched on google and found it.
https://nehakadam.github.io/AnyPicker/
But I don't know how it work. I want to make simple example like that. Anyone help me, please.
There is some examples in their GitHub repository in the demo folder.
<!DOCTYPE html>
<html>
<head>
<title>Time - AnyPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no" />
<style type="text/css">
body {
margin: 0px;
}
.input-cont {
width: 300px;
padding: 20px;
}
input {
width: 200px;
height: 30px;
padding: 3px 10px;
margin-bottom: 16px;
}
</style>
<link rel="stylesheet" type="text/css" href="../src/anypicker-font.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-ios.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-android.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-windows.css" />
<script type="text/javascript" src="vendors/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../src/anypicker.js"></script>
<script type="text/javascript">
$("#ip-android").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "hh:mm aa",
theme: "Android"
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Time : (Android)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-android" readonly>
</td>
</tr>
</table>
</body>
</html>

How to embed css styling into print preview

I am having problem embedding css styling into my Print Preview page.
This is how my index.html looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<div id="app" style="position: absolute;
height: 100%;
width: 100%;
left: 0%;
top: 0%;">
</div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
The styles works fine here on index.html but not here when I want to create a new Page for Printing:
alternativePrint(resultId: string){ // Assuming that resultId is unique.
var printWindow = window.open('', 'PRINT', 'height=800,width=1240');
printWindow.document.write('<html><head><title>' + document.title + '</title>');
printWindow.document.write('<link rel="stylesheet" href="/css/styles.css">');
printWindow.document.write('</head><body >');
printWindow.document.write(document.getElementById(resultId).innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close(); // necessary for IE >= 10
printWindow.focus(); // necessary for IE >= 10*/
printWindow.print();
printWindow.close();
return true;
}
call(tel:string){
window.open('tel:'+tel);
}
Print Preview showing blank unless I remove this part:
printWindow.document.write('<link rel="stylesheet" href="/css/styles.css">');
I also tried to give the href as href="http://localhost:3000/css/styles.css" which I can access the css code when i type in url.
update:
something like this also works fine:
printWindow.document.write('<style>h1{color:red}</style>');
I guess you should change the link to:
<link rel="stylesheet" type="text/css" href="./css/styles.css">
with the ".", or:
<link rel="stylesheet" type="text/css" href="css/styles.css">
without the "/".

Code from fiddle doesn't work locally

I found a simply tooltip in fiddle: http://jsfiddle.net/6L9j0v5y/1 and tried to use it locally but something goes wrong. I copied http://jsfiddle.net/6L9j0v5y/1/show frame source as well but there is the same effect(on page is only button and nothing happens when it is clicked).
I create file(by copying):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#Pops").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
});//]]>
</script>
</head>
<body>
<br>
<br>
<br>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button>
<div id="popover-content" class="hide">
<ul class="popovermenu">
<li>Action
</li>
<li>Another action
</li>
<li>Separated link
</li>
</ul>
</div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "6L9j0v5y"
}], "*")
}
</script>
</body>
</html>
There is no error in console, how is it possible to check why it doesn't work?
It's because when on a local environment it treats the resource URLs as local files because it doesn't have the http / https protocols in front of the URLs.
It's not incorrect in doing that, when on a server it'll work fine, but locally it causes problems. Change the scripts to the following and it'll work fine.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

.fancybox is not being recognised as a function

I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you

one jquery function is disabling the other

<!DOCTYPE html>
<!--
-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>F.E.G | Admin Dashboard </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<script src="js/text_class.js" type="text/javascript"></script>
<script src="web/assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/bmain172.js"></script>
<script src="/js/text_class.js" type="text/javascript"></script>
<script src="/freedomtextim/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/freedomtextim/jquery-ui.js"></script>
<link href="freedomtextim/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="web/assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="freedomtextim/assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="freedomtextim/assets/css/style.css" rel="stylesheet" />
<link href="web/assets/css/style-responsive.css" rel="stylesheet" />
<link href="web/assets/css/themes/default.css" rel="stylesheet" id="style_color" />
<link href="web/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="#" rel="stylesheet" id="style_metro" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="web/assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/jqvmap/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<link href="/freedomtextim/jquery-ui.css" rel="stylesheet" type="text/css">
<script>$(function () {
$(document).tooltip({
position: { my: "left+15 center", at: "right center"},
content: function () {
return $(this).prop('title');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function () {
$(this).remove();
})
});
}
});
}); </script>
<script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="web/assets/plugins/breakpoints/breakpoints.js" type="text/javascript"></script>
<script src="web/assets/scripts/app.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
App.init(); // initlayout and core plugins
Index.init();
Index.initJQVMAP(); // init index page's custom scripts
Index.initKnowElements(); // init circle stats(knob elements)
Index.initPeityElements(); // init pierty elements
Index.initCalendar(); // init index page's custom scripts
Index.initCharts(); // init index page's custom scripts
Index.initChat();
Index.initDashboardDaterange();
Index.initIntro();
});
</script>
<style type="text/css">
label {
display: inline-block;
width: 5em;
}
.red {
color: red;
}
}</style>
</head>
Inside the app.js file.
var handleSidebarMenu = function () {
jQuery('#sidebar .has-sub > a').click(function (e) {
var last = jQuery('.has-sub.open', $('#sidebar'));
last.removeClass("open");
jQuery('.arrow', last).removeClass("open");
jQuery('.sub', last).slideUp(200);
var sub = jQuery(this).next();
if (sub.is(":visible")) {
jQuery('.arrow', jQuery(this)).removeClass("open");
jQuery(this).parent().removeClass("open");
sub.slideUp(200, function () {
handleSidebarAndContentHeight();
});
} else {
jQuery('.arrow', jQuery(this)).addClass("open");
jQuery(this).parent().addClass("open");
sub.slideDown(200, function () {
handleSidebarAndContentHeight();
});
}
e.preventDefault();
});
}
You need to put your jQuery code after you've included jQuery.
<script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="web/assets/plugins/breakpoints/breakpoints.js" type="text/javascript"></script>
<script src="web/assets/scripts/app.js" type="text/javascript"></script>
<script>
// Your code here
</script>

Categories