0

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

Attachments bullet.PNG 0.72 KB
3
Contributors
21
Replies
23
Views
4 Years
Discussion Span
Last Post by vizz
Featured Replies
  • 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 … Read More

0

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

0

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

2

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>
0

@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

0

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.

0

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

0

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

0
<!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>
0

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.

0

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>
0

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.

0

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,

  1. As per your code, there is wrapper div "original".
    I want to make "original DIV" 100% of height and width of window size

  2. Make "center", "top", "right", "bottom", "left"
    DIV's
    100% of height and width of "original DIV"

  3. only "center" DIV visible on visit

  4. Using scrollTo.js to goto "center", "top", "right", "bottom", "left" DIV's

Hope you understand what I'm trying to do

0

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

  1. To make the div "original" 100% of the window you need to set the html and body to 100% too.
  2. 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)
  3. 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.
  4. 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

0

Thanks AleMonteiro

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

again, Thanks for your help

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.