i have the following code :
<html>
<head><title></title>
<script>
function showMe (it, box) {
var vis = (box.checked) ? "none" : "block";
document.getElementById(it).style.display = vis;
}
</script>
</head>
<body>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<div id="div1">
<h3 align="center"> test </h3>
</div>
<form>
</form>
</body>
I want to toggle the div, the code above works however when the script loads the div is visible. How can i set the div to hidden when the script loads? (i know that if i set the div outside the tags it works however i want to toggle them inside).
Set the div tag to display:none initially. And flip the condition of the if.
Like:
function showMe (it, box) {
var vis = (box.checked) ? "block":"none";
document.getElementById(it).style.display = vis;
}
<div id="div1" style="display:none">
I do something very similar on one of my pages and I include this in the div
style="display:none"
That seems to work for me, and then it gets changed to block when i click my show/hide button
Related
first am sorry for bad English / grammar
am creating something where you show and hide.
but my problem is that when I click show/hide it only brings input box 1 on both buttons. and I want it to show/hide each box.
my problem is that. I don't want to use the id to define show/hide Element
because if I have more than 10 div with input boxes I have to define them all by getElementById I don't want that.
I want when I click on the show/hide it brings input box without getElementById
so that even if I have more then 10 input box to show I only click and show/hide without defining its id
function myFunction(event) {
var x = document.getElementById("mydv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
x.parentNode.insertBefore(x, event.target.nextSibling);
}
document.addEventListener('click', function(event){
if(event.target.className.includes("dv1")){
myFunction(event);
}
});
<!DOCTYPE html>
<html>
<head>
<title> SHOW / Hide </title>
</head>
<body>
<ul>
<li>
<div id="mydv" style="display:none;">
<p>input box 1
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button>
</li>
<li><div id="mydv" style="display:none;">
<p>input box 2
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button></li>
</ul>
</body>
</html>
If you want to specify an element on a page, that can be similar in every way to other elements except perhaps text content or something else, realistically you need an id, as this is how JavaScript defines a unique element.
But what you can do, is change your HTML button, to contain a rel, which is an attribute, and then get that attribute and use that to specify which element id you're looking for.
You can then call a function and simply pass "this" as an argument.
HTML :
<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>
JavaScript :
<script>
function hideShow(elem){
var ele = document.getElementById(elem.getAttribute("rel"));
if(ele.style.display == "none"){
ele.style.display = "block";
}
else{
ele.style.display = "none";
}
}
</script>
If you are absolutely abhorrent to using ID's, you can use child nodes and specify which child by number, but this means if ever you change anything, you will break your code, which is foolish. I recommend using unique ID's and simply changing your code in the above ways.
Short and lazy answer to your problems - if you are going to keep your current hierarchy, you can simply find DIV tag inside your LI parentNode (since its the only DIV tag).
Basically it goes like this - button press -> change focus from button to parentNode LI -> finds DIV.
in short - in function myFunction(event) change
var x = document.getElementById("mydv");
to
var x = event.target.parentNode.getElementsByTagName("DIV")[0];
Working example:
https://jsfiddle.net/w2a9zg46/1/
The problem is that getElementById refers to the first element with that id. It simply ignores everything else. Using the same id for more than one element is a bad practice. An id should be a unique reference to that element, use class instead.
I added at my website created with Google Sites a button to hide/show a block of text. The problem is that in Chrome/Firefox it works, but in Safari it does not work.
I did not use javascript/JQuery because in google sites is not simply to handle.
In the following the simple code i added.
How do I can solve this problem?
<div class="nascosto">
<input type="button" value="Abstract" onclick="
if (this.parentNode.nextSibling.childNodes[0].style.display != '')
{ this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Abstract'; }
else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Abstract'; }" />
</div><div><div class="nascosto" style="display: none;">
<p>Insert here
</p>
</div></div>
for me there is an error in firefox, too. I've found out, that the next sibling of the first div is a text-element. I found this out with a console.log of the nodename. You can see it in the code-example below. For me the following code is working now, but I cannot test this in safari.
Also the function is not called childNodes, but children. Maybe this is a problem for safari.
Please put the functionality in an separate function on top or at the bottom of the page. The way you've done it is not really great.
function doSomething(element) {
console.log(element.parentNode.nextSibling.nodeName);
if (element.parentNode.nextSibling.nextSibling.children[0].style.display != 'block') {
element.parentNode.nextSibling.nextSibling.children[0].style.display = 'block';
this.value = 'Abstract';
} else {
element.parentNode.nextSibling.nextSibling.children[0].style.display = 'none';
this.value = 'Abstract';
}
}
<div class="hide">
<input type="button" value="Abstract" onclick="doSomething(this)" />
</div>
<div id="test2">
<div class="hide" style="display: none;">
<p>Insert text here</p>
</div>
</div>
so i have a little problem i have code like that trying to create a mobile website with jquerymobile...
HTML:
<div>
<input type="text" id="first">
</div>
<div>
<input type="text" id="second">
</div>
<button id="testButton">
Checking
</button>
<div data-role="popup" id="popup"><p>I am a Popup</p></div>
js/jquery...
var begin = $("#first").val();
var end = $("#second").val();
$(document).on("click","#testButton", function(){
if(begin > end){
$("#popup").popup("open");
$("#second").css({"border": "2px solid red"});
}
})
So what i wanna do is, if the inserted value of Begin is greater then the value of End. A Popup should be activated and then AFTER the popup is clicked away by the user the End input element should get a red border. I can only make it work that the border and the popup take effect at the same moment the button is clicked and not step by step. Is there a way to check if the popup is closed and then set the border?
You can use the popup's afterClose event:
$("#popup").on( "popupafterclose", function( event, ui ) {
$("#second").css({"border": "2px solid red"});
});
DEMO
I have this html/smarty code for a radio button. I would like to extend the area for the selection of the radio button so that the user can more easily select it on this page?
The classic trick of using label is insufficient here. All the actions performed when clicking the button must be performed, see the onchange parameters. I need to make a clickable zone including at least the whole table that contains this line, or even better: a zone that also contains the image above each radio button.
Is that possible in html, css, jquery?
Thanks
<tr>
<td valign="top">
<input value="{$id_attribute|intval}" class="{$groupName}" type="radio" name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination({$groupName});changeCombinationPrice();{if $groupName=='group_1'}getCheckedValue(document.forms['buy_block_form'].elements['group_1']);scaleImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}.jpg');{else if $groupName=='group_2'}changeImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}',{$id_attribute|intval}); {/if}" {if ($groupName=='group_1' and $countGroup1==1) } checked {/if} />
</td>
{assign var="hrup" value=$group_attribute|escape:'htmlall':'UTF-8'|lower}
{if $feact==$hrup}
<td width="17" valign="top">
<script language="javascript" >
Tooltips('{$feact},{$hrup}');
</script>
<div class="tooltip">
<div class="toolimg"><img src="/pixelart/img/layout/corazon.jpg">
</div>
<div class="tooldescrip">{l s="Finition recommandée par l'artiste"}
</div>
</div>
{/if}
</td>
<td>
<div class="imputgroup_{$id_attribute|intval}">{$group_attribute|escape:'htmlall':'UTF-8'}
</div>
</td>
</tr>
<tr>
You need to wrap the clickable content in another tag (A is appropriate) and hook up the event handler to that tag. You'll also have to switch the radio buttons in JavaScript accordingly.
wrapped the area with a a tag:
<a href="Javascript:void()" id="radioClickAreaid{$id_attribute|intval}" onclick="radioClickArea(document.forms['buy_block_form'].elements['{$groupName}'], '{$id_attribute|intval}');javascript:findCombination({$groupName});changeCombinationPrice();{if $groupName=='group_1'}getCheckedValue(document.forms['buy_block_form'].elements['group_1']);scaleImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}.jpg');{else if $groupName=='group_2'}changeImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}',{$id_attribute|intval}); {/if}">
that has the same onclick parameters as the onchange from the radio button (not very elegant though!), and that calls a javascript function:
function radioClickArea(radioObj, id_attribute) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == id_attribute.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == id_attribute.toString()) {
radioObj[i].checked = true;
}
}
return false; // so that the link goes nowhere
}
The radio button gets selected OK.
Is there a way not to repeat the onchange/onclick parameters?
Or like suggested here - use tag surrounding your radiobutton or checkbox:
How can I make an HTML radiobutton with a big target area?
I'm not a web guy, so this might be something really simple I'm missing, but:
Consider the following page:
http://pastehtml.com/view/1bg9qno.html
Which is basically a list of <input>s, and each input has a helper <span> with text (that will change along with the input's value on keyUp).
So when the list is long enough (like in the above HTML page), if you tab thru the inputs, you will eventually get to the input on the bottom of the page, tab again, and the browser will scroll down to the next input.
In my case, the input has the helper text which is crucial to my app.
The problem is that when the user tabs down to the input that is not visible, the browser only brings that input into the view, and not his entire parent (<div class="item">) which contains the helper text. As a result, this helper text is not visible to the user while he enters stuff in the input.
How can one tell the browser to bring the entire parent into view when focusing the out-of-view input?
Is there any elegant solution?
BTW: This doesn't happen in Chrome, since Chrome always scrolls down a part-page, but it always happens in Firefox which always scrolls as little as possible to the input.
The HTML looks like this:
<body>
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
<hr />
...
<hr />
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
</body>
<html>
<head>
<script>
function scrollParentIntoView(elem){
setTimeout(function(){
var children = elem.parentNode.children;
var lastChild = children[children.length - 1];
lastChild.scrollIntoView();
elem.parentNode.scrollIntoView();
//elem.ScrollIntoView();
},1);
}
</script>
</head>
<body>
...
<div>
<input onfocus="scrollParentIntoView(this);" />
...
<p>end</p>
</div>
...
</body>
</html>
I've tested on FF and Chrome and seems to do the job - you can see the input and 'end' when each '...' is replaced with a dozen tags
Here is a solution using jQuery. It's based on the height of your item container.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".item input").focus(function() {
var parent = $(this).parent();
// Check if the bottom of the item container is below the viewport
if ($(parent).position().top + $(parent).height() > $(window).scrollTop() + $(window).height())
{
// Adjust the scroll position according to the height of the item container
$(window).scrollTop($(window).scrollTop() + $(parent).height());
}
});
});
</script>
Edit
Here is a demo for you: http://pastehtml.com/view/1bnv1xb.html
This Javascript works in FF 3.6, IE 8, Safari 4, and Chrome 3.1. It doesn't require JQuery, doesn't need setTimeouts, and can be condensed to about 8 lines:
//Collect the elements
var ALL = document.getElementsByTagName("INPUT");
for(x=0;x<ALL.length;x++) {
//Add relative position style to allow offset math
ALL.style.position = 'relative';
ALL[x].onfocus = function() {
//Find scroll offset distance
var temp = this.offsetParent.offsetTop +
this.offsetParent.offsetHeight -
document.documentElement.clientHeight;
//Detect webkit browser and apply scroll offset as appropriate
window.devicePixelRatio ?
document.body.scrollTop = temp :
document.documentElement.scrollTop = temp;
}
}
Of course, the obvious solution here is to put all the important content above the input element, but it's obvious that that won't do for whatever reason, so here's another solution:
Remember that tabindex can be used to allow any element to be focused. This means that we can simply drop a tabindex on the parent of the input elements to allow the entire parent to gain focus and scroll into view.
However, this also means that tab must be tapped twice to get the input element focused. You will also need to explicitly set tabindex on the input element to have them be the next in line to gain focus.
<ol id="input">
<li tabindex="3">
<input type="text" tabindex="5" />
<p>Helper Text</p>
</li>
<li tabindex="7">
<input type="text" tabindex="10" />
<p>Helper Text</p>
</li>
</ol>
You'll also want to give the parent elements a :focus style instead of the rather ugly dotted outline.
See: http://www.jsfiddle.net/F2fwy/2