I am trying to add a blog to my website and I decided I would just create a google blog and use a full screen Iframe to display it on my page. It works fine but then I decided to add the websites header. So now I have the header followed by the Iframe but I would like to be able to treat the header & Iframe as one single page. Right now the header is always visible and I can scroll through the Iframe with the header always showing above it which is not the most visibly pleasant experience. Here is the code:
<?php
include("header.php");
?>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 80%;
left: 0px;
position: absolute;
top: 180px;
width: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://xxxx.blogspot.com/" frameborder="0"></iframe>
</body>
</html>
Here is the header code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="google-site-verification"=xxx />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26023641-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx – <?php if ($page != 'Home') { echo $page; } else { echo 'xxxxs'; } ?></title>
<meta name="description" content="xxx." />
<meta name="keywords" content="xxx<?php echo $tags; ?>" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/lightview/js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/external.js"></script>
<script type="text/javascript" src="js/lightview/js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/js/lightview/lightview.js"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box"></script>
<link rel="stylesheet" type="text/css" href="css/hub.css" media="screen" />
<link rel="stylesheet" type="text/css" href="js/lightview/css/lightview/lightview.css"/>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7styles.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<link rel="icon" href="favicon.ico" type="image/ico" />
</head>
<body>
<div id="header">
<a id="logo" href="/"></a>
<ul id="nav">
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
<li>xx</li>
</ul>
</div>
<div id="content">
The problem is that your scroll bar is within the iframe and disabled on the main page body, so scrolling is only scrolling within the iframe and not your whole page. Remove overflow: hidden from your page body and make it so your iframe stretches its height to fit its contents. That way, the scrollbar you see on the page would scroll your entire page instead of just the iframe.
Related
Php code
i searched on the web and i didnt see anything about this it looks like no error css status is 200
css code is at the bottom.
.sagalt {
margin-top: 500px
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Think you are trying to apply CSS to the link. Anchor tag being an inline element, margin top/bottom property alone wont have an effect in it as inline elements flow with content on the page. Use display: inline-block or display: flex or float: left as per your requirement.
.sagalt {
color: red;
margin-top: 100px;
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<title>quantum</title>
<link rel="shortcut icon" href="logo.png" type="image/png">
<link rel="stylesheet" href="qntm.css?v=<?php echo time(); ?>">
<!--link//-->
</head>
<body>
<div>
Sign Out
</div>
</body>
</html>
Ok, I've searched google and all over this site and am not finding the solution.
I have a php file with a button. I have all the included bootstrap/jquery-ui css files at the top and the corresponding .js files at the bottom. I also have a custom .js file that has ONE function which defines a custom dialog box. When I try to call it from the php file I get:
ReferenceError: $myDialog is not defined.
The included js file is called dialog.js and IS in the js folder.
Here are the php and js files:
$(function() {
/**
* $myDialog Custom Dialog Function
*
* Example Usage:
* var theTitle = "CUSTOM TITLE GOES HERE!";
* var msg = 'Your message goes here...';
* $myDialog.dialog("option", "title", theTitle);
* $myDialog.html(msg + '</div>');
* $myDialog.dialog('open');
*
* Filename: dialog.js
**/
var $myDialog = $('<div id="dialog-message">')
.dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
width: 400,
dialogClass: 'dialog-message ui-dialog-osx',
title: "Important Message!",
autoOpen: false,
show: 'fade',
hide: 'fade',
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}
],
});
});
<?php
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<title>Rental Application</title>
<!-- CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/html5reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" media="all">
<link rel="stylesheet" type="text/css" href="css/drwebguy.css" media="all" />
</head>
<body>
<div id="home" class="container-fluid main_content">
<div class="row">
<div class="col-md-4"><a id="btnMyDialog" class="btn btn-primary" role="button">myDialog</a></div>
<div class="col-md-4">
<p>This is just some text...</p>
</div>
<div class="col-md-4"></div>
</div><!-- row -->
</div><!-- class="container-fluid" -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.mask.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/js.cookie.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<!--<script type="text/javascript" src="js/drwebguy.js">--></script>
<script type="text/javascript">
$(function() {
$('#btnMyDialog').on('click', function(){
var theTitle = "CUSTOM TITLE GOES HERE!";
var msg = 'Your message goes here...';
$myDialog.dialog("option", "title", theTitle);
$myDialog.html(msg + '</div>');
$myDialog.dialog('open');
});
});
</script>
</body>
</html>
And, obviously, if I put that var function at the bottom of my file instead of including an external js file it works fine...but, also obviously, that defeats the purpose of oop :/
use all script like this :
(function($) {
$(document).ready(function(){
// .. script what you want
});
})(jQuery);
I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6
I am very new in codeigniter and I am facing lots of problems while I develop my website with it. I am facing basic navigation problem. First of all I've to say where my files are situated. My css,js and image file are situated at the root folder, that is where the application folder is situated. And my other files which contains html, php, js code are situated in view folder . My controller is like that:
<?php
class Saffron extends CI_Controller
{
function index()
{
$this->load->view('header');
$this->load->view('index');
$this->load->view('footer');
}
function book_table()
{
$this->load->view('book_table');
}
}
?>
I am trying to navigate to my 'book_table.php' page from my home page. Now see my nevigation.php page from where I am navigating my webpages (just showing the basic header part and anchor tags):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/book.css">
<!--<link href='http://fonts.googleapis.com/css?
family=Great+Vibes' rel='stylesheet' type='text/css'>-->
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script src="js/vpb_script.js"></script>
<script src="js/pop.js"></script>
<!--start popup window ref-->
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery_002.js"></script>
<script>
$(document).ready(function(){
$(".image_show").colorbox({rel:'image_show', transition:"fade"});
});
</script>
<!--end popup window ref-->
<script>
$(document).ready(function(){
$('.slider')._TMS({
show:0,
pauseOnHover:true,
prevBu:false,
nextBu:false,
playBu:false,
duration:700,
preset:'fade',
pagination:true,
pagNums:false,
slideshow:8000,
numStatus:false,
banners:false,
waitBannerAnimation:false,
progressBar:false
})
});
</script>
<style type='text/css'>
/*This will work for chrome */
#vpb_general_button{
padding:5px 2px 4px 2px;
}
/*This will work for firefox*/
#-moz-document url-prefix() {
#vpb_general_button{
padding:5px 2px 6px 2px;
}
}
</style>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/
internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/
banners/warning_bar_0000_us.jpg" border="0" height="42"
width="820" alt="You are using an outdated browser.
For a faster, safer browsing
experience,
upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<div class="nav_b">
<nav>
<ul class="menu">
<li ><a href="index.html">
Online Order
</a>
</li>
<li>
<a href="<?php echo base_url(); ?>
index.php/saffron/book_table">Book Table
</a>
</li>
<li><a href="#">
Gallery
</a>
</li>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Awards
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
</ul>
<div class="clear"></div>
</nav>
</div>
</body>
Now the problem is that I can navigate my Book table page but without the design. It's loading just like a basic html page, I can't understand why it's happening, because it doesn't find the css, js and images, isn't it? But my home page finds all and is fine, then why not the page(Book table) i am nevigating not finding the css,js and images?
In this scenario make use of base_url();. In application/config/config.php specify $config['base_url'] = 'http://www.yoursite.com';
Then in view change the link href and script src
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo(base_url());?>css/reset.css">
<script src="<?php echo(base_url());?>js/jquery-1.7.min.js"></script>
Here is an HTML page where I want to load an element with a php script using ajax.
<?php require_once('connect.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php require("pagetitle.php"); ?>
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all"
/>
<!-- Portal JavaScript -->
<script type="text/javascript" src="portal.js"></script>
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function LoadCalendar() {
http.abort();
http.open("GET", "calendar/index.php?cP=2", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('litcal').src = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body onload="appendTitle('Calendar');">
<div id="content-body"><a name="top"></a>
<h1>
<iframe id="litcal" onload="LoadCalendar();" style="padding: 0px 0px 0px 0px; border: 1px solid #404040;" width="690px"
height="691px"></iframe>
</h1>
</div> <!-- End CONTENT-BODY div -->
</body>
</html>
The loaded element is empty. It only has <html></html>. What error in the ajax code caused this?
maybe you need to make sure the status is 200 before assigning the src attribute to the response text
The problem was that the PHP was not returning a URL. So ajax could not assign anything to the src. See this question for the code that worked.
https://stackoverflow.com/questions/6612918/loading-an-iframe-with-ajax/6618656#6618656