I'm tearing my hair out to find why Chosen plugin (http://harvesthq.github.io/chosen/) doesn't want to work. I have tried different things, such as calling the chosen plugin directly in jQuery, rather than in JavaScript as below, but none of it works. I believe I have called the libraries correct, and the stylesheets, yet none of the functionalities of the plugin are applied to the select boxes. It's probably a simple mistake that I've made somewhere.
This is my markup, it first calls the stylesheets. echo $page_htmlhead calls javascript libraries such as latest jQuery from Google API.
<head>
<!--[if lt IE 9]>
<script src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/html5shiv.js"></script>
<![endif]-->
<title>flyeuro.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=7"></meta>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Europe's favourite virtual airline!">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/img/favicon.ico">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/css/style.css" />
<link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.css" />
<?php
/* This is required, so phpVMS can output the necessary libraries it needs */
echo $page_htmlhead;
?>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$(".chosen-select").chosen()
});
</script>
// ...rest of <head> code
</head>
Inside $page_htmlhead...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
I finally then display the options for the user on a form...
<select class="chosen-select" name="depicao" data-placeholder="Departure Airport">
<option value="">All</option>
<?php
foreach ($airports as $airport)
{
echo '<option value="'.$airport->icao.'">'.$airport->icao.' - '.$airport->name.'</option>';
}
?>
</select>
Related
I'm building a Wordpress site and for some reason I'm getting a 404 error for the style.css, although I've referenced the file in the header.php.
I'm not sure what I've done wrong and I'm struggling to figure it out. Any explanation or suggestions would be appreciated.
Below is the console error
EDIT - This is a picture my style.css which is in the directory of the theme
And here is how I've referenced the css file in the header.php -
<?php
/**
* The template for displaying the header
*
* #subpackage the-bespoke-harvest
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCo3e_2xea4jd7wMQ2c0IkQKRQ3NH3aZmY&libraries=geometry"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<section class="section-scroller">
<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>
</section>
Note - The other linked files in the head such as the google maps script & pingback are working fine.
You have not specify a valid path for css.
Replace this line with this wp code structure.
<link rel="stylesheet" href="bespokeharvest/website/wp-content/themes/the-bespoke-harvest/patterns/public/css/style.css?ver=4.8.2" type="text/css">
to
<link href="<?php echo get_template_directory_uri();?>/patterns/public/css/style.css" rel="stylesheet" type="text/css" />
I would recommend enqueueing your scrips and styles. https://developer.wordpress.org/reference/functions/wp_enqueue_style/
This best illustrates how you would do it:
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402
You can still prioritise styles/scripts as well as version them.
(I’ll write the code once I get to a computer)
I've seen your problem and I suggest you go with this.
First, open that file in your browser.
Then check what path does this code return.
<?php
echo get_template_directory_uri();
?>
Then merge that together.
Suppose this code return.
localhost/wordpress
And your path style path is
C:/xampp/htdocs/wordpress/wp-content/theme/mytheme/something/style.css
Then remove c:/xampp/htdocs/wordpress
And create something like this
<?php
echo get_template_directory_uri();?>/wp-content/theme/mytheme/something/style.css
?>
This is the solution whenever you got some errors like this.
Thanks.
The mobile and tablet version of my website are a scaled down version of my desktop site. With the mobile version a fixed navigation bar and slidetoggle navigation come into play.
This all worked for a year until about a month ago and something doesnt seem to be recognising the smaller device sizes and I cannot work out what is wrong. On the mobile version the website contents are squashed to the left. Usually I can fix this with changes to css declarations but any changes I now make dont seem to have any effect.
I have run my code through various code checkers and none have flagged up any major errors.
This is my meta data:
<!DOCTYPE html>
<html <?php language_attributes(); ?> >
<head>
<title>MISSNISAA</title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link href="http://allfont.net/allfont.css?fonts=montserrat-light" rel="stylesheet" type="text/css" />
<script src="https://use.typekit.net/rsg8obz.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com
/analytics.js','ga');
ga('create', 'UA-64074269-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
/*prepend menu nav icon*/
$("#menu-nav").prepend("<div id='menu-nav-icon'>☰</div>");
/*toggle nav*/
$("#menu-nav-icon").on("click", function() {
$(".menu-nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
/*prepend menu social icon*/
$("#menu-social").prepend("<div id='menu-social-icon'>☰</div>");
/*toggle social*/
$("#menu-social-icon").on("click", function() {
$(".menu-social").slideToggle();
$(this).toggleClass("active");
});
});
</script>
</head>
Grateful for any help as I have hit a wall with this.
Just to add the first photo is what my website used to look like on the mobile version but now looks like the second photo. I have made no changes to the css during this time so I don't see why all of a sudden the media queries don't work.
I have included the following script in the header file.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js.js" ></script>
</head>
And an error is thrown.
Is there anything I have to change?
Make sure that you are loading URL Helper, if not try this link
and change these line
<script type="text/javascript" src="<?php echo base_url();?>assets/js.js" ></script>
<link rel="stylesheet" type="text/css" href="assets/css.css">
to
<script type="text/javascript" src="<?php echo base_url("assets/js.js");?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url("assets/css.css");?>">
I got a little problem with jQuery here.
Basically, I include my pages in the index.php page. However, SOME jQuery is not working, while others are okay. All scripts used in all pages are loaded in the tag of index.php.
<head>
<meta charset="utf-8">
<title>Shy Shop</title>
<!--js-->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/light_box.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery(".inline").colorbox({inline:true, width:"50%"});});
</script>
<!--end js-->
<!-- Mobile Specific Metas ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS ================================================== -->
<link rel="shortcut icon" href="Images/icons/favicon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>
<link rel="stylesheet" href="css/light_box.css"/>
<link href="../../../html5shiv.googlecode.com/svn/trunk/html5.js">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
And this is how I include the rest of the files in index.php.
<?php
if(!isset($_REQUEST['pg']))
{
$pg = "home";
}
else
$pg = $_REQUEST['pg'];
if($pg=="shopguide")
include("faqs.php");
elseif($pg=="aboutus")
include("aboutus.php");
elseif($pg=="contactus")
include("contactus.php");
elseif($pg=="home")
include("home.php");
elseif($pg=="shop")
include("shop.php");
elseif($pg=="sitemap")
include("sitemap.php");
elseif($pg=="product")
include("product.php");
elseif($pg=="shoppingcart")
include("shoppingcart.php");
elseif($pg=="profile")
include("account.php");
elseif($pg=="orders")
include("orders.php");
elseif($pg=="wishlist")
include("mywishlist.php");
elseif($pg=="changepassword")
include("changepassword.php");
elseif($pg=="newmessage")
include("newmessage.php");
elseif($pg=="receivedmessages")
include("receivedmessages.php");
elseif($pg=="ordersummary")
include("ordersummary.php");
elseif($pg=="test")
include("test.php");
elseif($pg=="viewmessage")
include("viewmessage.php");
elseif($pg=="register")
include("register.php");
elseif($pg=="login")
include("login.php");
elseif($pg=="reseller")
include("reseller.php");
elseif($pg=="myaccount")
include("orders.php");
?>
An example of a working js in the included files is the jcarousel.min.js.
The accordion.js and light_box.js does not work with the included files, but they work when they are used in a single file.
Console says: Uncaught TypeError: undefined is not a function.
This issue may happen when you have same plugin/jquery files included
in other php files too. e.g. in index.php, you have some JS files, you
are including other PHP files which may also have same JS again. In
such cases, jQuery behaves like this. To check this, just check the
view source of generated html.
I recently upgraded the Dygraphs library for a client's website, and it now doesn't render properly in IE8 (Yes, I know what you're thinking, but by client's clients love using IE and won't upgrade).
I have the following headers (obviously I haven't put the real domain on there for this post):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Live Data</title>
<link rel="stylesheet" href="http://mydomain.com/css/main.css" type="text/css" />
<link rel="stylesheet" href="http://mydomain.com/css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" />
<!--[if IE]>
<script type="text/javascript" src="http://mydomain.com/js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="http://mydomain.com/js/dygraph-combined.js></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery.jec-1.3.0.js"></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="http://mydomain.com/js/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="http://mydomain.com/includes/DataTables-1.7.4/media/js/jquery.dataTables.js"></script>
There are no errors in the console / debug panel, and when I hover the mouse over where the line should be, the legend shows in the corner as it's supposed to, with the correct data. Also, the Axis labels and values show up fine.
What could be causing the data line on the graph not to show up?
There is a very specific recommendation for the "X-UA-Compatible" header at http://dygraphs.com/#ie. Give it a try:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->