JQuery show keyboard on mobile with click - javascript

Hey guys I was following tutorial I found online on how to make Hangmen game and it was fine until I tested it on mobile. I just can't make virtual keyboard to show on mobile and I've already tried other answers to similar questions on stack. This is part of my code:
$(document).on("click", function() {
$('#dummy').focus();
});
$('#dummy').focus();
#dummy {
position: absolute;
left: -200px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbar">Todemanija</div>
<div class="spacer"></div>
<div id="gameContent"></div>
So guys is there a way to make this work. Also you can see full code in action here
http://www.wpacademy.nextweb.space/TestingMobile/

You need a text input to focus on to trigger the mobile keypad.
And you can't hide it, because a hidden input just can't be focussed.
But! I just had an idea you could try.
Add this to your function gameScreen(){:
$('#gameContent').append("<input type='text' id='dummy'>");
$("#dummy").css({"position":"fixed","left":"120%"}).focus();
So, the trick is to place the text input outside the viewport.
And you can remove this:
// with this function we add virtual keyboard for mobile users and we do not affect desktop gameplay
$(document).on("click",function() {
$('#dummy').focus();
});
$('#startButton').click(function(e) {
$('#dummy').trigger('click');
});
EDIT
Here is a small addition...
I tried your game after you added the previous answer.
In case the user looses the input focus during the game because of a tap outside the keyboard: add this, but outside function gameScreen() (at global scope):
function keepFocus(){
setTimeout(function(){
$(document).find("#dummy").focus();
},100);
}
At the end of function gameScreen(), to maintain the keyboard active:
$(document).on("touchstart", keepFocus);
At the end of victoryMessage() and function defeatMessage(), to deactivate the keyboard:
$(document).off("touchstart", keepFocus);
$("#dummy").blur();
Also, add this in your start() function:
$(document).on("touchstart", keepFocus);

Related

Expand/Collapse on mobile page

I have a weird thing happening.
I have a page that with several items on it, and each one has an iconfont. When the icon is clicked it changes the icon, and a new element shows below it. And of course, the opposite happens, clicking again changes back the icon and hides it. This works great.
However, when I try to make it work on a mobile version, which is called "modal" (and it kind of is a modal), the expand/collapse does not work. The main modal appears when clicked by a button, so that is not a problem. I am using the Chrome emulator for an iPhone 5. The same function is called, and I have verified it finds the function, but it won't expand (so I can't test collapsing either).
This is the basic HTML:
<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals. Available on iOS or Android.</p>
The css:
.plus-fa {
&:before {
#include icon($icon-plus-fa);
color: #0056A7;
}
}
.minus-fa {
&:before {
#include icon($icon-minus-fa);
color: #0056A7;
}
}
.goApps {
display:none;
padding-bottom: 10px;
}
And the jquery function:
$(document).ready(function(){
$(".featureToggle").click(function(){
var togglelist = "#" + $( this ).attr('id') + '_list';
$(togglelist).toggle();
$( this ).toggleClass('plus-fa');
$( this ).toggleClass('minus-fa');
});
});
The code used is exactly the same on the desktop version and the mobile version, although they are in difference scss files, specified for the desktop version and the mobile version.
Can anyone help me figure out why it won't work? I am wondering if it is a "modal" limitation, or something simple I am missing.
Put # inside href
<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals. Available on iOS or Android.</p>

'Hovering' elements when clicked

