JavaScript OnClick Help

Xenonsoft

Active Member
Hey y'all.

Just developing our portfolio page for the new site and thought the best way to display the images would be to preload them and then change onclick for the relevant title.

That's fine, I've got that done, just need a bit of a tweak.

Underneath the image there'll be a paragraph or two of text that will relate to a specific image, so there'll be numerous div's containing the summary paragraph for that image.

So I'm needing some code that will 'hide' all div's named and then 'show' the div relating to the text just clicked.

What I've got so far:
Code:
<img src="../images/portfolio/neylonhealth.jpg" alt="Portfolio Images" id="change" />...Further down...<li><a href="#" onclick="document.getElementById('change').src='../images/portfolio/nothing.jpg'"                onclick="document.getElementById('Nothing').  DoTheActionThing  ">Nothing</a></li><li><a href="#" onclick="document.getElementById('change').src='../images/portfolio/small_b.jpg'">Small b</a></li><li><a href="#" onclick="document.getElementById('change').src='../images/portfolio/forestlife.jpg'">Forest Life</a></li><li><a href="#" onclick="document.getElementById('change').src='../images/portfolio/stocks_studio.jpg'">Stocks Studio</a></li><li><a href="#" onclick="document.getElementById('change').src='../images/portfolio/tbtv.jpg'">TrueBlueTV</a></li>..Which will affect the paragraph's further down too..<div class="change2" id="Nothing"><p>Sandra Neylon from <a href="//www.neylonhealth.com/" class="colour">DummyText</p></div>
 
I don't know any JS but I do know you're best off not using any inline JS whatsoever ideally. JS shouldn't be in the markup, it should be totally unobtrusive. Sorry that's so vague, but it's the best I can put it haha.
 
But is that just because it's easier to update and maintain or is it for any real reason, ie are there any downsides to inline JS?
 
ok I might not be understanding this properly etc and I'm no web designer but is this what you want to do (its done with mootools though but it might help find what you need) - linky :)
 
That's kinda it yeah Levi.

The functionality is kinda there, although it's too code heavy for me to implement I think. I would have thought that some simple JS would do what I'm looking to do, mootools have done fancy stuff there :p

Cheers for the general direction though :)
 
