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">
Related
My JS file:
const logo = document.querySelector("#logo");
const tl = new TimelineMax({});
tl.fromTo(logo, 1, {height: "0%"}, {height: "80%"});
My CSS file:
#logo{
width: 100%;
height: 100%;
position: absolute;
top: 200px;
z-index: -1;
}
My HTML file:
<!DOCTYPE html>
<html lang= "es">
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="Limg">
<img id="logo" src= "Logo.svg">
</div>
<script src="animaciones.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</body>
</html>
And I don't know where the problem is already trying using different versions and nothing
Move your script tag for timeline max on header
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</head>
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>
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?
I'm not understanding after including all the necessary libraries why I'm getting this error in firebug console?
My HTML code is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="formoid_files/formoid1/formoid-default-skyblue.css" type="text/css" />
<link href="http://localhost/smart/web/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
<link href="http://localhost/smart/web/css/font-awesome.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/base-admin-3.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/base-admin-3-responsive.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/pages/plans.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/custom.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/bootstrap-multiselect.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/prettify.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/datepicker.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/projects.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/taggle.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css">
.account-container1 {
width: 505px;
display: block;
margin: 60px auto 0 auto;
background: #f9f9f9;
border: 1px solid #d5d5d5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.account-container1 h1 {
margin-bottom: 0.4em;
color: #F90;
font-size: 32px;
}
</style>
<div class="main">
<div class="account-container1 stacked">
<div class="content clearfix">
<form action="contact_us.php" id="contact_us_form" role="form" class="form-horizontal col-md-12" method="post">
<h1>Admin Settings</h1>
<fieldset>
<div class="form-group">
<label for="email" class="col-lg-2">Email :<span style="color:#FF0000">*</span></label>
<div class="col-lg-10">
<div class="input textarea clearfix custom stackoverflow"></div>
</div>
</div>
<div align="center" class="login-actions">
<input type="submit" style="float:right" class="login-action btn btn-primary" name='submit' value="Send">
</div> <!-- .actions -->
</fieldset>
</form>
</div> <!-- /content -->
</div> <!-- /account-container -->
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://localhost/smart/web/js/libs/jquery-1.9.1.min.js"></script>
<script src="http://localhost/smart/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
<script src="http://localhost/smart/web/js/custom/jquery-1.10.1.js"></script>
<script src="http://localhost/smart/web/js/custom/jquery-ui.js"></script>
<script src="http://localhost/smart/web/js/libs/bootstrap.min.js"></script>
<script src="http://localhost/smart/web/js/plugins/validate/jquery.validate.js"></script>
<script src="http://localhost/smart/web/js/Application.js"></script>
<script src="http://localhost/smart/web/js/demo/validation.js"></script>
<script src="http://localhost/smart/web/js/bootstrap-multiselect.js"></script>
<script src="http://localhost/smart/web/js/prettify.js"></script>
<script src="http://localhost/smart/web/js/custom/common.js"></script>
<script src="http://localhost/smart/web/js/bootstrap-datepicker.js"></script>
<script src="http://localhost/smart/web/js/custom/typeahead.js"></script>
<script src="http://localhost/smart/web/js/custom/rainbow-custom.min.js"></script>
<script src="http://localhost/smart/web/js/custom/scripts.js"></script>
<script src="http://localhost/smart/web/js/custom/taggle.js"></script>
<script src="http://localhost/smart/web/js/custom/taggle-ie8.js"></script>
<script src="http://localhost/smart/web/js/custom/taggle-ie9.js"></script>
<script language="javascript"></script>
</body>
</html>
The jQuery code is as follows from the file script.js:
/*global Taggle*/
(function() {
new Taggle($('.stackoverflow.textarea')[0], {
tags: ['or', 'like', 'stackoverflow']
});
}());
When I try to add tags to the text area with class stack overflow I'm getting the following error in firebug console :
ReferenceError: Taggle is not defined new Taggle($('.stackoverflow.textarea')[0], {
You are loading script.js before loading taggle.js, which means you're trying to use an object that hasn't been defined yet.
Try moving the <script src="http://localhost/smart/web/js/custom/scripts.js"></script> line after the other <script... lines.
I'm using this magnific pop up plug in (http://dimsemenov.com/plugins/magnific-popup/documentation.html)
This is my very basic html, I simply want the button to open a pop up window in that page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</script>-->
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<title>Burn That Burger</title>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css" media="all">
<link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all">
</head>
<body>
<div id="popup">
test pop up goes here
</div>
<button>create and show popup</button>
</body>
</html>
Javascript:
$(document).ready(function () {
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vGAsL/19/
you have applied the popup id to your body, instead of a separate div.
<body>
<div id="popup">
test pop up goes here
</div>
<button> create and show popup </button>
I think you have an issue in your body tag, it should be:
<body>
<div id="popup">
test pop up goes here
</div>