Just realised that my site does not work in IE correctly. It works perfectly in Chrome and Firefox. In IE the problem is, the elements effected by javascript, just aren't appearing. I have Javascript enabled, so I don't know how its any different from the other browsers.
It's when I'm using the toggle_visibility function:
function toggle_visibility_1(id) {
var e = document.getElementById(id);
if(e.style.display = 'inline')
e.style.display = 'none';
}
function toggle_visibility_2(id) {
var e = document.getElementById(id);
if(e.style.display = 'none')
e.style.display = 'inline';
}
The website is here: http://www.dillonbrannick.com/
of course, there won't be a noticeable problem unless in IE and if in IE it may not be obvious, so hopefully I've described well enough.
So It seems that I somehow fixed the problem works just as it should see here if you want: http://testerwebby.tumblr.com/ So I don't know what I did, but I'll soon have it rolled out to my website, Thanks for all the help.
You're performing assignment, not comparison:
// Sets the value of display
if ( e.style.display = 'none' )
You should be using == (value) or === (value and type) to test equality:
// Tests the value of display
if ( e.style.display == "none" )
If all you want to do is toggle between inline and none, the following would perform that better:
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display === "none") ? "inline" : "none" ;
}
Demo: http://jsbin.com/uyawop/edit#javascript,html
Related
I've been having some trouble with a piece of code that requires multiple lines of "if" logic to handle the functionality.
two of these if statements do the same thing, and it seems to me are some how cancelling each other out.
function visibleCheck() {
var target = document.getElementById('contentType').val();
if (target != "BYOC - Document to Exam") {
document.getElementById('VideoMinutes').style.display = 'block';
}
else document.getElementById('VideoMinutes').style.display = 'none';
if ((target != "Custom Production - Avatar") {
document.getElementById('Questions').style.display = 'block';
}
else document.getElementById('Questions').style.display = 'none';
if ((target != "Custom Production - Video") {
document.getElementById('Questions').style.display = 'block';
}
else document.getElementById('Questions').style.display = 'none';
}
The First if statement runs fine. The second doesn't appear to run at all. The third one runs fine.
If I re-order the second and third one swapping places, the new second one will not work.
If I use the or operator "||" and combine the statements it doesn't work at all.
The third statement always works regardless of the conditions for the if statement.
If I make the second and third both if or statements then neither work.
Any ideas?
I am using this on a visualforce page within salesforce if that makes any difference.
Firstly, note that DOMElements do not have the val() method, that's only on jQuery objects. You should use the value property.
Secondly, the logic is flawed as the execution for the Questions elements can flow through multiple contradicting conditions. Try this:
function visibleCheck() {
var target = document.getElementById('contentType').value;
if (target != "BYOC - Document to Exam") {
document.getElementById('VideoMinutes').style.display = 'block';
}
else {
document.getElementById('VideoMinutes').style.display = 'none';
}
if (target != "Custom Production - Avatar" && target != "Custom Production - Video") {
document.getElementById('Questions').style.display = 'block';
}
else {
document.getElementById('Questions').style.display = 'none';
}
}
As you've tagged this with jQuery, here's a simplified jQuery version:
function visibleCheck() {
var target = $('#contentType').val();
$('#VideoMinutes').toggle(target != 'BYOC - Document to Exam');
$('#Questions').toggle(target != "Custom Production - Avatar" && target != "Custom Production - Video");
}
I have this code that shows and hides two divs when "onmouseover".
function hide_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}
What I want is: when I do the mouseover it hides the div permanently and when I go over again it won't show anymore.
http://codepen.io/anon/pen/XmXjmx
THANKS!
You can just remove any code that sets e.style.display to block.
function hide_visibility(id) {
var e = document.getElementById(id);
e.style.display = 'none';
}
http://codepen.io/anon/pen/ojbzbK
You could just set the html code to blank like so:
$(document).ready(function() {
$( "#item" ).mouseover(function() {
$( "#item" ).html(""); //Set html contents of #item to empty
});
});
Of course you will not be able to unhide this content again as you have removed the html code. This will not matter though if there will not be a need for the element to be made visible again.
I am having no success at getting my text to return to it's default value when a different toggled div is clicked upon. Everything else seems to work great except for this one thing. What am I missing in my code? I end up having to click the other div again before it will finally return to the default text.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
var menu;
$(document).ready(function () {
$('.bio_container').hide();
$('.bio_button').click(function () {
menu = $("#" + $(this).data("menu"));
$(".bio_container:not(#" + menu.attr("id") + ")").slideUp();
var biobutton = $(this);
menu.slideToggle(function(){
biobutton.text($(this).is(':visible') ? '« Close Biography' : 'Read Full Biography »');
});
});
});
Here's a fiddle so you can see where I am so far.
You are not actively updating the other button's text on click, you're almost there.
Missing line inside the slideToggle function:
$(".bio_button").not(biobutton).text('Read Full Biography »');
See updated JSFiddle.
Please understand that this is a quick hack though, and that the many selectors are not performing too greatly - which won't matter much if you don't have many menus to slide.
I am using this JS code for show and hide some div elements on my side - it is working perfectly on W7/W8 and all browsers, but for XP it doesn't work at all, am I something missing about JS libraries supported in XP or something?
Thanks for any replies in advance.
<script type="text/javascript">
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
</script>
It can be because 'block' is the default value of display for divs, i.e. if the actual style.display is '', then the div will act as a block. Try inverting your check like this:
divid.style.display = (divid.style.display == 'none' ? 'block' : 'none');
I have used a javascript to show div by onclick but when i click outside div i want to hide the div.
after more searches, i have found an function, and it works perfectly
but there is an issue, the code requires double click for first time, to show the dive
my code:
<script>
// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}
</script>
<style>#tools{display:none;}</style>
<div id="tools">Hidden div</div>
show/hide
This is my full code, you can test it on your computer.
The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click )
Try this - http://jsfiddle.net/JjChY/1/
Change
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
to
el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
Use this:
el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';
It should work.
The problem is that el.style.display only reads from the element's inline styles, not its CSS.
So, on the first click el.style.display is '' (blank string), so it's set to 'none'. Then the second time, el.style.display is 'none', so it works.
You need to try to read from the element's CSS if its inline styles are blank. I'm going to use the getStyle method from quirksmode for this:
function getStyle(x, styleProp) {
if (x.currentStyle) {
var y = x.currentStyle[styleProp];
}
else if (window.getComputedStyle) {
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
}
return y;
}
// click on the div
function toggle(e, id) {
var el = document.getElementById(id);
var display = el.style.display || getStyle(el, 'display');
el.style.display = (display == 'none') ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if (toggle.el) {
toggle.el.style.display = 'none';
}
}
DEMO: http://jsfiddle.net/JjChY/2/
Your code is a little convoluted. It can be written much simpler:
<script>
var toggle = function(id) {
var element = document.getElementById(id);
element.className = element.className === 'hidden' ? '' : 'hidden';
return false;
};
</script>
<style>
.hidden {
display: none;
}
</style>
<div id="tools" class="hidden">Hidden div</div>
show/hide
If you have jQuery, you could do something like this for the click outside.
First, set a class on the "tools" div when the mouse is inside it. Remove the class when the mouse is not inside it.
$('#tools').hover( function() {
$('#tools').addClass("inside");
},
function() {
$('#tools').removeClass("inside");
});
Then, track clicks on the HTML. Hide if the "inside" class is not on the "tools" div.
$("html").click( function() {
$("#tools").not(".inside").each( function() {
$("#tools").hide();
});
});