Best Practice For Page-Specific JavaScript?

Jun 29, 2007

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.

View 5 Replies


ADVERTISEMENT

Best Practice For Unobtrusive Javascript

Oct 16, 2007

I have been going back and getting rid of so many of my onclick's and such, trying to switch to a more unobtrusive method of adding events to anchors.

I've run into one snag that's kind of dissonant for me, and wondered if anyone had any advice.

By adding an event, you can turn:

<a href="#" onclick="something(); return false;>Click me</a>

Into:

<a href="new.html" class="something">Click Me</a>

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.

View 2 Replies View Related

Where To Put Page-specific JavaScript

Feb 26, 2007

I have a little menu system which essentially takes HTML like:

<div id='foo'></div>

and retrieves foo.shtml from the server and inserts it inside the
<div>. But sometimes I'd like foo.shtml to look like:

<script language='JavaScript'>
...do something AJAX-y
</script>
<div></div>

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.

View 22 Replies View Related

JQuery :: Select A Specific Class Inside A Specific Div Based On The ID From A Button Elsewhere On The Page

Mar 10, 2010

<div class="box top"></div>
<div class="box main">
<div class="box header">
<div class="badge"><ul><li class="active"><span>60</span></li></ul></div>

[Code]....

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?

View 1 Replies View Related

Best Practice If Then Else

May 21, 2006

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?

View 9 Replies View Related

Looping Through Forms: Best Practice

Jul 20, 2005

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 ....

View 4 Replies View Related

JQuery :: Best Practice For Fading-in An Image ?

Apr 14, 2010

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.

View 2 Replies View Related

Onmouseover HTML Attributes Bad Practice?

Jul 13, 2010

Which is considered best practice?

<div onmouseover="doThis();">
myDiv.onmouseover = doThis;
myDiv.addEventListener("mouseover",doThis,false);
...or something else?

View 3 Replies View Related

Perform A Find In Page Search That Looks At A Specific Link, Opens The Page In A New Window?

Mar 29, 2011

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?

View 1 Replies View Related

Loading External JS Before Page Page Load (specific Span Element)

Jul 19, 2010

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.

View 2 Replies View Related

Using Javascript To Change Specific Css Parameter

Nov 5, 2003

Code:

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?

View 21 Replies View Related

How To Link To Specific Images In A Javascript Slideshow

Jul 23, 2005

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.

View 2 Replies View Related

Calling A Specific External JavaScript Function

Nov 4, 2004

I'm trying to call a specific function in an external javaScript file:

<script src="myCode.js" type="text/javascript"></script>

How do say I just want a certain function to run. I'm using this:

<script src="myCode.js:certainfunction()" type="text/javascript"></script>

but it's not working, any ideas?

View 3 Replies View Related

Looking For A Specific Simple Cross-broswers Vertical Scrolling Javascript

Mar 21, 2006

Does anyone know a simple cross-broswers vertical scrolling javascript
that can call up its scrolling contents off an external html page/file?

View 1 Replies View Related

Go To Specific Page Using Backspace?

Feb 28, 2011

I have to go back to specific page(html page) using backspace button in javascript n html.

View 4 Replies View Related

Open Page To A Specific Slide From Another?

Nov 10, 2010

I have a slideshow on the "Projects" page. The javascript is external.

There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that?

Here's the code I have for the slideshow code...

View 1 Replies View Related

Pull Specific Content From One Page To Another?

Jul 31, 2008

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.

View 3 Replies View Related

Set A Cookie So A Specific Page Can Access It?

Dec 4, 2010

just needed to know this because I'm setting the path of the cookie and the path on my browser isn't matching what I set it as.

var the_cookie="file_address~"+x+";path=gallerylogin.php";

...it still doesn't set it so "gallerylogin.php" can access it.

View 1 Replies View Related

Script To Reload Page And Go To Specific Anchor

May 20, 2011

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.

View 1 Replies View Related

Ajax :: Return A Specific Portion Of A Php Page?

Jun 13, 2011

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

CREATE A:
<select name="mychoice" onchange="onchange_getform(this.value)">
<option>----Select----</option>

[code]....

View 4 Replies View Related

Open Document To Specific Page From App.openDoc?

Apr 20, 2009

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).

View 1 Replies View Related

Script For IP Detection To Deliver Specific Page?

Oct 25, 2010

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.

View 2 Replies View Related

Best Practice For Referring To Node's "parent" JS Object?

May 10, 2011

Consider the following simplified example javascript code...

What's the "best" way to write that onclick method in its current context? I can think of a few ways to do it -- but they all seem fairly "dirty."

Have I gone stupid?

View 8 Replies View Related

Link To Iframe Page (load Specific Content)

Oct 22, 2005

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.

View 5 Replies View Related

AJAX :: Pull In Specific Element From Separate Page

Nov 25, 2009

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.

View 3 Replies View Related

Specific HTML Elements On Reloading Part Of Page

Jan 24, 2010

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:

Code:
<div id="page_select">
<input type="checkbox" name="option1" id="option1" value="Home" /> Home
<input type="checkbox" name="option2" id="option2" value="About" /> About</div>

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.

View 4 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved