I have an application that requires the down arrow, or the letter s for a specific function (both down arrow and the letter "s" trigger the function in the application).
The user cannot use the keyboard so I have to make a button on screen for the user to click. The application is displayed in an HTML page and I have made other buttons with the following code:
<img src="left.jpg" name="Left" onclick="javascript:[CODE_TO_RUN];" vspace="0" width="75" height="75" hspace="0" />
This works for my other functions but I cannot get sendKey to work to simulate the down arrow or the "s" key. Does anyone know how to make a button on an HTML page that will simulate pressing the down arrow or the "s" key? Please help, thank you!
You wrote "sendKey", I only know this as a method of the windows-shell. Does this mean, that it only has to work on MSIE?
If yes, you cant usually access the shell there because of security-restrictions, but you can fire an event.
Example:
//create event-object
e = document.createEventObject();
//set keycode to 115(for s)
e.setAttribute('keyCode',115);
//fire on document
document.fireEvent('onkeypress',e);
To do similar in other browsers, you find here a tutorial:
http://www.howtocreate.co.uk/tutorials/javascript/domevents
You won't be able to do this in general. Firefox can be made to fully simulate some key events with associated browser behaviour; other browsers can programmatically fire key events but will not perform the usual browser action associated with the event, such as displaying a character.
This might be a good workaround if I understood you question correctly:
Using jQuery animate() function to do a smooth scrolling:
I have also created a div as follow:
<div id="scrollToHere">
Scroll to here
</div>
You need something to run your script. Create a button like this:
The jQuery Code will be like this:
function scrollWin(){
$('html, body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 2000);
}
Resource:
http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery
You could make scroll "buttons" always visible!
Good luck, not sure if I understood your question, please tell me if otherwise!
Related
I've been looking everywhere for SOME sort of information on if I can do this, and if so, HOW?
I was supposed to make a PowerPoint for an eCommerce assignment, and instead asked to make a webpage since I prefer to write HTML than work with PowerPoint. I was talking to the person beside me and eventually he bet me I couldn't get my site to look and work like a PowerPoint, so I took him up on it. So is there any way possible I can go from one page to the next by pressing, let's say the right arrow? Any help is appreciated!
Use Impress js: http://bartaz.github.io/impress.js/
It is a jquery plugin for powerpoint-like slide presentations (and offers much more)
There are many possibilities to make a website look like a PowerPoint application.
With jQuery (which is my favourite JavaScript library) it's easy to identify key strokes.
$(document).keypress(function(e) {
if(e.which == 39){
//Right arrow key, now trigger an event or a function. Could be for example: loading new data into a div with ajax or sliding your content so that the next screen is shown.
}
});
See this page to identify Char Codes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
jQuery also offers the animate method (https://api.jquery.com/animate/) that can be used to make smooth animations, slides, and what not. With knowledge in HTML,CSS and jQuery you can quite easily make an application similar to PowerPoint.
Cheers.
This is fairly simple with standard javascript (I.E. no need to download a library).
Assuming that each page has its own URL you should be able to add an "onkeypress" event onto the body that performs actions based on the particular key pressed using event.keyCode.
E.g.
<script>
function navigate( event ) {
if ( event.keyCode == 39 ) {
// right arrow pressed
window.location.href = "the url of your next page";
}
if ( event.keyCode == 37 ) {
// left arrow pressed
window.location.href = "the url of your previous page";
}
}
</script>
<body onkeypress="navigate( event )">
...
There are more elegant solutions, but this should get you started.
Once you have the principle basically working you can find out what the keyCodes are with a console.log( event.keyCode );, or look them up online (there are plenty of reference sites out there)
The following code gives me an alert with nothing but a # symbol inside it. Why?
EDIT: I should note that the code is inside a jQuery .click event...if I place it outside of that, it works properly. Here is the fuller code:
$('#continue').click(function(){
var _href = $("#continue").attr("href");
alert(_href);
});
Continue
EDIT2: This all works fine in jsfiddle. But in the xcode iphone simulator I just get #.
Judging by only the code you typed, probably the code runs too early. Try wrapping the JS in
$(function() {
// your code here
});
Or
$(document).ready(function(){
// your code here
});
Update:
Well, since it's an iPhone simulator, it changes things. Remember, nobody can help you unless you give all the details of the problem, no matter how much experience they have.
Did you try the touchstart / touchend / tap events instead of click? As far as I know, Apple has been having problems with the click events. Also, click events on mobile devices will have a slower response (a delay of approx 300ms if I remember well) so you're better just using touch specific events.
What are you building? Is it a mobile web app or? Will it run in a standard mobile browser or something like PhoneGap etc?
Update2:
Ok. It works as long as the code is not called on Click. This eliminates the possibility of another piece of code replacing your "href" with another value because that code would have to be inside your $('#continue').click(function(){ }); block.
The click event is simulated on a touch phone, that's why the touch events are faster (they are native) and less likely to cause problems. You should also make sure that you return false there and not follow the link, that might be what's replacing your "href".
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#continue').click(function(e) {
var _href = $(this).attr('href');
alert(_href);
e.preventDefault();
return(false);
/*
the return is legacy code, used by some
browsers to detect if current event handler
is braking default behaviour
the e.preventDefault() function is the jQuery
way to do it
*/
});
});
</script>
Continue
Without this line the link is followed and a refresh occurs killing the current script.
https://github.com/jquery/jquery-mobile/issues/3777
I have tried to google this to no avail and have tried multiple options. All of which work in firefox but none have worked in IE. I have 2 onclick events on one page and neither are working in IE. The javascript file for both events is called by:
<script type="text/javascript" src="openwindow.js"></script>
The first event is an anchor event which I started with as:
Listen Live
then tried
Listen Live
then:
Listen Live
then:
Listen Live
then:
<a onclick="javascript:streamwindow()">Listen Live</a>
I think that is everything I have tried so far for that one. The other click event is called when the user clicks on an image. Again works fine in firefox as is but not in IE. Code for the second event is:
<td width="450px" align="center">
<p>Clip of The Day</p>
<img id="image2" src="images/sound.jpg" onclick="clipwindow()" />
</td>
I have played with this one quite as much. The javascript file (openwindow.js) contains:
function clipwindow()
{
window.open ('clipoftheday.html', 'Clip of the Day', 'height=200',
'width=100', 'toolbar=no', 'menubar=no', 'scrollbars=no', 'resizable=no',
'location=no', 'directories=no', 'status=no')
}
function streamwindow()
{
window.open ('stream/index.html', 'Live Stream', 'height=70', 'width=500', 'toolbar=no', 'menubar=no', 'scroolbars=no', 'resizable=no', 'location=no', 'directories=no', 'status=no')
}
Please help me with this. I look forward to hearing back from people.
The window.open() method expects all of those height, width, etc., parameters as a single string:
window.open('stream/index.html', 'LiveStream',
'height=70,width=500,toolbar=no,menubar=no,scroolbars=no,resizable=no,location=no,directories=no,status=no');
According to MDN the window name and the string with the features should not contain blank space. I don't know why your existing code works in FF.
Most or all of your <a> variations should work, but of the ones you tried I'd suggest this one:
Listen Live
Better, though, would be to set the href to the same URL as what the JS will open, so that the link will still work for users with JS disabled. For users with JS enabled you then return false from the onclick so that the default navigation doesn't occur as well as your onclick:
Listen Live
If the above still doesn't work I'd suggest you temporarily replace the contents of your functions with a simple alert("In function x"); message to test if the functions are being called at all.
Two problems:
The window name (for IE) must be a valid identifier, so "Live Stream" won't work. Try "Live_Stream" or "LiveStream" instead.
The window option parameters ("scrollable", "height", etc) need to all be combined into one string, separated by commas.
For some reason IE won't trigger an onclick event. I have a link in my webpage which should renew a captcha image, but no matter what I try, the onclick event won't trigger. I even tried this to test the onclick event:
<a href="#" id="rc" onclick='alert("test"); return false;'>change image</a>
But nothing happened. I also tried to add the onclick event using js in the window.onload event, same result. All other javascript scripts do work, so js is working. Does anyone has any idea why this doesn't work?
by the way, the event doesn't work in any version of IE, and it does work in any other browser.
Edit: If you want to see the full source, go to: http://www.rosegardenvoorburg.nl/Contact?stackoverflow
The page is in Dutch, but the sourcecode is (of course) HTML, so you must be able to understand that.
edit2: I've found a solution myself, and you're never gonna believe what's wrong:
When I'm logged in to the control panel, a div is added at the top of the page, similar to the one shown in ie7 (which tells you you're browser is too old). However, when I don't add a border to that div, the captcha refresh button doesn't work. This doesn't make any sense at all, but at least I've found a solution...
Try with the below:
<a href="javascript:void(0);" id="rc" onclick='alert("test"); return false;'>change image</a>
Also have a look at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
You are doing it in the wrong order
FIRST add the onload, THEN change the source
var cImg;
function renewCaptcha(){
cImg = new Image();
cImg.onload=function(){document.getElementById("captcha").src = cImg.src;};
cImg.src='/Img/captcha/securimage_show.php?' + Math.random();
}
Few tips to ponder!
check if javascript:alert("test") on your ie address bar pops up the message.
Also check and make sure that javascript option is not turned off.
You may also want to reset your ie settings and see if it work.
Also try to see if same works on your fellow colleague's computer.
I have various links which all have unique id's that are "pseudo-anchors." I want them to affect the url hash value and the click magic is all handled by some mootools code. However, when I click on the links they scroll to themselves (or to the top in one case). I don't want to scroll anywhere, but also need my javascript to execute and to have the hash value in the url update.
Simulated sample code:
button 1
button 2
Home
So if you were to click on the "button 1" link, the url could be http://example.com/foo.php#button1
Does anyone have any ideas for this? Simply having some javascript return void kills the scrolling but also kills my javascript (though I could probably work around that with an onclick) but more importantly, prevents the hash value in the url to change.
The whole point of an anchor link is to scroll a page to a particular point. So if you don't want that to happen, you need to attach an onclick handler and return false. Even just adding it as an attribute should work:
button 1
A side of effect of the above is that the URL itself won't change, since returning false will cancel the event. So since you want the URL to actually change, you can set the window.location.hash variable to the value that you want (that is the only property of the URL that you can change without the browser forcing a reload). You can probably attach an event handler and call something like window.location.hash = this.id though I'm not sure how mootools handles events.
(Also you need all of the IDs to be unique)
You can use the code below to avoid scrolling:
linktxt
I'm probably missing something, but why not just give them different IDs?
button 1
button 2
Home
Or whatever convention you'd prefer.
Also, preventDefault
$(your-selector).click(function (event) {
event.preventDefault();
//rest of your code here
}
I found the solution. Here I save an old location from calling href
and restore it after scrolling
<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
if (window.pageYOffset!= null){
st=oldOffset;
}
if (document.body.scrollWidth!= null){
st=oldOffset;
}
setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>
and in body of page
<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a>
Thanks to sitepoint
An easier way would probably be to add it as a GET. That is, http://example.com/foo.php?q=#button1 instead of http://example.com/foo.php#button1
This won't have any effect on how the page is displayed (unless you want it to), and most scripting languages already have tools in place to easily (and safely) read the data.
Well here we are 7 years after this answer was published and I found a different way to make it work: just point the window.location.hash to a non-existent anchor! It doesn't work for <a>s but works perfectly in <div>s.
<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>
Worked fine in Chrome 56, Firefox 52 and Edge (IE?) 38. Another good point is that this doesn't produce any console errors or warnings.
Hope it helps somebody besides me.
There is a solution without any JavaScript at all:
I will not jump to the top
Use
button 1
where
function setHash(hash) {
event.preventDefault();
history.pushState(null, null, "#"+hash);
}
event.preventDefault() stops browser from what it normally would do on clicking, and history.pushState adds to the sessions history stack.
For further discussion, see here and here