I have the following code which is basically a toggle.
function toggleContent(IDS) {
// Get the DOM reference
var contentId = document.getElementById(IDS);
// Toggle
contentId.style.display == 'block' ? contentId.style.display = 'none' : contentId.style.display = 'block';
}
$(function() {
$(document).on('click','.linky',function(e){
e.preventDefault();
$('div.panello:visible').hide();
$(this).next('div.panello').show();
});
});
All it does is show and hide DIVS.
It works fine on any browser apart from IE8 and older. I get a javascript error "Object doesn't support this property or method".
Is there a way to adapt this to work on IE8?
EDIT: It's a dynamic toggle. The click will tell the script which id to toggle.
since you are using jquery try:
$("'#"+IDS+"'").toggle();
Try setting display to inline-block for IE8.
Related
I made a button that toggles classes using jQuery and it saves the states to keep its class after refresh but, anyway. I tried this on IE and Edge and everything but the button works just fine. Is this an issue with the code below or IE and Edge that I will need to use Vanilla JS to fix?
Note: I am using jQuery 2.2.4 min if that helps any
//Stores the active and inactive classes appended to the toggle switch
function toggleHandle() {
$('.handle').toggleClass('slide');
}
if (sessionStorage.getItem('switch-state') && sessionStorage.getItem('switch-state') === "true") {
$('.toggle-theme-cont').addClass('color-swap');
toggleHandle();
}
$('.toggle-theme-cont').click(function() {
let el = $('.toggle-theme-cont');
toggleHandle();
el.toggleClass('color-swap');
sessionStorage.setItem('switch-state', el.hasClass('color-swap'));
});
});
Thanks in advance!
Update: I tried jQuery 3.3.1 and now it is pulling an internal error within jQuery itself at (2,30140)
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!');
}
I use jQuery1.11.1 and execute this code:
var links= $("#custom-menu").find("li").find("a");
links.each(function(){
if($(this).attr("href")==="#openModal")
{
$(this).on("click",function(event){
alert("Click event called on li");
$("#openModal").css("visibility","visible").fadeIn();
alert("Is the table showing now");
});
}
});
This works in IE8 but it does not work in IE7,nothing happens when I click the li.
EDIT:
I have narrowed it down,the control does not go into this block:
if($(this).attr("href")==="#openModal")
I found that an internal/in-page href attribute on IE7 looks like this:
http://localhost:8080/MyProject/mypage#openModal
instead of #openModal
So,instead of using this
if($(this).attr("href")==="#openModal")
I used:
if($(this).attr("href")==="#openModal" || $(this).attr("href") ===(window.location.href+"#openModal"))
<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
I have a customized show/hide toggle script that I'm using along with CSS3 transitions for the effects.
The script shows the content when clicked, and hides it when the 'HideLink' link is clicked, complete with CSS3 transistions - but only in Opera.
In other browsers the script only works for showing the content, clicking the hide link doesn't work.
See this JSfiddle: http://jsfiddle.net/xte63/
These days with show / hide javascript, I prefer to use HTML5's data-* attributes.
This can already be used in non-HTML5 browsers via the getAttribute and setAttribute function.
I've quickly tried it against IE7, Chrome and Opera and it seems to work.
http://jsfiddle.net/ThJcb/
function showHide(shID) {
var exDiv = document.getElementById(shID);
if(exDiv.getAttribute("data-visible") != 'false'){
document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';
document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';
exDiv.setAttribute("data-visible" , 'false');
} else {
document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';
document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';
exDiv.setAttribute("data-visible" , 'true');
}
}
This allows you to determine the state of the div without having to check for CSS values.
EDIT: As pointed out in the comments, a typo was on the hide link (onlick instead of onclick) which made it appear the above jsfiddle worked whereas it didn't. At least not exactly as I made an error in the logic, setting the "data-visible" to false instead of true.
Here's an updated jsfiddle: http://jsfiddle.net/ThJcb/4/
(javascript snippet above updated also)