How to generate pagination depending upon Div's position

Question

vizz 0 Junior Poster

12 Years Ago

I have 4 div's.

first div is Centre div, 2nd div is right of Centre div, 3rd dis left of Centre div and 4th div is above of Centre div

How to detect number of div's and create Paginated bullet like map showing position of each div. If number of div's increased or decreased bullet map should change respectively.

For example
Bullet should apper like,

left bullet(3rd div), Centre bullet(1st div), right bullet(2nd div), And top bullet above Centre bullet(4th div)

Image for bullet appearing is attached

javascript

3 Contributors
21 Replies
291 Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by vizz

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

So the bullet map is a representation of the actual div's? First step would be to read all div's and their positions.

AleMonteiro 238 Can I pick my title?

12 Years Ago

I found that intriging to make, so I made a little demo in the style of a jQuery plugin.

Take a look, it's pretty basic yet, but can turned into a plugin.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script>

            // Extends jQuery methods
            $(function($){
                $.fn.extend({
                    /*
                        Create 'bullets' for each children of the selector element. 
                        Tested only with one element, so it's recommended to use #ID

                        @param holder is container that the cloned objects will be appened to.
                        @param proportion it's a decimal between 0.1 and 0.9. This will affect in the size of the cloned objects.
                    */
                    makeBullets: function(holder, proportion) {

                        var 
                            // Destination Container
                            $holder = $(holder),
                            // Properties that will be resized by the proportion specified
                            properties =  ["width", "height", "top", "left"];

                        // Each div that will be copied and resized
                        $(this).children().each(function(){
                            var $t =$(this), $c = $t.clone(), i, val;

                            // Each property that will be resized
                            for(i=0, il=properties.length; i<il; i++) {
                                val = parseInt( $t.css(properties[i]).replace("px", "") );
                                $c.css(properties[i], Math.floor(val * proportion) + 'px'   );
                            }


                            $c
                            // Adds mouse over/out styles to the bullets
                            .hover(function() {
                                $(this).addClass("hover");
                            },function(){
                                $(this).removeClass("hover");
                            })
                            // Adds click function, uses closure to retain the orignal item reference
                            .click(function($originalItem){
                                    //$holder.children().removeClass("selected");
                                    $t.siblings().removeClass("selected");
                                    $t.addClass("selected");
                                });

                            $holder.append($c);
                        });

                    },


                });

            }(jQuery));


            // OnLoad
            $(function(){   
                // Creates the bullets with 0.2 of their original size and append them to #bullets
                $("#original").makeBullets("#bullets", 0.2);
            });
        </script>
    </head>

    <style type="text/css">
        div#original > div, #bullets > div {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            position: absolute;
        }

        div#bullets  div.hover {
            background: #999;
        }

        div#original > div.selected {
            background: #000;
        }

        .center {
            top: 250px;
            left: 250px;
        }
        .top {
            top: 25px;
            left: 250px;
        }
        .right {
            top: 250px;
            left: 475px;
        }
        .bottom {
            top: 475px;
            left: 250px;
        }
        .left {
            top: 250px;
            left: 25px;
        }

        div#bullets {
            position: aboslute;
            left: 10px;
            top: 10px;
        }

    </style>

    <body>
        <div id="bullets"></div>
        <div id="original">
            <div class="center"></div> 
            <div class="top"></div>
            <div class="right"></div>
            <div class="bottom"></div>
            <div class="left"></div>
        </div>
    </body>
</html>

AleMonteiro 238 Can I pick my title?

12 Years Ago

The script that I posted already takes care of any number of div's that are in the 'original' div.

About the width and height, I'm guessing that when a "bullet" is clicked you'll have to change the style of the original linked div to 100%, you can do this by setting the divs height equals it's parent height.

In example:

function setFullSize($div) {
    $div.height($div.parent().height());
    $div.width($div.parent().width());
}

Note that $div is an jQuery object, and that this is a simplistic example. You may need to take care of padding and margins to get an accurate result.

AleMonteiro 238 Can I pick my title?

12 Years Ago

What is happening?

AleMonteiro 238 Can I pick my title?

12 Years Ago

Does it throws any errors? Did you debug it to see what's the value of $div.parent().height() ?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vizz 0 Junior Poster · Answer 1 · 2012-12-09T11:55:44+00:00

Yes, but I failed to do that.
I'm not getting how to count div's (with their positions) and create bullet map

vizz 0 Junior Poster · Answer 2 · 2012-12-10T09:29:39+00:00

@AleMonteiro

Hey Thanks!!!

Can you help me more ?

how to add more div's? And how to make all div 100% of height & width?

I want to use scrolling animation to navigate. I'm trying but help needed

vizz 0 Junior Poster · Answer 3 · 2012-12-11T17:57:31+00:00

vizz 0 Junior Poster

12 Years Ago

Thanks
I'm working

vizz 0 Junior Poster · Answer 4 · 2012-12-12T04:04:29+00:00

Thanks.

I tried my best but this code is not wrking for me.
It's not setting height and width =100%

function setFullSize($div) {
    $div.height($div.parent().height());
    $div.width($div.parent().width());
}

Also I want to animate & scroll to perticular div when bullet is clicked

vizz 0 Junior Poster · Answer 5 · 2012-12-12T17:32:22+00:00

vizz 0 Junior Poster

12 Years Ago

It's not setting height and width =100%

vizz 0 Junior Poster · Answer 6 · 2012-12-13T10:10:40+00:00

I tried code. But Does not give errors

this, $div.parent().height() is empty (alert output shows "null")

May be I'm calling it wrongly, can you please explain or alter your first code?

Help Please, there is no any error, so I'm not getting why code is not working

AleMonteiro 238 Can I pick my title? · Answer 7 · 2012-12-13T15:39:26+00:00

Post the code of where you call the resize function.

vizz 0 Junior Poster · Answer 8 · 2012-12-14T04:44:07+00:00

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    // Extends jQuery methods
$(function($){
    $.fn.extend({
        /*
            Create 'bullets' for each children of the selector element. 
            Tested only with one element, so it's recommended to use #ID
            @param holder is container that the cloned objects will be appened to.
            @param proportion it's a decimal between 0.1 and 0.9. This will affect in the size of the cloned objects.
        */
        makeBullets: function(holder, proportion) {
            var 
                // Destination Container
                $holder = $(holder),
                // Properties that will be resized by the proportion specified
                properties =  ["width", "height", "top", "left"];
            // Each div that will be copied and resized
            $(this).children().each(function(){
                var $t =$(this), $c = $t.clone(), i, val;
                // Each property that will be resized
                for(i=0, il=properties.length; i<il; i++) {
                    val = parseInt( $t.css(properties[i]).replace("px", "") );
                    $c.css(properties[i], Math.floor(val * proportion) + 'px'   );
                }
                $c
                // Adds mouse over/out styles to the bullets
                .hover(function() {
                    $(this).addClass("hover");
                },function(){
                    $(this).removeClass("hover");
                })
                // Adds click function, uses closure to retain the orignal item reference
                .click(function($originalItem){
                        //$holder.children().removeClass("selected");
                        $t.siblings().removeClass("selected");
                        $t.addClass("selected");
                    });
                $holder.append($c);
            });
        },
    });
}(jQuery));
// OnLoad

function setFullSize($div) {
    $div.height($div.parent().height());
    $div.width($div.parent().width());
};


$(function(){   
    // Creates the bullets with 0.2 of their original size and append them to #bullets
    $("#original").makeBullets("#bullets", 0.11);
    $("#original").setFullSize();
    $("#original").setFullSize(".center");

});
</script>
</head>
<style type="text/css">
#original{
            width: 100%;
            height: 100%;border:1px solid #FF0000;
            position:absolute;
        }

#bullets { z-index:999999;position:absolute;}

div#original > div, #bullets > div {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    position: absolute;
    border:1px solid #FF0000;
}


div#bullets  div.hover {
    background: #999;
}
div#original > div.selected {
    background: #000;
}
.center {
    top: 250px;
    left: 250px;
}
.top {
    top: 25px;
    left: 250px;
}
.right {
    top: 250px;
    left: 475px;
}
.bottom {
    top: 475px;
    left: 250px;
}
.left {
    top: 250px;
    left: 25px;
}
div#bullets {
    position: aboslute;
    left: 10px; 
    top: 10px;
}
.contact{
            top: 475px;
            left: 475px;
            border:1px solid #00FF00;width:350px; 

        }
#content{ width:350px; height:100%; border:1px solid #0099CC;}
</style>
<body>
    <div id="bullets"></div>  
    <div id="original">
        <div class="center"></div> 
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left"></div>  
        <div class="contact"></div>       
    </div>   
</body>
</html>

AleMonteiro 238 Can I pick my title? · Answer 9 · 2012-12-14T20:19:31+00:00

The use of the setFullSize should be like this:
setFullSize($("#original"));

But that won't make the desire result I think.

I don't know exaclty what you're trying to do. To be honest, I don't think you know either.

Take some time to think about what you are developing and how it could work as a whole.

vizz 0 Junior Poster · Answer 10 · 2012-12-15T05:10:33+00:00

Thanks

Div's are appearing like points when setFullSize($(".center")); works. Posting my full code again.

setFullSize($(".center"));

is for

<div class="center"></div>