What I want is fairly simple, and I have two examples for it:
http://janvanderkleijn.nl/
http://studio-laucke-siebein.com/
When looking at these portfolio websites you see it's scroll based websites mainly relying on images. The interactivity I'm looking for is the clicking on an image, resulting in a 'hovering' element over the web page, further elaborating the project with text, images etc.
What I like about it is that you don't have to leave the home-page to look into a project, and it can be closed by either pressing the close button in the top right, or clicked anywhere outside of this element. Especially in Laucke-Sibein's webpage it's nice, that when you scroll far enough down, the element dissappears.
How hard is it to achieve a similar result? How does this function work? I've been looking all afternoon and failed to find something that helped me further.
As mentioned by others there are many jQuery plugins like lightbox, fancybox, etc. that are capable of outputting images and text. Or a jquery-ui dialog box would work.
Alternatively you could create your portfolio items inside div's and show them on click events.
<body>
<div id="project-list">
html showing images from your projects. <br />
<img src="img1.jpg" data-project="project1" />
<img src="img2.jpg" data-project="project2" />
</div>
<div id="project1" class="project">
html displaying <br />
your project 1
</div>
<div id="project2" class="project">
html displaying <br />
your project 2
</div>
</body>
Then css something like:
.project { position: absolute; top: 100px; left: 100px; display: none; }
#project-list.fixed { position: static; }
Then the using jQuery it would look like:
$(function(){
// add click handler to the images
$('#project-list img').click(function(e){
// if a project is visible then just return and let the
// document click handler handle the closing of the project
if($('.project:visible').length > 0){
return;
}
// get the data project attribute which tells you which project to open
var project = $(this).data('project');
$('#' + project).slideDown('slow');
// add the fixed class to the project list so that it doesn't scroll
$('#project-list').addClass('fixed');
// you must have this to keep the click event from bubbling up
// through the DOM and triggering the document click function
// which would close the project as soon as it opens.
e.stopPropagation();
});
$(document).click(function(){
// this closes the project when anything is clicked that doesn't
// have the event.stopPropagation function set.
$('.project').slideUp('slow');
$('#project-list').removeClass('fixed');
});
$('.project').click(function(e){
// you want this so if they click anything in the project it doesn't
// close the project.
e.stopPropagation();
});
});
See a fiddle here http://jsfiddle.net/wdv79yxw/1/
Sounds like you're looking for a modal window. There are tons of jQuery libraries out there, or even pure CSS solutions. A decent one that I've used is jQuery fancybox, which supports videos, iframes, content, a gallery of images. It's very robust.

Adding a close icon inside input with close action

im having troubles trying to work something out and would be great if someone could lend me a hand in the following:
demo: http://jsfiddle.net/44zAy/3/ (UPDATED: added multiple ones which then gets confused, any help on this would be great. also added click function to close when clicking on the icon)
when you click inside the input it extends, and when click out goes back to normal which is what i want however what im trying to add is:
a) add the font awesome icon inside the input once its extended
b) ability to click on the x icon to close the input back to the normal size, the same in how it does when you click out of the input currently
the code so far (basic example) is as follows:
JS
var inputWdith = '200px';
var inputWdithReturn = '68px';
jQuery('.resize-close').hide();
jQuery('.resize-input').focus(function(){
jQuery(this).animate({
width: inputWdith
},400);
jQuery('.resize-close').show();
});
jQuery('.resize-input').blur(function(){
jQuery(this).animate({
width: inputWdithReturn
},500);
jQuery('.resize-close').hide();
});
HTML
<input type="text" class="resize-input">
<a class="resize-close"><i class="icon-remove"></i></a>
How the input is currently is using an absolute position on my development as it extends out over other inputs
Thanks in advance!
You could simply add a negative margin to the .resize-close class:
.resize-close {
margin-left: -24px
}
...and then update the blur handler to be a click handler instead:
jQuery('.resize-close').click(function(){
jQuery('.resize-input').animate({
width: inputWdithReturn
},500);
jQuery('.resize-close').hide();
});
http://jsfiddle.net/44zAy/5/

Jquery toggle() function is not working with hoverwords() Sliding Letters extension

i have 2 divs which toggles in every 3 seconds. now for the text in the div i am using an extension called sliding letters, as you can see in the demo available here. http://tympanus.net/Development/SlidingLetters/
The problem is, it works alone but now with toggle.
i have my working version located here http://webmaster.lk/n/
as you can see it is not showing the text "IMAGE 2" unless u hover it once.
can anybody please help me resolve this ?
i have the same created as a fiddle here, http://jsfiddle.net/KuW6K/5/
without hoverwords() - http://jsfiddle.net/KuW6K/4/ this is working correctly.
<body style="background:#cdcdcd;">
<div class="sl_examples">
<!-- need to show one of the links below every 3 seconds-->
image4
image2
</div>
</body>
Update
sample demo of the letter sliding extension - http://tympanus.net/Development/SlidingLetters/
Update 2
i removed the toggle() and re wrote it this was as in the answer 1 it was mentioned as toggle() is depreciated. but still no good.
$(document).ready(function() {
setInterval(function(){
if($("#example1").is(":visible"))
$("#example1").hide();
else
$("#example1").show();
if($("#example2").is(":visible"))
$("#example2").hide();
else
$("#example2").show();
},3000);
});
Update 3
I have attached the source here for reference, https://www.mediafire.com/?fi8547rhm1q8ixt
Update 4
actually it should only work when mouse enters and mouse leave. but here the problem is, (check this) http://webmaster.lk/n/ first it shows IMAGE 4 (red background) and when you hover it IMAGE 3 appears (light blue letters) then afer 3 seconds, Green color plain background appears without the text IMAGE 2. this is the problem why it is not working as IMAGE 4 works.
Your initial issue was caused because you were setting #example1 to display none;
#example1 {
background: green;
display: none;
}
And then you were calling
$('#example1').hoverwords();
This was causing the blank background.
So just remove the display:none; css and call hoverwords on example1 before it's hidden.
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
And then hide it after using jQuery.
It looks like you have a simillar working solution in your Update 4
http://jsfiddle.net/trevordowdle/KuW6K/15/
While it works well you can still trigger the error. This happens when hovering back and forth and the setInterval triggers at the same time. The toggle from the trigger and the hoverwords function if ran at near the same time interfere with each other and you don't get the desired result.
One option is to stop the words from changing while they are being hovered.
Like:
jQuery
var hover = false;
setInterval(function () {
if(!hover){
$('#example1').toggle();
$('#example2').toggle();
}
}, 3000);
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
$('.sl_examples').hover(function(){
hover = true;
},function(){
hover = false;
});
CSS
#example1 {
background: green;
}
http://jsfiddle.net/trevordowdle/KuW6K/14/
And if you would would rather have it reset the timer.. Meaning that once your done hovering the 3 second timer starts from 0. Here is another example:
http://jsfiddle.net/trevordowdle/KuW6K/16/
.toggle() is deprecated
http://api.jquery.com/toggle-event/
Check here for an equivalent
Equivalent of deprecated jQuery Toggle Event
UPDATE
So the real issue here is the way that the Sliding Letters library binds the event which triggers itself. This is the line doing the binding:
$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
aux.toggleChars($el, settings);
});
As you can see it is only bound to fire on mouseenter and mouseleave. Since you want this to trigger on an interval you need to alter the existing or create a new binding.

.slideDown() content below jumps (isn't fluid)

So I'm writing a simple page that I want to be able to slide some content down when a button is clicked. Unfortunately this also causes some issues with the button I have underneath the sliding content. When I click the first button to slide content down, it works fine. As soon as I click the 2nd button, it slides the first content up, and the 2nd down and causes some jumping with the button below.
$('#1G').live('click', function(){
$('#slv').slideUp('slow');
$('#gld').slideUp('slow');
$('#brz').slideToggle('slow');
});
$('#2G').live('click', function(){
$('#brz').slideUp('slow');
$('#gld').slideUp('slow');
$('#slv').slideToggle('slow');
});
$('#3G').live('click', function(){
$('#brz').slideUp('slow');
$('#slv').slideUp('slow');
$('#gld').slideToggle('slow');
});
This happens on what seems to be every animation of size.
Here's an example:
http://kod.singaming.net/hosting
I've tried adding a width on #brz #slv and #gld, and I've tried adding a height to each.
Is it some css property I have to set? Let me know if I need to explain anything else.
This new method uses one box called info into which the correct content is loaded using the .load() function.
alternative html:
<div id="info" class='pkg'></div>
<div id="button" class="clearfix">
alternative script:
$('#1G').live('click', function(){
if ($("#info").hasClass("1")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/bronze.html')
}).slideToggle('slow').addClass("1");
});
$('#2G').live('click', function(){
if ($("#info").hasClass("2")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/silver.html')
}).slideToggle('slow').addClass("2");
});
$('#3G').live('click', function(){
if ($("#info").hasClass("3")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/gold.html')
}).slideToggle('slow').addClass("3");
});
css for style.css:
#info {
display: none;
overflow: hidden;
height: 120px;
}
some other script that changes:
$('#brz').load('_packages/bronze.html');
$('#slv').load('_packages/silver.html');
$('#gld').load('_packages/gold.html');
The above can all just go away.
EDIT
I added the code I mentioned in my comment to prevent the buttons from functioning if the click is on the currently selected item. It's probably not the most elegant solution but it works. I add the class 1, 2, or 3 depending on the item clicked, and remove all of them upon a click of a different one.
The issue here is that the 3 divs #brz, #slv, and #gld are not wrapped in a div that will prevent the button below from moving because it is always the same height regardless of the movement of the content inside of it.
try:
<div style="[some height]">
// your three content divs
<div id="brz"></div>
<div id="slv"></div>
<div id="gld"></div>
</div>
the [some height] should be equal to whatever height you need it to be so that it will not be affected by the changes of the content inside the div.

Categories