I just wanted to get your opinions on this: I have several pages with page-specific JavaScript (i.e. script I know cannot be reused...it can only be run against elements found only on that page).
My question is, would you recommend just putting it in SCRIPT tags in the header, or should I create thispage.js so that the code is separated into another file? It slows the request because the browser has to ask for another external file, but keeps code out of the HTML doc.
But what goes in href if you don't have anything to actually link to? One example is a page I've written that is entirely self-contained, and all href's that drive the interface end up pointing to #. Is this acceptible in edge cases like these with the unobtrusive approach?
If someone has JS turned off the markup is essentially meaningless, so I was wondering how people deal with this lapse in the separation between behavior and structure.
so that the script fills in the page. I've hacked together something that inserts the foo.shtml into foo's div then does a fooDiv.getElementsByTagName('script') and uses eval() on them and it works most of the time in some brossers but it seems hackish and somewhat dangerous and it doesn't work everywhere. Surely there's an AJAX idiom (or even a DOM built-in) to execute scripts as parts of pages load.
What is happening is $(this) is no longer based on .expand being the (this) that is clicked.
like if i have a button SOMEWHERE randomly on the page with this
<div onclick="Minimize('_alerts');">Click Here</div> this will minimize alerts but because the (this) in minimize function doesn't actually point to the right button that I want to add a class to.
Is there a way to modify the minimize function so that it finds the <div id="mytoggle"><ul> <li class="expand boxminimize" rel="_alerts"> using the rel toggle, and then changes the class of the li from expand boxminimize to boxexpanded??
just like the .expand click function I posted on the top of the post that works?
I'm wondering what the best practice is for a particular task I'm trying to accomplish. I'm using two sets of radio buttons for a user to select values from. These values then go into a couple of tables to show some heat loss calculations depending on the values chosen I want the tables to have the relevant values filled in. Is the best way to accomplish this a long list of if then else type statements or is there a better way of doing this?
I am looking for advice on what is "best practice" regarding looping through a form to check its checkboxes and associated data fields.
Here is what I am trying to do (Here is the page I am working on: http://www3.telus.net/thothworks/LinLeastSqPoly4.html). I provide a form for a user to enter up to twenty (M = 20) data pairs. The user need not enter data for all twenty pairs, but the user must indicate that data is present by checking the checkbox beside each valid pair.
If a checkbox is checked, two things happen:
i) a counter, numRows, is incremented to keep track of the total number of valid pairs entered.
ii) the associated two data values (being x and y) are checked to ensure that they are valid numbers and, if so, are entered in an array for use later.
Previously, my forms were small, and I was able to examine each checkbox of a form individually: "if (checkbox1.checked) do action A; if (checkbox2.checked) do action B; if (checkbox3.checked) do action C; etc."
However, now that my form has twenty checkboxes, and may get bigger, I would like to learn how to accomplish this task with a concise loop. Following is my first attempt and it seems to work. If anyone can suggest improvements for this code ....
I have a photo blog [url] and want to create an effect that fades-in the displayed picture when the page is loaded.
An important requirement for me would be that the page also has to work without Javascript.
Currently I am using the following small plugin:
It is called directly beneath the <img> element:
This way it works fine with the current versions of Firefox and IE. I did not test other browsers or versions yet. I tried to call it in $(document).ready but then IE might display the picture shortly before it is hidden and faded-in.
Since I am not 100% happy with having the code in the middle of the HTML and with depending on the timing of execution to avoid flickering I wanted to ask for other solution or best practices to achieve what I would like to do.
One solution that came to my mind is to do create the image in JScript and only fade it in after it is loaded. To work without Javascript I could still put the <img> element where it was but within a <noscript> element. But not sure how well the <noscript> is supported by older or exotic browsers.
It is possible to perform a find in page search that looks at a specific link, opens the page in a new window and finds the text within that document?? Basically I regularly use an html page in work that has a list of people and their telephone numbers. I want to be able to type in a searchbox on my main page and it open the target page and find the name I am looking for? Is this possible or can you only Find In Page on the same page or another frame?
My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer here:
The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>
About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.
When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.
I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.
document.getElementById('hello').style.border-top = "2px red solid";
What I'm trying to do is just change the top border color of something I defined with css. The code above of course didn't work.. heh. How would I do it?
I have a popup window which is a slideshow of about 7 images. When the popup window loads, the first image is present and then the viewer can select next or previous to scroll through the rest of the images.
I'd like to use the same popup window at different points throughout the website and have the Virtual Tour (slideshow) open up at the appropriate photos. Meaning I'd like to control which picture the popup window opens up to, depending on where the user is in the site.
Does anyone know where I can find code that does this? I am somewhat familiar with Javascript but would like to find some ready-made code which accomplishes this.
Does anyone know if there are any ajax functions that would allow me to pull certain content from one page and display on another in a named <div>?
I currently have some code that pulls all the content and works very well. I am looking to enhance this to say only pull the first <div></div> content.
I have created a very very simple javascript that displays random text quotes. It is in Greek but here it is anyway: [URL]. It is in blogger and shows up as a gadget. My problem is that I need to make it reload by a button and at the same time go to the top of this gadget (using an anchor). The reason I want to do this is that I have been sharing this with other bloggers, but if they don't put it on top of their page, as soon as they press the button that reloads the page, they are in the top of the page and they would have to scroll down to find the quote.
I have tried to use window.location.reload with window.location.hash. It works in Firefox, but not in IE. I have been trying something like that: <input type="button" value="Click to refresh" style="width: 130px" onclick="window.location.hash='#something';window.location.reload()" /> As I said, this works with Firefox, but not with IE9 Also, I can't define urls beforehand because I want other people to be able to use it to their own blog or website.
I am using a dropdown box with 6 options. On change I want ajax to return part of an HTML/PHP page that corresponds to one of the 6 questions. I was trying to put and if statement on the return page to determine the part that I wanted but I didnt work. I rather not create 6 HTML/PHP files for each of the options. Here is part of the CODE
I have a pdf document toolkit.pdf (202.81K)Number of downloads: 81 that serves as a home page or table of contents for reference materials. This is NOT a web-based document. We use this as a reference tool in a face-to-face classroom setting. Each item on the list or table of contents is a button that the user clicks on to see a dropdown menu of reference documents. Javascript is used to execute the individual documents in the dropdown menus. I am trying to get a document sfract.pdf (112.5K)Number of downloads: 72 in the dropdown menu to open at a certain page. I don't want to set this at the document level, because we have several references that open the same document at different pages.
The javascript is:
if (cChoice=="Boating Infrastructure Grant Program") var otherDoc = app.openDoc ("sfract.pdf", this); else
How can I get the document to open "sfract.pdf" to a certain page (like page 30)? I have attached the home page/table of contents (toolkit.pdf) and the document I want to open to a certain page (sfract.pdf).
I was wondering if there exists a script that would do two things:
1) Determine the IP address of the site visitor
2) and, based upon the IP address being either an odd or even number, display a particular version of a webpage. (Odd-numbered IP would show page version A, even numbered IP would show version B)
The reason for desiring the above function is to be able to do a split-test to find out the pulling-power of two slightly different page designs.
I have PAGE1 with the link to PAGE2 with iframe. (iframe load several naked html). I want to add directive to the link to point sprcific content of iframe. to make it clear
link on PAGE1 -> load PAGE2 with iframe -> iframe content is specified on link = whole PAGE2 with iframe with desired content...
solving problem with creating several different PAGEs2 poining wanted iframe src is not the case.
I'm trying to find out how you would pull in specific elements from a HTML file using AJAX.
For example, my AJAX script takes in the URL of the HTML page I want to grab content from (this HTML page is on my server so there are no cross-platform security issues) and it pulls in the HTML document as a string of text rather than a XML/DOM document.
I want to be able to grab a DIV element with a specific ID and pull in all the content from that DIV element.
I know that JavaScript libraries have the ability to do this, but I'm not looking to use a library, I want to use my own Js code. For example this can be done using jQuery's load() method but again I'm looking to implement this with *home-grown* Js code and not have reliance on a Js library for this one aspect of my project.
I am trying to do is load new content into a form without resetting the form. I have about 10 checkboxes, once 4 are selected I would like to reload a div in the page to insert four corresponding textareas with the same id as the checkboxes. So for example the checkboxes:
There would be about 10 after 4 are selected than four divs with textareas are loaded onto the page - These textareas have the same id in order for the right ones to load. If your wondering why not just hide the textareas and show when then have been selected by the checkboxes, its because they have a wysiwyg editor attach so it would start to load slow after I add say 10-20 different textareas.
Would this work: Code: $(document).ready(function() { $('#reload_1').click(function() { //var names = []; var myScripts = new Array(4) $('#page_select input:checked').each(function() { names.push(this).attr("id"); }); $('#content_div').load('external_content.php.html # . + '. myScripts[0]); $('#content_div').load('external_content.php.html # . + '. myScripts[1]); $('#content_div').load('external_content.php.html # . + '. myScripts[2]); $('#content_div').load('external_content.php.html # . + '. myScripts[3]); If I had all the divs and textareas in external_page.php and load only the ones needed.
