Clever Geek Handbook

Dynamically changing the content of a div tag

I have created an html page that consists of a div section in the body tag.

How can I change the content of inner divs based on an event in another in a winform (ex: on button click)?

<div id="magazine">   
    <div style="background-image:url(pages/01.jpg);"></div>
    <div style="background-image:url(pages/02.jpg);"></div>
    <div style="background-image:url(pages/03.jpg);"></div>
    <div style="background-image:url(pages/04.jpg);"></div>
    <div style="background-image:url(pages/05.jpg);"></div>
    <div style="background-image:url(pages/06.jpg);"></div>
    <div style="background-image:url(pages/07.jpg);"></div>
    <div style="background-image:url(pages/08.jpg);"></div>
</div>

Suppose I want to replace it with

<div id="magazine">
<div style="background-image:url(pages/01.jpg);"></div>
<div style="background-image:url(pages/02.jpg);"></div>
<div style="background-image:url(pages/03.jpg);"></div>
<div style="background-image:url(pages/04.jpg);"></div>
</div>
+2


source to share


4 answers


in general, some kind of sample code or something similar is helpful for explaining problems and solutions.;)



If you are looking for how to react to different browsers, you will find some very good articles with the keyword "browser sniff". Check wikipedia too! Please note that there are many different approaches in both CSS and javascript.

+1


source


You can use JavaScript to do this, I'll give you a jQuery example as I'm used to it:

HTML markup:

<div id="section1">
    <p>CONTENT</p>
</div>
<div id="section2">
    <p>CONTENT</p>
</div>
<div id="section3">
    <p>CONTENT</p>
</div>
<div id="section4">
    <p>CONTENT</p>
</div>
<ul id="change-buttons">
    <li><a href="#" id="change1">Change content of 1st section</a></li>
    <li><a href="#" id="change2">Change content of 2nd section</a></li>
    <li><a href="#" id="change3">Change content of 3rd section</a></li>
    <li><a href="#" id="change4">Change content of 4th section</a></li>
</ul>

And here's the javascript:



$(document).ready(function() {
    $('#change-buttons a').click(function() {
        var num = $(this).attr('id');
        num = num.substr(-1);
        $('#section' + num).text('NEW CONTENT');
    });
});

You must of course include jQuery in your html section header:

<script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script>

This is just a general example, if you were more specific I would give you more specific advice.

+2


source


Using javascript. Set the id in the div you want to change and the one you want to copy (?), Set an onClick event handler for your button and in the called function, get divs (with document.getElementById) and use innerHTML for each to get or set HTML for div.

+1


source


You will need a link and redirect or some javascript for just about any type of element.

A little more detail will help a more detailed answer.

Kindness,

Dam

0


source






More articles:


All Articles