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
});
Related
I'm trying to run two Jquery scripts, one called balancedgallery and the other museum. When I run each script by themselfs they run fine but together the balancedgallery script doesn't allow the Museum script to link the viewer and instead links directly to the image.
This could be because they are old scripts from 2014 and 2017 and some standards have changed? I had to update the ".load" to ".on('load')" for the balanced gallery reference. Though both the scripts are running fine (with no console errors). If I put "#msm-gallery-2" at the end of the url (2 being the image number) the viewer (Museum) displays.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="content">
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped1.jpg"/>
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped2.jpg"/>
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped3.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/enzzzooo/balanced-gallery/jquery.balanced-gallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/enzzzooo/museum/jquery.museum.js"></script>
<script>
$(document).ready(function() {
$.museum($('#content img'));
});
</script>
<script>
$(window).on('load', function () {
$("#content").BalancedGallery({});
} )
</script>
</body>
</html>
Not sure if this is affecting your scripts at all, but you have an unclosed tag on line 1 - set this to <!DOCTYPE html> <html lang="en-US">
and your last "img" tag is unclosed, which could be merging the div holding the scripts inside your last image.
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:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/library/js/pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".attachment-thumbnail").load();
$('.attachment-thumbnail').pixastic("desaturate");
});
</script>
</head>
<body>
<img class="attachment-thumbnail" src="image1.jpg"/>
</body>
</html>
I've been working on this for almost a day and can't even get close. You can see the thumbnail images that doesn't become desaturated here
Any help will be greatly appreciated.
You've got a JS error on line 40:
TypeError: Property '$' of object [object DOMWindow] is not a function
Line 40 is:
$(".attachment-thumbnail").load();
It seems that you have troubles with jQuery (jQuery functions don't work in Chrome debugger)
you dont have jquery core loaded dude :-)
you need to add
<script type="text/javascript" src="jquery.js ...
just before adding the pixastic
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>
I'm trying to implement a jQuery slider with increments. I've gone from, the actual project page, to a test page of the project with just the slider, to just the slider. In all cases I've been unable to get the handle to move. It also seems to have a width of 1px or similar.
My code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery slider</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
I'm sure there is something very simple at fault here, but I really cannot see it for the life of me. The custom part of my download, was just clicking the 'select all components'.
i don't think the slider will show if there is no content and no fixed height ... dry this:
<div id="slider" style="width: 300px; height: 200px">
// Put a huge lorem ipsum text here ;)
</div>
I tried your exact code in a .html file...only replacing your includes with:
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui-lightness/jquery-ui-1.7.2.bluetie.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
...and it worked...slider across the entire screen...easily movable...
non of my files were modified from what I got off the jquery site....
If you are not getting a javascript error,...my guess is that your .css file isn't being included.
Hope this helps,
Andrew