WordPress.org

Ready to get started?Download WordPress

Forums

Email Before Download
Styling the ebd tag (4 posts)

  1. connor.rowe
    Member
    Posted 1 year ago #

    Is there any way to insert HTML into the list of downloadable files?

    For instance, I'm creating a brochure request page, from which users can get access to specific brochures. However, instead of just

    [ ] file-title1
    [ ] file-title2
    [ ] file-title3
    [ ] file-title4
    [ ] file-title5

    I'd like to have

    <heading1>
    [ ] <a href="trip1-page-url">file-title1</a>
    
    <heading2>
    [ ] <a href="trip2-page-url">file-title2</a>
    [ ] <a href="trip3-page-url">file-title3</a>
    
    <heading3>
    [ ] <a href="trip4-page-url">file-title4</a>
    [ ] <a href="trip5-page-url">file-title5</a>

    http://wordpress.org/extend/plugins/email-before-download/

  2. stitchyrocks
    Member
    Posted 1 year ago #

    You can try to manipulate the generated HTML using javascript; that's what I did.

    I first extracted all the text in the div that contains the list of songs (not the inputs) and wrapped label tags around them. Then I removed the
    tags and wrapped another <div> around both the label & the inputs. This way I can style everything as I desire.

    May not be the best solution, but it works.

  3. connor.rowe
    Member
    Posted 1 year ago #

    @stitchyrocks - thanks for the solution! is there any way you could provide the example?

  4. stitchyrocks
    Member
    Posted 1 year ago #

    Sure. This is what I did. FYI, the way I set up the form is:
    <div class="songs"><ebd /></div> (since my files are songs)

    Here's the jQuery I used (some I wrote, some I grabbed from other people). I know the code isn't the cleanest or perfect, but it works :)

    // extract just the text part from the song list and wrap each one around with the label tag
    	$('.songs').each(function() {
    		var data = [];
    		$(this).contents().each(function() {
    			if ( this.nodeType === Node.TEXT_NODE ) {
    				data.push(this);
    			}
    		});
    		$(data).wrap("<label></label>");
    		// remove br tag
    		$(".songs br").remove();
    	});
    	// wrap all label + input pair in a div
    	var $set = $('.songs').children();
    	for(var i=0, len = $set.length; i < len; i+=2){
    		$set.slice(i, i+2).wrapAll('<div class="item"/>');
    	}
    	var sel;
    	var count = 1;
    	while ( (sel = $('.songs > .item:not([class^="pack"])')).length > 0 )
    	{
    		sel.slice(0,5).wrapAll('<div class="pack'+ count++ +'"></div>');
    	}

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.