Please check

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    // Extends jQuery methods
    $(function($){
        $.fn.extend({
            /*
                Create 'bullets' for each children of the selector element. 
                Tested only with one element, so it's recommended to use #ID
                @param holder is container that the cloned objects will be appened to.
                @param proportion it's a decimal between 0.1 and 0.9. This will affect in the size of the cloned objects.
            */
            makeBullets: function(holder, proportion) {
                var 
                    // Destination Container
                    $holder = $(holder),
                    // Properties that will be resized by the proportion specified
                    properties =  ["width", "height", "top", "left"];
                // Each div that will be copied and resized
                $(this).children().each(function(){
                    var $t =$(this), $c = $t.clone(), i, val;
                    // Each property that will be resized
                    for(i=0, il=properties.length; i<il; i++) {
                        val = parseInt( $t.css(properties[i]).replace("px", "") );
                        $c.css(properties[i], Math.floor(val * proportion) + 'px'   );
                    }
                    $c
                    // Adds mouse over/out styles to the bullets
                    .hover(function() {
                        $(this).addClass("hover");
                    },function(){
                        $(this).removeClass("hover");
                    })
                    // Adds click function, uses closure to retain the orignal item reference
                    .click(function($originalItem){
                            //$holder.children().removeClass("selected");
                            $t.siblings().removeClass("selected");
                            $t.addClass("selected");
                        });
                    $holder.append($c);
                });
            },
        });
    }(jQuery));
    // OnLoad

    function setFullSize($div) {
        $div.height($div.parent().height());
        $div.width($div.parent().width());
    };

    $(function(){   
        // Creates the bullets with 0.2 of their original size and append them to #bullets
        $("#original").makeBullets("#bullets", 0.11);
        setFullSize($(".center"));
    });



</script>
</head>
<style type="text/css">
body{ margin:0; padding:0;width: 100%;
                height: 100%;}

    #original{
                width: 100%;
                height: 100%;
                border:1px solid #FF0000;
                position:absolute;
            }

    #bullets { z-index:999999;position:absolute;}

    div#original > div, #bullets > div {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        position: absolute;
        border:1px solid #FF0000;
    }


    div#bullets  div.hover {
        background: #999;
    }
    div#original > div.selected {
        background: #000;
    }
    .center {
        top: 250px;
        left: 250px;
    }
    .top {
        top: 25px;
        left: 250px;
    }
    .right {
        top: 250px;
        left: 475px;
    }
    .bottom {
        top: 475px;
        left: 250px;
    }
    .left {
        top: 250px;
        left: 25px;
    }
    div#bullets {
        position: aboslute;
        left: 10px; 
        top: 10px;
    }
    .contact{
                top: 475px;
                left: 475px;
                border:1px solid #00FF00;width:350px; 

            }
    #content{ width:350px; height:100%; border:1px solid #0099CC;}
</style>
<body>

    <div id="bullets"></div>

    <div id="original">
        <div class="center"></div> 
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left"></div>  
        <div class="contact"></div>       
    </div>

</body>
</html>

AleMonteiro 238 Can I pick my title? · Answer 11 · 2012-12-17T19:07:31+00:00

Vizz, as I said in my last post, I don't think you understand what you are trying to do.

If you try to move on with the code I posted I don't think you'll be able to accomplish whatever you're trying to do.

Please take a moment and write exatcly what you're trying to accomplish.

vizz 0 Junior Poster · Answer 12 · 2012-12-18T05:37:08+00:00

I'm trying to generate full screen div's around centre div, and it's bullets like pagination. (as attached in image)

When I get fullscreen div's I will try to scroll to navigate using scrollTo.js

Your code solved my problem, but last problem is I'm unable to make fullscreen or 100% height and width DIV's of wrapper div (in your code it's <div id="original"> </div>)

Now my last problem,

As per your code, there is wrapper div "original".
I want to make "original DIV" 100% of height and width of window size
Make "center", "top", "right", "bottom", "left"
DIV's 100% of height and width of "original DIV"
only "center" DIV visible on visit
Using scrollTo.js to goto "center", "top", "right", "bottom", "left" DIV's

Hope you understand what I'm trying to do

AleMonteiro 238 Can I pick my title? · Answer 13 · 2012-12-18T17:27:03+00:00

Alright, so let me point to you the steps that need to be taken care of:

To make the div "original" 100% of the window you need to set the html and body to 100% too.
You'll need to disable auto overflow, because if you have 2 childrens that are 100% of the parent, their size combined will be 200% (creting an auto scroll)
In my example the position of the elements are absolute, so if you make them 100% they will not fit in the container, you'll need to remove/handle the top and left css styles.
Using a star schema as my example, you'll need to handle scroll vertical and horizontal.

Those are the itens of the top of my head that need to be taken care of.
Good luck

vizz 0 Junior Poster · Answer 14 · 2012-12-19T16:53:36+00:00

Thanks AleMonteiro

I'm trying to solve this problem but not yet succeeeded.

again, Thanks for your help

AleMonteiro 238 Can I pick my title? · Answer 15 · 2012-12-19T17:12:10+00:00

It's not a simple implementation indeed. You need to organize your thoughts and try to visualize how it would work when done.

In cases like this the coding is quite simple compared to the effort of planning the structure, events and logic invloved.

You need to realize that HTML/CSS/JS work toggether and one may affect the behavior of the other.

So, in this scenario, planning the html structure and how it will be positioned by CSS is fundamental.

vizz 0 Junior Poster · Answer 16 · 2012-12-20T05:22:43+00:00

vizz 0 Junior Poster

11 Years Ago

Thanks

I'm still workig on it......