Oke, so I am trying to create an interactive menu.
Now I am really struggling to make the JavaScript access the child nodes of a div and change a specific css element.
The html code goes as follow:
<div id="navbar">
Control panel
<div class="button" onclick="openMe(self);">
Users
<div class="sub-button">
Profile
</div>
<div class="sub-button">
Ban
</div>
</div>
<div class="button">
Roles
<div class="sub-button">
Profile
</div>
<div class="sub-button">
Ban
</div>
</div>
</div>
And the JavaScript is :
function openMe(a)
{
child = a.document.getElementsByClassName('sub-button');
console.log("a is "+a);
console.log("child is "+$(child).get());
console.log(self);
for (i = 0; i < child.length; i++){
//
console.log("Key "+i+" is "+child[i]);
console.log("Display for "+i+" is "+child[i].style.display);
if (child[i].style.display == "" || child[i].style.display == "none"){
child[i].style.display = "block";
} else {
child[i].style.display = "none";
}
}
}
In the css sub-button is hidden.
Now I have been trying to google, but I haven't found anything even close.
How can I make it that if I press button, the sub-buttons within button change css elements?
gr,
Angels
edit :
jsfiddle http://jsfiddle.net/r7tzr6dm/
The error is in the first line. When you would open the error console, a error message will occur.
Change the line a.document.getElementsByClassName('sub-button'); to a.getElementsByClassName('sub-button');.
The second error is change onclick="openMe(self); to onclick="openMe(this);.
Related
I'm trying to automate a voting system with a check if voting exist sorta. The DOM retrive the ID of a shortcode and then the script do a loop to find the exact ID. Then if one shortcode is activated it proceed else if the id of the shortcode is undefined it show a message. I checked the script with a static way and it works, but when I try to make it dynamic there's something that doesn't work. I'm a beginner so maybe it's a dumb error.
for (i = 1; i < 4; i++) {
//Getting the element using document.getElementById
var GravityFormCheck = document.getElementById("[id*='gform_wrapper_" + i+ "']")
//If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(GravityFormCheck) != 'undefined' && GravityFormCheck != null ){
console.log('there are votes in progress');
} else{
//Show the message and hide the div of the shortcode
document.getElementById("noVoting").hidden = false;
document.getElementById("Voting").hidden = true;
console.log('there are NO votes in progress');
}
}
<section class="slice">
<div id="voting" class="container-fluid">
<!-- This is the shortcode example. They are all included in the html file so they can be activeted by a thirdpart application -->
[gravityform id="other ids" title="false" description="true" ajax="true"]
<!-- This is the shortcode that generate the div below, I excluded all the other div's elements -->
[gravityform id="2" title="false" description="true" ajax="true"]
<div class="gf_browser_chrome gform_wrapper gravity-theme" id="gform_wrapper_2" style="">
</div>
</div>
</section>
<div class="text-center">
<h3 id="noVoting" hidden>The window for voting has concluded.</h3>
</div>
<br>
<hr>
I have 2 images displayed on a page. I want a message to appear when I click 1 image and it to disappear when I click the alternate one, then vice versa.
The jQuery code I created below seems to be working fine, but I am continuously getting an [object HTMLImageElement] message on the alternate image every time I click the one that is displaying the text.
$(document).ready(function(){
$("#gimp").click(function(){
var gimp = "Gimp message.";
var i = $("#qInkscape").text(inkscape);
if (i == true) {
$("#qInkscape").hide();
$("#qGimp").text(gimp);
} else {
$("#qGimp").text(gimp);
}
});
$("#inkscape").click(function(){
var inkscape = "Inkscape message";
var g = $("#qGimp").text(gimp);
if (g == true) {
$("#qGimp").hide();
$("#qInkscape").text(inkscape);
} else {
$("#qInkscape").text(inkscape);
}
});
});
And the html
<div class="mf-container">
<div class="mf-content">
<div class="row">
<div class="mf-third mf-center">
<img src="img/qualifications/gimp_g.png" class="mf-pic-unique mf-pic-
shadow mf-margin-top" id="gimp" alt="about gimp">
<p id="qGimp" class="mf-off-black-text"> </p>
</div>
<div class="mf-third mf-margin-top">
<p class="mf-center mf-off-black-text">Click on an image to learn more
about each technology</p>
</div>
<div class="mf-third mf-center">
<img src="img/qualifications/inkscape_G.png" class="mf-pic-unique mf-
pic-shadow mf-margin-top" id="inkscape" alt="about inkscape">
<p id="qInkscape" class="mf-off-black-text"> </p>
</div>
</div>
</div>
</div>
Brief synopsis of what I am doing: As of now I am trying to build a 6 x 6 grid and get some sign of life when I click on any of the grid boxes.
The result I want for now, is by clicking in any of the boxes I get a console message saying a piece was picked.
My main goal is to be able to differentiate between which box I picked, but first I need to figure it out generally.
HTML:
<div class="container">
<div class="row">
<div class="btn btn-lg btn-success col-lg-offset-4 col-md-4" id="makeBoard">Generate Board</div>
</div>
<div id="spacer"></div>
<div class="row">
<div class="col-md-12" id="newBoard"></div>
</div>
</div>
JQuery:
$(function(){
$('#makeBoard').click(function() {
var boardSize = 6;
makeBoard(boardSize);
});
function makeBoard(boardSize){
for(i = 0; i < boardSize; i++){
$('#newBoard').append("<div class='row' id='row"+i+"'>");
var row = "#row"+i;
for(j = 0; j < boardSize; j++){
var content = "<div class='col-md-2 boardPiece' id='"+i+"_"+j+"'></div>";
$(row).append(content);
}
$('#newBoard').append("</div>");
}
}
$('div.boardPiece').click(function() {
console.log("You clicked a piece!");
});
});
I double checked the html output by inspecting the element and indeed all the squares have the class 'boardPiece' but whenever I click on anywhere in the grid nothing gets logged in the console.
However, I have tried to console log the id 'newBoard' by clicking anywhere in the box and that worked. I'm assuming it has something to do with the boardPiece not being hardcoded in using HTML like newBoard is?
I'm using JS/JQuery so I can eventually change the board size from a form.
Thank you in advance.
Edit (Answer Below)
//Changed from this
$('div.boardPiece').click(function() {
console.log("You clicked a piece!");
});
//To this
$('.row').on("click", "div.boardPiece", function() {
console.log("You clicked a piece!");
});
I want to configure a hyperlink to close/open its related div in asp.net. Basically, when a user clicks the sign X, the panel should be closed and the sign + should be appeared. When + is clicked, the panel should be showed again. I could not manage this and I believe my main problem is "document.getElementById('<%= lb_closePanel.ClientID %>').value" is coming as undefined. Here is the code until now. I appreciate for your helps!
<!DOCTYPE html>
....
<div class="appheader">
<h1 class="appheaderContent">Search for Client</h1>
<div id="checkBox"></div>
<div id="closePanel"><h2 id="lblClosePanel">Close Panel</h2>
<div id="xButton">
<asp:LinkButton onclientclick="CloseOpenPanel('Search')" runat="server" Text="X" style="text-decoration:none; color:white" ID="lb_closePanel"></asp:LinkButton>
</div>
</div>
</div>
<div class="app" id="Search">
...
<div>
...
</html>
<script type="text/javascript">
function CloseOpenPanel(obj) {
alert(document.getElementById('<%= lb_closePanel.ClientID %>').value); //here it comes undefined!!!!
if (document.getElementById('<%= lb_closePanel.ClientID %>').value == 'X') {
document.getElementById(obj).Visible = false;
lb_closePanel.Text = '+';
}
else {
document.getElementById(obj).Visible = true;
lb_closePanel.Text = 'X';
}
}
</script>
Your code is OK, just instead of the property value use innerHTML
alert(document.getElementById('<%= lb_closePanel.ClientID %>').innerHTML);
Instead of using .value, try using .innerHTML instead to get the text inside of your link button (rendered as an a tag)
I have a menu and I can open and close the menu clicking on a tag. It works.
Also I use OnBlur(). Actually it works too but When I click a div in the menu, OnBlur active, menu closes and div's onclick doesn't works. How can I fix this problem ?
In JavaScript Codes;
<script>
function Acc_Show() {
var q = document.getElementById("he-my");
q.style.display = "";
document.getElementById("my-account-btn").focus();
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Hide()");
}
function Acc_Hide() {
var q = document.getElementById("he-my");
q.style.display = "none";
document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Show()");
}
</script>
In HTML codes;
<a id="my-account-btn" href="javascript:;" onclick="Acc_Show()" onblur="Acc_Hide()">My Account</a>
My Menu's Image;
http://i.stack.imgur.com/OMg6n.png
UPDATES Additional Codes From OP:
<div class="he-myac" id="he-my" style="display:none;">
<div id="my-account-wrapper">
<div class="myaccount" onclick="GoAdress('test.aspx')">Test</div>
<br/>
<div class="myaccount" onclick="GoAdress('settings.aspx')" >Settings</div>
<br/>
<div class="myaccount" onclick="GoAdress('log_out.aspx')">Log Out</div>
</div>
I have a feeling this line q.style.display = ""; in your Acc_Show() function is causing the issue. Try replace it with q.style.display = "block";.
When an onblur event is triggered, your Acc_Hide() function hides your <div> by calling q.style.display = "none";. Then the next click on my-account-btn triggers your Acc_Show() function, which set your q.style.display to an empty string. That doesn't unhide your <div> block.