CODEWITHSUNDEEP
jqueryhtmlcss
Praneeth
Praneeth

Reputation: 178

Put two arrows (in the form of images) to the left and right of a `div` element

I have a div element in the form of a box. I need to place two images (of arrows) on the either side of it.

I want something like :

Arrows and box

I wrote the following code only for the box. I have two arrow images named red.jpg and green.jpg, but how should i position them?

<div id="result">   
</div>

<script>
$('<div id="box" class="boxed ">').text("a").appendTo("#result");

// Add to right
$("#result").prepend('<img id="red" src="Images/red.jpg" />');

//Add to left
$("#result").prepend('<img id="green" src="Images/green.jpg" />');
</script>

<style>
.boxed 
{
    font-size: 20px;
    border: 1px solid green ;
    height: 100px;
    width: 100px;

    padding-top:75px;
    padding-left:10px;
    padding-bottom: 10px;
    padding-right: 50px;

    margin-top: 50px;
    margin-right: 40px;
    margin-bottom: 10px;
    margin-left: 500px;
    background: blue;
}

Upvotes: 2

Views: 2647

Answers (4)

Barnee
Barnee

Reputation: 3389

How about a HTML/CSS solution:

html:

<div class="box">
    <img class="green" src="Images/green.jpg" alt="green">
    <img class="red" src="Images/red.jpg" alt="red">
</div>

css:

.box {
    height: 100px;
    width:  100px;
    position: relative;
    background: blue;
}
.green,
.red {
    width: 100px;
    height: 60px;
    display: block;
    top: 50%;
    margin-top: -30px; /* img height/2 */
    position: absolute;
}
.green {
    left: -100px; /* img width */
    background: green;
}
.red {
    right: -100px; /* img width */
    background: red;
}

Demo

Upvotes: 2

Manish Mishra
Manish Mishra

Reputation: 12375

Try jQuery before and after to append the arrow images before and after the div.

Also, since at the end - i.e. after appending before and after - you will have three elements, you need to make them display: inline; or float: left; to appear in one horizontal line.

See this:

var div = $('<div id="box" class="boxed left"></div>');
div.appendTo('.parent');
div.before('<a href="#" class="left" >
                  <img src="imageUrl" width="50px" height="50px" />
            </a>'
          );

div.after('<a href="#" class="left" >
              <img src="imageurl" width="50px" height="50px" />
           </a>'
         );

Here .parent refers to the container, going to hold all the three.

See this fiddle

Upvotes: 1

Steeven
Steeven

Reputation: 4200

If you don't know the sizes of the arrow-images, you can place them with some jQuery like this (If you know the sizes just set the css directly).

Summary - this I added

Css:

.boxed {
    position: relative;
}

#red,#green {
    position: absolute;
    top: 0;
}

Js:

$('#red').css({'right', -$('#red').width()});
$('#green').css({'left', -$('#green').width()});

Your full code

I have allowed myself to shorten some of your css...

Html:

<div id="result"></div>

Css:

.boxed {
    /*Place absolute positioned images relative to this box*/
    position: relative;

    font-size: 20px;
    border: 1px solid green;

    height: 100px;
    width: 100px;

    padding: 75px 50px 10px 10px; /*Syntax: Top, right, bottom, left*/
    margin: 50px 40px 10px 500px;
    background: blue;
}

#red,#green {
    /*Position absolute (they won't fill out space). The positions are set in js*/
    position: absolute;
    top: 0;
}

Js:

$('<div id="box" class="boxed ">').text("a").appendTo("#result");

// Add arrows
$("#result").prepend('<img id="red" src="images/red.jpg" />');
$("#result").prepend('<img id="green" src="images/green.jpg" />');

//Position arrows by css
$('#red').css({'right', -$('#red').width()});
$('#green').css({'left', -$('#green').width()});

css jQuery documentation.

Upvotes: 1

Vimal Stan
Vimal Stan

Reputation: 2005

Modify your order of insertion

$('<img id="red" src="Images/red.jpg" />').appendTo("#result");
$('<div id="box" class="boxed ">').text("a").appendTo("#result");
$('<img id="green" src="Images/green.jpg" />').appendTo("#result");

Upvotes: 0

Related Questions