Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Change content in DIV based on link click

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 5, 2013 at 10:58 pm #43180
    JoeBrooks
    Member

    My mind is turning to mush and Google isn’t helping me out on this one, perhaps I’m not describing what I want accurately.

    Basically I want the contents of a single DIV to change based on which image someone clicks.

    Link 1 | Link 2 | Link 3

    Content Changes depending on which Link is clicked

    If someone could help point me in the right direct.. i’d appreciate it

    March 5, 2013 at 11:33 pm #127138
    JohnMotylJr
    Participant

    @JoeBrooks,

    Do you want to change the actual content with javascript on a click or possibly show or hide the content based on clicks?

    Here is a CodePen you can check out. Simply doing exactly what you want, change the content based upon which link is clicked.

    March 6, 2013 at 12:12 am #127139
    JoeBrooks
    Member

    I would like to show / hide content for each link.

    For some reason in your example when I move my mouse out of the clickable area it reverts back to the original. I would like the new state to stay visable.

    March 6, 2013 at 12:29 am #127140
    JohnMotylJr
    Participant

    @JoeBrooks ,

    Yeah, i added a mouseleave event to clear out the div. Changed it so the content stays as when you leave.

    http://codepen.io/johnmotyljr/pen/qhvue

    March 6, 2013 at 12:36 am #127141
    JoeBrooks
    Member

    Thanks John, I’ll give it a shot :)

    March 6, 2013 at 12:38 am #127142
    JohnMotylJr
    Participant

    @JoeBrooks,

    No problem! Are you just doing simple stuff like putting image descriptions or more complex content?

    March 6, 2013 at 12:59 am #127145
    JoeBrooks
    Member

    It’s for a biography page on my client’s site.

    What they want is three photos , and when one photo is clicked the person’s bio appears beneath.

    What you have works on codepen.. I have ZERO experience with JS or Jquery, how do I go about converting the JS column into a script ?

    This is my [New Codepen](http://codepen.io/anon/pen/oDCmB)

    March 6, 2013 at 1:11 am #127147
    JohnMotylJr
    Participant
    Step 1 (Adding jQuery library)

    <!DOCTYPE hmtl>
    
<html>
    
<head>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
</head>

    Step 2 (Add your jquery code)

    <head>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
<script>
    
$(function() {
    
$('#aardvark').click(function() {
    
$('div').html('The text you are adding');
    
});
    
});
    
<script>
    
</head>

    Nice use-case, you need anymore help man just reply.

    March 6, 2013 at 1:29 am #127150
    JoeBrooks
    Member

    And it’s actually for the mobile version of the site.

    Here is the page: http://tomroof.com/tinymonster/about-us/

    I have another question. Instead of rewriting the text inside the script, is there a way to call on a Custom Field slug’s text instead? IE

    ID, ‘profile2’, true); ?>

    March 6, 2013 at 1:57 am #127152
    JohnMotylJr
    Participant

    Would you rather just have javascript collect data, that is already on the page, and enter it rather then typing it all?

    May 27, 2013 at 1:58 pm #136639
    bsummers
    Member

    I’m trying to get this to work in wordpress. Not sure I put the code in the header properly. Any suggestions? (Ignore the fact that the css messed up the rest of the page)

    http://hotzon.honeycombsites.ca/testpage2

    [edit]

    nvm, I found this article and seem to have gotten it working:
    http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

    July 30, 2013 at 12:55 am #145128
    Historical Forums User
    Participant

    if I want to target to another html file?

    January 21, 2014 at 3:34 am #160877
    mattbee
    Participant

    @JoshBlackwood! I’ve been after a piece of code like this forever, thanks!

    Just wondering now if you could add a sliding animation rather than it just abruptly disappearing?

    I’ve tried incorporating .slideUp(), slideDown() and .slideToggle(). No luck though, ’cause I’m not the best with JS/jQuery.

    Any help would be smashing!

    July 20, 2015 at 4:00 pm #205286
    timelessfilms
    Participant

    @JohnMotylJr

    Hey man. I am trying to use this code to load videos from Vimeo.

    I tried using the iframe code on your codepen page instead of the text and it worked like a charm.

    However when I try and apply it to my own page using the same code – it doesn’t do anything. I have checked and re-checked for errors but everything seems in place.

    Might you have any idea why it just might not be functioning?

    Thanks for your help!

    July 21, 2015 at 12:07 am #205298
    timelessfilms
    Participant

    Hey @JohnMotylJr – actually just figured it out.

    Noob mistake haha. Thanks.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.