Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

sonic bed head: Dec 18, 2003; this is naturual, baby!

rt4 posted:

I'm trying to keep track of the URL of a frame on my page. Is it possible to do this with JavaScript?

php:

<?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert($("#inside").toString());
            });
        </script>
    </head>
    <frameset cols="100%" noresize="noresize">
        <frame id="inside" src="content.php">
    </frameset>
</html>
?>

I'm expecting toString() to tell me what's available in that object, but I just keep getting [Object object]
All I really want is the URL. What should I be doing instead?

If you want to get the URL after a change in the src, to make it cross browser compatible, I think you have to use DOM methods, not jQuery methods. Try this:

code:

window.frames[1].location.href;

http://stackoverflow.com/questions/549759/get-frame-source-with-jquery-after-the-source-has-changed

# ? Feb 1, 2010 19:31

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 01:13

spiritual bypass: Feb 19, 2008; Grimey Drawer

Thanks for posting that; looks like I can just use DOM methods with name instead of id like

inside.location

# ? Feb 1, 2010 20:38

epswing: Nov 4, 2003; Soiled Meat

rt4 posted:

I'm expecting toString() to tell me what's available in that object, but I just keep getting [Object object]
All I really want is the URL. What should I be doing instead?

Not sure, but the next thing I would try is alert($("#inside").attr('src'));

# ? Feb 1, 2010 22:29

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Lets say I have an element and I use onmouseover and onmouseout to toggle the visibility of another smaller element that is to appear on top it. I'd like for the smaller element to remain visible when the mouse moves over the smaller element. Of course this currently is not the case, since it fires the onmouseout on the main element when I mouse over the smaller element. What is a good solution to this?

edit: In case I explained that terribly, I found an example. In gmail, when you are viewing an email and mouse over the green name of the person who sent it, a little box pops up to email/chat/etc that user. When you mouse off the name, if box disappears. If you mouse off the name (and on to the little popup), the popup does not disappear.

It seems like I could get it behaving the way I want with a timer, that way I can detect if they mouse off the element and on to the popup. Is there a different approach?

fletcher fucked around with this message at 02:59 on Feb 5, 2010

# ? Feb 5, 2010 02:48

supster: Sep 26, 2003; I'M TOO FUCKING STUPID
TO READ A SIMPLE GRAPH

If the element you are binding the hover event to is a parent of the smaller element then you'll always be hovering the parent element even if it's inside the smaller element.

That said unless the smaller element is 100% contained (visibly on the screen) you should still use the setTimeout trick so that if the mouse goes outside the parent element's visiblity while moving between inner elements you don't lose your the popup.

# ? Feb 5, 2010 03:20

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

supster posted:

If the element you are binding the hover event to is a parent of the smaller element then you'll always be hovering the parent element even if it's inside the smaller element.

That said unless the smaller element is 100% contained (visibly on the screen) you should still use the setTimeout trick so that if the mouse goes outside the parent element's visiblity while moving between inner elements you don't lose your the popup.

Ah, I guess that was my issue. The smaller element wasn't actually a child, they were siblings, since the "main" element was an img.

Using setTimeout seems to work great. Thanks for your input!

# ? Feb 5, 2010 03:42

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

If the smaller element was a child, it would still count as a mouseout when you moved the cursor onto the smaller element. This is what jquery's hover event is for, and why jquery is awesome.

# ? Feb 5, 2010 09:42

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

fletcher posted:

Lets say I have an element and I use onmouseover and onmouseout to toggle the visibility of another smaller element that is to appear on top it. I'd like for the smaller element to remain visible when the mouse moves over the smaller element. Of course this currently is not the case, since it fires the onmouseout on the main element when I mouse over the smaller element. What is a good solution to this?

Look at stopping event propagation / bubbling.

# ? Feb 7, 2010 12:20

dizzywhip: Dec 23, 2005

dizzywhip fucked around with this message at 21:52 on Nov 9, 2020

# ? Feb 8, 2010 05:11

Supervillin: Feb 6, 2005; Pillbug

mit_senf posted:

Is there a way to have an event fire when the browser's vertical scrollbar appears?

Not technically, but there are ways to manually check.

code:

// returns the complete document height, including scrolled content
function getDocumentHeight() {
    return (document.compatMode == "CSS1Compat"
        ? document.documentElement.scrollHeight
        : document.body.scrollHeight);
}

