This is a test page. There is a button that on click should load an entire external page extern2.php into the content div. Extern2.php works in both Safari and Firefox, however index.php only works in Safari.
The main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript">
function foo() {
$('#content').load('extern2.php', function() {
alert('Load was performed.');
});
}
</script>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<input type="submit" name="formSubmit" value="Submit" />
</form>
<?php
if(isset($_POST['formSubmit']))
{
?>
<script type="text/javascript">
$(document).ready(function() {
$('#content').load('extern2.php');
});
</script>
<?
}
?>
<div id="content">Initial content in test.html</div>
</body>
</html>
The external page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- This includes the ImageFlow CSS and JavaScript -->
<link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
<script type="text/javascript" src="imageflow.packed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<?php
// Connecting to database
$con = mysql_connect('CONNECT INFO HERE');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("CONNECT INFO HERE", $con);
$userID=2;
$getPage="SELECT * FROM pages,thumbnails WHERE thumbnails.thumbnailID=pages.thumbnailID AND pages.userID=".$userID." AND pages.projectID='8' LIMIT 3";
$pageResult = mysql_query($getPage) or die(" ". mysql_error());
?>
<!-- This is all the XHTML ImageFlow needs -->
<div id="myImageFlow" class="imageflow">
<? while($line = mysql_fetch_array($pageResult)) {
$thumb = $line['fileName'];
$title = $line['title'];
$link = $line['url'];
echo "<img src='../../thumbnails/small/".$thumb."' longdesc='".$link."' alt='".$title."' />";
}
?>
</div>
<?
mysql_close($con);
?>
</body>
</html>
What does the error console (CTRL-SHIFT-J) say? Also does Firebug help at all?
Related
I'm testing ckeditor.
I'm trying to create a ckeditor which fits the "div" where it's placed.
This is what I've tried, but only works on startup and not with resize window.
Is there an easy way to fit ckeditor the div where it's places?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/menu.css">
<script src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script>
function iniciar()
{
e= CKEDITOR.replace( 'editor1',
{ uiColor: '#CCEAEE' ,
on: { 'instanceReady' : function( evt )
{redimensionar();}
}
} );
}
var r;
function redimensionar(p1)
{
if (p1==1)
{ console.log("e: " + $("#").width() +','+$("#c1").height());
console.log("c1: " + $("#c1").width() +','+$("#c1").height());
e.resize($("#c1").width(),$("#c1").height());
}
else
{ if (r)
clearTimeout(r);
r=setTimeout(redimensionar, 500, 1);
}
}
</script>
</head>
<body class="easyui-layout" onload="iniciar()" onresize="redimensionar()">
<!-- Norte -->
<div data-options="region:'north'" style="height:10%">
My title
</div>
<!-- Centro -->
<div id="c1" data-options="region:'center'" style="height:80%; background:skyblue;">
<textarea id="editor1" >
<p>This is some <strong>sample text</strong>. You are using CKEditor.</p>
<p><iframe align="middle" frameborder="1" height="500" id="portada" longdesc="La gran portada" name="Portada" scrolling="yes" src="portada.html" style="background: green" title="La portada" width="500">Contenido iframe.</iframe></p>
<p> </p>
</textarea>
</div>
<!-- Pie -->
<div data-options="region:'south'" style="height:30px">
Foot
</div>
</body>
</html>
I am failing to see why I cannot get waypoints to work. Code is below, what am I missing (it must be something small and simple)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
<script>
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
</script>
</head>
<body>
<div style="height: 1500px">Scroll down</div>
<div id="waypoint">Waypoint</div>
</body>
</html>
It doesn't look like you're including the jquery library, which is required.
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
i am very new in codeigniter.I have a static web page.i just want to convert it into dynamic web page.First of all i pasted all the files in the view folder of the MVC of the codeigniter.Here i have css, javascript and images folder and my php files.
I have created a controller like this..
<?php
class Saffron extends CI_Controller
{
function index()
{
$this->load->view('home');
}
}
?>
and my home.php page is just like this..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
media="screen" href="<?= base_url() ?>application/views/css/reset.css">
<link rel="stylesheet" type="text/css"
media="screen" href="<?= base_url() ?>application/views/css/style.css">
<link rel="stylesheet" type="text/css"
media="screen" href="<?= base_url() ?>application/views/css/slider.css">
<script src="<? echo base_url(); ?>application/views/js/jquery-1.7.min.js"></script>
<script src="<? echo base_url(); ?>application/views/js/jquery.easing.1.3.js"></script>
<script src="<? echo base_url(); ?>application/views/js/tms-0.4.1.js"></script>
<script src="<? echo base_url(); ?>application/views/js/vpb_script.js"></script>
<script src="<? echo base_url(); ?>application/views/js/pop.js"></script>
<!--start popup window ref-->
<link href="application/views/css/colorbox.css"
rel="stylesheet" type="text/css" media="all" />
<script src="<? echo base_url(); ?>application/views/js/jquery_002.js"></script>
<script>
$(document).ready(function(){
$(".image_show").colorbox({rel:'image_show', transition:"fade"});
});
</script>
<!--end popup window ref-->
<!--[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="bg-top">-->
<div class="bgr">
<!--==============================Wrapper=================================-->
<div class="wrapper">
<!-----------------------Header --------------------------->
<header>
<div class="head">
<h1>
<a href="index.html">
<img src="<?php echo base_url(); ?>application/views/images/logo.jpg" alt=""></a>
sign up
<a href="javascript:void(0);"
class="classname1" onClick="vpb_show_login_box();">login</a>
</h1>
</div>
<?php
include_once('navigation.php');
include_once('slider.php');
include_once('offers.php');
include_once('invite.php');
include_once('testimonial.php');
include_once('special_item.php');
include_once('footer.php');
include_once('popup.php');
?>
Now what the mistake there...or anyelse that i can't recognizing??...please hlp me.
Thanks in Advance...
You forgot to put echo on several places.
I can show you my solution for putting files in header. First I made a folder in the root and named it public, and in that folder I created folders for needed documents (css, img, js...). In constants.php I made this:
$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
define('ABSOLUTE_PATH', str_replace('system/','', BASEPATH));
define('BASE', $root);
define('CSS', BASE . 'public/css/');
define('JS', BASE . 'public/js/');
define('IMG', BASE . 'public/img/');
So in the header you can do this:
<link rel="stylesheet" href="<?php echo CSS ?>reset.css">
This is a easy way to maintain and update your files.
Sasha gave a good solution, but to answer your question: all your CSS, images, JS should not reside inside the application folder, but in a folder on the same level as application. assetsis a common name for such a folder.
Try this:
in your config file, define the base_url() ex, base_url() = 'yoursite';
in root directory create a folder and name it resource and put all your css, js, img folders inside
in your html/php view file (ex. application/views/test.php) along with html code put these php codes, example
NOTE: don't worry about echoing the base_url in every js or css file that you link because base has been already defined.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<base href="<?php echo base_url(); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="resource/css/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="resource/css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="resource/css/slider.css">
<script src="resource/js/jquery-1.7.min.js"></script>
<script src="resource/js/jquery.easing.1.3.js"></script>
<script src="resource/js/tms-0.4.1.js"></script>
<script src="resource/js/vpb_script.js"></script>
<script src="resource/js/pop.js"></script>
This is my exibitview.html page
<!DOCTYPE html>
<html lang="en" manifest="health.cache">
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Video Campaign View</title>
<link rel="stylesheet" href="Styles/jquery-mobile.css" />
<link rel="stylesheet" href="Styles/base.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="Styles/portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="Styles/landscape.css" />
<script src="Scripts/jquery-1.7.2.min.js"></script>
<script src="Scripts/jquery-mobile-old.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/ajaxExhibitXmlParser.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/easypaginate.js"></script>
</head>
<body>
<header>
<h2>My Campaign Home Page</h2>
</header>
<div id="section_main">
<article class="main-content">
<ul class="exihibit">
</ul>
</article>
</div>
</body>
</html>
This is my ajaxExhibitXmlParser.js
$(document).ready(function(){
$.ajax({
type: "GET",
//url: "5_section_nature-1.xml",
url: "xmls/exhibit.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('exhibits').each(function(){
$(this).find('exihibit').each(function(){
var vmediaurl = $(this).find('redirecturl').text();
var mediaurl = vmediaurl ;
var medianame = $(this).find('name').text();
var mediadesc = $(this).find('description').text();
var vmediathumbnail = $(this).find('icon').text();
var mediathumbnail ="'" + vmediathumbnail + "'";
localStorage.setItem(vmediathumbnail, vmediathumbnail);
localStorage.setItem(mediathumbnail, mediathumbnail);
localStorage.setItem(mediaurl, mediaurl);
localStorage.setItem(medianame, medianame);
localStorage.setItem(mediadesc, mediadesc);
$('<li></li>').html('<img width="300" height="250" src='+localStorage.getItem(mediathumbnail)+' alt="poster image"><span class="exihibit"><p>'+localStorage.getItem(medianame)+'</p><p>'+localStorage.getItem(mediadesc)+'</p></span>').appendTo('ul.exihibit');
});
});
jQuery(function($){
$('ul').easyPaginate({
step:2
});
});
}
});
When i click on the image of exihibitview.html page i am getting error as undefined if I refresh page by using F5 i am able to get the image. Can any one plaese help me solving the issue.
This line doesn't look right to me:
$('<li></li>').html('<img width="300" height="250" src='+localStorage.getItem(mediathumbnail)+' alt="poster image"><span class="exihibit"><p>'+localStorage.getItem(medianame)+'</p><p>'+localStorage.getItem(mediadesc)+'</p></span>').appendTo('ul.exihibit');
In jQuery, I'm fairly certain you can't select list item with $('<li></li>'). You have to use something like $('li').
Furthermore, it's not such a great idea semantically to have a paragraph inside a span.
It looks as though you're trying to do something like this:
$('ul.exhibit').append('<li><img src="..." alt="..." /></li>');
use rel="external" in tag
$('ul.exhibit').append('<li><a rel="external" href="..."><img src="..." alt="..." /></a></li>');
I managed to use the noconflict solutions. Everything is working great, except in IE8... I discovered that 90% change it is the javascript on the php itself. I changed the $( to jQuery(. This change made everything work in all other browsers... anyone have a solutions for this? Also tried changing place of the scripts, but doesn't do anything. Using Lightview and Rotator.
url => http://www.tdesigns.be/projects/maes-boons/designmeubelen.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="all" />
<meta name="revisit-after" content="1 week" />
<meta name="language" content="nl" />
<meta name="keywords" content=""/>
<meta name="description" content="maes-boons nv - meesters in maatwerk"/>
<title>maes-boons</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/960.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/wt-rotator.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-rotator.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery(".container").wtRotator({
width:960,
height:400,
button_width:24,
button_height:24,
button_margin:5,
auto_start:true,
delay:5000,
play_once:false,
transition:"fade",
transition_speed:800,
auto_center:true,
easing:"",
cpanel_position:"inside",
cpanel_align:"BR",
timer_align:"top",
display_thumbs:true,
display_dbuttons:true,
display_playbutton:true,
display_numbers:true,
display_timer:true,
mouseover_pause:false,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
tooltip_type:"image",
lock_tooltip:true,
shuffle:false,
block_size:75,
vert_size:55,
horz_size:50,
block_delay:25,
vstripe_delay:75,
hstripe_delay:180
});
}
);
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
});
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>
I think you need to put all jQuery in a .ready() function if you use .noConflict(). I don't get an error in IE8 or Chrome12 with the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=utf-8 />
<title>maes-boons</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/jquery.wt-rotator.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".container").wtRotator({
width:960,
height:400,
button_width:24,
button_height:24,
button_margin:5,
auto_start:true,
delay:5000,
play_once:false,
transition:"fade",
transition_speed:800,
auto_center:true,
easing:"",
cpanel_position:"inside",
cpanel_align:"BR",
timer_align:"top",
display_thumbs:true,
display_dbuttons:true,
display_playbutton:true,
display_numbers:true,
display_timer:true,
mouseover_pause:false,
cpanel_mouseover:false,
text_mouseover:false,
text_effect:"fade",
text_sync:true,
tooltip_type:"image",
lock_tooltip:true,
shuffle:false,
block_size:75,
vert_size:55,
horz_size:50,
block_delay:25,
vstripe_delay:75,
hstripe_delay:180
});
});
</script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="http://www.tdesigns.be/projects/maes-boons/js/lightview.js"></script>
</head>
<body>
</body>
</html>