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>
Related
I have a default blade file that yields other contents this is where im calling the link to style sheet and javascript i downloaded bootstrap 3.3.5 and created a link to it here is my default blade
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap335/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug- ins/1.10.7/integration/bootstrap/3/dataTables.bo‌​otstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
The bootstrap is working properly in my views except one. i don't know the problem because it works fine on the others and it is extends the default blade file
Current scheduler working with google calendar. But not mobile friendly.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2013, 7, 5),"week");
scheduler.load("./data.php", "json");
var dp = new dataProcessor("./data.php");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div id="scheduler_here"></div>
</div>
</body>
Current Scheduler that is mobile friendly but won't get events from google calendar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src="cal/webix.js" type="text/javascript"></script>
<script src="cal/scheduler/scheduler.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="cal/skins/touch.css">
<link rel="stylesheet" type="text/css" href="cal/scheduler/scheduler.css">
<title></title>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler"
});
$$("scheduler").load("data.json", "json");
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
Can't seem to figure out how to merge them or create a new code that has the css to be mobile friendly but still get data from a google calendar.
In case of json data source, both desktop and mobile scheduler must be able to share the same data source, so code like next must work
$$("scheduler").load("data.php", "json");
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>
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>');
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?