I am a very new beginner and have been reading the help forums. All I want to do (For now) is have an image ("mygoal.png") be be displayed in the center of the screen with a smooth transition. I was hoping that the image would be displayed as a glorified popup box which is what brought me to fancybox in the first place.
EDIT: I am getting the following two errors:
1) uncaught referenceerror: jquery is not defined
2) uncaught typeerro: object #<object> has no method fancybox
I am placing all of my code in one document - I hope this is the correct practice for jQuery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
/* I can't get the below code to work */
$("a#single_image").click(function(event){
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<a id="single_image" href="mygoal.png"><img src="mygoal.png" alt=""></a>
</body>
</html>
Does anyone see my error in the above code? When I click the image now it just takes me to a new page - but no effect at all.
Thank you for reading,
Evan
It's because you've defined the Fancybox script BEFORE the JQuery Script.
The fancybox script is using JQuery methods and as you've not defined JQuery yet, it's causing exceptions:
//JQUERY FIRST
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
//FANCYBOX SECOND
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
It should be.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" />
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" />
jQuery needs to be referenced before anything that uses it.
I was able to get this working - I was just missing the following reference, unfortunately:
Related
I am new to bootstrap. After researching, I understand that I can use javascript to change background color. I would like to dynamically change the background color or image of a specific container. I am using external links to the style .css files
(example:
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap->theme.min.css">
).
you can use jQuery and do as follow :
To change the bc-image:
$('.YourContainer').css('background-image', 'url(../images/backgrounds/bc-image.jpg)');
to change the bc-color :
$('.YourContainer').css("background-color", "yellow");
don't forget to add jQuery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
edit because probably you don't know how to use the code in an embadded script tag :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('.YourContainer').css('background-image',
'url(../images/backgrounds/bc-image.jpg)');
});
</script>
</body>
</html>
Live Demo
I'm quite new to both html/css and jQuery. I'm trying to get a vimeo video to open with fancybox on my page. I've read a bunch of similar questions on stackoverflow and nothing has worked. I've even put my code into JSFiddle and it WORKS. (http://jsfiddle.net/8hMLb/1/)
Heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Fancybox Javascript -->
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox-media.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="http://vimeo.com/70926140">Vimeo.</a>
</body>
I've triple triple checked that source files are correct. It works for images, just not vimeo (or youtube, or any media). It works in JSFiddle. I'm totally stumped here. Any help would be greatly appreciated!
It turned out that the fact that I was working locally was the issue. When I uploaded a test version of the code to the actual site, it worked. I guess my local environment was having trouble getting to vimeo.com or something
I am new to javascript and am trying to make a simple dialog open when the page opens, but it simply just displays the text of the dialog as if its a normal paragraph, no dialog. Here's my index.html:
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script type='text/javascript' src='js/jquery.js'></script>
<title>Welcome to Jetty-9</title>
<style type="text/css" title="maincss">
#import url(maincss.css);
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
And my maincss.css simply puts a background image in for the body nothing else, and the js/jquery.js file is the latest version of jquery, and I ensured it is linked right by loading the page, viewing page source, then opening the js file by clicking it
You need to include jQuery UI to take advantage of the dialog.
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
You are missing jQuery UI. Include the below code in head of your page.
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css' rel='stylesheet' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
Visit here for more CDN links of various versions of jquery ui & its themes.
you have to import the JQuery UI's api's AFTER the JQuery main file
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This way is should work:
<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script type='text/javascript' src='js/jquery.js'></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Welcome to Jetty-9</title>
<style type="text/css" title="maincss">
#import url(maincss.css);
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
I'll assume you're trying to use jquery-ui dialog, if this is the case, you need to include jquery-ui files
These are latest versions from CDN
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
You could pick a different theme if required
Your code looks good and it is working. My guess is you're not properly importing the jQuery or jQuery UI.
Updated with reference to MaVRoSCy comments and take a look at this fiddle, working good.
Okay so I'm wrapping up a my website and I'm having issue with FireFox and Chrome. The issue is the same for both browsers so I'm guessing it's an easy fix and I'm just being dumb.
So I'm using bgStretcher from ajaxblender.com. Everything works wonderfully on IE9 but when I load the site on FireFox and Chrome, bgStretcher is either not loading or not loading correctly. The background does not function as the background and the divs are pushed to the bottom and moved all out of whack. The HTML code is as follows:
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('body').bgStretcher({
images: ['images/gervais_street.jpg'],
imageWidth: 1024,
imageHeight: 720,
});
});
When I comment this section out, the divs function correctly but obviously there is no background. Can anyone see anything with this that is wrong?
Here is the code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gg web design</title>
<link rel="stylesheet" type="text/css" href="css/bgstretcher.css" />
<link rel="stylesheet" type="text/css" href="css/gg.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/bgstretcher.js"></script>
</head>
<body>
<!-- from ajaxblender.com -->
<script type="text/javascript">
$(document).ready(function(){
// Initialize Backgound Stretcher
$('body').bgStretcher({
images: ['images/gervais_street.jpg'],
imageWidth: 1024,
imageHeight: 720,
});
});
</script>
<!-- end ajaxblender.com script -->
<script src="js/create_menu.js"></script>
<script>
create_menu();
</script>
<div id="content">
<center>
welcome to G<span class="mirror">G</span> web design.
</center>
</div>
<div id="picture_credit">
gervais street bridge - photo by steve moore
</div>
<script src="js/create_footer.js"></script>
<script>
create_footer();
</script>
</body>
</html>
I know I'm probably doing something stupid so be gentle. Thanks everyone!
First thing I would try is swapping the order that you're loading the css. Put the bgstretcher.css call last instead of first.
Another thing to consider is using background-size:cover for modern browsers. You could put the bgstretcher calls(both js and css) in an IE conditional statement to handle the background for IE.
Here's a good link on the topic...
Try selecting document instead of body
$('document').bgStretcher({
images: ['images/gervais_street.jpg'],
imageWidth: 1024,
imageHeight: 720
});
I am trying to use a tooltip jQuery plugin. This is what I have in <head> of index.html:
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="js/homepage.js" type="text/javascript"></script>
</head>
And this is in js/homepage.js:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
But for some reason, the tooltip doesn't show. But it does show if I include the tooltip function on the index page. Is there any way to get this working without having the tooltip function on the index page, but in an external file? Thanks.
I have never use the simplest plug in but i copy and pasted your header and your js code and everything seemed to work just fine.
I linked to the latest version of jquery and downloaded a fresh copy of simpletip.js and it worked with on the first try.
The only differences are/maybe:
- I don't know what your code looks like where you call 'supported_hosts' class in the html.
- The name of the simpletip.js file I didn't change it upon download, so I would check your file names and relative location.
Sorry there wasn't something more but what you have worked for me, here is the code I used in full incase this helps you:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="homepage.js" type="text/javascript"></script>
</head>
<body>
<span class="supported_hosts">Tool Tips here</span>
</body>
</html>
Javascript you gave:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
I downloaded the simpletip.js here:
http://code.google.com/p/jquery-simpletip/downloads/detail?name=jquery.simpletip-1.3.1.min.js&can=2&q=
I would just double check your relative paths and class naming. Your code looks good.
Moving
<script src="homepage.js" type="text/javascript"></script>
to the end of the body seemed to solve the problem:
<body>
[code...]
<script src="homepage.js" type="text/javascript"></script>
</body>