I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.
Related
I've below HTML code which I intend to use with index.php file but there seems a problem.
<!-- nav bar -->
<nav id="top">
<nav class="navbar navbar-xs navbar-custom">
<div class="container-fluid" >
<div class="nav pull-right">
<font face="bebas">
<ul class="list-inline">
<li> 123456789 </li>
<li class="dropdown"><i class="fa fa-user"></i> My Account <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> Wish List (0)</li>
<li><i class="fa fa-shopping-cart"></i> Shopping Cart</li>
<li><i class="fa fa-share"></i> Checkout</li>
</ul>
</div>
</div>
</nav>
</nav>
<!-- searchbar and logo -->
<header id="margin">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div id="logo">
<center> <span class="tab-space"></span> <img src="J:\lawn\home\artwork\lawn.png" height="42px" />
</div>
</div>
<div class="col-xs-5">
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</font>
</header>
index.php
<!DOCTYPE html>
<html>
<head>
<title> experiment ground </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<?php include('includes\header.html'); ?>
</body>
</html>
i want an output like this but all i am getting is this.
is it a problem with using bootstrap or something else entirely.
my main purpose is to use include() feature of PHP to make my code minimal. is there any other way I can include headers or footers templates or codes to a PHP page?
thank you!
Link jQuery before you include Bootstrap
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
1) open your Developer Tools (F12)
2) refresh page
3) check "console" tab
I think, you'll find answers in console.
Anyway, change your paths to relative (assuming file index.php at one tree level with bootstrap directory):
href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
Instead of:
href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
And do it for all files, or just connect it from CDN - it will be great ;)
Call jquery.min.js before bootstrap.min.js
The script bootstrap.min.js uses jQuery plug-in in most actions.
Also, check if the files are actually in the path described. It is highly recommended that you call the files from the main project directory.
I am creating a custom theme, but have run into some problems. For your information my files are as seen below:
themes/
aq-aquatics/
css/
img/
js/
footer.php
functions.php
header.php
index.php
page-homepage.php
page-wide.php
style.css
index.php
This is my header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="Matthew Smart">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="wrap">
<header>
<div class="header-top text-right">
<div class="container">
<span style="margin-right:40px;">Tel: 01922 418050</span><span>Email: sales#hollybush-garden.com</span>
</div>
</div>
<div class="container">
<div class="header-content" style="min-height:86px;">
<div class="row">
<div class="col-sm-1" style="position:absolute;top:11px;z-index:1000;">
<img src="<?= get_template_directory_uri(); ?>/img/logo.png" width="108" height="100" alt="a&d logo"/>
</div>
<div class="col-sm-offset-1 col-sm-10 text-right" style="margin-left:132px;">
<nav class="navbar">
<div class="container">
<div>
<ul class="nav navbar-nav" style="width:inherit; border-bottom:none !important;margin-top:31px;">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">At A & D
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Aquatics
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tropical</li>
<li>Pond</li>
<li>Marine</li>
<li>Cold water</li>
<li>Aquatics Sundries</li>
</ul>
</li>
<li>Valencia Wharf Coffee Shop</li>
<li>Opening Times</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="purple-line" style="margin-bottom:25px;"></div>
</header>
This is my page.wide.php
<?php
/*
Template Name: Wide Page
*/
get_header();
?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
<?php get_footer(); ?>
And this is my footer.php
<footer>
<div class="container">
<div class="col-sm-6">
A&D AQUATIC & GARDEN CENTRE | WEBSITE DESIGN BY <span>MATTHEW SMART</span>
</div>
<div class="col-sm-6 text-right">
<ul>
<li>TERMS AND CONDITIONS</li>
<li>PRIVACY POLICY</li>
<li>COOKES</li>
</ul>
</div>
</div>
</footer>
</div><!-- End WRAP -->
<?php wp_footer(); ?>
</body>
</html>
Now the page i am trying to test is using the wide template. I have put some dummy text into the editor and clicked publish.
Now when i try to visit the page the first thing i can see is part of the header. The browser then takes another 5 seconds and loads the navigation which is in my header.php file.
It seems to just ignore everything from the page template and afterwards. So the_content() pulls nothing through and the footer doesn't get displayed.
I have been comparing these files with other themes i have created and cannot seem to find a cause.
Does anyone know why this may be happening?
Thanks
Your loop is missing the_post().
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
https://codex.wordpress.org/Function_Reference/the_post
This is necessary to let WordPress know you are inside the loop, and retrieve the requested post's data. The footer isn't loading because the page is erroring out when it calls the_content() and cannot deal with this function outside the loop.
According to WordPress documentation the_content "must be within The_Loop."
Just trying to refresh my memory of PHP and have come across this problem. Im trying to pass a value from one page to another. I have been trying session variables and have called session_start(). Even when setting the variable on the page = 'string' it prints nothing. What am I doing wrong here? Im trying to get the value of the # of stars and the textarea from the contactus page to the review.php page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="Icons/icon-pack-custom.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
#banner img {
width:100%;
}
.ui-collapsible {
width:130px;
}
</style>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="home" data-theme="b">
<div data-role="header" >
<h1>Forever Fitness</h1>
<nav data-role="navbar" data-iconpos="left">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content" >
</div><!-- /content -->
<div data-role="controlgroup">
<p>
<?php
session_start();
echo $_SESSION['ta'] = 'string';
?>
</p>
Home
Back
</div>
</div><!-- /page one -->
START OF THE NEXT PAGE
<?php
session_start();
$_SESSION['ta'] = 'string';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Citizenship Canada</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="Icons/icon-pack-custom.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
#banner img {
width:100%;
}
.ui-collapsible {
}
</style>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="home" data-theme="b">
<div data-role="header" >
<h1>Forever Fitness</h1>
<nav data-role="navbar" data-iconpos="left">
<ul>
<li><a href="index.html" data-icon="home" >Home</a></li>
<li><a href="provinces.html" data-icon="shop" >Products</a></li>
<li>Contact Us</li>
</ul>
</nav>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="phone" data-expanded-icon="phone">
<h4>Contact By Phone</h4>
<ul data-role="listview" data-inset="true">
<li>1-800-991-1929 Toll Free</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed-icon="phone" data-expanded-icon="phone">
<h4>Contact By Email</h4>
<ul data-role="listview" data-inset="true">
<li>Send an Email</li>
</ul>
</div>
<ul data-role="listview" data-inset="true">
<li>Write a Review</li>
</ul>
</div>
</div>
<div data-role="page" id="r" data-theme="b">
<div data-role="content" >
<h2 style="text-align:center;">Write a Review</h2>
<form action="review.php" method="get">
<label for="stars">Stars</label>
<input type="range" name="stars" id="stars" value="5" min="0" max="5" data-highlight="true" />
<div data-role="fieldcontain">
<label for="textarea">Your Review</label>
<textarea name="textarea" id="textarea"></textarea></br>
<input type="submit"value="submit" data-theme="b">
</div>
</form>
</div><!-- /content -->
<div data-role="controlgroup">
Home
Back
</div>
</div><!-- /page one -->
</html>
First page - define session variable
<?php
session_start();
$_SESSION['ta'] = 'string';
?>
On second page - display the session variable
<?php
session_start();
echo $_SESSION['ta'];
?>
I have a problem with tab navigation. I am not able to display the second and third tab.
Here's the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
I noticed the error is with the ?php include('xxx.php')?>. How can i fix this problem?
Thanks.
Hello to put some php code in tab panel you must insert it between Iframe
like :
<iframesrc="xxx.php"></iframe>
Ive just corrected your code, jQuery has to be loaded BEFORE bootstrap!
Greetings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
I'm designing this website and I need it to be .php to communicate with a database and start some countdown clocks (which aren't up yet). The page was originally .html and everything was perfect, but since I changed it to .php for some reason the footer keeps repeating itself. The code will be fine on my editor, I'll load the page, reload the file on the editor and the code somehow appears there all on its own!
Right now there is no PHP code whatsoever, I merely changed the file's extension. If you visit the same URL but the .html version, you'll see everything is fine. What could be causing this?
Thanks in advance for your help!
EDIT:
Entire HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Aqua</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarOverlaid=1&viewport_is1000px=1060"></script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!-- Photo gallery stuff -->
<link rel="stylesheet" href="css/slideshow/slideshow.css">
<style>
.slideshow { margin-left: 24.45%; }
</style>
<script src="js/mootools-1.3.2-core.js"></script>
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { 'pic07.jpg': {/*No captions, thumbnails or anything*/}, 'pic06.jpg': {}, 'pic10.jpg': {}, 'pic02.jpg': {}};
new Slideshow('slideshow', data, { controller: false, thumbnails: false, loader: false, height: 400, width: 600, hu: 'images/', transition: 'back:in:out'});
});
</script>
<!--End-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<section id="header">
<!-- Logo -->
<img class="logo" src="images/aqua.jpg">
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Banner -->
<section id="banner">
<div id="slideshow" class="slideshow"></div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Intro -->
<section id="intro">
<div class="actions">
Get Started
Learn More
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer Wrapper -->
<div id="footer-wrapper">
<!-- Footer -->
<section id="footer" class="5grid-layout">
<div class="row">
<div class="4u">
<section>
<header>
<h2>Links</h2>
</header>
<ul class="divided">
<li>Events/Tickets</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Connect with us</h2>
</header>
<ul class="social">
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Aqua, LLC<br />
39 Old Ridgebury Road<br />
Danbury, CT 06810
</p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>© Aqua, LLC</li>
<li>Images: Dreametry Doodle + Iconify.it</li>
<li>Design: HTML5 Up! + Daytaro</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
It's repeated really awkwardly after that. It might the FTP server, I use Koding (don't ask) for this and it's connected to my server via FTP. I tried using FileZilla too (didn't delete files before re-uploading) but that didn't do anything.
Make sure you delete the file before uploading it. Some FTP clients will write over with some extra code...