Strange behavior Shift-Key Safari - HTML/Javascript - javascript

As requested, I simplified the problem as much as possible.
What I am trying to do is adding a onmousemove event to an HTML element, in this case the box, that will call a function. The problem I have is that not only mouse movements trigger the event, but also keys like SHIFT, CTRL, ALT... do.
So, once the mouse is passed over the box for the first time and the alert window is closed, any of the keys I mentioned previously will also make a new alert window pop up.
I am working with Safari, I also tested this on Google Chrome and the result is also a weird behavior of the browser.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml\" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
window.onload = function() {
boxx = document.getElementById("box");
boxx.onmousemove = showMessage;
}
function showMessage() {
alert("hello");
}
</script>
</head>
<body>
<div id="box" style="width: 900px; height: 300px; border: 1px solid;"></div>
</body>
</html>
I really don't understand what is happening, hopefully someone can help me!

Related

Have iframe load after user scrolls down page and it comes into viewport

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
}
}

Scrolling issues with ExtJS 5 app inside IFrame

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')

Set Window focus with a link

I have a problem with Javascript window focus setting.
I've written a function to open a new window with the JS method window.open() and save the return value to a variable.
Now I have a link on the first page and by clicking on this link the second, with window.open() opened, window should get the focus.
But this won't work. Is there any way to get this working?
My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" language="JavaScript">
var myWindow;
function checkForRefresh() {
myWindow = window.open("test.html", "TestMain");
myWindow.focus();
}
function switchFocus(umsWindow) {
myWindow.focus();
}
</script>
</head>
<body onLoad="checkForRefresh()">
<p>Test Link</p>
</body>
</html>
This problem has been talked already, some browsers does not listen to window.focus(). Please take a look at comment #2533335.
I got it to work when I made the functions properly global by putting them on the window object
http://jsfiddle.net/u52xE/3/
window.switchFocus = function() {
myWindow.focus();
}
It's not ideal to have that javascript in your HTML and global functions though, I'd recommend using jQuery to attach events

What's the best way to display a blown-up image using minimal JQuery?

The Goal:
On mouseover (or :hover), enlarge the preview image by about 400% and display it in the center of the page
Remove the preview when the mouse leaves
The Problem:
Solutions like FancyBox are too bloated
in FancyBox's case it ignores width and height for image elements, which makes it useless
Most of these "lightboxes" steal focus when they're called
Really, I'm just looking for a simple, efficient solution.
try something like this. the trick is position you can put the div wherever you want.
read something here. and you can read about hover here
here is an html example. (copy this to a text file and open it withyour browser)
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script text="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js">
</script>
</head>
<body>
<ul>
<li class="">Lynx</li>
<li>Jaguar</li>
</ul>
<div id="picture" style="position:absolute; top:0px; right:0px;">
</div>
<script type="text/javascript">
var animal = {
"Lynx":
"http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg",
"Jaguar" :
"http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg"
}
var hovered = function(e) {
//you can get what to show from the elemnt, instead of the content
// you could use an id.
var name = $(e.target).html()
$('#picture').append("<img src='" + animal[name] +"'/>")
}
var unhovered = function() {
$('#picture').empty();
}
//here you bind mouseenter and mouseleave
$('li').hover(hovered, unhovered);
</script>
</body>
Perhaps you're looking for a tooltip? You can use any html (including images) inside the tooltip.
http://flowplayer.org/tools/tooltip/index.html

javascript mouse cursor change on page load in firefox browser 3.5

Hi in case of full page submit a trasparent div id coming and changing the cursor to 'wait' . Now when the page is getting submitted and new page is coming up cursor still remains to 'wait' not changing to default until mouse is moved in Firefox
Here is simple html click on show button div is coming when user move mouse over the div cursor is changing as wait cursor. Now when this page is loaded again pressing F5 cursor remain as wait cursor in firefox its working fine in IE is there any way to make the cursor as default on pageload in Firefox
<!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" />
<title>Untitled Document</title>
<style>
body {
cursor:default;
}
</style>
<script src="js/jquery.js"> </script>
<script>
var test = true;
$(document).ready(function() {
$('#maindiv').css('display','none')
});
function showDiv() {
$('#maindiv').css('display','block')
}
</script>
</head>
<body>
<div id="divBody" style="background-color:red;width:500px;height:500px" >aa
<div id="maindiv" style="background-color:#999999;height:100$;width:400px;height:400px;cursor:wait">
sss
</div>aa
</div>
<input type="button" value="show" onclick="showDiv()"/>
</body>
</html>
Could you use an animated image to give the user feedback instead of changing the cursor?
ajaxload.info has some great examples.
thats some messy code...
why not use an image or, css to display a div on top of everything else with transparent background and cursor: wait; on your css or style tag then show that div when ever you wish...
HTML
<div id="modal"> </div>
<input id="test" type="text" />
JQuery
$('#modal').css({cursor: 'wait'}).width($(document).width()).height($(document).height());
$('#test').bind('click',function (){$('#modal').show()})
I have not tested this so ... in theory it should work ... if not try and change body width and height to "100%"
take care

Categories

Resources