I'm working on a simple site but i have problem showing the cufon font, this is my first time using this feature. I'm using firefox 3.6.18
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="javascript/cufon-yui.js" type="text/javascript"></script>
<script src="javascript/corbel-bold_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('selector');
Cufon.replace('#sub1');
</script>
</head>
<body>
<div id="header">
<div id="logo" onclick="window.document.location.href='http://localhost/site/'"></div>
<div id="navigation">
<div class="menu">
<h1>ABOUT</h1>
<h1>GALLERY</h1>
<h1>CONTACT</h1>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
The H1 is showing but not in its cufon text. Help! Thanks in Advance!!
I'm getting a javascript error from the font file that you posted. Try with a different font and see if it works. If it does then give it another go with your file.
If your font still doesn't work then it sounds like a problem with Cufon's JS generation.
Related
I am trying to use Materialbox in Materialize, but the zooming effect does not seem to work. While the CSS hover works, clicking does not enlarge the image as it should.
I have tried both the jQuery method and the non-jQuery method shown on the site. I have made sure that jQuery is loaded before the script, and tried both including the script in the html in tags as well as putting it in another file.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<!--This is the where the image is-->
<img class="materialboxed" width="300" src="assets/model.jpg">
</div>
</div>
</div>
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<!--I used the provided code on the Materialize website-->
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>
</html>
Looking at the console, I get three errors:
Loading failed for the with source “file:///Users/ned/Desktop/website/js/jquery-3.4.1.min.js”.
ReferenceError: $ is not defined
The character encoding of the HTML document was not declared. The document will render with...
My editor throws the ReferenceError as well whenever I try to use the code snippet in a separate file.
Try this:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/materialize.min.js"></script>
instead of this:
<script src="js/materialize.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
Actually, materialize itself uses jQuery in its code, so you must include jQuery first then materialize.min.js.
It works for me.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
And my JS/jQuery:
$("#generateButton").on("click", function() {
alert("Hello");
})
If you are wondering why the only thing my Random Number Generator is supposed to do is saying "Hello", that's because I was trying to figure out why my code wasn't working properly, and then I found out it was jQuery not working.
The file 'script.js' is linked properly though, because when I tried the normal JS alert with no jQuery code, it worked fine.
This is the part of the code where I am linking to jQuery:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
Yes, I am linking jQuery from 3 different sources, just in case. That is because the first one didn't work, the second one didn't either, so I just wanted to make sure.
Assuming script.js is where your code lives, when you do
<script src="script.js"></script>
There is no $("#generateButton"). You can either move your script to just before the </body>, or wrap you code in
$(function() {
//your code goes here
});
which tells it to wait for the document to load before executing.
You just put your code before loading jquery, you should put your script after not before.
It make sense in programming to import or load the lib before using something from it
$(function(){
$('#generateButton').click(function(){
alert("functional");
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">
<title>RNG</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<h1>Random Number Generator</h1>
<button class="btn btn-primary" id="generateButton">Generate</button>
<p id="randomNumber"></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
I hope this is not a stupid question/issue. I am trying to use fullcalendar for the first time. I am running this from flask on a local server. Here is the code I am attempting to use, based on examples I have found from some googling:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
So when I run that, it just gives me nothing.Am I missing a resource?
You never load the fullcalendar into the div. Do it like this:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This way you load it as soon as the document is ready.
Can you check your css link? I think It should end with fullcalendar.min.css not fullcalednar.min.css.
Can anyone tell me what is wrong with the following? I know it is something to do with my sources as if I replace them with google apis versions it works fine. But I just can't see what is going wrong.
My folder structure is like:
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title>Collapsible test</title>
<!--Style Sheet-->
<Link href="css.css" rel="stylesheet" type="text/css"></Link>
<!--js-->
<script src="../js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="container">
<h3>Test 1</h3>
<div class="vertical">Test1</div>
<h3>Test 2</h3>
<div class="vertical">Test2</div>
<h3>Test 3</h3>
<div class="vertical">Test3</div>
</div>
<script>
$(window).on("resize", function() {
$('body').width($(window).width());
$('body').height($(window).height());
}).resize();
$(function() {
$("#container").accordion({
collapsible: true
});
});
</script>
</body>
Your CSS is likely referenced in the wrong directory. Try referencing your CSS the same way as your javascript (../css/):
<link href="../css/css.css" rel="stylesheet" type="text/css"></Link>
Edit: as suggested in another comment by #j08691 your jQuery file needs to be referenced before any other jQuery plugins. The order should be as follows:
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui-1.11.4/jquery-ui.js"></script>
I have a problem with Jquery load in dialog box.
I spent all night trying to figure out why the dialog box shifts to the right side of the screen when I loaded another file. Apparently loading different pages can affect it randomly. It can be center but at the very bottom, but I don't know why it is happening. All I know is the loading another page into a dialog box displaces the dialog box from the center.
This is the code i have:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="ProfilePage/jqueries.js"></script>
<script type="text/javascript">
$(
function()
{
$("#box").load("jquery1.html").dialog({modal:true,height:400,width:400});
}
)
</script>
</head>
<body>
<div id="parent" style="background-color:red;height:800px;width:800px;">
<div id="circle" style="position:relative;left:0px;height:800px;width:400px;background-color:green;float:left;">
</div>
<div id="box">
I want milk
</div>
<div id="sds" style="position:relative;float:left;left:5px;height:800px;width:399px;background-color:yellow;">
</div>
</div>
</body>
</html>
If I remove the load and just put a normal text in the div it works fine.
Can someone suggest an idea? Thanks!
just try to add it to the new line
$("#box").load("jquery1.html")
$("#box").dialog({modal:true,height:400,width:400});