I have this div:
<div id="flaw">
<img id='flaw1' src='images\flaw1.png'>
<img id='flaw2' src='images\flaw2.png'>
<img id='flaw3' src='images\flaw3.png'>
<img id='flaw4' src='images\flaw4.png'>
<img id='flaw5' src='images\flaw5.png'>
<img id='flaw6' src='images\flaw6.png'>
<img id='flaw7' src='images\flaw7.png'>
<img id='flaw8' src='images\flaw8.png'>
<img id='flaw9' src='images\flaw9.png'>
</div>
I'm trying to make 3 buttons. Every time 1 random button should be good. the other 2 bad buttons should make 1 of the images appear.
If you click the wrong button 9 times, all images will be visible and you would lose the game.
First I tried putting all images in an array, but I kept failing...
Eventually I ended up with this;
$(document).ready(function () {
var buttons = $("#buttons img");
var flaw = $("#flaw img");
window.onload = function () {
flaw.hide();
};
buttons.on('click', function () {
$("#flaw1").show();
})
});
All it has to do now is show the first image when someone clicks a button.
And show the next image when someone clicks it again and again and again.
Until all 9 images are visible.
But I could figure out how to loop through the images on every click.
Can anyone help me?
you can do something like this
var flaws = $("#flaw img");
buttons.on('click', function () {
flaws.each(function(){
if ( ($(this).is(":hidden") ){
$(this).show();
break;
}
});
})
For further refernces check
http://api.jquery.com/hidden-selector/
http://api.jquery.com/each/
Related
I'm using a plugin that creates another WebView (Appodeal banners) that overlaps the main apps WebView. Theres not a good way to fix that manipulating the HTML tags because elements mess
Default banner settings
32px : device screen height <= 400
50px : 400 < device screen height
<= 720
90px = device screen height > 720
So the webview must resize height according to Appodeal banner height.
Example:
if (device.screen.height <= 400) {
WebView.height = WebView.height - "32px"
}
PS: I'm not Java programmer Web developer only
I'm not sure you have to resize your root webview on Admob banner show (I'm not even sure it is possible at all). But all that you need to do is to re-layout content of your main webview when banner is shown.
If I understood your post right, you use Appodeal PhoneGap Plugin that really uses one more webview component to show ads. In this case you know everything about:
Banner placement (top or bottom), b/c you request it explicitly (Appodeal.BANNER_TOP | Appodeal.BANNER_BOTTOM);
Banner size (you described it yourself in question);
A fact that banner is appeared (document.addEventListener('onBannerShown', function(){...}););
So, I'd just prepare an empty placeholders in my HTML template, add CSS rules that will hide them when no Appodeal banner shown, and onBannerShown event will display corresponding placeholder and resize all my webview content.
<style>
.appodeal-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
}
.main-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.appodeal-show .appodeal-top {
/* replace it with appropriate value calculated on device height */
height: 50px;
}
.appodeal-show .main-content {
/* replace it with appropriate value calculated on device height */
top: 50px;
}
</style>
<script>
document.addEventListener('onBannerShown', function(){
document.getElementById('root').className = 'appodeal-show';
});
</script>
<div id="root">
<div class="appodeal-top"></div>
<div class="main-content">
...
</div>
</div>
(I didn't try this code - it just shows you an idea).
On clicking these radio button it just call servlet and fill the Dropdown list to its content.
but the problem is on clicking the 1st time it is filling as expected but if I click againg the radio button then it again call the servlet and fill the same thing again(for eg. in the dropdown list matrix and matrix two times).
Q1 : How do i prevent this to fill the same thing again ????
second thing is, after clicking the 1st radio button it will fill the dropdown let suppose "matrix" value and then if click the another radio button the it will fill the another value let suppose "jack" (as expected) but the problem is,
In the dropdown list both the value is contained "matrix" and "jack" but I just want if I click 1st radio button then it fill only "matrix" and again if I click 2nd radio button the it fill only "jack" the 1st radio button's value should be removed before filling the another radio button's value Q2: how to do this ??
jsp page:-
<b>Select Language :</b>
<input type="radio" onclick="callServlet();" id="lang1" name="lang" value="c">C
<input type="radio" onclick="callServlet();" id="lang2" name="lang" value="cpp">C++
<input type="radio" onclick="callServlet();" id="lang3" name="lang" value="java">Java
<b>Select Program :</b>
<select id="combo">
<option>-Select Program-</option>
</select>
Here is my java script function which will called on clicking the radio button function:-
<script>
function callServlet()
{
var d;
$(function() {
d = $('input[name=lang]:checked').val();
});
console.log("value = " + d);
$.ajax({
url: "AllProgramNameServlet",
type: "post",
data: {
language: d
},
success: function(msg)
{
for (i = 0; i < msg.length; i++)
{
var combo = document.getElementById("combo");
var option = document.createElement("option");
option.text = msg[i].programName;
option.value = msg[i].programName;
try {
combo.add(option, null); //Standard
} catch (error) {
combo.add(option); // IE only
}
}
}
});
}
</script>
You can first clear the dropdownlist before appending options using:
$('#combo').empty(); //empty the list
or for keeping first option and removing rest using:
$('#combo option:gt(0)').remove();
I have two textareas in jsp page the values entered in first textarea value should be displayed in next text area frequently using jQuery.
Here is the code I've tried so far
function getMsg()
{
document.getElementById("chatBox").value =
document.getElementById("messageBox").value;
document.getElementById("messageBox").value=""; }'
}
$(function() {
$("#test1").keyup(function() {
$('#test2').val(this.value);
});
});
Is this you were expecting
$(document).ready(function () {
$('#firsttext_area').keyup(function () {
$("#sectext_area").val( $('#firsttext_area').val());
});
});
Demo in fiddle
In jquery you can try the following
$("#textAreaOne").keyup(function() {
$("#textAreaTwo").val($("#textAreaOne").val());
});
Update:
It sounds from your comment that you want to append text to the second text area, you would have to create a button that the user will click to fire your event
Create a button, for example
<button id="chatButton">Chat</button>
Then wire the buttons onclick event to perform the append functionality, for example
$("#chatButton").click(function() {
$("#textAreaTwo").val($("#textAreaTwo").val() + "\n\n" + $("textAreaOne").val());
});
This is what the exact answer for my question. I tried with this and it is working.
<script>
var tempMsg;
function getValue()
{
var userMsg="Me: "+document.getElementById("messageBox").value;
var chatMsg=document.getElementById("chatBox");
tempMsg=chatMsg.innerHTML+=userMsg+"\n\n";
}
</script>
You can implement this by event onChange.
I want to show a panelGroup dynamically.
In this code, I have boxes which can be filled up. When the last available box is filled up with data, a panelGroup with a new set of boxes should show up.
<ice:panelGroup binding="#{myPage.boxes0to9}" />
<ice:panelGroup binding="#{myPage.boxes10to19}" />
How do I let the second panelGroup display only when the last box in #{myPage.boxes0to9} has been filled in?
Thanks!
You can achieve it by wrapping the <ice:panelGroup> with a div and show/hide it by a javascript check:
<script type="text/javascript">
var arrInputs = new Array(9);
function checkInputsFulfilled(value, index) {
arrInputs[index] = (value == "");
var filled = true;
for(var i = 0; i < arrInputs.length; i++) {
if (arrInputs[i]) {
filled = false;
break;
}
}
document.getElementById("myDiv").style.display = filled ? "block" : "none";
}
</script>
<ice:panelGroup binding="#{myPage.boxes0to9}">
<!-- your 9 inputs (or more) here, I'll write 1 as a sample -->
<h:inputText value="#{myBean.attribute1}" onchange="checkInputsFulfilled(this.value, 0);" />
</ice:panelGroup>
<div id="myDiv" style="display:none">
<ice:panelGroup binding="#{myPage.boxes10to19}">
</ice:panelGroup>
</div>
You can also do it using an ajax support and rendered a JSF component that wraps the second <ice:panelGroup> but this will have a big impact when you just empty one of yout starting inputs and the group should hidden. Of course, this last behavior is controlled in the javascript, if you dont want it just modify it :).
Is it possible to get the height of a 'text' field from mysql?
Or the number of linebreaks would also work!
I have a table which fetches the 'text' field from my mysql database.
The background image of the table is sort of a container...
I want the background to change to another (taller) background if the text is vertically high!
Possible, if so how?
Thanks
UPDATE: I am not going to use word wrapping...
In your query you can count how many instances of '\n' are found. You can do this in javascript or php as well. This wouldn't be totally accurate though if you're word wrapping.
How to do it with php
Alternatively... to grab the height with javascript:
document.getElementById('mytable').clientHeight;
Very difficult, as you're never going to be able to predict font size with 100% certainty (Users could have enlarged text in their browser, for instance, or be using a different font).
If you want to make 100% sure, you would need to use Javascript to measure the actual size.
Otherwise, for most cases, as #Chris Klepeis says, counting the line breaks should work.
I think this will be help but i used textarea here and i test it will be working fine u just need apply it on table.
<textarea data-adaptheight rows="3" cols="40" placeholder="Your input" style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function() {
function adjustHeight(textareaElement, minHeight) {
// compute the height difference which is caused by border and outline
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
el.style.height = 0;
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
}
var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
textAreas.forEach(function(el) {
el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
el.style.overflowY = 'hidden';
var minHeight = el.scrollHeight;
el.addEventListener('input', function() {
adjustHeight(el, minHeight);
});
window.addEventListener('resize', function() {
adjustHeight(el, minHeight);
});
adjustHeight(el, minHeight);
});
}());
</script>