I have two elements, the first one is the default to print on screen
<input id=post-category value="first">
and the other is this, which will only show if some onclick was made and of course the first element must show off
<select id=cat-sel ><option>second</option></select>
UPDATED
I tried this code
el = document.getElementById("post-category");
el.style.visibility = "hidden";
el2 = document.getElementById("cat-sel");
el2.style.visibility = "visible";
but the problem here is, the 2nd element is indented. because it escapes the space for the 1st element. I don't like that, I wanted them to be on the same position
Change to
el = document.getElementById("post-category");
el.style.display = "none";
el2 = document.getElementById("cat-sel");
el2.style.display = "block";
since visible/hidden does not remove the space the element takes up on the page
You need to set display:none on the field you need to hide initially
Assuming a checkbox have
window.onload=function() {
document.getElementById("categoryCheckbox").onclick=function() {
var chk = this.checked;
document.getElementById("post-category").style.display = chk?"none":"block";
document.getElementById("cat-sel").style.display = chk?"block":"none";
}
}
PS: A little more code is needed for the show/hide to survive a reload by the way...
Define CSS for your ID's and fix the position.
Related
So i am trying to hide multiple html elements with one checkbox.
hiding one element works like a charm, but as soon as i have two it hides only the fist one what matches.
Fast demo what i am trying to do :
Checkbox :
<input type="checkbox" id="kaartCheck" onclick="kliendikaartF()">
Element what i am able to show:
<p id="kliendi_kaart_olemas_p" style="display:none">Kliendikaart on olemas!</p>
and element what i am not able to show : (Basicly the same what is first
<p id="kliendi_kaart_olemas_p" style="display:none">Second element shoult apear</p>
and js what i am using for that :
function kliendikaartF() {
var checkBox = document.getElementById("kaartCheck");
var text = document.getElementById("kliendi_kaart_olemas_p");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
So long story short, i have multiple elements what i would like to hide with one click, i would give them all the same ID : kliendi_kaart_olemas_p and show / hide them with one checkbox.
I think you have to use querySelectorAll() method for select all element by attribute. This will returns array of all element which is matched by attribute and its value. then you have to iterate all one by one in for loop.
function kliendikaartF() {
var checkBox = document.getElementById("kaartCheck");
var allElements= document.querySelectorAll('[id="kliendi_kaart_olemas_p"]');
var new_display_value="none";
if (checkBox.checked == true){
new_display_value = "block";
}
for(i=0;i<allElements.length;i++){
allElements[i].style.display=new_display_value;
}
}
document.getElementById will only return the first element matching that id.
If you want to select all IDs or classes, use document.querySelector('#idhere')
Use a classs name as kliendi_kaart_olemas_p beacuse here You have created id and id is the unique name of an item in the whole page. If you take the id and modify that element It will only update the element which found first.
<p class="kliendi_kaart_olemas_p" style="display:none">Kliendikaart on olemas!/p>
and
<p class="kliendi_kaart_olemas_p" style="display:none">Kliendikaart on olemas!/p>
then initailize you varibale like
var text = document.getElementsByClassName("kliendi_kaart_olemas_p");
Your problem will be solved
Im trying to have a href link expand/display extra text when clicked however when I click it nothing happens.
When I run the html code I can click on the link but it does not show the text for some reason.
Any idea why?
Heres the code:
<html>
click to expand
<div id="divID" style="display: none;">this is expanded</div>
</html>
I'm trying to keep the code as short as possible as the above code will have to be repeated hundreds of times for each link.
Assuming you're using jQuery, you are using the CSS selector incorrectly. Your line should be this:
click to expand
The # in #divID represents any element with an id of divID, whereas just using divID will search for divID tags (something like <divID></divID>)
See here for more documentation on the ID Selector and here's a list of all the CSS selectors you can use, including the Element Selector for you to understand why your previous code didn't work.
You can also combine CSS selectors to narrow your selection in the future, although it's not much necessary with an ID selector:
click to expand
And if you absolutely insist on not using jQuery:
click to expand
or breaking it out into its own function:
<script>
function toggleElementById(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
click to expand
Add this to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Then:
$('#divID').toggle();
I see you're using jQuery, right? So I wrote your answer in jQuery..
$('.toggle').click(function () {
var selected = $(this).attr('href');
$('.expandable'+selected).toggle();
});
Check out the jsfiddle
If you're not using jQuery than here is the javascript version (html changed).
var expandable = document.getElementsByClassName("expandable");
for (i = 0; i < expandable.length; ++i) {
expandable[i].setAttribute('style','display: none;');
}
var toggle = document.getElementsByClassName("toggle");
for (i = 0; i < toggle.length; ++i) {
toggle[i].setAttribute('onclick','toggler(this)');
}
function toggler(obj) {
var id = obj.dataset.toggle,
el = document.getElementById(id);
el.style.display = (el.style.display != 'none' ? 'none' : '');
}
Check out the jsfiddle
JavaScript:
function hide_article() {
var htmlElement = document.getElementsByTagName("article")[0];
htmlElement.setAttribute("visibility", "hidden");
console.log("hiding");
};
HTML:
<div id="right-hand-side">
<img src="resources/Logo.png" onmouseover="hide_article()" onclick="hide_article()"/>
</div>
This function is being called but the article is not being hidden. Any idea why? Cheers.
Yes - visibility is a CSS rule name, not an HTML attribute.
htmlElement.style.visibility = 'hidden';
Bear in mind, though, that, unless you have good reason to use visibility (and there are some), you'd normally hide elements via display (= 'none') rather than via visibility.
Also, you're assuming that your function will find an element. If it doesn't, your code will error. Best to check this first:
function hide_article() {
var htmlElements = document.getElementsByTagName("article");
if (htmlElements.length) { //<-- check before continuing
htmlElements[0].style.visibility = "hidden";
console.log("hid element");
}
};
This is the statement that you want:
htmlElement.style.visibility = 'hidden';
My goal here is to make multiple divs editable by the click of a button. Is there a way to do this by using a class instead of an ID? I'd like to be able to add the editable class to multiple divs throughout my site. Is there a plugin or module that would be well suited for this task? I don't want to edit the code or formatting in the browser, the text content only.
Your thoughts?
test test test test1
test test test test2
test test test test3
<script>
var editorBtn = document.getElementsByClassName('editBtn');
var element = document.getElementsByClassName('editable');
editorBtn.addEventListener('click', function(e) {
e.preventDefault();
if (element.isContentEditable) {
element.contentEditable = 'false';
editBtn.innerHTML = 'update';
} else {
element.contentEditable = 'true';
editBtn.innerHTML = 'done';
}
});
</script>
getElementsByClassName is going to return an array. You probably want to access your button via ID, and the elements via class.
<script>
var editorBtn = document.getElementById('editBtn');
editorBtn.addEventListener('click', function(e) {
e.preventDefault();
var elements = document.getElementsByClassName('editable');
for(var i =0;i<elements.length;i++){
if (elements[i].isContentEditable) {
elements[i].contentEditable = 'false';
editBtn.innerHTML = 'update';
} else {
elements[i].contentEditable = 'true';
editBtn.innerHTML = 'done';
}
}
});
</script>
you should probably pull the editBtn.innerHTML outside the loop, but, since you are making them all editable, or all not editable, it should work as desired as-is.
Add 'editable' class to to your hearts content.
Edit: The above is just an example of how to modify attributes to elements with a given class name (editable). Whether the attributes you are modifying will achieve your desired goal of making the element allow/prohibit editing, is not guaranteed.
If you want to add a class to a set of divs or elements, use Jquery
$(".classToSelect").addClass("classToInsert")
If this is not what you want, plz clarify your question
I Have created Custom Alert Box in Javascript . I Have added text with images. but It is not align proberly. It came some thing like this.
I am trying to add the correct mark and text with same line, how can I achieve this. can anyone please help me. I have added my Custom alert box Function below.
function createCustomAlert(txt, string_url,fd) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if (d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if (d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
btn2 = alertObj.appendChild(d.createElement("img"));
btn2.id = "fd";
btn2.src = fd;
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
//btn = alertObj.appendChild(d.createElement("a"));
//btn.id = "closeBtn";
//btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
//btn.href = "";
btn = alertObj.appendChild(d.createElement("img"));
btn.id = "closeBtn";
btn.src = 'new-go-next2.png';
btn.href="#ss";
//btn.height="30px";
//btn.width="30px";
//btn.href="#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function () { removeCustomAlert(); window.location = string_url; return false; }
}
well yes creating a table would be a great approach to solve your problems , btw u can also try some internal divs with proper position anf the element having correct float attribute
Rather creating div element create table with two Columns. First of which will contain 'Image' for OK and Second one will contain your 'Text'.
Check if this helps.