Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript plug in is loading but not functioning

    I have a javascript content slider I am using on the home page but it is not functioning. It displays but the right side content does not change when clicked on it. Please help

    www.mykidswish.com

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I might be wrong, but to me a javascript content slider is something that rotates pictures. You do not have anything on your site like that so have to use the clues in "It displays but the right side content does not change" so you are either talking about the social media tags or the link images to the right of your main picture "Childrens Birthday Parties". Looking at your page I see that the only js you have is directed at social media tags.

    Here's something that will bite you in the rump 9 times out of 10

    line 10: <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    line 41:<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>

    You reload jquery and down grade it. Could be the problem. remove line 41.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I was looking at this earlier, and agree with removing the duplicate jQuery.

    However, I also think you've got an issue with using an earlier version of jQuery UI with the latest version of jQuery. To use the rotate method, have a try replacing your call to jQuery latest with this jQuery version.

    Next, you are calling .tabs() on #featured > ul, but this should be just #featured.So, your javascript should be:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    	<script type="text/javascript" src="inc/js/jquery.plugins.js"></script>
    	<script type="text/javascript" src="inc/js/jquery.site.js"></script>
        <script type="text/javascript" src="js/jquery.social.media.tabs.1.7.min.js"></script>
        <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#social-tabs').dcSocialTabs({
                widgets: 'twitter,facebook,fblike,fbrec,flickr,pinterest',
    		rssId: 'http://feeds.feedburner.com/DesignChemical',
    		twitterId: 'mykidswish',
    		facebookId: '289565194503540',
    		fblikeId: '289565194503540',
    		fbrecId: 'http://www.mykidswish.com',
    		googleId: '111470071138275408587',
    		linkedinId: '589883,http://www.linkedin.com/in/leechestnutt',
    		flickrId: '/94896171@N07',
    		deliciousId: 'designchemical',
    		youtubeId: 'wired',
    		diggId: 'remix4',
    		pinterestId: 'tiptondusti/my-kids-wish/',
    		lastfmId: 'lastfm',
    		dribbbleId: 'frogandcode',
    		vimeoId: 'brad',
    		stumbleuponId: 'remix4',
    		deviantartId: 'wyv1',
    		tumblrId: 'richters',
    		instagramId: '',
    		tweetId: 'designchemical'
            });
        });
        </script>
    	<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	});
    </script>
    With this in place, the tabs functionality runs properly and your images crossfade when the corresponding link is clicked.
    Last edited by SB65; 04-26-2013 at 02:58 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys that has worked but now there is an issue with those images in the backround. The main image displays but the other 3 do not??? i am getting a 404 error. I have tried uploading them multiple times. thoughts?

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You've just got the URL for the image wrong.

    Code:
    images/image2.jpg
    should be, by observation of your first image

    Code:
    images/2.jpg
    And similarly for the other images.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    brobinson1283 (04-27-2013)

  • #6
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks i fixed that. Now i am having the same type of problem on another page. some of the thumbnails are not displaying. the are giving me a 404 error. The fancybox is also not working on this page. when you click on a thumbnail it just opens in a window.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If your thumbnails aren't displaying either the image path is wrong, as before, or you haven't loaded the images onto your server.

    At the moment there's a console error generated when the image is clicked. The error referenced suggests there's a problem generated by the slideshow script. You don't have Fancybox loaded on your page that I can see. You do have prettyPhoto loaded, however I can't see anything that's setting it up (may just have missed it). If it is being set up correctly, it's possible that your version of prettyPhoto needs updating to a later version. I don't know prettyPhoto, but it looks as if the version you're using is quite out of date.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •