I have a standard website, and when the user zooms in (CTRL +), how can I prevent elements from resizing?
There's no way I know of to prevent items from scaling when a user zooms in. There may be a way to catch the zoom event and size elements accordingly, but it won't work in all browsers.
And to state the obvious - people zoom in because they can't read/see it at normal zoom. Pleeeaase don't break standard behaviour. It's there for a reason.
you can disable the cntl button with this:
<script language="JavaScript">
function disableCtrlKeyCombination(e)
{
//list all CTRL + key combinations you want to disable
var forbiddenKeys = new Array(‘+’);
var key;
var isCtrl;
if(window.event)
{
key = window.event.keyCode; //IE
if(window.event.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
else
{
key = e.which; //firefox
if(e.ctrlKey)
isCtrl = true;
else
isCtrl = false;
}
//if ctrl is pressed check if other key is in forbidenKeys array
if(isCtrl)
{
for(i=0; i<forbiddenkeys .length; i++)
{
//case-insensitive comparation
if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
{
alert(‘Key combination CTRL + ‘
+String.fromCharCode(key)
+‘ has been disabled.’);
return false;
}
}
}
return true;
}
</script>
Related
I have searched high and low and tried many different options from here, but i need a point in the right direction now :)
On this site:
http://www.michael-smith-engineers.co.uk
On the main nav, (in mobile view) if you click on Pumps, there should be further dropdown options, but i can not get this working. Any ideas would be appreciated.
I have tried adding the following script, without any luck...
<script>
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
var i, len, element,
dropdowns = document.querySelectorAll("#nav-site li.children > a");
function menuTouch(event) {
// toggle flag for preventing click for this link
var i, len, noclick = !(this.dataNoclick);
// reset flag on all links
for (i = 0, len = dropdowns.length; i < len; ++i) {
dropdowns[i].dataNoclick = false;
}
// set new flag value and focus on dropdown menu
this.dataNoclick = noclick;
this.focus();
}
function menuClick(event) {
// if click isn't wanted, prevent it
if (this.dataNoclick) {
event.preventDefault();
}
}
for (i = 0, len = dropdowns.length; i < len; ++i) {
element = dropdowns[i];
element.dataNoclick = false;
element.addEventListener("touchstart", menuTouch, false);
element.addEventListener("click", menuClick, false);
}
}
</script>
This script above is ridiculous for what i was trying so, tried this:
<script type="text/javascript">
function is_touch_device() {
return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
if(is_touch_device()) {
jQuery('.toggle-menu').on('click', function(){
jQuery(this).toggleClass('activate');
jQuery(this).find('ul').slideToggle();
return false;
});
}
</script>
</head>
Still no luck tho?!!!!
Many times when I am being tab to switch fields, some times it entered into a text area where pressing tab indent your text. How can I get out these textareas using keyboard so I can continue switching fields.
...here is a fiddle that does the same.
If the websites themselves are overriding this default/expected behaviour then they are breaking a standard UI feature (and possibly lessening site accessibility - although that may depend on the particular application) and it is really up to the site to implement some kind of alternative. There is no other "built-in" keyboard shortcut to move focus to the "next page element".
If, however, you just want to get focus out of that textarea, then you could perhaps use another shortcut, such as Ctrl+L which moves focus to the address bar. From their you can start TABing again to move focus.
You can use the following to do what you need:
http://postcode.cf/support-tabs-in-text-areas.html
/* Support Tabs within your textarea */
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
if (this.selectionStart == this.selectionEnd) {
return false;
} else {
return true;
}
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
this.selectionStart = start;
this.selectionEnd = end;
this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){ //backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){ //right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}
Im creating an object to drag with "touchmove" in Y but i want it only to be dragged in one direction, up!
But it also makes it go down.. How can i solve this?
In each interval of Y some actions will take place there and the objective is to drag the item only in one way disabling the possibility to the user dont go to the previews actions.
Here is the code:
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
var y = event.touches[0].pageY;
if(y<=600 && y>420){
$(this).css({
top: orig.changedTouches[0].pageY
});
if(y<570 && y>=540){
}else {
if(y<540 && y>=510){
}else {
if(y<510 && y>=480){
}else {
if(y<480 && y>=450){
}else {
if(y<450 && y>=420){
}
}
}
}
}
}
};
$("#draggable").bind("touchstart touchmove", moveMe);
Not tested, but is it possible that you have a mistake in the following line?
var y = event.touches[0].pageY;
shoudn't you use here "e" instead of "event"?
hope it helps.
I am using zoho for live chat in my website. How to get that pop up which usually comes in most of the website
its code is some thing like this...
<div style="height:300px; width:300px; padding-top:20px;"><iframe style='overflow:hidden;width:100%;height:100%;' frameborder='0' border='0' src='http://chat.zoho.com/mychat.sas?U=c36599f3bbee3974d1af8b95ee04001b&chaturl=helpdesk&V=********************Center&smiley=false'></iframe></div>
How to make sure that this iframe must be loaded in a pop up..
try using window.open
window.open("http://chat.zoho.com/mychat.sas?U=c36599f3bbee3974d1af8b95ee04001b&chaturl=helpdesk&V=********************Center&smiley=false","mywindow","location=1,status=1,scrollbars=1,width=100,height=150");
Add page onLoad event to popup.
<body onLoad="window.open('http://chat.zoho.com/mychat.sas?U=c36599f3bbee3974d1af8b95ee04001b&chaturl=helpdesk&V=********************Center&smiley=false','mywindow','location=1,status=1,scrollbars=1,width=100,height=150');">
`
Here is the complete solution that worked for me
HTML CODE:--- chat.html contains the code i got from zoho...
Clickhere to chat with us
this is the main thing to be noticed...
rel="popup console 350 350"
Javascript code...
function addEvent(elm, evType, fn, useCapture){if(elm.addEventListener){elm.addEventListener(evType, fn, useCapture);return true;}else if (elm.attachEvent){var r = elm.attachEvent('on' + evType, fn);return r;}else{elm['on' + evType] = fn;}}
var newWindow = null;
function closeWin(){
if (newWindow != null){
if(!newWindow.closed)
newWindow.close();
}
}
function popUpWin(url, type, strWidth, strHeight){
closeWin();
type = type.toLowerCase();
if (type == "fullscreen"){
strWidth = screen.availWidth;
strHeight = screen.availHeight;
}
var tools="";
if (type == "standard") tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
if (type == "console" || type == "fullscreen") tools = "resizable,toolbar=no,location=no,scrollbars=no,width="+strWidth+",height="+strHeight+",left=0,top=0";
newWindow = window.open(url, 'newWin', tools);
newWindow.focus();
}
function doPopUp(e)
{
//set defaults - if nothing in rel attrib, these will be used
var t = "standard";
var w = "780";
var h = "580";
//look for parameters
attribs = this.rel.split(" ");
if (attribs[1]!=null) {t = attribs[1];}
if (attribs[2]!=null) {w = attribs[2];}
if (attribs[3]!=null) {h = attribs[3];}
//call the popup script
popUpWin(this.href,t,w,h);
//cancel the default link action if pop-up activated
if (window.event)
{
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else if (e)
{
e.stopPropagation();
e.preventDefault();
}
}
function findPopUps()
{
var popups = document.getElementsByTagName("a");
for (i=0;i<popups.length;i++)
{
if (popups[i].rel.indexOf("popup")!=-1)
{
// attach popup behaviour
popups[i].onclick = doPopUp;
// add popup indicator
if (popups[i].rel.indexOf("noicon")==-1)
{
popups[i].style.backgroundImage = "url(pop-up.gif)";
popups[i].style.backgroundPosition = "0 center";
popups[i].style.backgroundRepeat = "no-repeat";
popups[i].style.paddingLeft = "3px";
}
// add info to title attribute to alert fact that it's a pop-up window
popups[i].title = popups[i].title + " [Opens in pop-up window]";
}
}
}
addEvent(window, 'load', findPopUps, false);
How can I make a text box that allows users to enter tabs, and does not send the user to the next element when the tab button is pressed?
You only need to check for tabs onkeydown via event.keyCode === 9. Inserting the character into the textarea is non-trivial - use a library or google for 'insertatcaret'.
There are already some plug-ins for jQuery that do this. One for example is Tabby.
<textarea onkeydown="return catchTab(this, event);">
JS code:
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
} else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
} else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
} else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item, "\t");
setTimeout(function() { item.focus() } , 0);
return false;
}
}
You can use JavaScript to catch the tab keypress event and replace it with spaces (I'm not sure about inserting tabs into a textarea).
E: This page looks good.
onkeypress, onkeyup or onkeydown check the key that was pressed and if it is a tab then append \t to the textbox and return false so that focus remains on the textbox
you will most likely have to use textranges so that tabs can be inserted anywhere not at the end of the text
that's the basic idea for the rest google is your friend :)
Do NOT try to capture the onkeypress event for the 'TAB' key in IE (it doesn't work) (bug 249)
Try onkeydown or onkeyup instead.