Can someone show a way to show/hide a span using javascript
document.getElementById("test").style.display= 'visible';
document.getElementById("test").style.display= 'block';
In the HTML Code
<span id='test' ..
How can I overcome this problem. Is there any thing that I should think about?
UPDATE
I have a class like this one, I want to force mouse hovering on it.
<div id="test" class="tooltip effect">
<div id="second" href="#"> .. </div>
On css:
tooltip{..}
effect{..}
effect:hover{..}
Another option I tried besides your code is
document.getElementById("test").onmouseover = test.hover;
Should I re-write the hover class to another name-class, or should I tweak your code?
Use display none/default:
document.getElementById("test").style.display= 'none';
document.getElementById("test").style.display= '';
Below are some types and some easy to remember rules about them:
Default: the elements default property (generally block or inline)
Block: Generally on a line by itself. Has the width and height attributes (among other size/positioning attributes)
inline: on the same line as other elements/text. Does not have height/width attributes
Inherit: Inherits the parent element's display type
visible isn't a value for the display, you want none
I would do something like this to handle it:
function HideAndSeek(selector) {
var elements = undefined;
var displays = [];
if (!!selector.id) {
elements = [document.getElementById(selector.id)];
} else if (!!selector.class) {
elements = document.getElementsByClass(selector.class);
}
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
displays[elementIndex] = elements[elementIndex].style.display;
}
this.hide = function() {
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
elements[elementIndex].style.display = "none";
}
};
this.show = function() {
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
elements[elementIndex].style.display = displays[elementIndex];
}
};
}
This function can be used this way:
var hideAndSeek = new HideAndSeek({id: "test"});
and you can hide the element(s) by:
hideAndSeek.hide();
you can show them by:
hideAndSeek.show();
<span class="text-danger" id="spanAddressLine1" runat="server" style="display: none;"> //Here is your message </span>
JQuery code
For show:
$('#<%= spanAddressLine1.ClientID%>').show();
For hide:
$('#<%= spanAddressLine1.ClientID%>').hide();
Here spanAddressLine1 is the id of span
Related
I am looping through an array like this:
<% thoughts.docs.forEach(function(thought, i) { %>
<div class="square-box-container">
<div class="pyp-image-container">
<div class="image-overlay">
By default, element class name 'image-overlay' is hidden with display: 'none'. I am trying to create a function with an onclick event, so when user clicks on div 'square-box-container', the image overlay for that element only changes to display: 'block'.
Currently I have the below code but I think my inner loop in wrong, as when I click on a square box container, the image overlays for ALL the square box containers change to display: 'block', as opposed to that container overlay only. Can anyone advise what I'm doing wrong please?
var containerItems = document.getElementsByClassName("square-box-container");
var overlayItems = document.getElementsByClassName("image-overlay");
for (var i = 0; i < containerItems.length; i ++) {
containerItems[i].onclick = function() {
for (var i = 0; i < overlayItems.length; i ++) {
overlayItems[i].style.display = 'block';
}
}
}
I'm not very familiar with use of child nodes, is that what is required here? Thanks
If you want only the associated element to have its display changed, don't loop inside the click handler - and use let instead of var.
for (let i = 0; i < containerItems.length; i++) {
containerItems[i].onclick = function () {
overlayItems[i].style.display = 'block';
}
}
Another option is to omit the overlayItems collection entirely, and navigate from the clicked element instead.
for (const container of document.getElementsByClassName("square-box-container")) {
container.addEventListener('click', (e) => {
e.currentTarget.querySelector('.image-overlay').style.display = 'block';
});
}
I have a working grid that show a cell for every title in the json:
async function loop_iteration(json, i, arr) {
arr.push(`<a onClick="show()" class="cell" id=${i}"><div >${json[i].title}</div> </a>`)
arr.push(`<div class="info" id=${i}>${json[i].title}<br><br><br><br><br>Game Size: ${json[i].size}<br><br>Last Update: ${json[i].date}</div>`)
}
I want to show on click of the class info.
The problem is that it gives always the same title(first), it's like is always the first cell to be clicked
I show the info div like this:
<script>
function showinfo() {
var node = document.querySelector('.cell.info')
var visibility = node.style.visibility;
node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}
</script>
while if i show the div using this:
function show(){
var divsToHide = document.getElementsByClassName("info");
for(var i = 0; i < divsToHide.length; i++)
{
divsToHide[i].style.visibility="visible";
}
//document.getElementsByClassName('info')['${i}'].style.visibility = 'visible';
}
happen something strange, the div showed is not the first but is like it show all the div
Thanks for any help.
I find out the problem.
It was the javascript, so i extract the id and then iterate the class with the id
function show(clicked_id){
clicked_id = parseFloat(clicked_id);
document.getElementsByClassName('info')[clicked_id].style.visibility = 'visible';
}
This is supposed to be a very simple dropdown FAQ system, I know how to do this in jQuery but I want to learn plain JS.
I just want the individual clicked triggers to toggle the is-visible class to the content divs next to the clicked trigger. Like $(this).next addClass — just in JS.
I've really tried to search for this issue but 90% that shows up is how to do it in jQuery :-p
https://jsfiddle.net/48ea3ruz/
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
// access to individual triggers:
var trigger = allTriggers[i];
}
var allContent = document.querySelectorAll('.faq-content');
for (var i = 0; i < allContent.length; i++) {
// access to individual content divs:
var content = allContent[i];
}
// I don't know how to target the faq-content div next to the clicked faq-trigger
this.addEventListener('click', function() {
content.classList.toggle('is-visible');
});
Would really appreciate some advice! :-)
Use nextSibling, when you are iterating .faq-trigger
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
allTriggers[i].addEventListener('click', function() {
this.nextSibling.classList.toggle('is-visible');
});
}
nextSibling will also consider text-nodes, try nextElementSibling also
var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
allTriggers[i].addEventListener('click', function() {
this.nextElementSibling.classList.toggle('is-visible');
});
}
I'm trying to create a toggle button that can set the tags with class adsetTarget of HTML tags "li" to be hidden or visible on click event.
During page load, the state of "li" tags are hidden. This is the code that is setting the initial page load event to be hidden. This is working correctly.
var appBanners = document.getElementsByClassName('adsetTarget'), i;
for (var i = 0; i < appBanners.length; i ++) {
appBanners[i].style.display = 'none';
}
Below is the code that is trying to set toggle button functionality. On clicking first time, it is displaying the content, but on clicking it again, the content is not hiding, can someone help.
var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
for (var i = 0; i < adsetTargets.length; i ++) {
if (adsetTargets[i].style.display = 'none')
adsetTargets[i].style.display = '';
else
adsetTargets[i].style.display = 'none'; //this is not working, I believe
}
You have to change the following line:
if (adsetTargets[i].style.display == 'none')
Notice the double equals?
You can use this to make it senstive to any styling you apply to your elements.
It will remember the elements previous style and re-apply it(in theory heh)
function showhide() {
var adsetTargets = document.getElementsByClassName('adsetTarget'), i;
for (var i = 0; i < adsetTargets.length; i ++) {
if (adsetTargets[i].style.display == 'none') {
adsetTargets[i].style.display = adsetTargets[i].getAttribute('data-previous');
}
else {
adsetTargets[i].setAttribute('data-previous',adsetTargets[i].style.display);
adsetTargets[i].style.display = 'none'; //this is not working, I believe
}
}
}
<ul>
<li class="adsetTarget" style="display:table">abc</li>
<li class="adsetTarget" style="display:block">123</li>
<li class="adsetTarget" style="display:inline-block">def</li>
<li class="adsetTarget" style="display:inline-block">456</li>
</ul>
<input type="button" onclick="showhide()" value="click me">
Hi i am trying to change Display property of any HTML Tag with certain attribute..
But after many tries i am unable to change the tag properties.. My code is as below
function getAllElementsWithAttribute(attribute)
{
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].getAttribute(attribute))
{
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}
tags = getAllElementsWithAttribute('data-shares');
for(i=0;i<tags.length;i++)
{
tags[i].style.display = "none";
}
And the HTML has below Tag
<div class="shareTools" data-shares="facebook" data-url="#" data-title="Facebook" data-description="Facebook">
<div class="shareToolsBox">
<ul class="shareToolsList">
<li data-share="facebook">
<span>Facebook</span>
</li>
</ul>
</div>
</div>
Does anyone has any idea how to change Tag Style of any tag which has attribut i-e data-shares...
Change the function call to:
tags = getAllElementsWithAttribute('data-shares');
Here's it working on a JS Bin demo: http://jsbin.com/ufogExo/1/ The <div>s with the data-shares attribute are all hidden.
The problem was indeed the extra commas you had on your function call arguments.
I believe this does what you want:
function getAllElementsWithAttribute(attribute)
{
var items = document.querySelectorAll('['+attribute+']'),
i = items.length;
while ( i-- > 0 && (items[i].style.display = 'none') );
}
getAllElementsWithAttribute('data-shares');
see
http://jsfiddle.net/754zR/