I am getting unwanted class (.page) as the page loads with css property display: none, which makes the content invisible. I haven't inserted any class(.page). I have tried to undo the css property none to block via a JS but its not working. I can't figure out the problem. Its strange.
Here is the html that I actually coded:
<div class="deck-background"></div>
<div id="page">
<div id="main">
<div id="content" class="column" role="main">
<a id="main-content"></a>
<the main html content sits here>
</div>
</div>
</div>
This I am getting as the page loads. Please note two new divs with class (.page).
<div class="deck-background"></div>
<div id="page">
<div id="main">
<div id="content" class="column" role="main">
<div class="page" style="display: block;">
<a id="main-content"></a>
</div>
<div class="page" style="display: none;">
<the main html content sits here>
</div>
</div>
</div>
</div>
Here is the JS:
<script type="text/javascript">
window.onload = function() {
function showHide(id) {
var el = document.querySelectorAll('.page')
if( el && el.style.display == 'block')
el.style.display = 'none';
else
el.style.display = 'block';
}
}
</script>
Here is the JS
window.onload = function() {
var nodes = document.querySelectorAll('.page');
[].forEach.call(el, function(el){
el.style.display = "block";
});
}
Related
Hello I would like to reach a level 3 div and change the style of this div
in my example I would therefore like to be able to apply disply:none on style color red
to make the word Warning invisible
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
To select 3rd level div:
document.querySelector('#Zone > div > div > div')
Now the problem is you have 4 div at 3rd level. So needed to select all and check style color. That gives:
const warningNone = () => {
Array.from(document.querySelectorAll('#Zone > div > div > div')).forEach(el => {
if (el) {
if (el.style.color === 'red') {
el.style.display = 'none';
}
}
})
}
window.addEventListener('load', warningNone);
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
I modified the snippet to check the >div>div>div existence
By the way, I put the function to be fired when document loaded, otherwise your red will not apply
3...
try to split the query line in 2:
const warningNone = () => {
const els = document.querySelectorAll('#Zone > div > div > div');
els.forEach(el => {
if (el.style.color === 'red') {
el.style.display = 'none';
}
})
}
window.addEventListener('load', warningNone);
now in dev tools check which line fire the error
I'd expect this to pop up an alert for any div I click inside the section id playGrid, but it does nothing.
<div id="playGrid" class="w">
<section>
<div id="0_0"></div>
<div id="0_1"></div>
<div id="0_2"></div>
<div id="0_3"></div>
<div id="1_0"></div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
JavaScript
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
el.addEventListener('click', function() {
alert(this.id);
});
});
I think the problem is that your code runs before the document is fully loaded. To run your code after page is loaded add event listener for 'DOMContentLoaded' event:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
el.addEventListener('click', function() {
alert(this.id);
});
});
});
https://codepen.io/mikhailsidorov/pen/BaoPKoX
two options add content like so
<section>
<div id="0_0">content</div>
<div id="0_1">content</div>
<div id="0_2">content</div>
<div id="0_3">content</div>
<div id="1_0">content</div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
or use css by adding a class .content to all your divs :
.content{
height: 10px;
width:10px;
}
Something like this should work. Also, make sure your script is being executed after the page loads, not before. Use the defer tag on your <script> element or move the <script> element to the end of your body.
[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
div.addEventListener('click', (event) => {
alert(event.currentTarget.id);
});
});
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div class="container-fluid">
<div id="header">
<div>
</div>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class = "nav-tabs">A</li>
<li class = "nav-tabs">B</li>
<li class = "nav-tabs">C</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="a">
<div class="panel-body">A content</div>
</div>
<div class="tab-pane" id="b">
<div class="panel-body">B content</div>
</div>
<div class="tab-pane" id="c">
<div class="panel-body">C content</div>
</div>
</div>
</div>
<br>
<div class="row" id="container"> image </div>
</body>
This is the HTML code, I have a three column panel showing A, B and C using bootstrap.
Underneath the content, there is a container with id = "container" at the bottom of all panels.
Here is my question:
I want to only have id = "container" shown under panel A, B. However, I don't want the panel C showing id = "container" . Is there any way to realize this?
You can use Hide()
<script src="scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#c").hide();
})
</script>
Try this using jQuery:
$("#c").hasClass("active") {
$("#container").hide()
} else {
$("#container").show()
}
Or if you prefer a more CSS method:
$("#c").hasClass("active") {
$("#container").css("visibility", "hidden")
} else {
$("#container").css("visibility", "visible")
}
First add the class for the all '''li''' items
class = "nav-tabs"
Second, we need to add '''$(document).ready(function()''' to refresh the page, thus the "class" will be updated
$(".nav-tabs").on( "click", function() {
$(document).ready(function() {
bindClick();
})
});
function bindClick(){
if ( $("#c").hasClass("active")){
$("#container").hide()
} else {
$("#container").show();
}
}
I have a page in which there is an anchor tag: jump to div2.
This anchor tag opens tut.html, which has a div with id=div2:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
By default, the contents of div2 are hidden. How can I display or fade in its contents when a user clicks on a hyperlink in another page?
You can easily check the hash that is passed in and use that to display the appropriate block:
window.onload = function(){
var element = document.querySelector(location.hash);
if(element) element.style.display = "block";
}
your href link should not link to the page, just to the anchor :
<a class="myButton" href="#div2">link</a>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
Using jQuery, you should have a function in the bottom of your document which would handle your click like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(function () {
$('a.myButton').on('click', function(event){
event.preventDefault();
$('div2').fadeIn('slow');
return false;
})
});
</script>
If the link goes to a new page:
link
On the bottom of the new page 'tut.html' :
<script>
$(function () {
var hash = window.location.hash;
if(hash == '#div2') $(hash).fadeIn('slow');
});
</script>
I have an iframe on which it opens a page which has three links.
I want to show the div on one of its links. Please suggest what to do.
Here is my code:
<div id="divTest" runat="server" >
this is a test div // Hide this div
</div>
<div class="inner-ca" style="width: 981px;">
<div class="main" style="width: 932px;">
<div id="page_FAQ">
To have a full view click here
<h2>Locate Us</h2>
<div class="box1_bot">
<div class="box1_left">
<div class="box1_right">
<div class="box1" style="border:0px;">
<iframe src="Default.aspx" width="100%" height="675" style="position: relative;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please suggest..!!!
Plain JS assuming both pages from same origin.
I gave the iFrame an ID and an onload
Working example
function assignHandler() {
var ifr = document.getElementById("iframe1");
var iframeDocument = ifr.contentDocument || ifr.contentWindow.document;
var links=iframeDocument.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
links[i].onclick=function() {
var div = parent.document.getElementById("divTest");
if (div) div.style.display=this.href.indexOf("Locker")!=-1?"block":"none";
return false; // remove when link is needed
}
}
}