I have some pages i am loading the normal way by calling a view like you'ld expect, $this->load->view('foo') but the file i have put all my javascript main.js is giving errors on firebug if it misses the html it requires.
To stop the errors,i would like to avoid loading main.js in all pages and instead load only the javascript that specific pages uses.
I have tried this
public function index(){
echo <<<'EOT'
$(document).ready(function(){
$(".btn").click(function(){
$(this).hide();
});
});
EOT;
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
//$this->load->view('foo');
}
I know EOT will display the code and not inject it into the fetched view but that's the idea i am having.
Is there a way i can inject javascript or css into foo from the the controller index?.
You can always set the view variable and use if when you want to load that JS file (or any other file that will be used only on certain pages). Try something like this:
In your controller:
$this->load->view('foo', array('loadMainJS'=>true));
Then in your view:
<?php if (isset($loadMainJS) && $loadMainJS): ?>
<script src="main.js"></script>
<?php endif; ?>
You can even make a separate view that will only load that file and then load that view from the controllers only where needed. Plenty of ways to do this, actually.
Adding to what Shomz ,i was able to create a variable in controller
public function index(){
$data['custom_js'] = <<<EOT
<script>
$(document).ready(function(){
$( '.btn' ).click(function() {
alert( 'Handler for .click() called.' );
});
});
</script>
EOT;
$this->load->view('header',$data);
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
$this->load->view('body');
$this->load->view('footer');
}
and use it in the view,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="<?php echo base_url("assets/ico/favicon.ico"); ?>">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php echo base_url("assets/css/sticky-footer-navbar.css"); ?>" rel="stylesheet">
<link href="<?php echo base_url("assets/jui/jquery-ui.min.css"); ?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/jui/jquery-ui.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/bootstrap.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/isotopeSearchFilter.jquery.min.js"); ?>"></script>
<?php echo $custom_js; ?>
</head>
<body>
Related
I added wow.min.js and initializing the WOW on the end of the body and animate.css on the header. But after adding the classes to elements, animation doesn't appear.
I tried adding the CSS and js file via function.php but that didn't work too.
body:
<?php wp_footer();?>
<script src="<?php echo get_template_directory_uri() . '/js/wow.min.js' ?>"></script>
<script>
wow = new WOW();
wow.init();
</script>
</body>
header:
<head>
<meta charset="<?php bloginfo('charset');?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/header.css' ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/animate.min.css' ?>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<?php wp_head();?>
</head>
Good day, curlybom.
Can you please check if Jquery also attached to template?
I think wow.js and animate js need Jquery.
<script src='https://code.jquery.com/jquery-3.6.0.min.js' id='jquery-core-js'></script>
Tell please if it works...
After spending 2 days on the issue, I've found out that I should add animate__animated along with other class names to execute the animation. I don't know if this is a new update on animate.css, but tutorials never mentioned this. Embedding the scripts was all fine.
I'm trying to create my new own theme for wordpress (and the first one) and I encounter that my site isn't loading the header nor the content of index.php. It's pretty strange, I've read the WP WSoD documentation but I couldn't find anything helpful since my theme only have a couple of lines, I don't see the problem.
This is my theme structure:
And I've only edited index.php, header.php and footer.php. My functions.php seems to have something but I just added some lines to test, it's now blank again.
And this is what's inside my header.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> <?php bloginfo( 'name' ); ?> </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/assets/css/bootstrap.min.css">
<!-- Natural Stylesheet -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="<?= get_template_directory_uri(); ?>/assets/img/favicon.png"/>
</head>
<body>
This is what's inside my footer.php:
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/popper.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/bootstrap.min.js"></script>
</body>
</html>
And this is what I've inside my index.php:
<?php get_header(); ?>
<?php while( have_posts() ) the_post(); ?>
<?php get_footer(); ?>
I edited index.php and WordPress was loading front-page.php
I have a strange problem. Im usining Codeigniter with MaterializeCSS. I want to create navs to create menu. The problem is when I use localhost/page everything works fine, navbars are visible, but When I'll use a site.url, page looks like materalize is not included. I don't know what to do. I can quess there is something with URL in browser
Controller:
class main extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->view('head');
$this->load->view('index');
}
public function index()
{
$this->load->model('quiz_model');
$data['result'] = $this->quiz_model->get_data();
$this->load->view('content/quiz', $data);
}
public function addquestion()
{
$this->load->view('content/addquestion');
}
}
index.php
<?php
$this->load->helper('html');
$this->load->helper('url');
?>
<nav>
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<?php echo '<li>web page</li>' ?>
<?php echo '<li>Dodaj pytanie</li>' ?>
</ul>
</div>
</nav>
head.php
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<title>Strona</title>
</head>
<body>
<div class="container">
You need to set the base url you have IP showing in url.
config/config.php
$config['base_url'] = 'http://localhost/yourprojectname/';
You need to change few line :
Controller :
...
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('url'); // move url helper here, so it could be used on head view
$this->load->view('head');
$this->load->view('index');
}
...
head.php :
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="<?php echo site_url() ?>css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>js/materialize.min.js"></script>
<title>Strona</title>
</head>
<body>
<div class="container">
Hey i don't understand my website doesn't work i have don't do anything so i will explain
I got a 0 in top on my page now!
Google Chrome Explorator:Screenshot
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.wisementrade.com%2F
View/header.php: https://pastebin.com/7GqFYR75
View/homepage.php: https://pastebin.com/3htmFSmw
View/footer.php: https://pastebin.com/b3X9KScg
Controller/View.php: https://pastebin.com/cxCdcdEQ
Chrome viewer code: https://pastebin.com/Q8VYja5u
I have check the encode UTF-8 and i have re encode UTF-8 with my sublime text but nothing change ... please need help
EDIT: FIXED
I guess unclosed HTML tag cause this problerm. I found a few unclosed HTML tag in your View/header.php. Close it. try this.
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--o-->
<?php
//Session
$customer_id = $this->session->userdata('customer_id');
$user_type = $this->session->userdata('user_type');
$statement = $this->session->userdata('timezone');
?>
<!--o-->
<link rel="icon" type="image/png" href="<?php echo base_url('images/favicon.png'); ?>" />
<meta name="author" content="Wise Men Trade" />
<meta name="copyright" content="Copyright Notice ©2015 WisemenTrade Limited and licensors. All rights reserved." />
<meta name="robots" content="all" />
<!--o-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="<?php echo base_url("css/bootstrap.min.css"); ?>" rel="stylesheet"/>
<!-- Basic CSS -->
<link href="<?php echo base_url("css/style.css"); ?>" rel="stylesheet"/>
<!-- Responsive CSS -->
<link href="<?php echo base_url("css/responsive.css"); ?>" rel="stylesheet"/>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="<?php echo base_url("css/owl-carousel/owl.carousel.css"); ?>"/>
<!-- Default Theme -->
<link rel="stylesheet" href="<?php echo base_url("css/owl-carousel/owl.theme.css"); ?>"/>
<!-- MS DROP DOWN -->
<link rel="stylesheet" href="<?php echo base_url('css/msdropdown/flags.css'); ?>"/>
<link rel="stylesheet" href="<?php echo base_url('css/msdropdown/dd.css'); ?>"/>
<!-- 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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62333409-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<!--top-header-->
<header>
<div class="header_block">
<!-- left -->
<div class="block_left">
<a href="<?php echo base_url(); ?>">
<img src="<?php echo base_url("images/log_wmt.png"); ?>" class="logo" width="130" height="130" alt="Logo Wise Men Trade" />
</a>
</div>
</div>
</header>
also in your Controller/View.php have a few unclosed div (<div id="container"> and <div class="block_content">). check it and close it.
the last, make sure at the end of your Controller/View.php have a :
</body> <!-- end of body -->
</html> <!-- end of html -->
According to the documentation (https://www.codeigniter.com/user_guide/general/views.html), you could load multiple views in your controller, I think it doesn't work if you load it in the view, so you should have something like this:
<?php
class Page extends CI_Controller {
public function index()
{
$data['page_title'] = 'Your title';
$this->load->view('header');
$this->load->view('menu');
$this->load->view('content', $data);
$this->load->view('footer');
}
}
This is my directory:
miuse/application
miuse/application/views/templates/header.php
miuse/bootstrap/css
miuse/bootstrap/js
miuse/bootstrap/fonts
This is my controller code:
<?php
class page extends CI_controller{
public function view($page= 'home')
{
if(!file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
show_404();
}
$data['title']='Moodlist home';
$this->load->view('templates/header', $data);
}
}
?>
This is my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo $title; ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="header.css" type="text/css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">List</h1>
<nav class="col-sm-8 text-right">
<p>Home</p>
<p>Category</p>
<p>About us</p>
</nav>
</div>
</header>
</body>
</html>
when i run my view normally in a browser it shows proper output but when i load it with codeigniter view then it shows different output which i dont want.
I guess your header.css file is not being loaded.
Put the header.css file in miuse/bootstrap/css directory.
And change your code from,
<link rel="stylesheet" href="header.css" type="text/css">
to
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/header.css" type="text/css">
When loading css and other stuff I would recommend using base_url() in your head area
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/header.css');?>">
</head>
Make sure you have set the base url in config.php and autoload the url helper.