Maracles Posted May 9, 2010 Share Posted May 9, 2010 On my page I use an include() to bring in my header. For most of my pages within the header I have links to CSS stylesheets, links to external javascript files, and also javascript snippets coded into the page. My problem is that sometimes the javascript action does not work when the code is in the head, what I have to do is take it from the header file and copy into the body of the page. Anyone have any ideas about this? IT also occasiionally happens with links to external javascript files , my link has to be taken from the header into the body of the page. My current issue is when i'm trying to use Jquery tabs and its this code that is giving me problems: <script type="text/javascript"> $(function() { $("#profiletabs").tabs(); }); </script> Any help is appreciated. Quote Link to comment Share on other sites More sharing options...
ram4nd Posted May 9, 2010 Share Posted May 9, 2010 make sure you load jquery before jquery scripts Quote Link to comment Share on other sites More sharing options...
Maracles Posted May 9, 2010 Author Share Posted May 9, 2010 I am doing that, I load my CSS first in my header and then my javascripts after. For some reason it won't recognise them unless I put them in the body though. When they are in the header I know the links to jquery and jquery ui are working because if I view source and click the links it disaplys the actuall .js file contents. Quote Link to comment Share on other sites More sharing options...
kenrbnsn Posted May 9, 2010 Share Posted May 9, 2010 Can you post your code? Without it, we're just guessing as to your problem. Ken Quote Link to comment Share on other sites More sharing options...
Maracles Posted May 9, 2010 Author Share Posted May 9, 2010 My header used to contain the following: <!-- Load relevant CSS and Java documents --> <!-- Style Sheets --> <link rel="stylesheet" type="text/css" href=" <?php echo CSS_GLOBAL; ?>" /> <link rel="stylesheet" type="text/css" href=" <?php echo CSS_ARTICLE; ?>" /> <link rel="stylesheet" type="text/css" href=" <?php echo CSS_CXAPP; ?>" /> <link rel="stylesheet" type="text/css" href=" <?php echo CSS_BREAD; ?>" /> <link rel="stylesheet" type="text/css" href=" <?php echo CSS_JQUERY; ?>" /> <!-- Java Script --> <script type="text/javascript" src="<?php echo BREADCRUMB; ?>"></script> <script type="text/javascript" src="<?php echo JQUERY; ?>"></script> <script type="text/javascript" src="<?php echo JQUERYUI; ?>"></script> <!-- Bread Crumb --> <script type="text/javascript"> $(document).ready(function(){ $('#breadcrumbs-3').xBreadcrumbs(); }); </script> <!-- Profile Tabs --> <script type="text/javascript"> $(function() { $("#profiletabs").tabs(); }); </script> I have two areas using javascript. A breadcrumb navigation and some tabs. However to get these to work I have had the move the following into the body of my page because it wouldn't recognise it. When copying to the body I didnt change anything and it just started working. <script type="text/javascript" src="<?php echo BREADCRUMB; ?>"></script> <script type="text/javascript" src="<?php echo JQUERY; ?>"></script> <script type="text/javascript" src="<?php echo JQUERYUI; ?>"></script> <!-- Profile Tabs --> <script type="text/javascript"> $(function() { $("#profiletabs").tabs(); }); </script> All of the links to external javascript had to be taken from the header, but only the actual code for the tabs had to move. The code for the Breadcrumb works fine in the header. Any ideas. Quote Link to comment Share on other sites More sharing options...
kenrbnsn Posted May 9, 2010 Share Posted May 9, 2010 This is more of a Javascript problem than a PHP problem. jQuery UI functions will only work once the DOM is rendered, so put them in your $(document).ready(function(){ } area. i.e. <script type="text/javascript"> $(document).ready(function(){ $('#breadcrumbs-3').xBreadcrumbs(); $("#profiletabs").tabs(); } </script> Ken Quote Link to comment Share on other sites More sharing options...
Maracles Posted May 9, 2010 Author Share Posted May 9, 2010 Yeah I know now, I wasn't sure if it was something to do with the include (HEADER) thing. I've tried what you've said and thats not actually working. Which area where you referring to with the' document.ready'. I don't actually know javascript apart from how to drop Jquery into my code! Is there a javascript area of this forum? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.