I am trying to make a simple game about sliding ice-blocks. However, I tested this JSFiddle and I want to "hide" the image/button on the line alert('Game starts!');. I tried startButton.style = "visibility: hidden;"; but it didn't work...
I only need to resolve this problem, I know how to code the game itself :)
Adding this after the alert seems to work.
this.style.display = 'none';
updated Fiddle
try document.getElementById("startButton").style.display="none"
try
document.getElementById("startButton").style.visibility = 'hidden';
HTMLElement.style reference (MDN)
You can also use jQuery UI, which has a "hide" method. You can then simply say
$('.startButton').hide()
You can even apply different effects.
However, this will set the visibility to none, removing the object from the DOM. If you don't care about that, it's fine, but it should be borne in mind.
startButton.onclick = function()
{
startButton.style.visibility="hidden";
/* OR
startButton.style.display="none";
*/
alert('Game starts!');
}
Related
Fiddle - http://jsbin.com/udumibO/1/edit
If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.
I tried the following on document.ready, but it's not working, and I have no idea why.
Here's the code.
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
}
Any help is greatly appreciated.
Use this:
if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
$(".starter-properties, .canvas-properties").show();
}
Try this link
It might be helpfull for you.
http://jsfiddle.net/rahulsahu/eveKU/
HTML :
<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>
JQuery :
$("button#first").click(function(){
$("#first-div").hide();
});
$("button#second").click(function(){
if($('#first-div').is(':visible')) {
// do nothing
alert("first div is not hidden");
}
else{
$("#second-div").show();
}
});
I managed to accomplish the effect I wanted using the following function.
$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
}
});
Here's the fiddle - http://jsbin.com/udumibO/3/edit
I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.
Ok, it looks like a lot of code here. :P
Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.
Well, Here is something which doing same as your code, and also solving your problem.
$("span", ".nav").click(function(){
var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));
target.show().siblings().hide();
$(this).addClass("active").siblings().removeClass("active");
});
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/
JSFiddle code is well commented.
Let me know, if something you want to add or ask about this. Good luck!
You can use
$(".target").toggle(function () {
// your remaining action. something written here
});
I'm writing javascript which will change the color of an element when the mouse hovers over it. I know perfectly how to do this using jQuery, but this time around I have to do it using either pure JS or Prototype.
Why doesn't this work:
<div id="boundary1"></div>
document.getElementById("boundary1").onmouseover(function() {
alert("test");
})
firebug returns:
TypeError: document.getElementById(...).onmouseover is not a function
Your syntax is wrong, you may be thinking a little too 'jQuery', try this:
var boundary = document.getElementById('boundary');
var mouseOverFunction = function () {
// this.style.color = '#000'; // your colour change
};
boundary.onmouseover = mouseOverFunction;
I've separated the logic to make the development and logic clearer, it makes your functions reusable too.
The Prototype way to do this would be this:
$('elementId').observe('mouseenter', function(evt){
this.setStyle('background-color: yellow');
}).observe('mouseleave', function(evt){
this.setStyle('background-color: inherit');
});
But as others have already pointed out, the real way to do this is with CSS. The only reason I could imagine needing to do it in JS is if you have to support IE <= 8, which doesn't like to do the :hover pseudo-class on anything except the A tag.
Try:
document.getElementById("boundary1").onmouseover = function() {
alert("test");
}
More Info.
Try this code
<td onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
Click Here</TD>
You can do it using CSS
<style>
.changecolour:hover
{
background-color:yellow;
}
</style>
Now for the text you want to change color
<span class ="changecolour">Color changes when mouse comes here.</span>
Reference : http://www.w3schools.com/cssref/sel_hover.asp
I have an image and a button, whenever I press the button the image disappears. So I'd like to make it by a fade effect. Something like this:
#hide{-webkit-transition: all 1s ease-in-out;}
Here is the demo: http://jsfiddle.net/5wBuV/4/
In jQuery all you have to do is:
$("#hide").fadeOut("slow"); //or fast, or specific speed in milliseconds
//you can even throw a callback function if you need to
Or you can keep the javascript you had:
document.getElementById("hide").style.visibility = "hidden"; //or display = "none";
http://jsfiddle.net/5wBuV/5/ updated your fiddle
Use some JS:
$('#hide').fadeOut('slow');
If you want more advanced way, see more in Jquery Animate
For animate effect, you can google "jquery easing"
Using jQuery fadeOut():
$("#clickedButton").click( function() {
$('#hide').fadeOut('1000');
});
FIDDLE HERE
I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks
Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});
You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});
<script>
function showhide() {
document.getElementById('someimage').style.visibility="hidden";
}
</script>
At the moment I am able to hide the image, however then I have no way to show it again.
How can I hide and then be able to show an image when clicking a button using javascript?
Here's the button:
<body>
<input type="button" onclick="showhide()" />
</body>
Simply check what the current state is, and then act accordingly.
function showhide() {
var img = document.getElementById('someimage');
if (img.style.visibility === 'hidden') {
// Currently hidden, make it visible
img.style.visibility = "visible";
} else {
// Currently visible, make it hidden
img.style.visibility = "hidden";
}
}
And a quick note about jQuery to all those suggesting it.
For simple things like this, there is no need to include a big DOM manipulation library. If you are doing a lot of DOM manipulations like this in a more complex application, then jQuery starts to make more sense to include.
But it's also important to understand what jQuery is doing for you under the hood when you use it.
The wonders of jQuery - http://jsfiddle.net/PbG3t/
$(function() {
$('#button').click(function() {
$('#someimage').toggle();
});
});
If you are using jQuery, you can use the (.toggle) method which simplifies things a lot:
$('#someimage').toggle();
If you want to stick with a hand-crafted solution, I guess your code is actually missing the deciding bit that sets the element's visibility back to visible. Try:
<script>
function showhide() {
var element = document.getElementById('someimage');
element.style.visibility = element.style.visibility == 'visible'
? 'hidden'
: 'visible';
}
</script>
Cheers, Alex