|
JavaScript - Dom Ready
Similar TutorialsHi there. I want to slide in (jquery) a link in the bottom right when the page loads that offers the user to be pushed back to the top of the page. So far all is well. I have it appearing at width 1024 or bigger. With a media query set in order for it not to appear for smaller devices: #totop { position: fixed; bottom: 0; right: 10px; background: #FFF; color: #000; padding: 10px; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; display:block; -moz-box-shadow: 10px 10px 5px #000; -webkit-box-shadow: 10px 10px 5px #000; box-shadow: 10px 10px 5px #000; } @media screen and (max-width: 1023px) { #totop { display: none; /* Remove to top button */ } Now I understand I want an if statement checking whether the css is to display block or none. Or if this doesn't work have an if statement checking the screen width itself rather than media queries. So far I have this: $(document).ready(function() { if( $('#totop').is(':visible') ) { ("#totop").slideDown("slow"); } else { ("#totop").hide(); } }); Please help! In Jquery, there are following two concepts 1. Document.ready 2. Window.onload How can i get to know when document is ready to use using pure javascript? Hi Guys, I've written the below code which submits to a servlet, does a bit of processing and returns a JSON object. I'm reaching the servlet, but I never reach the alert("ready()") in the JavaScript. It looks as though the readyState never actually reaches state 4. Any ideas what is wrong ?? Thanks Code: function fetchhits() {
var httpRequest = null;
var url = "http://localhost:8080/Json/FetchTopHit?amount=1";
try {
httpRequest = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
httpRequest = false;
}
}
}
httpRequest.open("GET", url, true);
httpRequest.onreadystatechange = handler;
httpRequest.send(null);
}
function handler() {
alert("hander() start");
if (httpRequest.readyState == 4) {
alert("ready...");
if (httpRequest.status == 200) {
processJson (httpRequest.responseText);
}
}
}
function processJson(jsonObjectString) {
alert ("Process the Json Object");
}
I'm trying to diagnose the javascript part of an ajax script: Code: <form>
<ul id='May120128AM' name='apt_time' value='May120128AM'>
<input type="hidden" id='May120128AMhidden' name="user_id" value='May120128AM'>
</form>
<script type="text/javascript">
<!--
var request;
request = new XMLHttpRequest();
function checkData()
{
alert(request.readyState);
}
var apt_time = encodeURIComponent(document.getElementById(May120128AM').value);
var userid = encodeURIComponent(document.getElementById(May120128AMhidden').value);
var parameters = "apt_time"+apt_time //+"&"+"user_id"+userid;
request.open("POST", "/cgi-bin/my_script.php", true);
request.onreadystatechange = checkData;
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(parameters);
//-->
</script>
The checkData script puts each readyState in an alert box, so I know the javascript is firing. If I change the red line of code to this, the alert boxes no longer pop up, so I assume the javascript is not firing: Code: var parameters = "apt_time"+apt_time+"&"+"user_id"+userid; I thought name/value pairs were written like this: Code: name1=value1&name2=value2 I though that was exactly what the red line of code was doing. Does anyone know why it isn't firing? UPDATE: This works: Code: var parameters = "apt_time=+apt_time+&user_id=+userid"; I don't know why the above works and the other doesn't. They both look like they do the same thing - this: Code: apt_time=value1&user_id=value2 Hi, I used this link fader script on my website: http://www.javascriptkit.com/script/...inkfader.shtml. The browser activates this script when I move my mouse over the link - that's understood. But unlikely the browser needs 1 or 2 seconds to activated it (to read it) so the whole effect is delayed - it happens every first time I use the links after loading the page. Question: is there a way to make the browser "read and remember" the script before I use the link so no delays appear? Any onLoad formula? Thanks All, I currently have this code to make a post to my database: Code: var $dataString = 'name='+ $name + '&black_white=' + $black_white + '&color=' + $color + '&color=' + $other + '&other_text=' + $text;
$.post("save_edits.php", {image_save_string: $dataString}, function(result) {
$("#multiple_images").hide();
$("#result_success").html("<font color='red'>We've successfully saved your photo edits!</font><br><br>");
$("#image_divs").html(result);
});
Within the result I'm actually recreating the form for them to use if they want. I have a decent amount of jQuery that got initialized when the original page was loaded. Once I get my new form it doesn't work because it wasn't originally included in the page initialization. Is there a way just to call the document.ready function again to have it reinitialize my form elements again? Thanks in advance. I have a website which includes stories with multiple chapters. These chapters have a set of clickable arrows at top and bottom to take you forwards and back through the chapters, including a "last chapter" arrow. When a story is in progress, the URL of the last chapter changes with each chapter added. Rather than having to go back into every previous chapter and change the URL of the last chapter by hand, I set them up so that the "last chapter" arrow is actually in an inline frame. That way, I only have to change the URL once, in the file go_end.htm which is the source for the frame. So both the picture of the arrow and its hyperlink are being accessed from outside. My web pages are also set up to run on all major browsers and to detect the window width and resize all the artwork to fit, regardless of the browser and whether or not it accepts percentage sizes. Go_end.htm is no exception - it contains Javascript code which resizes the arrow so it is the same size as the ones which are actually in the parent page, outside the frame. This setup works perfectly in IE and Netscape, but Google Chrome either fails to display the arrow or makes it huge so it doesn't fit the frame. This seems to be because their superfast new Javascript editor is *too* fast. If I bung an alert command into go_end.htm, asking it to say the value of picWidth (the variable which sets the width of the arrow) as it loadfs, what happens is this. Google Chrome displays an alert saying that picWidth is zero, then loads the first instance of the inline frame with no got-to-end arrow. Then it displays an alert giving a proper value for picWidth and loads the second inline frame with the arrow correctly displayed and sized. If I take out the alerts, it doesn't load the arrow in *either* frame. It's obvious that inserting the alert command somehow forces it to recognise the value of the variable which it then retains for long enough to load the arrow on the second pass. Any ideas for some command other than alert which would trick it into not loading the image until it's recognised the variable? If I put a time delay on loading the frame I can't see that that would help - the problem is that from the point at which it starts actually loading the frame it needs to wait for the variable to be set. Hello all. I have fairly simple questions regarding modifying this script: http://papermashup.com/create-a-dynamic-form-preview/ to dynamically show different parts of a form on another part of the page. I am looking to use it on most parts of my form and would like a little clarification. First is the use of $(document).ready(function() or $(function(). It works using either, my question is which is preferred? As I understand it using $(document).ready(function() starts the DOM immediately on page load and is useful if you need something right away. I am also using this script: http://www.dynamicdrive.com/dynamici...formwizard.htm for the form. Since the preview script is being used with the form to wizard, I don't really need it until the rest of the form loads. Another question would be, is there a cleaner way to go about using the preview script on say 10 different form inputs independently? For example in a single function rather than 10 different function/updates? I have an example of what I am trying he http://jsfiddle.net/anhyG/1/ Thank you in advance for any help! |
|||||||