Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Belgium
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery: positioning a div with float

    School assignment:
    - Add a new div with id promotiediv and put it next to the 2 other columns using float. To do this correctly, you need to calculate the available width in the container. Do this dynamically! This means that when you adjust values in the CSS file, your code won't fall apart. Use the correct methods to determine the width and don't forget about the margins!!!!
    - The new div contains an h3 with text 'promoties' and also a list where the elements are taken from an array. The initial values of this array are: 'Moestuinartikelen', 'Harken', 'Gras zaadjes', 'Veel meer...'. The list type is unordered.
    Here's what I made of it so far:
    Code:
    $(document).ready(function() {
    	$("#container").append($("<div>").attr("id", "promotiediv").append($("<h3>").text("promoties")).append($("<ul>")));
    	var array = new Array("Moestuinartikelen", "Harken", "Gras zaadjes", "Veel meer...");
    
    	for (var i = 0; i < array.length; i++) {
    		$("#promotiediv ul").append($("<li>").text(array[i]));
    	}
    });
    I'm having trouble positioning this new div. I think I may have to use
    Code:
    css("float", "right")
    to put it next to the 2 other columns, but then it's still located at the bottom of the page. I'm stuck! How can I successfully finish this assignment?


    You can download my source files HERE.

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    You want to float it left. Also, you want to subtract at least 70 pixels from your current width calculator, else the container won't be able to hold all items in it as well as use before instead of append with a target of .dummy instead of #container. All in all, your jQuery code should look like:
    Code:
    $(document).ready(function() {
        var available = $("#container").outerWidth() - $("#latest").outerWidth() - $("#menu").outerWidth() - $("#content").outerWidth() - 70;
        
        $(".dummy").before($("<div>").attr("id", "promotiediv").append($("<h3>").text("promoties")).append($("<ul>")).css("float", "left").width(available));
        var array = new Array("Moestuinartikelen", "Harken", "Gras zaadjes", "Veel meer...");
    
        for (var i = 0; i < array.length; i++) {
            $("#promotiediv ul").append($("<li>").text(array[i]));
        }
        
        window.alert("remains: " + available);
    });
    Another thing you should look into is the fact that you include #latest in your calculations, but at the same time #latest doesn't have a set width (Which is also the reason behind the whole subtracting 70 from the final result instead of like... 20).

    And yes, tested and works. Enjoy.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •