I can't seem to make a div appear after making it invisible in onload in the body. This should be simple to fix, I just can't seem to figure it out.
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include '/include/init.php'; ?>
<script type="text/javascript" src="/js/jqeury.js"> </script>
<script type="text/javascript" src="/js/accounts.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Accounts</title>
</head>
<body onload="hide_buttons()">
<div class="accounts_headerDiv">
<div class="ahd_left">
<img src="/images/launcher2.png" class="accounts_logo"/>
<p class="title_para"> Accounts </p>
</div>
<div class="ahd_right">
<div class="searchDiv">
<p class="searchPara"> Search </p>
<input type="text" id="search_input" placeholder="search" class="search_input"/>
<img src="/images/search_icon.png" class="search_icon"/>
</div>
<div class="userDiv">
<img src="/images/default-portrait-icon.jpg" align="right" class="user_picture" />
<p class="userInfo"><?php username($db);?></p>
Log out
</div>
<div class="adminUserButtonsDiv" id="aubd">
<input id="createUser" name="createUser" value="Create" type="button" class="admin_button">
<br />
<input id="editUser" name="editUser" value="Edit" type="button" class="admin_button">
</div>
</div>
</div>
<hr />
<?php if (is_admin($db) === 'true') { ?>
<script type="text/javascript" src="/js/admin.js"> </script>
<?php } ?>
</body>
</html>
The hide_buttons() function is in accounts.js here
function hide_buttons() {
$('#aubd').hide();
}
Then I want to make the div reappear when I call admin.js which holds this function
$(document).ready(function() {
$('#aubd').show();
});
The overall goal here is to check if the user has the role of "admin" and hide or show the div and buttons contained within based on this check. So what am I doing wrong? Also is this the correct way or should I be using AJAX for this?
The onload event happens very late in the page load cycle. jQuery's ready callback happens much earlier (normally). So what's happening is that your show call is happening before your hide call.
The best fix is to not use onload. Instead, just output the div hidden:
<div id="aubd" style="display: none">....
Or in your CSS:
#aubd {
display: none;
}
Then your ready handler will show it just fine.
If you can't change the onload, you can change admin.js so it calls show later:
$(window).load(function() {
setTimeout(function() {
$('#aubd').show();
}, 0);
});
The setTimeout with the very, very short timeout value is there to avoid race conditions with the load event handlers. (jQuery hooks up the handler via addEventListener / attachEvent. Some browsers fire the onload handler first, and then the addEventListener / attachEvent handlers. Others do it the other way around.) But again, it's best to avoid this entirely by hiding the div differently in the first place.
You can put show statement in window.load instead of DOM ready so that it is executed after admin.js is loaded
$(window).load(function() {
$('#aubd').show();
});
As T.J. Crowder pointed out there is race condition in event that could be avoided using setTimeout.
$(window).load(function() {
setTimeout(function() {
$('#aubd').show();
}, 1);
});
My suggestion, which might fix your problem is to have it hidded in CSS.
Using #aubd {display:none;} then the element is hidden already when the page loads, avoiding sometimes showing up and being hidden flashing.
This fixes it and I think it's a better way to code. The answer "why" it doesn't work I think T.J. Crowder answered.
Related
I've made an interface for my students where they click an image and hear the description pronounced via text-to-speech, and the text description appears in a div.
Currently I'm calling the text from the image because the onclick event for the speech only works if it's on the div, and since it's a (this) event I don't understand how to combine the two.
First, is it possible, or "better" - to have a single click on the div trigger both functions, rather than splitting them between the div and the image as I've done? This is the only way I could figure out how to get it all working. So that's the first thing.
Second, I'm re-stating this code every time
jQuery(this).articulate('speak')" data-articulate-append=
How can I make this more economical? In reality I have hundreds of items, and there are a bunch more settings in between the jQuery and data-articulate. I've shortened it for this post but in reality it's much longer and repeated hundreds of times.
Last, is it possible to draw the content for the innerHTML from the data-articulate-append part of the TTS command, since it's the same in every case?
Many thanks, I've spent quite a while constructing what I have so far as I'm new to JS. I'm learning and I've tried to answer these questions myself but it's not yet within my skillset, and sorry if I'm not using all correct terminology in my post. I'm including a stripped-down version of the page here, with just the essentials. Any input is greatly appreciated.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://www.clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
<script src="http://www.clients.brettcolephotography.com/test/articulate.min.js"></script>
<link href="http://www.clients.brettcolephotography.com/test/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="elephant">
<img onclick="elephant()" src="http://www.clients.brettcolephotography.com/test/01.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="camel">
<img onclick="camel()" src="http://www.clients.brettcolephotography.com/test/02.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="bear">
<img onclick="bear()" src="http://www.clients.brettcolephotography.com/test/03.jpg">
</div>
</div>
<div id="word">
</div>
<script>
function elephant() {
document.getElementById("word").innerHTML ="elephant";
}
function camel() {
document.getElementById("word").innerHTML ="camel";
}
function bear() {
document.getElementById("word").innerHTML ="bear";
}
</script>
</body>
</html>
You can accomplish this by:
Giving each div a class, for my example its speak. Then add an eventlistener for speak elements. Then in that event listener, you can run multiple functions. You can also get rid of the image's onclick handler.
<div class="speak" data-articulate-append="elephant"><img src="http://www.clients.brettcolephotography.com/test/01.jpg"></div>
<div class="speak" data-articulate-append="camel"><img src="http://www.clients.brettcolephotography.com/test/02.jpg"></div>
<div class="speak" data-articulate-append="bear"><img src="http://www.clients.brettcolephotography.com/test/03.jpg"></div>
$(document).ready(function(){
$(".speak").on("click",function(){
$(this).articulate('speak');
$("#word").html($(this).data("articulate-append"));
});
});
I am trying to open an iframe on click and hide the image. Any help as to why this does not work would be great! Thanks
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#button').click(function () {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
document.getElementById('loadingimage').style.visibility = 'hidden';
}
});
});
</script>
<div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
alt="test image" width="860" height="474" /></div>
<div id="iframeHolder"></div>
</body>
Several points:
As #stud3nt noted, your HTML is invalid. Also a space is missing between "loadingimage" and class. You should be using an editor that highlights HTML and JavaScript syntax errors.
Use proper the HTML elements for the proper job. If you want to have a button, then use a <button> element and not a <div> element.
Hiding the image inside the "button" with visibility: hidden is strange thing to do. This won't remove the button element, so it's still there and still can be clicked. Learn the difference between visibility: hidden and display: none. When you are using jQuery you can use .hide() and you should use it on the "button" itself and not its content.
jQuery 1.6.0 is ancient. Either use a current version, or better, don't use jQuery at all. For one jQuery isn't really necessary anymore and also as a beginner you should learn how to write plain JavaScript.
There is typo in your img html element.
You forgot to add = in <img id "loadingimage" ...
Correct code - <img id="loadingimage" ...
Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
My myclickHandler function works perfectly but when I go on to my error console I get this error:
document.getElementsByName("prequestion")[0] is undefined;
Below is my code
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
if(validation()){
openSessionPopup();
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>
</form>
</body>
My question is what do I need to remove this error? because my function works does it matter if it shows an error in the error console?
Chances are you're loading the javascript before the DOM (or even possibly the HTML) has loaded properly.
For example, the following reproduces the same error as described in your question :
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
}
</script>
<input type="" name="prequestion" />
Whereas the following does not. The error is not present and the code works fine.
<input type="" name="prequestion" />
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
}
</script>
Trying to attach the event listener to an element which doesn't technically exist yet causes problems. You can check for the browser reporting the page has been loaded before attaching the event if needs be but be aware that browsers report this in different ways. Librarys such as jQuery provide useful means to test this such as $(document).ready(function(){});
Edit: I've just seen that you've added the relevant HTML too. It appears that this is in fact the case and the reason you're still seeing the expected behavior is because you're also using the onclick="" attribute on the input element. This is where the function is being called on click, and the event handler isn't being attached as you expect.
Edit #2: You also appear to be missing a closing } for your function. And I've now tested with your exact HTML and moving the script to just above the body tag resolves the error and correctly attaches the function to the click event.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" /></p>
</form>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
} // This was missing
</script>
</body>
I suspect that the problem is that there are no elements with the name attribute set to "prequestion".
If you're getting that error, then your script doesn't actually work, so you should fix it.