This is the site: http://www.hfwebdesign.com/
I'm getting this error: Uncaught TypeError: Object [object Object] has no method 'flexslider'
But in my localhost it works perfectly.
This is the <head> (where the script is being called):
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/js/flexslider/flexslider.css" />
<link rel="icon" type="image/png" href="<?php bloginfo( 'template_url' ); ?>/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/flexslider/jquery.flexslider-min.js"></script>
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
footer:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
Could it be that the code is breaking in the web server in the remote host and not in my localhost (e.g. they are different version of LAMP/APACHE?)
Try chage the call place from:
<script src="http://www.hfwebdesign.com/wp-content/themes/twentytwelve/js/flexslider/jquery.flexslider-min.js.pagespeed.jm.noGKd8vLzs.js"></script>
<script type='text/javascript' src='http://www.hfwebdesign.com/wp-includes/js/jquery/jquery.js,qver=1.8.3.pagespeed.jm.1SksPi3j41.js'></script>
To:
<script type='text/javascript' src='http://www.hfwebdesign.com/wp-includes/js/jquery/jquery.js,qver=1.8.3.pagespeed.jm.1SksPi3j41.js'></script>
<script src="http://www.hfwebdesign.com/wp-content/themes/twentytwelve/js/flexslider/jquery.flexslider-min.js.pagespeed.jm.noGKd8vLzs.js"></script>
Don't sure about it, but try isn't bad.
Check case in your script path. If the script folder name is e.g. 'flexSlider' and in the script src path is 'flexslider', it will work on windows (most localhosts) but not on linux (most servers). It depends on the OS, not on the server SW, so running e.g. XAMPP on windows will work because windows works in case-insensitive way with paths.
Related
I'm beginner for PHP. I'm using Wordpress for developing the website. Currently, I'm trying to create my own themes for wordpress. Now, I face the problem is cannot load the css which is in the CSS file as well as javascript. Could someone help me to solve the problem?
header.php
<html lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" rel="stylesheet" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/init.js" rel="stylesheet" type="text/javascript"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">
functions.php
<?php
add_theme_support('menus');
function register_theme_menus() {
register_nav_menus(array( 'primary-menu' => __('Primary Menu')));
}
add_action('init', 'register_theme_menus');
function wpt_theme_styles() {
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css');
wp_enqueue_style('normalize_css', get_template_directory_uri().'/css/style-xlarge.css');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/style-mobile.css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
function wpt_theme_js() {
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'main_js', get_template_directory_uri().'/js/jquery.scrolly.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array('jquery'), '1.1', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/scrollgress.min.js', array('jquery'), '1.1', true );
}
add_action('wp_enqueue_script', 'wpt_theme_js');
?>
index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
file directory
after modify error
Fixed:
Your style.css file isn't inside a folder called css so update the <link> tag to: <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
<script> tags cannot have a rel="stylesheet" attribute.
The <!-- [if lte IE 8]... tags are probably also serving from the css directory, so also reference the get_template_directory_url() in their path.
It is a good idea to only reference the css files in the <head> and place the <script> tags at the bottom of your file, before the </body> tag.
Full Fixed header.php
<html lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="<?php echo get_template_directory_uri();?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrolly.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.scrollgress.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri();?>/js/init.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-xlarge.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
</head>
<body class="landing">
i'm trying to run a php project i created using windows in ubuntu 12.04LTS. For that reason i installed php5 apache2 and open_jdk_7 in my ubuntu system. The next step was to put the project (the file index.php, the directory CSS and other files and directories) inside var/www/webserver directory. Then i opened firefox and wrote myip/weserver/index.php . It indeed loaded the page but it wasn't using the css. By the way i am new in ubuntu so keep it simple if possible :/ . Any help will be really appreciated.
This is the starting part of the code tha i used on the windows version in index.php
<?php
define("SUBFOLDER","");
//has to be changed to DOCUMENT ROOT
define("ROOT","C:\webdev\apache\htdocs");
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo SUBFOLDER."/"; ?>css/myCSSfile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="<?php echo SUBFOLDER."/"; ?>images/dit.ico">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/search.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button2.css">
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/resolutionfinder.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/changeInputValue.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/ajaxcalls.js"></script>
And this is how i changed the second define to use it on linux. maybe i give the root path wrong?
<?php
define("SUBFOLDER","/webserver");
//has to be changed to DOCUMENT ROOT
define("ROOT","/var/www/webserver");
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo SUBFOLDER."/"; ?>css/myCSSfile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="<?php echo SUBFOLDER."/"; ?>images/dit.ico">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/search.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button2.css">
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/resolutionfinder.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/changeInputValue.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/ajaxcalls.js"></script>
Your OS has nothing to do with your CSS. Just check the path you are loading the CSS from, its most likely wrong.
I am having trouble getting lightbox http://lokeshdhakar.com/projects/lightbox2 to work. I have been able to create a new test html doc and get lightbox working. However when I put it into my website I can only get the images to load up.
My site is comprised of (header.php----portfolio.php(main content)----footer.php)
Header.php
<head>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/screen.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/lightbox.css">
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<!--header end-->
Portfolio.php
<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" alt="image-1" />'
footer.php
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
I am lost on this and would appreciate some help.
Your image needs a link to the original image:
Portfolio.php
<a href="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" data-lightbox="image-1" data-title="My caption">
<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1-small.jpg" alt="image-1" />
</a>
Looking at the Lightbox documentation it mentions you need to list the images out in this fashion.
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1
Due to not understanding the #import query for responsive behaviour IE8 is incorrectly displaying some of my wordpress website - http://dev1.markdavies.eu . To solve this I'd like to try having a separate style sheet for IE8/7/& 6 and have found the following code
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
However I don't know which php file I should put it in. Or even if this is the best way to go about. Please could anyone advise.
I am using a child theme and am reasonably well conversed with the file structure and css, HTML and php code.
Thanks
Add the appropriate conditional comment to your theme’s header.php file right after the call to the theme’s default stylesheet.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 7]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/ie7.css" media="screen" type="text/css" />
<![endif]-->
Then upload your new IE-specific stylesheet (ie7.css in the example above) to your theme folder.
For child theme, use:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href=" <?php echo get_stylesheet_directory_uri(); ?>/ie.css" />
<![endif]-->
Thank you for your help everyone. Although it's not a child theme, the header.php uses the following form to call the style sheet;
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
So the last answer by vel did the trick. I inserted the conditional statement as follows;
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style-ie.css" type="text/css" media="all"/>
<![endif]-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
Out of interest, does it matter if it goes before or after the 'ping back' line of code? It seems to work for me either way.
I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6