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>
Related
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 display a form if a random number is other than zero to between 15. Here is a code I tried. I have used iframe but I want any other method. And in booking.html there is simple form. I want it to be without iframe how to do it.
function myFunction(){
var x=document.createElement("IFRAME");
x.setAttribute("src","booking.html");
x.style.height="700px";
x.style.border="none";
x.style.float="center";
document.getElementById("ran").appendChild(x);
}
var z=Math.floor(Math.random()*15);
if(z==0){
document.getElementById("ran").innerHTML=
"sorry no seats available </br> Please select another date to book ticket";
}else{
document.getElementById("ran").innerHTML=
"HURRY UP "+z+" seats available !!!</br></br>";
window.onload=myFunction;
}
As you tagged your question with jQuery, you could benefit from the load method:
Define two areas in your HTML : one for the message, one for the booking page:
<div id="ran">
<div id="msg" style="white-space: pre"></div>
<div id="load"></div>
</div>
The white-space: pre is just to facilitate line-breaks in your text, without having to resort to HTML encoding.
In Javascript:
$(function() {
var z = Math.floor(Math.random()*15);
if (!z) {
// Preferably don't use html(), but text():
$("#msg").text("Sorry, no seats available.\nPlease select another date to book ticket");
} else {
$("#msg").text("HURRY UP, " + z + " seats available !!!");
// Here comes the magic of jQuery which does all the Ajax stuff:
$("#load").load('booking.html');
}
});
However, if the booking page belongs to your site, why not just merging the pages into one? You could include it, but hide it with style="display:none".
<div id="ran">
<div id="msg" style="white-space: pre"></div>
<div id="booking" style="display:none"> <!-- hide initially -->
<!--- just example code. Put your own stuff here --->
<form action="book.php" method="POST">
Date from: <input type="text" id="from"><br>
Date until: <input type="text" id="until"><br>
<!-- etcetera .... -->
</form>
</div>
</div>
Then in Javascript you would show it only when there are seats available:
$(function() {
var z = Math.floor(Math.random()*15);
if (!z) {
// Preferably don't use html(), but text():
$("#msg").text("Sorry, no seats available.\nPlease select another date to book ticket");
} else {
$("#msg").text("HURRY UP, " + z + " seats available !!!");
$("#booking").show(); // Only show form when there are seats available.
}
});
<script>
$(document).foundation(
var count = 1
$("button.test").click(function(){
if ($("p.change-me").text() === "OFF") {
$("p.change-me").text("ON")
count = count + 1
}
else if ($("p.change-me").text() === "ON") {
$("p.change-me").text("OFF")
count = count + 1
}
$("p.counter").text(count)
})
)
</script>
Very simply, I want to show the count as I am pressing this On and Off button. However, when I add the "var count = 1", my button no longer works. When I get rid of that line, the button will turn the text in the tag from ON to OFF and from OFF to ON.
How come? As you can probably tell, I am teaching myself JQuery.
Thanks!
HTML as requested:
<div class="row">
<div class="small-6 columns text-center">
<button class="button radius test">CLICK THIS</button>
</div>
<div class="small-6 columns text-center">
<p class="change-me">OFF</p>
</div>
</div>
<div class="row">
<div class="small-12 columns text-center">
<p>Here we will print how much fun you are having:</p>
<p class="counter">0</p>
</div>
</div>
Take your code out of the foundation() call. Also try to remember using semicolons.
$(document).foundation();
var count = 1;
$("button.test").click(function(){
if ($("p.change-me").text() === "OFF") {
$("p.change-me").text("ON");
count = count + 1;
}
else if ($("p.change-me").text() === "ON") {
$("p.change-me").text("OFF");
count = count + 1;
}
$("p.counter").text(count);
})
#Romain's answer is correct, but just to add to that... foundation is a method-call, and you were trying to put javascript code in the section where you normally put parameters (ie inside the ()). javascript code normally has to go inside of a function's body, not in the section where you type the parameters.
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);.