Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Changing content in Div upon Link Click

  1. #1
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing content in Div upon Link Click

    Okay, so I've posted this on 2 other websites with no such luck. Everyone keeps giving me jquery or javascript answers and I'm looking for just a simple css solution. I know this can be done with just css because I've seen it done on other profiles.

    I have around 4 buttons and they are images, and one div. Upon clicking each button, the div content should change, but it does not. The information from button 1 stays in the div when all links are clicked and I cant get it to function.

    Code:
    <style type="text/css">
    #button1 {position:fixed;top:200px;left:650px;}
    #button2 {position:fixed;top:300px;left:650px;}
    #button3 {position:fixed;top:400px;left:650px;}
    #button4 {position:fixed;top:500px;left:650px;}
    #content {border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;background: rgba(181, 142, 146, 0.5);color:black;font-size:10px;text-align:center;}
    </style>
    
    <div id="button1"><a href="#FAQ"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></a></div>
    <div id="button2"><a href="#Her"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></a></div>
    <div id="button3"><a href="#And"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></a></div>
    <div id="button4"><a href="#Enjoy"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></a></div>
    
    <div id="content"> This is where I put the default information. No clicks needed </div
    
    <a name="FAQ">
    <div style="border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;}
    FAQ content will go here.
    So when I click on FAQ, I do not see the text inside, the div content doesn't change one bit upon clicking on button 1.

    Any help to make the sections/buttons functional is appreciated.

  2. #2
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Can you include a link to your site?

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    A JavaScript solution seems like a very reasonable suggestion - are there any particular reasons why you're dismissing the advice?

    I know this can be done with just css because I've seen it done on other profiles.
    if you've seen it done in a particular way that you like, can you not look at that site's CSS to see how, or if you're having problems either finding the pertinent part or deciphering the CSS, you can give us a link so we can help.

    Alternatively, a quick google search on "change div content with CSS click" brings up quite a few options http://www.google.com/search?ei=rFoU...with+css+click
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    Btw, there are some errors in your markup so be sure to correct them;
    Code:
    <div id="content"> This is where I put the default information. No clicks needed </div>
    
    <a name="FAQ">
    <div style="border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;">
    FAQ content will go here.
    </div>
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there CSSie,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    
    #button1 {position:fixed;top:200px;left:650px;}
    #button2 {position:fixed;top:300px;left:650px;}
    #button3 {position:fixed;top:400px;left:650px;}
    #button4 {position:fixed;top:500px;left:650px;}
    
    #button1:focus~#content #def,
    #button2:focus~#content #def,
    #button3:focus~#content #def,
    #button4:focus~#content #def {display:none;}
    
    #button1:focus~#content div:nth-child(2),
    #button2:focus~#content div:nth-child(3),
    #button3:focus~#content div:nth-child(4),
    #button4:focus~#content div:nth-child(5) {display:block;}
    
    #content {
        border:1px dashed black;
        width:300px; 
        height:500px;
        position:fixed;
        left:750px;
        top:150px;
        background:rgba(181,142,146,0.5);
        color:black;
        font-size:10px;
        text-align:center;
     }
    
    #faq,#her,#and,#enj {display:none;}
    
    </style>
    
    </head>
    <body>
    
    <a id="button1" href="#" tabindex="1"><img src="http://img62.imageshack.us/img62/3523/p42e.png" alt=""></a>
    <a id="button2" href="#" tabindex="2"><img src="http://img16.imageshack.us/img16/3742/lnam.png" alt=""></a>
    <a id="button3" href="#" tabindex="3"><img src="http://img829.imageshack.us/img829/2347/kflq.png" alt=""></a>
    <a id="button4" href="#" tabindex="4"><img src="http://img24.imageshack.us/img24/5111/zv9.png" alt=""></a>
    
    <div id="content"> 
     <div id="def">This is where I put the default information. No clicks needed </div>
     <div id="faq">FAQ content will go here.</div>
     <div id="her">Her content will go here.</div>
     <div id="and">And content will go here.</div>
     <div id="enj">Enjoy content will go here.</div>
    </div>
    
    </body>
    </html>
    coothead

  6. #6
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey Bev! I've tried google, all of them happen to be javascript and jquery answers/suggestions.

    The site I am sure for profiles doesn't allow jquery/javascript and is limited to only html/css. Thanks so much for your suggestion! I've tried to mimic the coding of other people's who've had it work out fine, with no such luck. I'm a terrible beginner, and even just that is pushing it.

    As for you, coothead,

    Thanks so much! This is exactly what I was looking for! And the warm welcome is certainly appreciated, too!

    I apologize for my late reply as well.

    Thanks for taking the time out to assess my problem, both of you.

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.

    coothead

  8. #8
    Join Date
    Nov 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Format: Code Tags [code][/code]

    Hi,
    I appreciate your contribution to this forum

    In the above code if I make a little modification, I am unable to see the result as desired. The modification are in bold
    Please help...

    Thanks in advance




    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    
    #button1 {position:fixed;top:200px;left:650px;}
    #button2 {position:fixed;top:300px;left:650px;}
    #button3 {position:fixed;top:400px;left:650px;}
    #button4 {position:fixed;top:500px;left:650px;}
    
    #main a:nth-child(1):focus~#content #def,
    #main a:nth-child(2):focus~#content #def,
    #main a:nth-child(3):focus~#content #def,
    #main a:nth-child(4):focus~#content #def {display:none;}
    
    #main a:nth-child(1):focus~#content div:nth-child(2),
    #main a:nth-child(2):focus~#content div:nth-child(3),
    #main a:nth-child(3):focus~#content div:nth-child(4),
    #main a:nth-child(4):focus~#content div:nth-child(5) {display:block;}
    
    #content {
        border:1px dashed black;
        width:300px; 
        height:500px;
        position:fixed;
        left:750px;
        top:150px;
        background:rgba(181,142,146,0.5);
        color:black;
        font-size:10px;
        text-align:center;
     }
    
    #faq,#her,#and,#enj {display:none;}
    
    </style>
    
    </head>
    <body>
    
    <div id="main">
    <a id="button1" href="#" tabindex="1"><img src="http://img62.imageshack.us/img62/3523/p42e.png" alt=""></a>
    <a id="button2" href="#" tabindex="2"><img src="http://img16.imageshack.us/img16/3742/lnam.png" alt=""></a>
    <a id="button3" href="#" tabindex="3"><img src="http://img829.imageshack.us/img829/2347/kflq.png" alt=""></a>
    <a id="button4" href="#" tabindex="4"><img src="http://img24.imageshack.us/img24/5111/zv9.png" alt=""></a>
    </div>
    
    <div id="content"> 
     <div id="def">This is where I put the default information. No clicks needed </div>
     <div id="faq">FAQ content will go here.</div>
     <div id="her">Her content will go here.</div>
     <div id="and">And content will go here.</div>
     <div id="enj">Enjoy content will go here.</div>
    </div>
    
    </body>
    </html>
    Last edited by keyboard; 11-19-2013 at 04:35 AM.

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Abhisheknjain,

    and a warm welcome to these forums.

    In the above code if I make a little modification, I am unable to see the result as desired.
    Unfortunately, you forgot to say what your "desired result" was.

    coothead

  10. #10
    Join Date
    Nov 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi
    Thanks a ton for responding. Sorry I didn't realize, i missed to point out my desired result.

    Actually I am trying to apply some transformation on one section of my website when I click on some other section.

    Basically, the code you provided is working fine. i.e when i click on the msg img, the content on the other div is changing.

    But the same is not working when i put these msg img (id=button1,2 etc..) inside a div (id=main).

    I hope you got my point.

    Thanks again.

Similar Threads

  1. featured content glider v2.5 auto glide stops once i click the pagination link
    By developerhusain in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-26-2013, 01:24 PM
  2. Replies: 1
    Last Post: 04-23-2010, 11:26 AM
  3. Changing link style when link is selected...
    By MizzBia in forum Looking for such a script or service
    Replies: 0
    Last Post: 12-01-2009, 11:28 PM
  4. Changing image by click
    By mathnoob123 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-06-2009, 09:36 PM
  5. tab menu item color not changing on click
    By ashok_kuncha in forum CSS
    Replies: 0
    Last Post: 08-14-2007, 09:41 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •