CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2167706
user2167706

Reputation:

JavaScript target.?

here is the site in question:

http://www.onepixelroom.com/londonrefurb

When I click on the multiple circles just after the about section, I want it to change quotes in the text above.

So far I got it to show what is in the < li > text. But I really want it to show a specific quote to each button.

For example when I click on "one", I want it to say: "Gloubiboulga" but when I click "two", I want it to say : "Zorro"

JavaScript:

<body onLoad="initialize();">
<script type="text/javascript">window.onload=function(){
var ul = document.querySelector('#bodyleft ul');
ul.onclick = function(e){
    var evt = e || window.event;
    var target = evt.target || evt.srcElement;
    var p = document.querySelector('#bodyright h3');
    p.innerHTML = '" ' + target.innerHTML + ' "';
    return false;
};
}</script>

html:

<div id="bodyright">
  <h3>" one "</h3>
</div>



<div id="bodyleft">
  <ul class="benefitSwitcher">
    <li><a href="#_self" style="cursor: pointer;    ">one</a></li>
    <li><a href="#_self" style="cursor: pointer;    ">two</a></li>
    <li><a href="#_self" style="cursor: pointer;    ">three</a></li>
    <li class="last"><a href="#_self" style="cursor: pointer;   ">four</a></li>
  </ul>
</div>

</div>

css:

.benefitSwitcher {
    top:120px;
    position:relative;
    display: block;
    width: 695px;
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    margin: auto;
    z-index:2;

}

.benefitSwitcher li {
    display: table;
    float: left;
    margin-right: 70px;
    z-index: 2;

}

.benefitSwitcher li.last { margin-right: 0; z-index:2;}

.circleLink { display: table; margin: auto; margin-top: 40px; z-index:2;}

.benefitSwitcher li a, .circleLink a {
    display: table-cell;
    width: 90px;
    height: 120px;
    padding: 0 15px;
    background-color: #fff;
    color: #414141;
    text-decoration:none;
    border-radius: 60px;
    font-family: Georgia, sans-serif;
    font-style: italic;
    line-height: 1.2;
    vertical-align: middle;
    -webkit-transition-property: background-color, color;
    -moz-transition-property: background-color, color;
    -o-transition-property: background-color, color;
    transition-property: background-color, color;
    -webkit-transition-duration: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition-duration: 0.2s;
    z-index:2;
}

.benefitSwitcher li a:hover, .benefitSwitcher li.active a, .circleLink a {
    background: #49E2D6;
    color: #fff;
    z-index:2;
}

.circleLink a:hover { background-color: #000; 
}


#bodyleft{
        z-index:2;
}
#bodyright{
        z-index:2;
}

Upvotes: 1

Views: 149

Answers (2)

Dan
Dan

Reputation: 8794

Following the HTML structure provided by Piotr Wójcik, you can use JavaScript to gather a String representation of the data-name attribute, then set this value as the innerHTML for p.

Gathering the Attribute:

var dataVar = target.getAttribute('data-name');

Setting the value:

p.innerHTML = '" ' + dataVar + ' "';

Here's a JSFiddle.

Upvotes: 2

Piotr Wu
Piotr Wu

Reputation: 1362

Check this solution:

http://jsfiddle.net/gtB9j/

JS code:

$(document).ready(function(){

    $('li').click(function(){
        var newVal = $(this).data('name');
        $('#bodyright').find('h3').html(newVal);           
    })
});

HTML code:

<div id="bodyleft">
    <ul class="benefitSwitcher">
        <li data-name="godzilla">one</li>
        <li data-name="pokemon">three</li>
        <li data-name="zombie">two</li>
        <li data-name="zorro">four</li>
    </ul>
</div>

Upvotes: 2

Related Questions