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
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>
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 "/".
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">
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
<!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>