// returns the available vertical browser space
function getViewportHeight() {
    return ('ActiveXObject' in window && !('opera' in window)
        ? (this.isStrict
            ? document.documentElement.clientHeight
            : document.body.clientHeight)
        : window.innerHeight);
}

// if content > space, there is probably a scrollbar
function hasVerticalScroll() {
    return getDocumentHeight() > getViewportHeight();
}

When do you want to catch that event? If it's when you're adding stuff to the page, just call hasVerticalScroll afterward and act on that. If it's when the person resizes the browser, add an event listener to window's resize event and check in there.

Note hasVerticalScroll() will return true if there SHOULD BE a scrollbar, but depending on your CSS one may never actually show up. I'm assuming that won't be an issue in your case but prolly something to keep in mind.

# ? Feb 8, 2010 09:39

dizzywhip: Dec 23, 2005

dizzywhip fucked around with this message at 21:53 on Nov 9, 2020

# ? Feb 8, 2010 10:43

Supervillin: Feb 6, 2005; Pillbug

mit_senf posted:

The first case is when the page is short enough before images are placed on the page so that there's no scrollbar, but afterwards the images make it long enough for a scrollbar to appear.

...

The second case isn't as bad, but still annoying. If the user resizes the window to be small enough to make the scrollbar appear, the same thing will happen, but only the first instant that the scrollbar appears. That is, if you very slowly resize the window smaller and stop the instant that the scrollbar pops up, the tabs will be stuck in the messed up state until you resize it again. It causes an annoying "flicker" between the two states when you resize back and forth. It seems that the resize event is firing before the scrollbar actually appears.

Do you have control over the content that gets loaded? If you can assign width and height styles to each image, they'll be properly sized on append, rather than waiting until they load.

Slightly messier, once the tab contents are replaced you could add an onload to each image that will check the tab size / scrollbar issue again. But I'd only do this if I don't have control over what images are loaded, meaning I wouldn't necessarily know what size they are during coding.

No idea about the second thing, sorry.

# ? Feb 8, 2010 17:08

dizzywhip: Dec 23, 2005

dizzywhip fucked around with this message at 21:53 on Nov 9, 2020

# ? Feb 8, 2010 20:26

JasonV: Dec 8, 2003

I'm just starting out learning some Javascript, and run into this problem that's just driving me nuts:

code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
    function UpdateDiv(myForm)
    {
	myForm.elements['textTarget'].value = "This Works";
	document.getElementById('target').innerHTML = "This also";
	myForm.elements['target'].innerHTML = "Not this!";
    }
</SCRIPT>
</HEAD>
<BODY>
    <FORM>
        <INPUT TYPE="text" id ="textTarget"></INPUT><BR />
        <DIV id="target"></DIV><BR />
        <BUTTON type="BUTTON" onclick="UpdateDiv(this.form)">Test</BUTTON><BR />        
    </FORM>
</BODY>
</HTML>

I keep getting : myForm.elements.target is undefined

Why can't I access the div tag through myForm.elements?

The reason I don't want to use document.getElementById is the page is generated dynamically from rows in a database, one form for each returned result.

By passing the form associated with the button I can avoid having to name the elements 'target1', 'target2' .. 'target99' etc. I've seen other people do it this way, but it really rubs me the wrong way

So, for each form the <DIV>'s will all have the same name. (The button will submit updates via AJAX, and I'm using the DIV tag to output the response.)

Doing it this way works fine for the textboxes. It's just those DIV tags that won't listen to common sense.

Am I missing something obvious? Or going about this completely the wrong way?

# ? Feb 12, 2010 18:52

spiritual bypass: Feb 19, 2008; Grimey Drawer

gently caress it, man. Get jQuery.

# ? Feb 12, 2010 18:54

Vanadium: Jan 8, 2005

I do not think you are supposed to have multiple elements with the same id attribute. I would probably try to throw xpath at it or something and match on a div with a certain class within the form.

# ? Feb 12, 2010 19:13

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Divs aren't part of the form.elements collection - only form fields and fieldsets count. Get the DB to output an incremented id on each div, and use getElementById, like you're supposed to.

You're also using some hideously outdated HTML and JS there.

# ? Feb 12, 2010 21:29

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

JasonV posted:

I'm just starting out learning some Javascript, and run into this problem that's just driving me nuts:

Wherever you are learning your js from, stop. As said before, use jQuery, or if you want to do it the "hard" way to learn the under the hood stuff, learn HTML first.

# ? Feb 12, 2010 23:33

Supervillin: Feb 6, 2005; Pillbug

Also, that div doesn't need an ID at all, duplicated or unique or anything. DIV is a tag name.

code:

var div = myForm.getElementsByTagName('div')[0]; // first div inside the form

Also, jQuery is a great idea if you're working on something that actually needs to get done, but feel free to learn pure JavaScript if you're just doing it for yourself. But please don't learn it from anywhere or anyone that tells you language="javascript" is good practice, as that attribute was deprecated about 10-12 years ago.

Try the definitive guide, there's a ton of good info in there, even though it's from 2006. And Head First is a good one for starting out with HTML/CSS, along with why you may or may not want to use XHTML (your code currently uses both, which means it's incorrect either way).

Supervillin fucked around with this message at 01:18 on Feb 14, 2010

# ? Feb 14, 2010 01:03

JasonV: Dec 8, 2003

Thank for the advice all. I think I pretty much knew I had jumped too far ahead and was doing it all wrong, but just needed someone to stick my nose in it

# ? Feb 14, 2010 23:12

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

This site claims that using square brackets is faster than eval. (Actually I think that's pretty well known) However, I can get eval to work but not using the bracket method. I'm passing a value through a function to point to a given input box name that triggers after you type.

This works:

code:

 
function transVidUpdateCopies(fieldNum){
	alert(eval('document.fmf.transVideoCopyToCopies'+fieldNum+'.value'));
}

This DOES NOT work:

code:

 
function transVidUpdateCopies(fieldNum){
        alert(document.fmf.transVideoCopyToCopies[fieldNum].value);
}

What am I doing incorrect with the brackets?

LP0 ON FIRE fucked around with this message at 21:18 on Feb 18, 2010

# ? Feb 18, 2010 21:09

OddObserver: Apr 3, 2009

awdio posted:

This site claims that using square brackets is faster than eval. (Actually I think that's pretty well known) However, I can get eval to work but not using the bracket method. I'm passing a value through a function to point to a given input box name that triggers after you type.

This works:
code:
 
function transVidUpdateCopies(fieldNum){
	alert(eval('document.fmf.transVideoCopyToCopies'+fieldNum+'.value'));
}
This DOES NOT work:
code:
 
function transVidUpdateCopies(fieldNum){
        alert(eval(document.fmf.transVideoCopyToCopies[fieldNum].value));
}
What am I doing incorrect with the brackets?

They don't do the same things at all. Try:

code:

alert(document.fmf['transVideoCopyToCopies' + fieldNum].value);

And yes, eval is slow, and risky.

# ? Feb 18, 2010 21:18

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

Sorry, I didn't mean to leave the "eval" in there in the 2nd example. Anyway, OddObserver, your example works. Thanks!

# ? Feb 18, 2010 21:20

Laserjet 4P: Mar 28, 2005; What does it mean?; Fun Shoe

JasonV posted:

Thank for the advice all. I think I pretty much knew I had jumped too far ahead and was doing it all wrong, but just needed someone to stick my nose in it

Here's what it should look like (Mootools specific but the principles don't differ much from jQuery, really).

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<script type="text/javascript" src="js/mootools.js"></script>
		<script type="text/javascript" src="js/site.js"></script>
		<title>Hello there</title>
	</head>
	<body>
		<div>
			<form method="post" action="/whatever">
				<input type="text" id="FirstName" value="Lisa" />
				<a href="#" id="ChangeFirstName">Click me</a>
				<input type="submit" value="Go" />			
			</form>		
		</div>		
	</body>
</html>

You put the calls to include scripts between the head tags, and preferably nowhere else. It means the browser only has to load that stuff once and then can happily cache it; furthermore, your functions and classes will be available everywhere. You eventually get to the point where you only have to give something a certain class - and good JS will seek them out and paste on functionality, like lightboxes for photos or whatever you can think of.

Your site.js file looks like this (again, Mootools-specific!)

code:

window.addEvent('domready', function(){
	alert('this starts when you load the page');
	
	if($('ChangeFirstName')){
		$('ChangeFirstName').addEvent('click', function(){
			// check if the element is actually on the page
			if($('FirstName')){
				$('FirstName').value = 'Bart';
			}
			return false; // this stops the click from going through
		});
	}	
});

The $ is shorthand for document.id which is shorthand for document.getElementById except that this works just everywhere. Also, by checking whether the elements exist, you avoid JS errors that just happily kill the script in mid-execution. The above is not really kosher but your initial form was small and later you'll learn to write generalized functions and classes.

If you would be making something that would pop up images in a lightbox, the advantage of adding JS afterwards is that you could just add hyperlinks directly to the image, such as:

code:

<a class="Lightbox" href="/images/image.jpg"><img src="/images/image_thumb.jpg"></a>

That means without JS it would still work as intended. You then use JS to hunt down all links of the class Lightbox; you change its functionality by applying the new onclick event, which in turn calls a generic JS function which creates the lightbox for you. Nothing's lamer than having a bunch of images on a page and not being able to middle-click on 'm because it looks like:

code:

<a href="javascript:openPopup('/images/image.jpg');"><img src="/images/image_thumb.jpg"></a>

Lots of HTML tutorials on the web are utter poo poo; don't trust most books either. You'll be cursing the brevity of the JS framework tutorials and perhaps even bang your head against the desk because it's tripping over some obscure error and you just can't get it to work, but good god, it's so worth the effort to escape the dark ages.

Laserjet 4P fucked around with this message at 21:46 on Feb 18, 2010

# ? Feb 18, 2010 21:41

Lou Ferrigno: May 14, 2003; I SHALL NOT POST - I SHALL ONLY REPLY ... OCCASIONALLY (OMG SHAMU LOL)

I am trying to call a function once AJAX loads it's response. This function uses variables set by the script AJAX runs, so I don't believe it is accessible via readystate. I can, however, make it run onclick at the same level it should run onload.

I have tried window.onload (which I realize is useless at this point), document.getElementById("div_id").onload (where the div is only present from the called script's results) and putting it between <script> tags standalone before and after the <div> to be updated.

Is there a standard way of doing this or am I just done for unless I can stick it in the readystate?

# ? Feb 19, 2010 00:03

Avenging Dentist: Oct 1, 2005; oh my god is that a circular saw that does not go in my mouth aaaaagh

awdio posted:

Sorry, I didn't mean to leave the "eval" in there in the 2nd example. Anyway, OddObserver, your example works. Thanks!

Please tell me there's a good reason that transVideoCopyToCopies isn't just an array.

# ? Feb 19, 2010 00:06

Lou Ferrigno: May 14, 2003; I SHALL NOT POST - I SHALL ONLY REPLY ... OCCASIONALLY (OMG SHAMU LOL)

Lou Ferrigno posted:

I am trying to call a function once AJAX loads it's response. This function uses variables set by the script AJAX runs, so I don't believe it is accessible via readystate. I can, however, make it run onclick at the same level it should run onload.

I have tried window.onload (which I realize is useless at this point), document.getElementById("div_id").onload (where the div is only present from the called script's results) and putting it between <script> tags standalone before and after the <div> to be updated.

Is there a standard way of doing this or am I just done for unless I can stick it in the readystate?

I developed a workaround by including the script ajax calls directly in the div initially. Then, when it gets updated, it changes the div like normal. The problem is that I had to set a variable in the AJAX post data that tells the file to include all of my functions as they are lost when the div is updated. by including it directly initially, it either would "re-declare" them all again, or when updated would "fail to call" because they were wiped clean after the ajax call.

This seems like a patch job and I hope that there is a way to load a js function automatically w/o an onload or onclick function.

Lou Ferrigno fucked around with this message at 05:17 on Feb 19, 2010

# ? Feb 19, 2010 05:10

diadem: Sep 20, 2003; eet bugz

I opened a window using window.open. I pass in the argument scrollbars and set the value to either yes or no.

I am now in the child window. My javascript is running. I want to know if the window has scrollbars enabled or not. How do I do this?

- I am in IE so window.scrollbars/this.scrollbars won't return anything
- The windows scrollbars exist outside the body.
- Looking at the document's width will tell me about the document. I can even figure out if there are scrollbars in the document. This will not tell me anything about the window itself.
- The width of the scrollbar in question changes Dependant on what the currently selected Windows Desktop Theme is, for ascetic reasons.

edit: To be perfectly clear - I need to know if the application has scrollbars, not if the body's overflow has a scrollbar. I need this information to call window.resize. Both the application's scrollbar and the little bar on the left of the application window that lets you resize it are taken into account with window.resize. Just looking at the html inside it isn't enough. I need to know the expected width of the application window itself for this to work right.

diadem fucked around with this message at 21:11 on Feb 23, 2010

# ? Feb 23, 2010 19:00

LOLLERZ: Dec 9, 2003; ASK ME ABOUT SPAMMING THE REPORT FORUM TO PROTECT ~MY WIFE'S~ OKCUPID PERSONALS ANALYSIS SA-MART THREAD. DO IT. ALL THE TIME. CONSTANTLY. IF SHE DOESN'T HAVE THE THREAD, SHE'LL WANT TO TALK TO ME!

Has anyone seen this? js.Fiddle

It looks like a pretty neat tool for posting snippets of html/js/css to share and debug.

# ? Feb 24, 2010 08:45

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

Avenging Dentist posted:

Please tell me there's a good reason that transVideoCopyToCopies isn't just an array.

On the php portion of the page there's X amount of transVideoCopyToCopies fields. So, in a For I just call it "transVideoCopyToCopies".$i

document.fmf['transVideoCopyToCopies' + fieldNum].value is just referencing a name of a field in php... I don't see why it would have to be an array if that's what you're asking.

# ? Feb 26, 2010 19:38

ATLbeer: Sep 26, 2004; Über nerd

I don't know if this deserves it's own thread or not but, drat this is dangerously clever

http://sla.ckers.org/forum/read.php?24,33349,33405

http://discogscounter.getfreehosting.co.uk/js-noalnum.php

# ? Feb 26, 2010 21:55

HFX: Nov 29, 2004

Question: Why is the document null?

window.html

code:

  <html>
  <head>
    <script type="text/javascript" src="window.js"></script>
  </head>
  <body onLoad="var divWindow = DivWindowObject(); divWindow.show('Hello', 640, 480, 0, 0, document);">
  </body>
</html>

Source: window.js

code:

function DivWindowObject(windowTitle, width, height, xOrigin, yOrigin, document) {
    if (document) {
	alert("DivWindow: Alive");
    } else {
	alert("DivWindow: Dead");
    }
}

Is there anyway to make the document not null? Do the platform I'm working on and its interface design, it would make my life easier if I write the code this way. I'm going to try it on the embedded platform tomorrow, but it is failing in Mozilla and Chrome at the moment.

# ? Mar 5, 2010 06:15

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

The document parameter inside DivWindowObject is undefined because you are not calling the function with any arguments. The windowTitle, width, height, xOrigin, and yOrigin parameters are all going to be undefined too, for the same reason :confused:

It looks like maybe you are calling the .show() method with those arguments instead of DivWindowObject itself.

Or maybe you are trying to access the global document variable, in which case you need to rename your local document variable to something else.

# ? Mar 5, 2010 06:50

HFX: Nov 29, 2004

Nigglypuff posted:

The document parameter inside DivWindowObject is undefined because you are not calling the function with any arguments. The windowTitle, width, height, xOrigin, and yOrigin parameters are all going to be undefined too, for the same reason

It looks like maybe you are calling the .show() method with those arguments instead of DivWindowObject itself.

Or maybe you are trying to access the global document variable, in which case you need to rename your local document variable to something else.

Okay, I'm dumb. Sorry. I can't believe I missed that. I've been fixing code all day and was trying to make something to make my life easier and I screwed up.

HFX fucked around with this message at 07:54 on Mar 5, 2010

# ? Mar 5, 2010 07:43

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

One of my pages has a setInterval that gets called in the onload property of the <body> tag:

<body onLoad="IntervalID = setInterval ('ajaxFunction()', 20000)">

As you can see this is supposed to go off every 20 seconds. The purpose of ajaxFunction() is to check on the contents of a small .txt file on the site to see if they have changed, and if they have changed, to notify the user by changing the page background colour. I have determined that it works as expected. However, I noticed while using the Firebug "Net/XHR" tab that the function appears to get called less frequently than specified. It seemed to happen about every two minutes or thereabouts, instead of every 20 seconds.

Then I closed Firefox and started it up again, as my browsing session had been going on for a while, and timed the delay another time. This time it was about 35-45 seconds.

If you are logged out when you visit the page, then the delay is set as 180,000 milliseconds instead of 20,000. I visited the page logged out and timed the delay between requests again, and found it was about 9 minutes.

This is weird, why might my interval be so much longer than I specified?

# ? Mar 5, 2010 16:44

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

I don't know if it would help if you'd fix it, but your setinterval is wrongly defined.

code:

<body onLoad="IntervalID = setInterval (ajaxFunction, 20000)">

I know that setinterval/settimer aren't guaranteed to fire at the specified time, it could take a bit longer. But your weird fluxuation in firing times is not really easily explainable.

edit: to clarify it's not wrong per se, but not very good practice.

karms fucked around with this message at 00:03 on Mar 6, 2010

# ? Mar 5, 2010 23:58

Hammerite: Mar 9, 2007; And you don't remember what I said here, either, but it was pompous and stupid.; Jade Ear Joe

KARMA! posted:

It looks as though I was looking in the wrong Firebug tab - it appears reliably in the "Console" tab at the correct intervals. Not sure why the "Net" tab is tardy, but there you go.

Thanks for the pointers, I changed my syntax slightly to be more standardised.

# ? Mar 6, 2010 15:25

Boring: Nov 29, 2004; nuhhh

trying to make a slidedown menu type thing, using this:

http://andylangton.co.uk/articles/javascript/jquery-accessible-show-hide/ but with images not text.

I've managed to do it, but the problem is that the menu is fine on initial load, the showtext menu button displays fine, then when it it is clicked down drops the menu fine, but once clicked, the button reverts to <img src='images/news.png'> rather than the actual png file. It continues to function fine, but the image won't display, just the code.

code:

<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>

    <script type="text/javascript">
	
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link
var showText="<img src='images/news.png'>";
var hideText="<img src='images/news.png'>";

// create the toggle link
$("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a>");

// hide the content
$('#hide_this').hide();

// capture clicks on the newly created link
$('a#toggle_link').click(function() {

// change the link text
if ($('a#toggle_link').text()==showText) {
$('a#toggle_link').text(hideText);
}
else {
$('a#toggle_link').text(showText);
}

// toggle the display
$('#hide_this').toggle('slow');

// return false so any link destination is not followed
return false;
				});

});

</script>
</head>
<body>
<div id="hide_this"><img src="images/foals.png" width="66" height="20">
<div id="hide_this"><img src="images/UNI.png" width="198" height="20">
</div>
</body>
</html>

# ? Mar 9, 2010 13:40

Cadoc: Mar 5, 2007

Boring posted:

jQuery toggle Code while forgeting about proper HTML

I just mangled with your code a bit (used other pngs for local testing).

Switching to a different method to change the image did the trick.

Substitution from text in "" or '' with variables is something you figured out anyway.

code:

<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

<script type="text/javascript">
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link

// create the toggle link
$("#hide_this").before("<p><a href='#' id='toggle_link'>"+'<img id="toggle_img" src="news.png" />'+"</a></p>");

// hide the content
$('#hide_this').hide();

// capture clicks on the newly created link
$('a#toggle_link').click(function() {

// change the link text
if ($("img#toggle_img").attr("src") == "news.png") {
$("img#toggle_img").attr("src", "folder.png");
}
else {
$("img#toggle_img").attr("src", "news.png");
}

// toggle the display
$('#hide_this').toggle('slow');

// return false so any link destination is not followed
return false;
				});

});

</script>
</head>
<body>
<div id="hide_this"><img src="folder.png" />
<div id="hide_this"><img src="user.png" />
</div>
</body>
</html>

# ? Mar 9, 2010 16:30

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 01:13

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Boring posted:

trying to make a slidedown menu type thing, using this:

http://andylangton.co.uk/articles/javascript/jquery-accessible-show-hide/ but with images not text.

I've managed to do it, but the problem is that the menu is fine on initial load, the showtext menu button displays fine, then when it it is clicked down drops the menu fine, but once clicked, the button reverts to <img src='images/news.png'> rather than the actual png file. It continues to function fine, but the image won't display, just the code.

You are setting the text() of the element, which will treat whatever you stick in there as... text! You want to set the html() of the element, which will treat what you stick in there as HTML, and show the image.

Also, you are using multiple elements with the same ID. This makes baby web-developer jesus cry. Don't do that.

Lumpy fucked around with this message at 17:03 on Mar 9, 2010

# ? Mar 9, 2010 16:54

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »