I am trying to build a single-page scrolling website leveraging the Ascensor JQuery plugin, and am having a lot of trouble getting it setup correctly. The documentation at http://kirkas.ch/ascensor/ is helpful, but I still must be missing something. What I want is a simple 3-floor layout, top to bottom. It seems that the layout of my "building" gets generated correctly, but I am unable to move between the "levels." The arrow keys and my links don't move the page at all. Can I get a little help with my code? Any guidance is appreciated.
Thanks,
Brett
<!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=UTF-8" />
<title>Ascensor Test</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.scrollTo-1.4.3.1.js"></script>
<script src="jquery.ascensor.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function()
{
$('#house').ascensor(
{
AscensorName:'ascensor',
ChildType:'div',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
Easing:'easeInOutCubic',
WindowsOn:1,
Direction:'y',
AscensorMap:'1|1 & 2|1 & 3|1',
KeyNavigation: true,
Queued:false,
QueuedDirection:"x"
});
});
</script>
<style>
body
{
margin: 0;
padding: 0;
}
#house
{
overflow: hidden;
border: 5px solid black;
}
#navigation
{
z-index: 1000;
position: fixed;
top: 50px;
left: 50px;
}
#ascensorFloor1
{
background-color: orange;
}
</style>
</head>
<body>
<div id="navigation">
Floor 1
Floor 2
Floor 3
</div>
<div id="house">
<div>
Floor 1
</div>
<div>
Floor 2
</div>
<div>
Floor 3
</div>
</div>
</body>
</html>
The problem is not you, it is in "jquery-1.9.1.js".
I've tried to implement ascensor myself, and figured that the problem is that the plugin doesn't work with the last update from jQuery. The version originaly used 1.5.1. Check it out the jQuery in Git (https://github.com/seekvence/ascensor).
I've tried to find out why, but see no reason for that! Even tried to use the jQuery migrate plugin, but it didn't work as well!
The problem isn't the IDs, since it is the plugin that is generating them. So you shoudn't put them in your mark-up in the first place. I had the same problem as you and after going through a lot "on/off switching stuff", i found out that the problem was in the key navigation declaration. If you turn it to false, it starts working. Don't ask me why, but "KeyNavigation:false" gets the plugin to work. Which is a shame, since key navigation is one of the things i liked about the plugin... Anyway, try this and see if it works.
Easing:'easeInOutCubic' - don't work
Delete: Easing:'easeInOutCubic',
or: Easing:'linear',
..))
Related
I'd like an iframe to load only when the user scrolls down the page and it comes into the viewport. This has been answered (link below) but I'm not very good with javascript and I can't work out how to combine the 2 bits of code in the answer.
Can anyone help? It would be great if someone could combine the bits of javascript for me.
Charlie
Having iframe load after scrolling down on page
Here's what I did:
<!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=utf-8" />
title>FS checker test</title>
<style>
<!--
#iframe1 {
background-color: #ccc;
margin: 1800px 10px 10px 10px;
height: 500px;
width: 500px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<iframe id="iframe1" frameborder="0" scrolling="no" src="about:blank" data-src="http://www.mets.com"></iframe>
<script>
if ($('#iframe1').visible(true)) {
var iframe=$('#iframe1');
if (iframe.data('src')){
iframe.prop('src', iframe.data('src')).data('src', false);
} else {
}
}
</script>
</body>
</html>
Your brackets are nested incorrectly. Indenting your code will make this sort of problem much easier to spot. Also make sure you have the browser developer tools open to the console, so you can see error messages.
This should work (provided you've also installed the jquery-visible library on the page):
if ($('#iframe1').visible(true)) {
var iframe=$('#iframe1');
if (iframe.data('src')){
iframe.prop('src', iframe.data('src')).data('src', false);
} else {
// or you could omit the 'else' clause, since it's not doing anything
}
}
I have many different MathJax formulas that are going to be dynamically moved around different lists on the webpage. I am trying to control this with JQuery and the append attribute.
In my script file I have various arrays of formulas and then a function that lists the formulas in the array inside of a specified div using .append. Here's the code:
function listArray(array,div){
for(var i=0; i<array.length; i++){
$('#'+div).append('<li>'+array[i]);
}
};
I am having the problem that MathJax typesets the math before this script runs and so the appended formulas don't display in TeX. Here is an example Fiddle:
http://jsfiddle.net/T8m64/92/
Does anyone know of a good fix for this? I have tried reading some of the documentation on re-typesetting MathJax, but I don't really follow it.
There are two problems with your fiddle example. First, the array of math expressions loses the backslashes, because these are used as escape characters in the javascript strings. You need to double them:
var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];
Second, you need to tell MathJax to process the mathematics once you have added it to the page. Use
MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);
after appending the math in order to do that.
Version 120 of you fiddle shows a working version.
I ran some tests as updates /93, /94, /95 of your fiddle, and found that the rendered formulas could be moved around but the whole thing was fragile. Sometimes a simple change or just a page refresh would cause the unrendered formulas to show, each one doubled-up, which I can't explain.
As you will see, I thought a setTimeout would fix things but now I don't think that's the case.
I think the bug is just a feature of running the code in jsFiddle. I can't induce the bug when running the code in a test page served locally under file:// protocol from my own computer and viewed in Opera.
Here's my test page :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
body {
margin: 10px;
}
.jax {
display: none;
}
#list1, #list2 {
margin: 10px 0;
padding: 5px;
border: 1px solid #000;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
$(".jax").each(function(i, j){
var li = $("<li/>").append($(j).text());
$ul.append(li);
});
};
//move formulas from original spans into list1
listArray($("#list1") );
//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
$("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
$("#list1 li").eq(0).appendTo($("#list2"));
});
});
</script>
</head>
<body>
<head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<span class="jax">\(\mathbb{Q}\)</span>
<span class="jax">\(\mathbb{Z}\)</span>
<ul id="list1"></ul>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<ul id="list2"></ul>
</body>
</body>
</html>
Hy,
this is what my test page looks like:
The blue area is the parent page and the green area is an IFrame which runs an ExtJS application (simple viewport with a label inside).
If the site is executed on a touch device (IPad, Android Tablet etc) it's not possible to scroll the page by "wiping" on the IFrame (the green area). One has to wipe on the blue area to scroll the page.
This had been working correctly in ExtJS v4.2.1 (see links below).
Test-Sites:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/ (not working as expected, using ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ (working as expected, same code but using ExtJS v4.2.1)
The test code:
Parent site (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin: 50px; background-color: blue;">
<iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
</html>
IFrame (frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" />
<script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
style: { 'background-color': 'yellowgreen' },
layout: 'fit',
items: [{
xtype: 'label',
text: 'Ext version: ' + Ext.versions.extjs.version,
margin: 16
}]
});
});
</script>
</head>
<body>
</body>
</html>
I'd really appreciate a workaround for this since it practically makes my sites useless on mobile devices even though they had been working perfectly fine with ExtJS 4.2.1.
Thanks & best regards
Ps.: I've already posted a bug report in the sencha forums, but since I didn't get any help there until know, I'm also trying my luck on stackoverflow...
The behavious is weird , I have seen it before using niceScroll plugin , and many other plugins had also same issue with iframe , anyway check this workaround
I have used Hammer.js jQuery plugin to detect touch gestures on your iframe , if you find any issues concerning sensetivity ( as I dont know what constraints you are looking for ) , you can adjust hammer.js options found on their repo ( like pan threshold , pointers ..etc )
and the code is very simple :
<body id="mainbody" style="margin: 50px; background-color: blue;">
<iframe id="myframe" src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
<script>
var myBody
$('iframe').load(function(){
myBody=$(this).contents().find("body");
myBody.css({"height":"100%","overflow":"hidden"}).hammer({threshold:1}).bind("pan", myPanHandler);
});
function myPanHandler(ev)
{
$("#mainbody").scrollTop($("#mainbody").scrollTop()-ev.gesture.deltaY)
console.log(($("#mainbody").scrollTop()-ev.gesture.deltaY*0.5)+".."+$("#mainbody").scrollTop())
}
</script>
After a lot of digging around inside the framework, I finally found a solution which at least works for me and consists of 2 steps:
1) ExtJS sets the CSS property touch-action of the viewport (the base html element of the IFrame) and its body to the value none.
I've simply overwritten it with the value auto:
.x-viewport, .x-viewport > .x-body {
touch-action: auto;
}
2) The class Ext.container.Viewport calls Ext.plugin.Viewport.decorate(this); in it's creation callback, which adds a listener to the touchmove event of the viewport itself.
Everything that listener does is calling preventDefault(); of the event, which is the reason why scrolling doesn't work anymore on the parent page or the IFrame itself.
My fix simply removes the preventDefault() and instead returns false from the touchmove event handler to let the event bubble up the browser chain:
Ext.define('Cbn.overrides.container.Viewport', {
override: 'Ext.container.Viewport'
}, function() {
Ext.override(this, {
onRender: function() {
this.mon(Ext.getDoc(), {
touchmove: function(e) {
// e.preventDefault(); // Original ExtJS code
return false;
},
translate: false,
delegated: false
});
this.callParent(arguments);
}
});
});
I'm not quite sure if those 2 fixes have any negative implications but so far they seem to do the job for me.
One thing I did realize is that using components with the config scrollable: true inside the IFrame-App still makes problems but since I can avoid that pretty much everywhere it's no issue for me so far...
Working test-site: https://skaface.leo.uberspace.de/ScrollTest/Ext510_fixed/
Edit:
Adjusted solution a little to not constantly throw unhandled JavaScript errors during touch-scrolling (see Error: Failed to execute 'dispatchEvent' on 'EventTarget')
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.
I am playing around with VRML at the moment, not through choice to be honest but for a project on Web 3D.
I am trying to make a touch sensor in VRML that will show and hide a Div in a webpage. I have tried writing a wee script using
browser.loadURL('javascript:someFunction()');
to try and test this.
The javascript is never called, however I know my touch sensor is ok as certain functions I have tried to use (e.g. if i spell 'browser' wrong) it throws up an error.
Perhaps this is just not supported by modern browsers?
Any assistance and advice would be greatly appreciated.
DEF alertScript Script {
eventIn SFTime make_alert
url [ "javascript:
function make_alert (value) {
Browser.loadURL('javascript:alert()');
}
" ]
}
ROUTE touchBack.touchTime TO alertScript.make_alert
Do they only want classic VRML or is X3D allowed ? (X3D is the name of the current version of VRML).
If you are allowed to use X3D (I don't see why not), you could use X3DOM which is a WebGL engine, you may even get extra points on your assignment :)
Here's an example that hides a div when you click on a 3D sphere:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Touchsensor in X3DOM</title>
<link href="x3dom.css" rel="stylesheet" />
<style>
#myDiv {
color: blue;
margin: 20px 0;
}
x3d {
display: block;
width: 600px;
height: 400px;
background: #EEEEEE;
border: none;
}
</style>
</head>
<body>
<div id="myDiv">
Click the sphere to hide this div
</div>
<x3d>
<Scene>
<Shape id="mySphere">
<Appearance>
<Material diffuseColor="0 1 0" />
</Appearance>
<Sphere/>
</Shape>
</Scene>
</x3d>
<script src="x3dom.js"></script>
<script>
(function() {
document.getElementById('mySphere').onclick = function(){
document.getElementById('myDiv').style.display = "none";
};
})();
</script>
</body>
</html>
And by the way, X3D is the recommended 3D technology by the HTML5 spec, it isn't dead at all :-)