Is it possible to also switch the class to a loading graphic and disable the button when onClick is called and before the location.href is launched? There is a delay and I'm hoping to avoid double clicks. Can someone show me a sample of this?
<button type="button" class="MoreTides" onclick="location.href='http://www.domain.com/tides/parser_iphone.php?stats=$xml->stationid'">View Graph - Change Dates</button>
Something like this might be a start:
<script>
function loadPage(input) {
input.disabled = true;
input.className = "loadingButton"; // define how this should look in CSS
location.href='http://www.domain.com/tides/parser_iphone.php?stats=$xml->stationid';
}
</script>
<button type="button" class="MoreTides" onclick="loadPage(this)">View Graph - Change Dates</button>
Related
I'm trying to understand addEventListener and using the mouseover ablity to hide a paragraph when someone hovers over a button. I am not getting any errors in the chrome developer so I am not sure what I am missing. What am I missing?
document.addEventListener("mouseover", myFunction);
document.addEventListener("mouseover", myThirdFunction);
function myFunction() {
document.getElementById("sun").style.visibility = "hidden";
}
function myThirdFunction() {
document.getElementById("sun").style.visibility = "visible";
}
<!-- You should:1. Rover over the below button and make the paragraph below
it disappear. -->
<input type="button" value="Roll Over Me" class="rollOverMe" />
<p id="sun"> This paragraph will burn from the heat of the sun!</p>
I'm expecting to see that whenever the user mouse hovers over the button that the p id="sun" is not visible.
Don't repeat document.getElementByIds in your page too much. It is okay for small apps - for practicing and for learning. Too many references/pickups from the DOM slows down performance.
As mentioned, try giving meaningful function names.
There are multiple mouse event listeners. To achieve what you are expecting, we need to use mouseleave and mouseover together.
var buttonElement = document.getElementById("tooltip-btn");
var paragraph = document.getElementById("sun");
function myFunction() {
paragraph.style.visibility = "hidden";
}
function myThirdFunction() {
paragraph.style.visibility = "visible";
}
buttonElement.addEventListener("mouseover", myFunction);
buttonElement.addEventListener("mouseleave", myThirdFunction);
<input id="tooltip-btn" type="button" value="Roll Over Me" class="rollOverMe" />
<p id="sun"> This paragraph will burn from the heat of the sun!</p>
Pretty simple issue and as you are starting out, I hope this helps.
Personally, I would stop using W3School and start using MDN. The MDN Tutorials are a good start.
As to your issue, there was a fair bit wrong. Something like the following is a basic structure for a lot of common scenarios.
function paraHide(e) {
var d = document.getElementById("sun");
d.style.visibility = "hidden";
}
function paraShow(e) {
var d = document.getElementById("sun");
d.style.visibility = "visible";
}
/*
window.onload means wait until the HTML has loaded, then
automatically start the following JavaScript
*/
window.onload = function() {
// get all elements with the class "rollOverMe"
var d = document.querySelectorAll(".rollOverMe");
// if any elements found, continue
if (d) {
var i, max = d.length;
// for each found element, add the following
// Event Lsiteners
for(i=0;i<max;i++) {
d[i].addEventListener("mouseover",paraHide,false)
d[i].addEventListener("mouseout",paraShow,false)
}
}
}
<input type="button" value="Roll Over Me" class="rollOverMe" />
<p id="sun"> This paragraph will burn from the heat of the sun!</p>
<input type="button" value="Over me too!" class="rollOverMe" />
I'd like to make two different buttons in vanilla JavaScript that, when clicked one after the other, display a different text message.
Any advice in reorganising the code below? Thanks.
I could find a toggle function for one button but not for different buttons.
index.html
<button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
index.js
function revealMessageUk() {
document.getElementById('hiddenMessageUk').style.display = 'block';
}
function revealMessageSpain() {
document.getElementById('hiddenMessageSpain').style.display = 'block';
}
I'd like to not only display like hereafter but have a sort of a toggle function (hide/show or add/remove feature) for the two foreign languages below.
try
function revealMessage(msg) {
hiddenMessage.style.display='block';
hiddenMessage.innerText=msg;
}
<button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>
<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>
<p id="hiddenMessage" style="display:none"></p>
Here is a way to toggle, but also keep it flexible when more locales will be added. You keep a sort of a selectedLocaleId "state" and change it when one of the buttons is clicked with the corresponding locale id.
let selectedLocaleId;
function selectLocale(newSelectedLocaleId) {
// If there is a selected locale id, un-select it
if (selectedLocaleId) {
document.getElementById(selectedLocaleId).style.display = 'none';
}
// set the new selected locale id
selectedLocaleId = newSelectedLocaleId;
document.getElementById(selectedLocaleId).style.display = 'block';
}
<button onclick="selectLocale('hiddenMessageUk')"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="selectLocale('hiddenMessageSpain')"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
Hope this helps :)
Cheers
I am new to programming and I am trying to do something that is a bit overchallenging for me, so any help is appreciated.
I would like to use the Canvas Chess PGN viewer on a website which displays chessgames and make it possible for the users to go through the games. I want to use only one chessboard for different games, so I am trying to create onclick events that change the source property value in the chessboard script and make the script run again, but I cannot figure out how to do that.
It is the "pgn_uri" property that should be changed by clicking on the buttons, e.g. when the user clicks on "Round2" than it changes to "pgn_uri: secondGame", and so on. The script with the CHESS.PgnViewer() function should also run again so the chessboard gets updated.
<button type="button" name="button" id="round1">Round1</button>
<button type="button" name="button" id="round2">Round2</button>
<button type="button" name="button" id="round3">Round3</button>
<script src="canvaschess\canvaschess-0.1.0.min.js"></script>
<script src="canvaschess\pgnviewer-0.1.0.min.js"></script>
<script type="text/javascript">
var firstGame = 'canvaschess/pgns/round1.pgn';
var secondGame = 'canvaschess/pgns/round2.pgn';
var thirdGame = 'canvaschess/pgns/round3.pgn';
</script>
<script>
var viewer = new CHESS.PgnViewer({
pgn_uri: firstGame,
square_color_dark: '#000',
square_color_light: '#fff',
square_uri_dark: 'canvaschess/img/themes/wood/square_dark.jpg',
square_uri_light: 'canvaschess/img/themes/wood/square_light.jpg',
show_labels: false,
show_tags: true
});
</script>
try adding onclick events
eg
keep variable say chessGame as "global" and change its value onclick of buttons
$('#round2').onclick(function()
{
chessGame ='secondGame';
});
and pass "chessGame" instead of "firstGame" in new CHESS.PgnViewer
Adding click event in each button so probably this code
// Assume you have global variable name game
$('#btn1, #btn2, #btn3').on('click', function(){
var btn_clicked = $(this).attr('id'); // get id value
switch (btn_clicked) {
case 'btn1':
game = 'canvaschess/pgns/round1.pgn';
break;
case 'btn2':
game = 'canvaschess/pgns/round2.pgn';
break;
case 'btn3':
game = 'canvaschess/pgns/round3.pgn';
break;
}
});
You can now pass the global variable to new CHESS.PgnViewer
Note: I didnt test this code hehehe!
Hey guys I have searched for many answers and none of them seem to be working so I am going to put my code here and hopefully you can help me figure this out.
I am going to have two buttons. The first button (show_Chappie) is going to show the hidden contents and another button (hide_Chappie) and hides it self when clicked.
The second button (hide_chappie) is going to hide the contents and bring back the first button (show_chappie). The hide_chappie button itself would also be hidden.
The information div is already hidden from the start. I did this on the CSS using the display:none;
Here's my HTML code so far:
<button class ="show_chappie" onclick="showInfo()">Show More</button>
<div class="info">Info here.</div>
<button class ="hide_chappie" onclick="hideInfo()">Show Less</button>
Here's my JavaScript code so far:
function showInfo(){
document.getElementById('chappie_info').style.display = "inline-block";
document.getElementById('show_chappie').style.display = "none";
document.getElementById('hide_chappie').style.display = "inline-block";
}
I haven't written the code for the hide_chappie button because I wanted to see this working first.
So where have I gone wrong here? Thanks for the help in advance.
You are trying to get the elements by id while they have a class, you should change the elements class to id like this:
<button id="show_chappie" onclick="showInfo()">Show More</button>
<div id="info">Info here.</div>
<button id="hide_chappie" onclick="hideInfo()">Show Less</button>
you should change your code to:
<button id ="show_chappie" onclick="showInfo()" >Show More</button>
<div class="info">Info here.</div>
<button id= "hide_chappie" onclick="showInfo()">Show Less</button>
if you want to use class here,you should change your Javascript Code to
function showInfo(){
document.getElementByClass('chappie_info')[0].style.display = "inline-block";
document.getElementByClass('show_chappie')[0].style.display = "none";
document.getElementByClass('hide_chappie')[0].style.display = "inline-block";
}
because function getElementsByClass returns a collection,so you should add [] to find out the result you want!
It's kind of annoying to turn all id's into classes, you can use:
function showInfo(){
document.getElementsByClassName('chappie_info').style.display = "inline-block";
document.getElementsByClassName('show_chappie').style.display = "none";
document.getElementsByClassName('hide_chappie').style.display = "inline-block";
}
This is supported by practically every browser these days so I wouldn't worry about that. If that is still an issue an you need to support ancient browsers, use this:
document.getElementsByClassName = function (a) {
var b = document.getElementsByTagName('*'), i, c=[];
for (i = 0; i < b.length; i += 1) { b[i].getAttribute('class')===a&&c.push(b[i]); }
return c;
};
Please check this page first : Solarking - About Us
Check first 2 boxes which has a READ MORE button. On clicking them, they expand a paragraph.
Now I want it to be like when I click on it, it should expand the text and change the button value to "CLOSE" from "READ MORE". And on again clicking on "CLOSE", it should change value to "READ MORE".
I searched for long time to see how to fire multiple events on onClick, but I saw that some said to use a ; in them, some said make a new function and put 2 functions in it.
Now I tried to make a new function with 2 functions inside it (one to expand the paragraph, other to change value of button, but I failed. (I am new to JS).
Help please. Thank you in advance!
Code I have on the page :
button code:
<p style="text-align: right;"><input id="button12" style="background-color: #eca200; color: #ffffff;" onclick="return toggleMe('para1')" type="button" value="Read more" /></p>
Script :
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
I think the easiest way to do this would be to set a boolean variable. In other words, let's say that it starts off with the dclaration at the beginning of the page.
var hasbeenclicked = false;
Then, after the first click
hasbeenclicked = true;
After a second click
hasbeenclicked = false;
When the function is called, it checks the variable and operates accordingly. The following is not real JS....
if hasbeenclicked = true {
do some stuff;
}
else {
do some other stuff;
}
That is a simple way to accomplish what you are trying to do.
Additional info:
Use two DIV tags with separate ID's. One for the paragraph and one for the "label". Use getelementbyID to alter each one appropriately.
I noticed you are using jQuery.
You could use a toggle method.
Alter the html link. Add a class of expander and use the data attribute to identify the paragraph id
<p style="text-align: right;">
<input id="button12" data-toggle="para1" class="expander" style="background-color: #eca200; color: #ffffff;" type="button" value="Read more" />
</p>
The JS
$(".expander").click(function() {
var self = $(this);
$("#" + self.data('toggle')).slideToggle(500, function () {
if ($("#" + self.data('toggle')).is(':visible')) { // paragraph is open
self.val("Close");
} else { // paragraph is closed
self.val("Read More");
}
});
});