Jquery background stretch not working.

  • Hello, I have been doing a lot of research on this topic over the past two days and still cant find a solution to why my jquery background image stretch isn’t working. I have the code working and layed out in a static html document and it works perfectly. When I paste this code into my own wordpress theme I’m creating it shows no sign of working.

    This code below is in it’s simplest form from the static html document that I am trying to incorporate into my wordpress theme.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="jquery.backstretch.js"></script>

	<script>
	    $.backstretch(["la.jpg"]);
	</script>

    Now below is how it appears in my current wordpress theme’s header.

    <html>
<head>
<title>Demo Template</title>

<!-- jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- end jquery -->

<!-- @fontface -->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<!-- @fontface -->

<!-- style sheets -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<!-- end style sheets -->

<!-- background stretch -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="jquery.backstretch.js"></script>

	<script>
	    $.backstretch(["la.jpg"]);
	</script>
<!-- end background stretch -->

</head>

    Do you all have any ideas on why this isn’t working? I’ve hit a complete road block here.

Viewing 9 replies - 1 through 9 (of 9 total)

  • 1) why are you including the main jQuery 1.8.3 library twice?

    2) correctly load jquery in your site via functions.php Function Reference/wp enqueue script ? WordPress Codex

    3) Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what’s JS is loading on your site and see the errors.

    Thread Starter gatessg

    (@gatessg)

    I have looked at that document but at still very confused how I would implement the

    wp_enqueue_script(
     $handle
    ,$src
    ,$deps
    ,$ver
    ,$in_footer
);

    in with my current code.

    could you please give me an example of how you would reference it in my header?

    Thread Starter gatessg

    (@gatessg)

    If I load jquery from google in the header and run a test such as

    <!-- test if jquery is loading -->
<script>
jQuery(document).ready(function(){
  alert('test');
});
</script>
<!-- end test if jquery is loading -->

    This will work, but as soon as i try to add my code it will not work. Do i need to reference the javascript a certain way? I’m still having absolutely no luck with this and it should be an extremely simple plug in.

    See https://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes/

    Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what javascript is loading and see the errors, too.

    Thread Starter gatessg

    (@gatessg)

    Being that I have created this theme from the blank Darling Template I do not have a functions.php file like is present in wordpress themes. Can I copy this out of something like Twenty Twelve and drop it in my theme’s directory to make these changes?

    Use a blank functions.php file, except for a <?php at the top

    Thread Starter gatessg

    (@gatessg)

    So I placed an alert in the bottom of my script to make sure it is being called and working.. which it is. The image is still not loading however. Could this be being referenced wrong here? 

    <html>
<head>

<title>Demo Template</title>

<!-- @fontface -->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<!-- @fontface -->

<!-- style sheets -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<!-- end style sheets -->

<?php wp_head(); ?>

	<!-- background stretch -->
	<script src="<?php bloginfo('template_url'); ?>/jquery.backstretch.js"></script>

	<script type="text/javascript">
	$.backstretch(["/images/city.png"]);
	</script>
	<!-- end background stretch -->	

</head>

    Again: use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what javascript is loading and see the errors.

    Thread Starter gatessg

    (@gatessg)

    I’m still getting no where with this. I went ahead and published what I have so maybe you could take a look and see what the errors are meaning if you dont mind.

    lafieldlog.com

    Now this below is what should be happening. It’s from the actual area where I got the code.

    Actual back stretch code

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Jquery background stretch not working.’ is closed to new replies.