Jquery - Dynamically generate string within HTML code?

Question

I have searched various sites and haven't found anything I can extrapolate a successful answer from. Either that or my spectacle wearing is justified and I have forum fatigue.

Here is my issue: I need a dynamic string within a line of HTML:

<a href="#" onClick="$.scrollTo('#xxxjump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('xxx')" id="xxx-toggle">Next</a></div>

The reason for this is to provide extra navigation.

The triple xxx's would be a default of a three-digit number, let's say '016', and by clicking 'Next' it will generate a new number minus one. All instances in that line are replaced e.g. '016' to '015'. The 'onClick' and 'id' changes and the user's window scrolls to the new. A 'Back' line is to be included as part of the same coding.

I was thinking along the lines of server-side <% includes %>, if..elseif but can only raw code HTML and CSS.

Other functionality has been taken care of and my site is live. Any fancy taking this one on?

Cheers.

Addendum:

What I was hoping was that the script would be more inline. The xxx's all the have the same value within the given line. The 'onClick' drives the browser window to a nested DIV referenced above by an named anchor. Clicking Next (016) would generate a <1 number and drive the page down to the next nested DIV (015), DIV (014) etc.

<a name="016jump" id="016jump"></a>
<div class="ItemName"><a href="#" onClick="$.scrollTo('#016jump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('016')" id="016-toggle">16&nbsp;Title</a>
    <div class="Item016">(individual CSS style)
<!-- HIDDEN CONTENT STARTS -->
        <div id="016">(this is what the id='xxx-toggle' expands)
            content
        </div>
 <!-- HIDDEN CONTENT ENDS -->
    </div>
</div>


<a name="015jump" id="015jump"></a>
<div class="ItemName"><a href="#" onClick="$.scrollTo('#015jump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('015')" id="015-toggle">15&nbsp;Title</a>
new code...blah blah blah

If you feel the urge please visit damiankemp.com and view source. There is some redundant script for future use but my request refers to the code commented as: 'EXPANDING CONTENT DIVs', 'NAVIGATION STARTS HERE' and the DIVs 'IMAGE 016', 'IMAGE 015', 'IMAGE 014' etc. If anyone cracks it you are more than welcome to have an acknowledgement in the script and/or a donation to charity if you want.

how is the default number to be generated?

tfwright
– tfwright

2010-01-16 19:37:21 +00:00
Commented Jan 16, 2010 at 19:37 — tfwright
– tfwright, Commented Jan 16, 2010 at 19:37

Leo · Accepted Answer · 2010-01-16 20:29:26Z

1

It really depends were the number is coming from, but you could do the following:

nextNumber = function() {
  // generate your next number here...
  // wherever it may come from ;-)
  return newNumber;
}

and then

<a href="#" onclick="var i = nextNumber(); $.scrollTo('#' + i + 'jump', 800, {easing:'elasout'}); server sidejavascript:animatedcollapse.toggle(i); $(this).attr('id', i)" id="xxx-toggle">Next</a></div>

Or did I miss the point?

answered Jan 16, 2010 at 20:29

Leo

38.3k8 gold badges78 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Damian Kemp Over a year ago

The theory makes sense to me. This where the default number comes from: <script type="text/javascript"> animatedcollapse.addDiv('015', 'fade=1,speed=500,hide=1') animatedcollapse.addDiv('016', 'fade=1,speed=500,hide=1') </script>

Damian Kemp Over a year ago

If you prefer, please view the code at damiankemp.com. The 'addDiv' code above looks nasty.

Damian Kemp Over a year ago

On second glance this looks very promising and the kind of tidy code I had in mind. What code would generate the next number? How could I set a default number? How would it replace id="xxx-toggle"? id="+ i + '-toggle'"? Thanks.

Leo Over a year ago

The id gets replaced automatically when clicking, have a second look at my code (you would just have to add the string, I forgot that) ;-) I don't yet now where your IDs are coming from... actually I thought you do :D

Damian Kemp Over a year ago

Thanks for the reply. I want to get ID numbers from the below. How can I get that working? <script type="text/javascript"> animatedcollapse.addDiv('015', 'fade=1,speed=500,hide=1') animatedcollapse.addDiv('016', 'fade=1,speed=500,hide=1') animatedcollapse.ontoggle=function($, divobj, state){ if ($('#'+divobj.id+"-toggle").length==1){ $('#'+divobj.id+"-toggle").css('color', (state=='block')? '#FFF' : '#CCC') } } animatedcollapse.init() </script>

|

abhaga · Accepted Answer · 2010-01-16 21:34:24Z

1

By adding a class to the line, following can work.

$('.next-class').click(function(){
    curr = $(this).attr('id').split('-')[0];
    next = curr-1;
    $(this).replaceWith($('<a/>',{
        id: new+'-toggle',
        class: 'next-class',
        href: '#',
        text: 'Next',
        click: function(){/*your onclick function goes here written with new value*/}
    }))
    .prepend($('<a/>',{
        id: curr+'-toggle',
        class: 'back-class'
        href: '#',
        text: 'Back',
        click: function(){/*your onclick function goes here written with curr value*/}
    }));
})

Similar thing can be done for back-class also.

edited Jan 16, 2010 at 21:34

answered Jan 16, 2010 at 20:32

abhaga

5,4552 gold badges23 silver badges20 bronze badges

2 Comments

tfwright Over a year ago

i think your code assumes the element ids are numbers. that's not preferred, because it is likely to generate conflicts.

abhaga Over a year ago

I have fixed it to extract numbers out of id values. I didn't understand the conflict part. I presume that 'xxx-toggle' patterns are unique for Next and Back links.

Collectives™ on Stack Overflow

Jquery - Dynamically generate string within HTML code?

2 Answers 2

11 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related