I'm very new to JS, and understand that my script is probably terrible, but it all works fine in Safari and Chrome, just not in Firefox.
Amongst other things, I'm calling two functions to hide and reveal a custom Quicktime movie controller by placing a "mask" over the top of it (I know a toggle would be a more elegant solution, but I couldn't get such a function to work the way I wanted). Anyway, this is what the Javascript looks like:
function revealControls(){
document.getElementById("controlsCover");
controlsCover.style.display ="none"
}
function hideControls(){
document.getElementById("controlsCover");
controlsCover.style.display ="block"
}
I'm calling these functions with different mouse events applied to various divs, such as:
<div id = "controls" onmouseout = "hideControls()">
Firefox is telling me
"Error: controlsCover is not defined",
and I have no idea how to define the element as null.
Any help would be appreciated. I'm sure it's something very simple — but I have virtually no experience with Javascript. Yet.
You need to create the controlsCover variable first to reference it.
When you first use document.getElementById("controlsCover"), this will return a HTML element of which you pass to a variable to use.
If you uncomment the console.log - you'll see what is inside the variable.
function revealControls()
{
var controlsCover = document.getElementById("controlsCover");
/* console.log(controlsCover) */
controlsCover.style.display ="none"
}
function hideControls()
{
var controlsCover = document.getElementById("controlsCover");
controlsCover.style.display ="block"
}
You need to assign document.getElementById return value to controlsCover variable:
var controlsCover = document.getElementById("controlsCover");
Fixed will be:
function revealControls() {
var controlsCover = document.getElementById("controlsCover");
controlsCover.style.display ="none"
}
function hideControls() {
var controlsCover = document.getElementById("controlsCover");
controlsCover.style.display ="block"
}
Try this:
var ele =document.getElementById("controlsCover");
ele.style.display = "none";
Try this:
function revealControls()
{
var oControlsCover = document.getElementById("controlsCover");
if (oControlsCover) {
oControlsCover.style.display ="none";
}
}
function hideControls()
{
var oControlsCover = document.getElementById("controlsCover");
if (oControlsCover) {
oControlsCover.style.display ="block";
}
}
Related
I am trying to understand module patterns in Javascript so that i can separate my code into different modules and use them where required.
var messageHandler = (function(){
var el;
var display = function(a){
if(a=='error'){
el = $('.error');
el.css('display','block');
}
else if (a==='success'){
el = $('.success');
el.css('display','block');
}
else if (a=='warning'){
el = $('.warning');
el.css('display','block');
}
else if (a=='danger'){
el = $('.danger');
el.css('display','block');
}
registerClick(el.find('.close'));
return this;
}
function registerClick(p_el){
p_el.bind('click',function(){
hide();
});
}
var hide = function(){
el.css('display','none');
}
return {
display: display,
hide: hide
}
})();
window.messageHandler = messageHandler;
messageHandler.display('warning');
So, I have four different classes in css for different types of messages.The close class is for a small cross button on the top right to close the message.
This works fine till i call the function only once.When i do this
messageHandler.display('warning');
messageHandler.display('success');
Now both the messages close button have been bind to the success close button because el gets overwritten.
How to achieve it keeping the code reusable and concise.
The problem here is that you have a closure variable el that you are overwriting every time display() is called. The hide() function uses whatever is the current value of el at the time it is called, so overwriting el is a problem.
If you want to have "static" functionality like this display() method, you need to avoid shared state.
As #Bergi points out in the comments, you can eliminate the shared el and modify hide() to take an element as input:
var messageHandler = (function(){
var el; // delete this
var display = function(a){
var el; // add this
function registerClick(el){
el.bind('click', function(){
hide(p_el);
});
}
function hide(el){
el.css('display','none');
}
You could also modify hide to make use of the current event properties, and then just have:
function registerClick(el){
el.bind('click', hide);
}
function hide(event){
$(event.target).css('display','none');
}
Cleaned up version including the auto-hide discussed in the comments:
var messageHandler = (function(){
var display = function(a){
var el = $('.' + a);
el.css('display', 'block');
var hideAction = function () { el.css('display', 'block'); };
var token = setTimeout(hideAction, 5000);
el.find('.close').bind('click', function () {
hideAction();
clearTimeout(token);
});
return this;
}
return {
display: display
}
})();
i have the following code. here i am declaring all the element id's to variables as global before all the functions declared. but those variables are taken by the functions
below is the sample:
var ddlpf=document.getElementById('<%=ddlpf.ClientID%>');
var disp_msg=document.getElementById('<%=disp_msg.ClientID%>');
function btn_proceed_Click()
{
var ses='<%=Session("hcur").toString %>';
if(pos_valid()==true)
alert('success');
}
function pos_valid()
{
var pos_valid=false;
var ses;
var ccy;
var ccy1;
var ccy2;
var as11costbud;
ses='<%=Session("hcur").toString %>';
var bm='<%=Session("benchmark").toString %>';
var dtsheet='<%=Session("dtsheet").toString %>';
var ratedis='<%=Session("ratedis").toString %>';
if(ddlpf.selectedIndex <= 0)
{
message("Please select the Portfolio");
return;
}
pos_valid=true;
return pos_valid;
}
function message(msg)
{
disp_msg.innerHTML=msg;
var modalPopupBehaviorCtrl = $find('modalpop');
modalPopupBehaviorCtrl.set_PopupControlID("poppan");
modalPopupBehaviorCtrl.show();
}
If i declare the variable "ddlpf" inside the pos_valid() and "disp_masg" inside the message(), it works.
the code is like this:
function pos_valid()
{
var ddlpf=document.getElementById('<%=ddlpf.ClientID%>');
//code
}
function message()
{
var disp_msg=document.getElementById('<%=disp_msg.ClientID%>');
//code
}
but these id's are common to 5 functions. not only this two. i have 20 id's which are common to 5 big functions. thats why i have declared them outside the functions.
what change should i make?
I am guessing you are putting the script at the top of the HTML page. So the page has not finished loading yet and you are trying to access the document.getElementById even before the document.body is ready. So when you access them in your functions, the variables value will be undefined => your problem
Try it this way,
var ddlpf;
var disp_msg;
window.onload = function(){
ddlpf=document.getElementById('<%=ddlpf.ClientID%>');
disp_msg=document.getElementById('<%=disp_msg.ClientID%>');
}
This way, you can put the code anywhere.
As far as i understood your question and with the code provided you are wondering
why your global variables appear not to work ddlpf and disp_msg is not working inside pos_valid and message functions
You have to make sure that the global variables are declared before any function is using them. Another option would be to pass in the variables.
In my demo on codepen you can see that it works. This html
<h2>Element id is not accessible</h2>
<select id="ddlpf">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button onclick=btn_proceed_Click()>proceed</button>
<div id="disp_msg">
</div>
and this javascript
var ddlpf=document.getElementById('ddlpf');
var disp_msg=document.getElementById('disp_msg');
function btn_proceed_Click()
{
if(pos_valid()==true)
{
var btn = document.getElementById('btn');
btn.innerHTML='success';
};
}
function pos_valid()
{
var pos_valid=false;
var ses, ccy, ccy1, ccy2, as11costbud;
var selectedIndex = ddlpf.selectedIndex
if(selectedIndex <= 0)
{
message("Please select the Portfolio. Your selection:" + selectedIndex);
return;
}
message("Your selection" + selectedIndex);
pos_valid=true;
return pos_valid;
}
function message(msg)
{
disp_msg.innerHTML=msg;
}
If you provide more information erromessages from chrome dev tools we can help better.
I've got this jquery code, and once I call it the first part of the function initiates, but then right after that the second part initiates; it's like the if statement isn't working. Have i got any problems with my code?
$(".pinPane").click(function()
{
if ($('.pinPane').hasClass('open'))
{
var htable = $('#content-panel-content').height();
var wtable = $('#content-panel-content').width();
var panew = wtable - 2;
var paneh = htable * 0.7;
var tableh = htable * 0.3;
$('.pane')
.height(paneh)
.width(panew)
.addClass('panepinned')
.removeClass('shadow');
$('#content-panel-content').height(tableh);
$('.pinPane').addClass('cls').removeClass('open');
}
else
{
$('#content-panel-content').css('height', '100%');
$('.pane').css('height', '100%').css('height', '-=200px');
$('.pane').css('width', '100%').css('width', '-=40px');
};
});
instead of:
$('.pinPane').addClass('cls').removeClass('open');
use:
$(this).addClass('cls').removeClass('open');
as in first case it will remove class from all elements with class pinpane. once u removed class then else code will be executed as now its not contain the open class.
if its calling twice then it can be case of event propagation. You can stop it by:
$(".pinPane").click(function(event)
{
event.stopPropagation();
//rest of your code
}
it's like the if statement isn't working
Depending on your needs the following line of code inside your click handler may give unexpected result:
if ($('.pinPane').hasClass('open'))
Basically you check if any .pinPane has a class open; don't you want to only check the .pinPane that raised the click event? If so change it to:
$(".pinPane").click(function()
{
if ($(this).hasClass('open')) { //note this here
} else {
};
});
Here's how I'm calling my JS:
"#item.OwnerID#" is a variable from a loop containing an ID. So the element I want to change the CSS for should look like: "cwa123" or some other number for the id...
Here's my JS:
$(document).ready(function() {
function toggleChatControl(id){
var wnd = document.getElementById(id);
if (wnd.style.marginBottom == '-1px') {
wnd.style.marginBottom = '-236px';
} else {
wnd.style.marginBottom = '-1px';
}
}
});
I ain't got a clue, it gives me the "not defined" error...
Out of scope, remove the document ready wrapper
function toggleChatControl(id){
var wnd = document.getElementById(id);
if (wnd.style.marginBottom == '-1px') {
wnd.style.marginBottom = '-236px';
} else {
wnd.style.marginBottom = '-1px';
}
}
Every function creates a new scope, the global scope is window, and that's the scope used for inline javascript.
Inside $(document).ready(function() { ... }); the scope is changed (to document) so the function is out of scope for the inline handler.
An even better approach would be to use a proper event handler
$('.FCChatControl').on('click', function() {
toggleChatControl('cwa#item.OwnerID#');
});
window.onload = init;
function init(){
var allSelect = document.getElementsByTagName("option");
for (var i = 0; i < allSelect.length; i++){
allSelect[i].onchange = loadLink;
}
}
function loadLink(){
alert("TEST");
}
So I'm working on this problem for a class and the functions are incredibly simple. I replaced the code needed with a simple alert because even tracking break point by point it doesn't run the loadLink() function. AllSelect is populated and are all have the onchange value with the specified code in the {}.
I have also tried putting it into the html element by hand and it still doesn't work.
Any Ideas? I'm running locally on my computer with both IE and Chrome if anyone cares to know. Thanks ahead of time.
The onchange event belongs on the select element, not the option elements. So:
window.onload = init;
function init(){
var allSelect = document.getElementsByTagName("select");
for (var i = 0; i < allSelect.length; i++){
allSelect[i].onchange = loadLink;
}
}
function loadLink(){
alert("TEST");
}
I think you want
var allSelect = document.getElementsByTagName("select");
You are instead querying the option elements within selects in the DOM.