all the moo source code is in a couple of files (I'm using it for my gallery) and its just linked to like the below at the beginning of the code (I'm still learning :))
Code:
</script>    </csactiondict>    <script type="text/javascript" src="/js/mootools-1.2.2.js"></script>    <script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
and then (as I understand it, I haven't looked into this area much outside of my gallery) its just a case of some instructions in the actual page.

it looks like it doing the same, theres the script bit and then at the text (for toggle)
Code:
<a id="v_toggle" href="#" name="v_toggle">toggle</a>
 
It's because your JS shouldn't affect your markup, in the same way CSS doesn't. As standards progress and people adopt progressive enhancement the idea is to write sensible semantic markup, then don't touch that at all and add your CSS and JS elsewhere.
 
Right, I kinda understand.

It basically comes down to the point that we shouldn't have inline JS because it may detrimentally affect those with different browsers/using hand-held devices.

How would I seperate the JS in this example above? Using classes? I haven't a clue.

I don't think having it inline will cause much damage mind, but if there's an easy usable solution that provides a slightly better outcome then I'll look at it.


Still got the same problem as before mind, will have to ask on some javascript forums.
 
Hay up right this should do it and it should give you a crash course in DOM Scripting which is how you write unobtrusive Javascript.

So we create an external js file.
Soz if I don't use proper terminology at pool party and got roped in to fixing my freinds laptop, that, drinking and chating means I have other things on. :)

Right so the HTML looks something like this.
<div id="one">
<img src="" />
Some Text
</div>
<div id="two">
<img src="" />
Some Text
</div>
<div id="three">
<img src="" />
Some Text
</div>
<div id="four">
<img src="" />
Some Text
</div>

So first function we add is ~

Right so now we write the code we need to display the whole thing.
var one=document.getElementById("one").getElementsByTagName("img")[0];
var two=document.getElementById("two").getElementsByTagName("img")[0];
var three=document.getElementById("three").getElementsByTagName("img")[0];
var four=document.getElementById("four").getElementsByTagName("img")[0];

one.onclick=one.style.display="block";
two.onclick=one.style.display="hidden";
three.onclick=one.style.display="hidden";
four.onclick=one.style.display="hidden";

one.onclick=document.getElementById("one").getElementsByTagName("img").setAttribute("src","../images/portfolio/nothing.jpg");
one.onclick=one.style.display="block";
two.onclick=one.style.display="hidden";
three.onclick=one.style.display="hidden";
four.onclick=one.style.display="hidden";

two.onclick=document.getElementById("one").getElementsByTagName("img").setAttribute("src","../images/portfolio/nothing.jpg");
one.onclick=one.style.display="hidden";
two.onclick=one.style.display="block";
three.onclick=one.style.display="hidden";
four.onclick=one.style.display="hidden";

three.onclick=document.getElementById("one").getElementsByTagName("img").setAttribute("src","../images/portfolio/nothing.jpg");
one.onclick=one.style.display="hidden";
two.onclick=one.style.display="hidden";
three.onclick=one.style.display="block";
four.onclick=one.style.display="hidden";

four.onclick=document.getElementById("one").getElementsByTagName("img").setAttribute("src","../images/portfolio/nothing.jpg");
one.onclick=one.style.display="hidden";
two.onclick=one.style.display="hidden";
three.onclick=one.style.display="hidden";
four.onclick=one.style.display="block";

And that should do it.
Yes I know it can be improved you could condense it to 1 function move the CSS to a CSS file and switch classes instead, that and you could user actual event listeners to do it but as I say I'm at a party and this will work. :D

I would also add an onmouseover and onmouse out event and change the cursor to a hand on hover over the image as you dont want them to be links as they wont work wen JS is off and it will show to the user that an event can happen. This way if JS is off all the images display at once.

Benefits of writing it via DOM Scripting is it reduces your bloat which speed up page porformance, allows it to be cached which again speeds up poformance, can improve search engine optimization as well due to the reduction in bloat, following more modern standards, probably could think of some more but they are the main ones.

Any problems let me know may have written an error or 2 in but don't think so.

Jaz
Green ~ XHTML
Purple ~ JS
 
Cheers Jaz top work, that's some good logic and I've learnt a bit there :)

Unfortunately the other lad in the business did a javascript that did it already, I forgot about this thread and should have posted back to update you all. Apologies for that.

This was the general format he used:

function ChangePortfolioClient_NeylonHealth()
{

// Change Image
document.getElementById('change').src = 'source';

// Text For Summary
var summary = '<p>Summary</p>';

// Change Text
document.getElementById('summary').innerHTML = summary;

}

Key
Purple ~ JS
 
A further small, simple problem for someone comfortable with JavaScript no doubt.

I'm wanting to have a button that when clicked activates another stylesheet (note: I dont want to switch stylesheets as such, I want to keep the original one but activate this one too, for some specific rules).

Obviously the code for the stylesheet is as such:

<link rel="alternate stylesheet" href="style2.css" type="text/css" id="alt_stylesheet" />

If anyone can help it would be appreciated, in the mean time I'll keep prowling google for the answer.



EDIT: If it's any help theres a simple script that changes stylesheets that worked, but I'm not sure how to adapt it..

<script type="text/javascript">

function changeStyle() {
document.getElementById('alt_stylesheet').href = 'style2.css';
}

</script>
 
cant you keep the styles in the original stylesheet just call them by a different name? that way you wouldn't need to activate a stylesheet on the fly so to speak?
 
Sorry I don't quite get you Chris.

I'm looking for a big chunk of css code to be executed onclick, so keeping the files seperate is the best thing.

The idea behind it is that the normal layout will be left col content, right col nav, and that the user can click a button and it'll switch them round.
 
Hay fella,
Using your function all you have to do is add an id to the style sheet and add the function name to the onclick event handler and that should work.

So ~
<link id="alt_stylesheet" .../>

<button type="submit" onclick=""changeStyle();return false>Change the background</button>


However I would change the function to ~

<script type="text/javascript">

function changeStyle() {
document.getElementById('alt_stylesheet').setAttribute("href","style2.css");
}

</script>


Jaz
 
well you're not anywhere near the DF romance of Tim and Onartis :p but its a start :p
 
Back
Top