• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Help me with some css!


br3n

Senior Member
#1
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.
 

Levi

Moderator
Staff member
#3
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
 

tbwcf

Active Member
#4
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).
 

Jazajay

Active Member
#6
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.
 

br3n

Senior Member
#7
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.
 

br3n

Senior Member
#9
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!