Help me with some css!

br3n

Senior Member
Right heres the dilema.

Code:
<ul class="portfolio-gallery-items">                            <li> <a href="#" alt="" class="class1" src="images/portfolio/one.jpg" width="320" height="250"> information here </a>               </li>                <li> <a href="#" alt="" class="class2"  src="images/portfolio/one.jpg" width="320" height="250"> information  here </a>               </li>                <li> <a href="#" alt="" class="class3"  src="images/portfolio/one.jpg" width="320" height="250"> information  here </a>               </li>                <li> <a href="#" alt="" class="class4"  src="images/portfolio/one.jpg" width="320" height="250"> information  here </a>               </li><ul>

Now somewhere else I want 4 links... But when you click one link it will apply something like

.class1, .class2, .class3 {display:hidden;}

then when you click another link it will apply something like:

.class2, .class3, .class4 {display:hidden;}

Any help greatly appreciated.
 
you want to look into 'onclick' it's the java bit for clicking etc, used that on my very first personal site, good old automatic code lol

You could try replacing hover with focus or active and see if it works
 
Here's an example.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
//wrapper - prevents any js conflicts
(function($){

//when the doc is ready
$(function(){

//use #id or .class multiples can be comma separated
$('#id').click(function(){

//hide these items - you could also use .show() / .fadeTo etc
$('.class1, .class2, .class3').hide();

});
//end of function

});
//doc rdy

})(jQuery);
//wrapper
</script>

Hopefully pretty self explanitory.

First include the jQuery libary - then put your code within script tags (or referenced as an external js file). The wrapper prevents any conflicts with other js you may be using against jQuery's dollar function. Document ready wrap makes sure the DOM has seen all elements on the page before the jQuery runs - then the bit inside that is your on click function (you could add multiple functions inside here).
 
It doesn't make immediate sense but ill get everything in place and have a play around - expect a pm :p

thanks!
 
Hay Br3n.
What exactly are you trying to achieve?
There may be a pretty simple solution you never know. :)

From what I gatehr you want it to apply different styles on click.
If thats it don't use JQuery thats about 78k worth of overkil right there.

Set a function something like:

function changeMeChangeMe(set,id){
if(1==set){
return document.getElementById(id).className="class1";
}if(2==set){
return document.getElementById(id).className="class2";
}
}

Then add to the links.

<a href="#Non js backup" onclick="changeMeChangeMe('1','link1')" id="link1">Click me and feel the love</a>

That way what ever set is, the first variable will determine the class to add, and the second variable determines the element to change. Obviously depending on the exact code there may be much more efficient ways to do this and TBH you should stick it in a JS switch statement over seperate if's as well.
 
OK - its hard to explain the purpose of what I want to acheieve... basically its not necessary (your thinking why bother then?) because it will enhance the viewing experience - this is also why im happy to use display:hidden.

Im going to get everything coded up and then tackle this problem - thanks for the help i'll be back shortly.
 
Stealing a line of code from w3c schools

Code:
<input class="box" type="button" value="Remove" onclick="removeElement()">

CSS Display and Visibility

Could I not do something like that? on click apply .hidden

.hidden {visibility: hidden;}
 
Just to update - I got about 70% into the coding for my new site and as im learning a lot as I go ive decided to completely change the design - not because I couldnt accomplish the design I wanted, infact quite the opposite so stay tuned!
 
Back
Top