Member Offer
  1. 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!

Discussion in 'Website Design Forum:' started by br3n, Oct 26, 2011.

  1. br3n

    br3n Senior Member

    Right heres the dilema.

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

    br3n Senior Member

  3. Levi

    Levi Moderator Staff Member

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

    tbwcf Active Member

    Here's an example.

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

    br3n Senior Member

    It doesn't make immediate sense but ill get everything in place and have a play around - expect a pm :p

  6. Jazajay

    Jazajay Active Member

    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){
    return document.getElementById(id).className="class1";
    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.
  7. br3n

    br3n Senior Member

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

    br3n Senior Member

    Stealing a line of code from w3c schools

    <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;}
  9. br3n

    br3n Senior Member

    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!

Share This Page