<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/facebox.js")" type="text/javascript"></script>
<link href="#routes.Assets.at("stylesheets/facebox.css")" media="screen" rel="stylesheet" type="text/css"/>
<script>
</script>
<body>
text
<div id="info" style="display:none;">
hello world
</div>
</body>
Facebox and div tag are not showing.I am beginner of ajax so please help me .
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
Related
I have already tried but could not find any answer to my question.
I want to use a semantic modal,the first, this!
my imports are:
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.min.css">
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"> </script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"> </script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="moduli/jquery-ui/jquery-ui.js"></script>
<script src="moduli/semantic/dist/components/modal.min.js"></script>
Error on console :
modal.min.js:11 Uncaught TypeError: O.transition is not a function
modal.min.js:11 Uncaught TypeError: q.dimmer is not a function
when I click on a button, I call the follow js function:
$('.ui.modal')
.modal({onShow: function(){}})
.modal('show');
I think that your error simply comes from the order of your <script> imports, since semantic.min.js depends on jQuery you must include jQuery before semantic.min.js
So use:
...
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
...
Instead of:
...
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
...
You can see the working sample there:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<input type="button" value="showModal" onClick="$('.ui.modal').modal('show');"></input>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<p>some Content</p>
<p></p>
<p></p>
</div>
</div>
Hope it helps,
I'm fairly new to Angular.js (or to web programming in general). I got a pretty basic problem - I'd like to include a date picker in my application. For this purpose, I try to set up the bootstrap datepicker:
https://bootstrap-datepicker.readthedocs.org/en/latest/#
I have the jQuery and Bootstrap dependencies included:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/blog.css">
<script src="angular-datepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/blogController.js"></script>
I don't really understand, how am I supposed to use it from now on? I can include some input field in my HTML template, but how exactly do I call the script that calls the date picker widget?
Add an id or a class to your input field and use that as a selector once you call the datepicker.
In your HTML:
<input type="text" class="datepicker">
In your JS:
$('.datepicker').datepicker();
full code just test
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({pickTime: false});
});
</script>
</body>
</html>
Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>
I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/
Hi
I have created a web app that uses ical. When I run it locally it works like a charm. However when I upload it to my server via ftp so as to test it online the ical script doesn't show up.
My safari inspector gives me an error--->
TypeError: Result of expression '$('#any_id').getCalendar' [undefined] is not a function.
This is my code:
<style type="text/css" media="screen">#import "jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">#import "themes/artspot/theme.css";</style>
<style type="text/css" media="screen">#import "jqt.calendar.css";</style>
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.calendar/jqt.calendar.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">#import "../../extensions/jqt.listIndex/jqt.listIndex.css";</style>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.listIndex/jqt.listIndex.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({});
$(function() {
$('#any_id').getCalendar();
});
</script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>Calendar</h1>
</div>
<div id="any_id">
<ul>
<li><time datetime="2011-01-26T14:30Z">210 mg/dl</time></li>
<li><time datetime="2011-01-26T14:30Z">100 mg/dl</time></li>
</ul>
</div>
</div>
</div>
</body>
my problematic web app is --->web app ical
Error: $("#any_id").getCalendar is not a function
Source File: http://webstore.web44.net/
Line: 20
You are loading everything twice
<script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>