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>
Related
Question
How come my ckeditor is not functioning?
Error
"Uncaught TypeError: Cannot read property 'options' of undefined"
https://prnt.sc/ttqdm8
Version
ckeditor_4.14.1_full
File Structure
https://prnt.sc/ttqg7w
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>File Manager Integration</title>
<script src="./plugin/ckeditor/ckeditor.js" type="text/javascript"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" data-sample-short><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
<script>
// CKEDITOR.replace('editor1');
CKEDITOR.replace('editor1', {
height: 300,
filebrowserBrowseUrl: './plugin/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: './plugin/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: './plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: './plugin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
});
</script>
</body>
</html>
I found the solutions. The problem is caused by the folder name. Directly change the folder name from
D:\xampp\htdocs\testingProject\copypasteeditor --> D:\xampp\htdocs\testingproject\copypasteeditor
Change testingProject to testingproject.
I am working with serving a simple polymer element from a Tomcat server. The element works fine in Chrome but fails in the recent version of Firefox 49.0.2.
I have attached the content the two elements and the problem seems to happen because the WebComponentsReady event is fired repeatedly over and over again in Firefox but in Chrome only four times.
Furthermore by including a include on the paper-slider element in the simple-element below causes Firefox to go into a loop where it keeps reloading the files over and over again ?!
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
What is going on?
simple-element-demo.html (below)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Demo of simple element">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./simple-element.html"></link>
</head>
<body>
<div>Hello! I am going to demo simple-element. See below me.</div>
<simple-element></simple-element>
</body>
<script>
document.addEventListener('WebComponentsReady', function(e) {
console.log('WebComponentsReady', e);
debugger;
});
</script>
</html>
simple-element.html below
<!doctype html>
<html>
<head>
<title>Simple Element</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
</head>
<body>
<dom-module id="simple-element">
<template>
<div class="container flex-horizontal">
Hi There! I am Simple Element.
</div>
</template>
<script>
Polymer({
is: 'simple-element',
properties: {
prop1: {
type: String,
notify: true
},
},
created: function() {
console.log('Simple is created');
},
ready: function() {
console.log('Simple is ready');
}
});
</script>
</dom-module>
</body>
</html>
I was able to fix the problem by including webcomponents-lite.js only once in the main file: simple-element-demo.html.
I removed the line below from the simple-element.html and now it works just fine in all browsers.
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
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");
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>