Okay I have this style sheet switcher which will only works if I leave out the media="print" from the style sheet link.
I was wondering how can I fix this problem without leaving out the media="print" attribute.
Here is the PHP code.
<!-- Print Script -->
<?php if (isset($_GET['css']) && $_GET['css'] == 'print') { ?>
<meta name="robots" content="noindex" />
<link rel="stylesheet" type="text/css" href="http://localhost/styles/print.css" media="print" />
<script type="text/javascript">
//<![CDATA[
if(window.print())
onload = window.print();
else
onload = window.print;
//]]>
</script>
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="http://localhost/styles/style.css" media="screen" />
<?php } ?>
<!-- End Print Script -->
And here is the link you click to change the style sheet.
Print This Page
You don't need PHP code for determining whether to output the CSS file for print. By default the browser won't render the "print" stylesheet and should ignore the "screen" stylesheet when printing.
There may be some rendering issues: maybe the browser hasn't had enough time to render the page and feed it correctly to the printer.
A simplified solution would be:
<head>
<link rel="stylesheet" type="text/css" href="http://localhost/styles/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://localhost/styles/style.css" media="screen" />
<script type="text/javascript">
function print_it() {
if(window.print())
onload = window.print();
else
onload = window.print;
}
</script>
</head>
<body>
Print This Page
</body>
Related
Please help, ajax is not working..
I tried the tutorial from here,
Ajax box PHP
it works well, but when the code is installed in a different page, I just don't want to work.
here is codes
<!DOCTYPE html>
<html lang="en">
<head>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
<script src="typeahead.min.js"></script>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/font- awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/simple-line-icons.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/fullcalendar.min.css"/>
<link rel="stylesheet" href="asset/datepicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="asset/css/plugins/datatables.bootstrap.min.css"/>
<link href="asset/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="asset/select2/select2.min.css">
<!-- end: Css -->
<script type="text/javascript" src="asset/js/jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="shortcut icon" href="asset/img/logomi.png">
</head>
<body>
<div id="content">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
</div>
please help... thanks..
Please try by including the js and other bootstrap files first. And then try to execute the jquery and ajax code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
Now it will works. Also make sure that all the js related files are included properly. While running the page in browser, type f12 and check the ajax call is generated or not.Hope it works.
I want to use bootstrapDialog alert (https://nakupanda.github.io/bootstrap3-dialog/) instead of default alertbox of browser in my controller but its not working.
I included these scripts I got from the github dist folder in the bottom of view
<link rel="stylesheet" href="assets/css/bootstrap-dialog.min.css" />
<script src="assets/js/bootstrap-dialog.min.js"></script>
Controller
function student(){
if ($student_status == 'paid'){
echo '<script type="text/javascript">';
echo 'BootstrapDialog.alert('Your Registration was successful')';
echo '</script>';
}
else {
// redirect url
}
}
I also tried to echo the css and js files in the controller but failed. If I echo the default alertbox, it works, please what could I be doing wrong?
first - you have some errors:
you need to escape your single quotes of the alert like:
echo 'BootstrapDialog.alert(\'Your Registration was successful\')';
or you could use mix of single and double quotes like:
echo 'BootstrapDialog.alert("Your Registration was successful")';
you also might need to load your script and css with a leading slash like:
<link rel="stylesheet" href="/assets/css/bootstrap-dialog.min.css" />
<script src="/assets/js/bootstrap-dialog.min.js"></script>
you are loading your stylesheet as script, <script src="assets/css/bootstrap-dialog.min.css"></script>; is incorrect, use <link rel="stylesheet" href="your.css">
second - its not a good idea to mix javascript and php the way you do it, you cannot call a jquery function from php, you can only generate html, which then executes at runtime. This would work:
if ($student_status == 'paid'){
$str=' <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<script type="text/javascript">
setTimeout(function() {
BootstrapDialog.alert(\'Your Registration was successful\')
},10);
</script>';
echo $str;
}
note the setTimout() function, it is needed to give a little time to make sure all your files are loaded.
third - The correct way is to use ajax instead: see docs:
jquery ajax calls your php function student.
function student returns true or false.
In the ajax success callback you add your bootstrapDialog.alert
Bootstrap dialog is built on Bootstrap, so you must include bootstrap css and bootstrap js, followed by the bootstrapDialog css and js
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
http://jsfiddle.net/mreis1/YJdB7/1/
For Example
View:
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<title>Bootstrap Dialog Test</title>
</head>
<body>
<!-- IF SUCCESSFUL -->
<?php $alert= ''; ?>
<?php if ($alert == 'success'): ?>
<script type = "text/javascript">
BootstrapDialog.alert('Your Registration was Successful');
</script>
<?php endif; ?>
<!-- IF FAILED -->
<?php if($alert == 'failed'): ?>
<script type = "text/javascript">
BootstrapDialog.alert({
title: 'An Error Occured',
message: 'Your Registration failed',
type: BootstrapDialog.TYPE_DANGER,
buttonLabel: 'Close'
});
</script>
<?php endif; ?>
</body>
</html>
Controller:
function student(){
if ($student_status == 'paid'){
$data['alert'] = 'success';
}
else {
$data['alert'] = 'failed';
}
$this->load->view(view_page, $data);
}
Output:
echo "BootstrapDialog.alert('Your Registration was successful')"
You have to either escape quotes or use double quotes.
Try This Code
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap-dialog.min.css" />
<script src="<?php echo base_url();?>assets/js/bootstrap-dialog.min.js"></script>
I am having trouble with applying CSS style in my view.
I have set base_url in config.php also..
config['base_url']='http://localhost/test_project/'
My code is
<html>
<head>
<title>Untitled Document</title>
<link type="text/css" href="<?php echo base_url()?> css/mycss.css" >
</link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
My CSS code is
p
{
color:#0066CC;
}
But it shows only simple text..
How to apply CSS in codeigniter....
Put the path inside the function. Include rel="stylesheet" in the link tag. You don't need the closing </link> either.
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/mycss.css'); ?>">
View the source of the page, you should see the CSS included like this
<link rel="stylesheet" type="text/css" href="http://localhost/test_project/css/mycss.css">
You need put in html tag link the attribute rel="stylesheet"
<link type="text/css" href="<?php echo base_url('css/mycss.css') ?>" rel="stylesheet" >
Check with your firebug if your css files is load fine.
You could use html tag called "base" for example:
<base href="http://url" />
In your code:
<html>
<head>
<title>Untitled Document</title>
<base href="<?php echo base_url()?>" />
<link type="text/css" href="css/mycss.css" rel="stylesheet"></link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
I use the default function of codeigniter. For example:
echo link_tag('assets/css/bootstrap.css');
In Codeigniter I have a view theme-fonts.php that I am loading in another view page.php.
page.php
<?php $this->load->view('theme-fonts'); ?>
<script type="text/javascript">
try{
var fontsArray = <?php json_encode($font_list); ?>;
console.log(fontsArray);
}catch(err){
console.log(err.message);
}
</script>
Following is the definition inside my theme_fonts.php file:
<link href="http://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Michroma" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" />
<?php
$font_list = array();
array_push($font_list,"Aclonica");
array_push($font_list,"Michroma");
array_push($font_list,"Paytone+One");
array_push($font_list,"Denk+One");
array_push($font_list,"Wendy+One");
array_push($font_list,"Fjalla+One");
?>
So my question is how to access php array from view theme-fonts.php in main view page.php?
Regards: Jehanzeb
in MVC frameworks singleton class is available from everywhere, so you need store you variable to some property in your case the best place is config object,
$this->config->set_item('item_name', 'item_value');
read about CI config
You need to pass the array to your view:
<?php $this->load->view('theme-fonts', array('font_list' => $font_list); ?>
I suggest rather declaring the array in your controller and passing it to the main view, that way the array will be available in all the views you load.
Well after I solved the issue, I feel that it was a stupid question. As I am loading theme-fonts view inside page view and not in parallel. I can simply write my script code in theme-fonts view. This will in turn write it to my page view.
page.php
<?php $this->load->view('theme-fonts'); ?>
theme-fonts.php
<link href="http://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Michroma" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" />
<?php
$font_list = array();
array_push($font_list,"Aclonica");
array_push($font_list,"Michroma");
array_push($font_list,"Paytone+One");
array_push($font_list,"Denk+One");
array_push($font_list,"Wendy+One");
array_push($font_list,"Fjalla+One");
?>
<script type="text/javascript">
try{
var fontsArray = <?php print(json_encode($font_list)); ?>;
console.log(fontsArray);
}catch(err){
console.log(err.message);
}
</script>
My idea is to switch multiple links to CSS files, if special URL was detected. But I have a trouble: my code includes only css in the first if..else statement. And it doesn't depend on the URL.
Here is my code.
http://pastebin.com/Jm3QFDmH
ported from pastebin
<?php
// get first folder in URL
$f_folder = substr(substr($_SERVER["REQUEST_URI"],1), 0, strpos(substr($_SERVER["REQUEST_URI"],1), "/"));
//get full directory structure from URL for current page
$full_path = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
//css for account
if ($f_folder='account') {
?>
<link rel="stylesheet" href="/mainstyle/common.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="/mainstyle/account.css" type="text/css" charset="utf-8" />
<?php
} elseif ($f_folder='signin'||$f_folder='signup'||$full_path='/account/resetPassword'||$full_path='/account/logout') {
?>
<link rel="stylesheet" href="/mainstyle/login-signup.css" type="text/css" charset="utf-8" />
<?php
} else {
?>
<link rel="stylesheet" href="/mainstyle/common.css" type="text/css" charset="utf-8" />
<?php
}
?>
Where is mistake?
if and elseif, should have == comparison operator , not = assignment
Line 7 should be
if ($f_folder=='account') {