I decided to use CodeIgniter-Skeleton-master (author Anvoz) for build my web site.
I added new menus and sub menus on this example.
With setup new menus I haven't problem, because I copy example of Todo, make Todo1 and it works without any problem.
But, on all added submenus I entered under Todo1 displayed web page cannot proper access to css and js files and navbar is displayed without css and js.
Problem was caused what site url() grab controller name todo1 and css and js is in the wrong path !
Example:
todo1 ->path : http://localhost/ci3a/ ->this work ok instead all used css and js path is added onto this and have acess to their files
todo1/aboutus ->path : http://localhost/ci3a/todo1 ->this controller name-todo1 cause wrong path and css and js files cannot be used!
Organisation of files :
application
assets, contain css, images and js subfolders
system
In application/config/
assets.php I have:
$config['assets_url'] = 'assets/';
autoload.php I have:
$autoload['helper'] = array('url');
config.php I have:
$config['base_url'] = '';
$config['index_page'] = '';
routes.php I have:
$route['default_controller'] = "skeleton";
$route['404_override'] = '';
In application/skeleton/ i have
controllers and views folders
In controllers folder I have main controller skeleton.php
In application/views/header.php I have navbar menu structure.
Here I put the copy of todo menu->todo1 with 2 submenus, who work but dont display css and js
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Todo1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Todo1</li>
<li>About us</li>
<li>Where we are</li>
</ul>
</li>
I added similar functions as index (in todo1.php controller) for this new submenuus)
public function aboutus()
{
$this->load->library('template');
$this->template->set_layout('pagelet');
$this->template->set_title('Todo example');
$this->template->load_view('todo1/aboutus');
}
I dont know how to eliminate this controller name who make css, image and js unaccesible.
I tried to make new folder todo1 under root and copy access subfolder into it but the problem stayed.
In web browser, i cought errors:
GET http://localhost/ci3a/todo1/aboutus [HTTP/1.1 200 OK 63ms]
GET http://localhost/ci3a/todo1/assets/css/bootstrap.min.css [HTTP/1.1 404
Not Found 141ms]
and x similar errors
Can you someone help me ?
to load your css and js
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
so that your folder structurer would be like this
1. application
2. assets
- css
1. bootstrap.css
- js
1. bootstrap.js
- images
1. slider.jpg
2. logo.jpg
3. system
4. .htacess
5. index.php
in controller just load your particular view only
public function aboutus()
{
$this->template->set_title('Todo example');
$this->template->load_view('todo1/header');
$this->template->load_view('todo1/aboutus');//this should contain only about us details
$this->template->load_view('todo1/fotter');
}
so in header.php file
<!DOCTYPE html>
<html>
<head>
<title>my site ----</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo base_url(); ?>assets/css/bootstrap.css" rel="stylesheet" />
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js" type="text/javascript"></script>
</head>
in so in fotter.php file
<div class="foot">
<div class="social">
<div class="news_letter">
<p>Sign Up For Newsletter</p>
<div class="new_div">
<form action="#" class="form_news" method="post">
<input type="email" class="news_input" placeholder="E-Mail" name="email" required>
<input type="submit" class="news_button" value="Subscribe" name="news_but" >
</form>
</div>
</div>
<div class="follow">
<p>Follow Me</p>
<ul class="soc">
<li><a class="soc-facebook" href="#" target="_blank"></a></li>
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-linkedin soc-icon-last" href="#"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="copyright navbar navbar-default">
<div class="copy_in">
<div class="foot_nav navbar-text">
<ul>
<li class="list_border">Home</li>
<li class="list_border">About Us</li>
<li class="list_border">Products</li>
<li class="list_border">Corsair</li>
<li>Contact Us</li>
</ul>
</div>
<div class="foot_copy_text">
<p class="navbar-text">
© 2015 - comany name. Solution By : My office name
</p>
</div>
</div>
</div>
</div>
</body>
in between (ex:about us page)
<div class="container">
<h1>Im About us</h1>
<!-- rest of code here -->
</div>
ex: contact
<div class="container">
<h1>Im contact</h1>
<!-- rest of code here -->
</div>
Related
I'm obviously doing something wrong but this is my Day 2 with Bootstrap. I have a fluid container with two rows. On the first row I've got a title and an image. That image - even though I reduced the height and have it set to responsive, causes that second column in the first row to basically extend to almost the whole page. When I remove the image, the world makes sense. When I put the image back, the container blows up. Happens with any image so it isn't the image, it is my bad bootstrap.
`<!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.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
Tried using the thumbnail class, tried looking through Bootstrap docs, tried reordering to see if that helps. Did not help.
To fix these kinds of errors you need to learn how columns work in bootstrap:
You can read more about the columns here
The bootstrap columns are divided in this way, currently in your code you have entered only col which means they are columns that do not specify their size but fit the next columns;
Instead, in this example, the columns are expressed and you can command the display from mobile to desktop:
<!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.0">
<title>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col-6 col-md-12">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col-6 col-md-12">
<img src="https://e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-12">
<!--col-12 means that on all devices it will be 100% width magnitude-->
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<!--<div class="container-fluid menu-options">
<div class="col">
<button type = "button" class="btn mx-1 btn-primary">Home</button>
<button type = "button" class="btn mx-1 btn-primary">Men's</button>
<button type = "button" class="btn mx-1 btn-primary">Women's</button>
<button type = "button" class="btn mx-1 btn-primary">Clearance</button>
</div>
</div>
-->
</body>
</html>
(Did you see that? with the simple addition of the md class, but there are many others!)
In this case I inserted two columns in the row, so that from mobile the view would be split in two and after the tablet (md) would display
read more about bootstrap breakpoints
I got help offline. The main issue isn’t with Bootstrap, but with how percentages work. I had the h-25 class on the element. The h-25 class attempts to set the height of an element to 25% of its parent. However, percentages only work properly when the parent has a well-defined/fixed height. When the parent doesn’t have a well-defined height, the browser enters a kind of feedback loop as it tries to adjust the set the height to a percentage while also adjusting the parent height to contain it.
Solutions
The easiest solution is to remove “h-25” and set a fixed height on the
Another option is to set a fixed height on the parent so that the percentage can be calculated definitively.
I went with the first option as putting a size on the image made it responsive where it doesn't overflow the container on smaller viewports.
Im with some doubts about how to strucure the views folder on laravel. For example a blog site where we have this structure in the homepage:
Header (where we have a menu with: a link to homepage, search bar to search for posts, sign in and login buttons)
Then a section with the last 5 posts.
Then a section with the most viewed posts.
And then a footer.
How we can structure this homepage in terms of views? For example maybe we can something like this:
-views
- layouts
- header.blade.php
- footer.blade.php
- posts
- lastposts.blade.php
- mostviewed.blade.php
- single.blade.php
- layout.blade.php
Do you think its ok? Because Im testing this and it is not working. For example in the layout.blade.php I have:
<!DOCTYPE html>
<html lang="en">
<head>
....
<link href="css/app.css" rel="stylesheet">
</head>
<body>
#include('layouts.nav')
#yield('lastposts')
#yield('mostviewed')
#include(layouts.footer')
</body>
</html>
And I get the header and the footer when I access the page corretly, but the both #yields dont show nothing.
In the lastposts.blade.php to show the last 5 posts I have:
#extends('layout')
#section('lastposts')
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
<div>
<h4>Title</h4>
<p>Text</p>
</div>
</div>
#endsection
I have the same logic for the mostviewed.blade.php, but again, the #yield('mostviewed') dont show nothing.
Do you know what is not corret?
Routes file:
Route::get('/', function () {
return view('layout');
}
I have just this route because I just have the homepage for now.
You created the wrong view. The parent view is layout, it doesn't know about mostviewed and lastposts. That's why you wrote #extends('layout'), that way when you create your content view, it will know that it has to extend stuff from layout.
Route::get('/', function () {
return view('posts.mostviewed');
}
I've a master layout like this:
<head>
#yield('styles')
</head>
<body>
#include('header')
<div class="container-fluid">
#yield('content')
</div>
#yield('scripts')
</body>
Now I've following structure in page content:
#section('content')
<div class="page-content">
#include('sidebarandfooter')
</div>
#endsection
#section('copyright')
#include('copyrightv2')
#endsection
Sidebarandfooter.blade.php have following:
...[CODE for sidebar]...
#yield('copyright')
It's should be called inside <div class="container-fluid"></div> as I've different class of div container for different pages.
I'm not able to yield the copyright part. I've different copyright section for different pages. Is it wrong, how can we execute such kind?
Unfortunattely it's imposible in way you declare it because this section:
#section('copyright')
#include('copyrightv2')
#endsection
been loaded before you call this: #include('sidebarandfooter') with copyright section inside.
What you can do is to pass a key as a parameter to view to the included page content partial like this:
#section('content')
<div class="page-content">
#include('sidebarandfooter', ['copyrightsView' => 'copyrightv2'])
</div>
#endsection
and then just call inside Sidebarandfooter.blade.php in the include:
...[CODE for sidebar]...
#include($copyrightsView)
change your master layout like
<head>
#yield('styles')
</head>
<body>
#include('header')
<div class="container-fluid">
#yield('content')
</div>
#yield('copyright')
#yield('scripts')
</body>
since i am not seeing a section for copyright in your master layout
My site has a "nav" div, with links to different html files, a "sidebar" div with static information, and a "content" div, which the different html files get loaded into. I've also set my url base in the header. One of these html files is a long document, and I'd like to be able to include links to sections of this file. So I named the section headers and used the hashtag to link to them:
portfolio.html snippet:
<BODY>
<a id="top"></a>
<header>
PULSE OXIMETRY IN ZAMBIA<BR>
DENGUE DIAGNOSIS IN NICARAGUA<BR>
EYE HEALTH IN INDIA<BR>
MAS.531 COMPUTATIONAL CAMERA AND PHOTOGRAPHY<BR>
MAS.S60 HANDS ON FOUNDATIONS<BR>
<hr>
</header>
<header><a id="pulseox">PULSE OXIMETRY IN ZAMBIA</a></header>
<img src="pulseOx.PNG" width="500px"><BR>
lorem ipsum
</BODY>
And this works wonderfully when I've opened the html by itself. But when it's been loaded into the "content" div within the meta html file, it tries to take me to <myurlbase>#pulseox. How do I make the <a href="#pulseox"> link refer to html doc within the "content" div? I haven't set a base url in the portfolio.html file.
Here's my meta html doc, if that helps:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="index_test.css" />
<base href="http://myurl/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#content").load("home.html");
$(".nav-1").click(function(){
$("#content").load("home.html");
});
$(".nav-2").click(function(){
$("#content").load("about.html");
});
$(".nav-3").click(function(){
$("#content").load("portfolio.html");
});
$(".nav-4").click(function(){
$("#content").load("cv.html");
});
});
</script>
</HEAD>
<BODY>
<div id="nav">
<ul>
<li><a class="nav-1">HOME.</a></li>
<li><a class="nav-2">ABOUT.</a></li>
<li><a class="nav-3">PORTFOLIO.</a></li>
<li><a class="nav-4">CV.</a></li>
</ul>
</div>
<div id="sidebar">
myname
<BR><BR>
</div>
<div id="content"></div>
</BODY>
</HTML>
I am trying to implement photoswipe inside my jquerymobile application.
I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages.
Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.
On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts)
I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages.
So I need to know how to setup the code for photoswipe before page load.
The code below is from the itemPage level( I put the code from the photoswipe demo inside)
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script>
</head>
<body>
<div data-role="page" id="Home">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
</ul>
<p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>
<ul data-role="listview" data-inset="true">
<li>Code Computerlove</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<ul class="gallery">
<li><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></li>
<li><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 Code Computerlove</h4>
</div>
</div>
</div>
</body>
</html>
I put the script to handle the gallery inside <div data-role="page" id="Home">
since If I put the code in the head is never executed for the ajax call.
However when I executed the code above, the page doesn't show the last level(itempage never appears)
I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <div data-role="page" id="Home">
$( document ).delegate("#Home", "pagebeforecreate", function() {
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
but how I can call the photoswipe script, If I replaced the code from alert function with
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
it doesn't work? the page doesn't load
Hope you can help me!
Thanks
You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.
I'm using this, which also ensures you can call more than one photoswipe-gallery on a multipage and also allows different HTML containers for the images. Feel free to modifiy to your need:
(function (window, $, PhotoSwipe) {
// still using live for photoswipe vs. on()/off()
$('div:jqmData(role="page")').live('pageshow', function (e) {
var currentPage = $(e.target),
options = {},
// allow multiple galleries
swipesOnPage = currentPage.find('.photoswipeable');
// no photoswipe, we're done
if (swipesOnPage.length == 0) {
return false;
}
// if there are swipes init each
swipesOnPage.each(function (i) {
// make sure swipe is initialized once in case events bubble
if ($(this).data('photoswipe') != 'init') {
$(this).data('photoswipe', 'init');
// init - make sure you add a class of swipeMe to your images!!
var photoSwipeInstance = $(this).find(":not('.cloned') a.swipeMe", e.target).photoSwipe(options, currentPage.attr('id'));
}
return true;
});
// un-init when leaving the page
}).live('pagehide', function (e) {
var currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
}(window, window.jQuery, window.Code.PhotoSwipe));
Add data-ajax="false" to the page calling the sub pages.
Similarly, add to index.html to link to portfolio.html.
If you have a slide show on home page add to link on portfolio.html for index.html as well.