how to add a fixed position Box on left side of each post [closed]


Tags: javascript,jquery,html,css,css3

Problem :

Hi I want help in Assigning a content on left side of the Box Example Please see this JS fiddle http://jsfiddle.net/fgRRw/

div {
    width: 400px;
    height: 200px;
    background-color:#ccc;
    padding:10px;   
    margin-left:25%;
    color:#000000;
    margin-bottom:8px;
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    position: relative;
}

div:before {
    content: "+";
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    background: orange;
    color: #fff;
    display: block;
    left: -30px;
    position: absolute;
}

But the Content of the CSS how should i click it i mean i need to keep different buttons like that

To short the answer

For each post on the page left side i want to display a box

enter image description here

Please help me with this .



Solution :

How does this look:

HTML:

<div id="main"> </div>

CSS:

div {
    width: 400px;
    height: 200px;
    background-color:#ccc;
    padding:10px;   
    margin-left:25%;
    color:#000000;
    margin-bottom:8px;
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
        border-radius: 5px;
    position: relative;
}
#appended {
    height: 10px;
    width: 10px;
    text-align: center;
    line-height: 10px;
    background: orange;
    color: #fff; top: 10px;
    border-radius: 0;
    left: -30px;
    position: absolute;
}

jQuery:

$('#main').before('<div id="appended" onclick="someFunction()">+</div>');

http://jsfiddle.net/fgRRw/29/

EDIT:

Added some more HTML to demonstrate multiple posts. Changed the CSS a bit because I wouldn't recommend you capture both divs with the first declaration. Added an implementation of someFunction() in order to show how it works.

Here: http://jsfiddle.net/fgRRw/35/


    CSS Howto..

    How to change img margin inside a table using css hover

    How to make this Header/Content/Footer layout using CSS?

    How to center text based on only one of two merged cells ? html/css

    How to apply CSS style in javascript for id generated at runtime

    How do I style jQuery UI tabs vertically with a correctly themed border?

    How to get rid of spaces between images in CSS?

    How do I prevent jQuery from resetting all my CSS?

    How to set a CSS property with a variable in JQuery?

    how to make menu on mouse hover in CSS

    How do I fix the navigation menu in Firefox and Internet Explorer?

    How do you square off only one corner of a div to be transparent in CSS?

    How to make text flow from left right bootstrap

    How to change css display none or block with button click

    CSS - How to upscale Unicode arrows?

    Css radio buttons problem - How to style each radio button?

    how to apply CSS styles in current document recieved from AJAX request?

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    How to get rid of spaces with CSS

    How to fix specific div's position in CSS

    How to prevent inner text resizing in CSS Animation @keyframes?

    How to make chrome respect tables with fixed column width

    How to set numerous links in a single line with CSS?

    How to hide a column in the Webgrid in aspasp.net MVC?

    How can I use JQuery toggle for multile DIVs?

    How to prevent divs from overlapping?

    How to make a all the three tables to display at same height

    How to avoid name collisions of css class names

    How could I add two separate text styles to a button in a form in CSS?

    CSS - How to make different background color from css file used [closed]

    How can i change background image opacity without changing on div content? [duplicate]