Rectangle 27 7

One way is to provide a translucent image to the JLabel. That might be done with a standard label, before setIcon() or similar is called, or alternately by extending JLabel and overriding the setIcon() method to do the same.

import java.awt.*;
import java.awt.image.*;
import javax.swing.*;
import javax.imageio.ImageIO;
import java.net.URL;

class TransparentIcon {
    public static void main(String[] args) throws Exception {
        String imgURL =
            "http://www.gravatar.com/avatar/" +
            "a1ab0af4997654345d7a949877f8037e";
        final BufferedImage image = ImageIO.read(new URL(imgURL));
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                ImageIcon icon = new ImageIcon(image);

                JPanel  p = new JPanel(new GridLayout(2,3));
                for (int ii=0; ii<6; ii++) {
                    TransparentLabel tl = new TransparentLabel();
                    tl.setOpacity((ii+1)/6f);
                    tl.setIcon(icon);
                    p.add(tl);
                }

                JOptionPane.showMessageDialog(null, p);
            }
        });
    }
}

class TransparentLabel extends JLabel {

    float opacity = 1f;

    public void setOpacity(float opacity) {
        this.opacity = opacity;
    }

    private Icon getTranslucentIcon(Icon icon) {

        if (icon!=null) {
            BufferedImage bi = new BufferedImage(
                icon.getIconWidth(),
                icon.getIconHeight(),
                BufferedImage.TYPE_INT_ARGB);
            Graphics2D g = bi.createGraphics();
            AlphaComposite ac = AlphaComposite.getInstance(
                AlphaComposite.SRC_OVER,
                opacity);
            g.setComposite(ac);
            icon.paintIcon(this,g,0,0);
            g.dispose();

            return new ImageIcon(bi);
        } else {
            return null;
        }
    }

    public void setIcon(Icon icon) {
        super.setIcon( getTranslucentIcon(icon) );
    }
}

I just wonder how it can be done if i get Graphics of JLabel inside MyPanel class and change its visual appearance?

JLabel
BufferedImage
paintComponent(Graphics)

Note though: I don't quite understand what the advantage of the JLabel is in your use-case. I was using it in that example in order to render HTML. If I only had an image, I'd use the image directly (e.g. Graphics.drawImage(Image,int,int,ImageObserver)) and never create the label.

Perhaps, but your idea is just silly. Never call getGraphics() (unless you really know what you are doing). Also, you are confusing the strategy with the goal. I still don't understand the goal because you have yet to state it clearly. You keep focusing on how you want to achieve the goal (i.e. the flawed strategy).

@Final: I agree strongly with Andrew -- you don't want to use the Graphics object of a component obtained via getGraphics. For one, it won't persist on redraws. If I were you, I'd go with Andrew's suggestions (1+).

Thank you! I just wonder how it can be done if i get Graphics of JLabel inside MyPanel class and change its visual apperance?

java - Translucent components inside JPanel - Stack Overflow

java swing jpanel translucency
Rectangle 27 2

As far as I know, this is not possible.

One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs

Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.

Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/

<form>
    <div class="field">
        <label class="placeholder" for="email">
            Email Address
            <span class="red">*</span>
        </label>
        <input id="email" type="text" />
    </div>
</form>
.field {
    position: relative;
    height: 30px;
    width: 200px;
}
input, label {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    top: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-indent: 5px;
    line-height: 30px;
}
$('.field input')
    .on( 'focus', function () {         
        $(this).siblings('label').hide();
    } )
    .on( 'blur',  function () {
        if ( !$(this).val() )
            $(this).siblings('label').show();
    } );

html - Add span inside form's placeholder - Stack Overflow

forms html placeholder
Rectangle 27 1

Apparently it's either a bug in GridBagLayout, or you are using the layout engine in a way totally unexpected by the developers. Several multi-line Labels with HTML inside, setting preferred size and immediately asking preferred size by the back door? Ugh!

I noticed that sometimes the layout works incorrectly when decreasing the window size: the panel inside scrollpane doesn't decrease and the horizontal scrollbar appears. (I am using Windows by the way).

Also, sometimes, if the vertical scrollbar was visible and the panel height was large, and then I increase the window size, the panel height remains unreasonably large and gaps appear around the label:

For me, the layout is wrong every other time when I decrease the window; increasing works better but if it goes wrong, it's also incorrect every other time. I tried debugging and printing values to console; it seems that view.getLayout().preferredLayoutSize( view ) depends not only on view.setPreferredSize but also on the current size of the panel and scrollpane. The code of GridBagLayout is too complicated to dive into.

Since every other resize yields the correct result, why not resize it twice? Duplicating things in the ScrollPane.componentResized handler was unsuccessful, probably because the ScrollPane's size remains the same. The ScrollPane itself needs to be resized twice, with different values. To test it in the simplest way, I subclassed JFrame: it listens to componentResized and resizes its child window twice. The second resize has to be deferred via SwingUtilities.invokeLater.

final JFrame frame = new JFrame();
frame.add( scroll );
final MyFrame frame = new MyFrame(scroll);

and add the following class:

private class MyFrame extends JFrame implements ComponentListener {

    private Component child;

    public MyFrame(Component child){
        this.child=child;
        setLayout(null);
        getContentPane().add(child);
        addComponentListener(this);
    }

    public void componentResized(ComponentEvent e) {
        Dimension size=getContentPane().getSize();
        child.setSize(new Dimension(size.width-1,size.height));
        validate();
        SwingUtilities.invokeLater(new ResizeRunner(size));
    }

    public void componentMoved(ComponentEvent e) {}
    public void componentShown(ComponentEvent e) {}
    public void componentHidden(ComponentEvent e) {}

    private class ResizeRunner implements Runnable {
        private Dimension size;
        public ResizeRunner(Dimension size){
            this.size=size;
        }
        public void run() {
            child.setSize(size);
            validate();
        }
    }

}

The same can be achieved by subclassing a layout manager.

Obviously, this approach is inelegant and inefficient, but as a workaround for a JRE bug, and if nothing else helps... ;-)

java - JLabel with wrapped HTML-text as JScrollPane client - Stack Ove...

java swing jscrollpane jlabel textwrapping
Rectangle 27 1

Apparently it's either a bug in GridBagLayout, or you are using the layout engine in a way totally unexpected by the developers. Several multi-line Labels with HTML inside, setting preferred size and immediately asking preferred size by the back door? Ugh!

I noticed that sometimes the layout works incorrectly when decreasing the window size: the panel inside scrollpane doesn't decrease and the horizontal scrollbar appears. (I am using Windows by the way).

Also, sometimes, if the vertical scrollbar was visible and the panel height was large, and then I increase the window size, the panel height remains unreasonably large and gaps appear around the label:

For me, the layout is wrong every other time when I decrease the window; increasing works better but if it goes wrong, it's also incorrect every other time. I tried debugging and printing values to console; it seems that view.getLayout().preferredLayoutSize( view ) depends not only on view.setPreferredSize but also on the current size of the panel and scrollpane. The code of GridBagLayout is too complicated to dive into.

Since every other resize yields the correct result, why not resize it twice? Duplicating things in the ScrollPane.componentResized handler was unsuccessful, probably because the ScrollPane's size remains the same. The ScrollPane itself needs to be resized twice, with different values. To test it in the simplest way, I subclassed JFrame: it listens to componentResized and resizes its child window twice. The second resize has to be deferred via SwingUtilities.invokeLater.

final JFrame frame = new JFrame();
frame.add( scroll );
final MyFrame frame = new MyFrame(scroll);

and add the following class:

private class MyFrame extends JFrame implements ComponentListener {

    private Component child;

    public MyFrame(Component child){
        this.child=child;
        setLayout(null);
        getContentPane().add(child);
        addComponentListener(this);
    }

    public void componentResized(ComponentEvent e) {
        Dimension size=getContentPane().getSize();
        child.setSize(new Dimension(size.width-1,size.height));
        validate();
        SwingUtilities.invokeLater(new ResizeRunner(size));
    }

    public void componentMoved(ComponentEvent e) {}
    public void componentShown(ComponentEvent e) {}
    public void componentHidden(ComponentEvent e) {}

    private class ResizeRunner implements Runnable {
        private Dimension size;
        public ResizeRunner(Dimension size){
            this.size=size;
        }
        public void run() {
            child.setSize(size);
            validate();
        }
    }

}

The same can be achieved by subclassing a layout manager.

Obviously, this approach is inelegant and inefficient, but as a workaround for a JRE bug, and if nothing else helps... ;-)

java - JLabel with wrapped HTML-text as JScrollPane client - Stack Ove...

java swing jscrollpane jlabel textwrapping
Rectangle 27 0

Create the element with the banner graphic, place it in the root of your HTML code (ie inside the <body> tag, but not inside anything else), then style it as follows:

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

position:fixed - this sets it so that its position is fixed in the browser window. You can scroll the rest of the page, and the banner won't move. (If you'd prefer it to move with the rest of the page, change it to position:absolute;)

top:0 and right:0 - do exactly what they sound like they should do, and position the banner in the top right corner of the page. Feel free to use bottom and left if you'd prefer. If you want to indent it slightly, set it something like this right:5px; (note the px for pixels).

z-index:1000 - this can be any value, or could even be left off entirely, depending on how the rest of you page is laid out. The idea is to ensure that the banner shows up in front of any other content you may have placed on the page.

Thank you Spudley, your explanation of the CSS helps a lot and helped me understand the other answers more fully. Thanks!

html - Image Badges/Labels on the corner. What library (jQuery?) would...

jquery html css image badge
Rectangle 27 0

This is a rather interesting find. I'll do a bit more research to determine whether or not I can identify a more root cause, but for the time being I have a couple suggestions.

<label>
    <input />
    <img />
</label>

This is a common convention used for associating inputs with labels. Given the input and the label are both inline, this doesn't affect the actual layout necessarily.

Another option is to perform a click on the corresponding input when one didn't happen naturally. In this approach we setup a timeout to click after 100ms. Any click that happens otherwise will clear our timeout:

$("label[for]").each(function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    $(this).on("click", function () {
        timeout = setTimeout(function () {
            element.click();
        }, 100);
    });

    element.on("click", function () {
        clearTimeout(timeout);
    });

});

Browsers that already work will clear the timeout, preventing a second click. Internet Explorer 11 will click via the timeout.

One caveat is that that solution only works for labels that were on the page when the case was ran. If you have forms coming in late (perhaps via ajax), you'll need to listen higher up on the DOM. The below example listens on the document level:

$(document).on("click", "label[for]", function () {

    var timeout;
    var element = $("#" + $(this).attr("for"));

    timeout = setTimeout(function () {
        element.click();
    }, 100);

    element.one("click", function () {
        clearTimeout(timeout);
    });

});

The label element accepts as its content type all phrasing elements, and this includes image elements. I'll keep looking into this, and will update this answer with any insight.

Thanks for your time Jonathan. I had tried moving the input inside the label, but for some reason it doesn't seem to work for me. I had hoped to fix this without JS, but your solutions are interesting and helpful nonetheless :) I hope the IE team will fix this, so we won't have to resort to "hacks" like these.

@Mark Moving the element inside the label will work; if you had issues then I would be happy to work with you to resolve them.

html - IE 11 Bug - Image inside label inside form - Stack Overflow

html css internet-explorer-11
Rectangle 27 0

<li>
    <label>
        <figure>
            <img>
        </figure>
        <div>
            <label></label>
            <input type="radio">
        </div>
    </label>
</li>

It's a bit messy because some of it is auto-generated by Drupal. It didn't work in IE 11, but I made it work by adding:

img {
    pointer-events: none;
}

I didn't need to change anything else and I have no other special css-trickery that I can see.

html - IE 11 Bug - Image inside label inside form - Stack Overflow

html css internet-explorer-11
Rectangle 27 0

Not really AngularJS related. You wrapped both inputs in a label. A click inside the label will trigger both events. You can change the format of your HTML. Perhaps, take the image out of the label tag.

As an alternative, you could explicitly associate the label with either the image or chechbox by assigning an id. The following associates the label with image.

...
<label for="image" ng-style="myStyle">
  <input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
  <img id="image" src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/> 
  {{contact.username}}
  {{contact.email}}
</label>
...

worked! want to know, is it a rule for label-tag?

Yes, it is. Like when you have <label>Name: <input type="text"/></label>. Clicking on the label gives focus to the input.

html - angularjs ng-click event of two sibling tag fired, instead of o...

html angularjs
Rectangle 27 0

Its good for images, but i need it for whole div. I am using more than one images and also labels, text and HTML controls in inside the div. can u make some other things?

javascript - How to make this object.runtimestyle.filter='Gray' for su...

javascript html css firefox
Rectangle 27 0

Create the element with the banner graphic, place it in the root of your HTML code (ie inside the <body> tag, but not inside anything else), then style it as follows:

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

position:fixed - this sets it so that its position is fixed in the browser window. You can scroll the rest of the page, and the banner won't move. (If you'd prefer it to move with the rest of the page, change it to position:absolute;)

top:0 and right:0 - do exactly what they sound like they should do, and position the banner in the top right corner of the page. Feel free to use bottom and left if you'd prefer. If you want to indent it slightly, set it something like this right:5px; (note the px for pixels).

z-index:1000 - this can be any value, or could even be left off entirely, depending on how the rest of you page is laid out. The idea is to ensure that the banner shows up in front of any other content you may have placed on the page.

Thank you Spudley, your explanation of the CSS helps a lot and helped me understand the other answers more fully. Thanks!

html - Image Badges/Labels on the corner. What library (jQuery?) would...

jquery html css image badge
Rectangle 27 0

You can add an extra span inside the label but after the input and use the pseudo-element on that

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  top: 0;
  right: -30px;
  width: 16px;
}
label span:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #aaa;
}
input[type="checkbox"]:checked + span:before {
  content: "";
  background: #219161;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 16px;
  width: 16px;
  display: inline-block;
  padding: 0 0 0 0;
}
<label>
  <input type="checkbox" /><span></span>
</label>

html - How to replace checkbox with an image using a label with no id ...

html css checkbox checked
Rectangle 27 0

/*==============================================================================

    GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.

    Computed Geometries:    with a default 12px font, 1.0em == 12px and
    1px == 0.08333em.
    Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.

==============================================================================*/

/*====== GLOBAL OVERRIDES FOR MAJOR ITEMS AND DIFFERING BROWSER DEFAULTS =====*/

body { color:#009; background:#fff; font-family: verdana, tahoma, arial, helvetica, sans-serif, MS Sans Serif; }
body, table, img, button, iframe, ul, li  { margin:0; padding:0; border:0; }
table { text-align:left; }
iframe { width:0; height:0 }

ul { margin-left:20px; }       /* kill default 50px left padding and set 20px */
li { margin-bottom:1em; }          /* set default inter-item vertical spacing */
.tightlist li { margin-bottom:0.25em; }     /* tighter list for simple bullets */


/* our default page-width div */
.pagecontainer { width:85%; text-align:left; font-size:10pt;}


 /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/

.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
    position:relative;
    border:0;
    margin:0;
    padding:0;
    width:100%;
    height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
    min-width:560px;
}

/* suppress our whole menu when not an interactive mode (when printing, etc.) */
@media print, projection { .menuminwidth0 { d\isplay:none; } }

* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
    position:relative;  /* we can simulate a minimum width by creating a large */
    float:left;          /* border in this first div, then placing our content */
    height: 1px;          /* into a second nested div (see 2nd nested div next */
    border-left:560px solid #fff;    /* CSS box-model borders are a fixed size */
}

* html .menuminwidth2 {    /* used to simulate min-width capability for IE5/6 */
    position:relative;
    margin-left:-560px;
    height: 1px;
}

#masthead {
    position:relative;      /* position our child objects relative to this div */
    float:left;
    vertical-align:top;          /* protect from super-large user text sizing */
    border:0;
    margin:0;
    padding:0;
    width:100%;                                  /* grey-fill the entire width */
    height:36px;                  /* set the overall height above the menu-bar */
    background:#F3F3F3;                          /* a very light shade of grey */
}

#mastheadlogo {
    float:left;
    vertical-align:top;
    border:0;
    padding:0;
    margin:6px 0 0 7px;
}

#focus {                                                 /* GRC's focus label */
    position:absolute;
    border:0;
    margin:0;
    padding:0;
    top:15px;
    left:301px;
    width:121px;
    height:13px;
}

#search {                                                    /* search button */
    position:absolute;
    border:0;
    margin:0;
    padding:0;
    top:7px;
    right:6px;
    width:60px;
    height:19px;
}

#text {                                                 /* search text field */
    position:absolute;
    border:1px solid #404040;
    margin:0;
    padding:0 0 0 2px;
    top:7px;
    right:65px;
    width:12em;
/*  height:1.215em;         we'll define this at the bottom of our style sheet */
    font-size:14px !important;
    background:#fefefe;
}

#yah {                                    /* the "You are here" label graphic */
    position:absolute;
    top:5px;
    right:99px;
    width:87px;
    height:9px;
}

 /*========================= TOP OF THE MENU CASCADE =========================*/

.menu {
    position:relative;        /* establish a menu-relative positioning context */
    float:left;                                     /* play nicely with others */
    margin:0;
    padding:0;
    border:0;
    height:18px;                                  /* the menu's overall height */
    width:100%;         /* we always want our menu to fill the available space */
    background:#f3f3f3;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;         /* this (and also below) sets the menu's font size */
    border-bottom:1px solid black;        /* give us a black border underneath */
}

.menu img {
    vertical-align: top;      /* prevent images from being pushed down by text */
}

.menu ul {
    padding:0;
    margin:0;
    border:0;
    list-style-type:none;          /* we don't want to view the list as a list */
    line-height:1.5em;           /* globally set the menu's item spacing. note */
}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */

.menu li {
    float:left;    /* this creates the side-by-side array of top-level buttons */
    position:relative;    /* create local positioning contexts for each button */
    margin:0;
}

.menu ul li table {
    margin:-1px 0;              /* IE5 needs -1px top and bottom table margins */
    m\argin:0;               /* re-zero the table margins for everyone but IE5 */
    border-collapse:collapse;      /* IE5 needs this for the sub-menus to work */
    font-size:12px;        /* this sets the base font size for our entire menu */
}

.drop {
    display:block;
    padding:0px 0.33em;        /* this sets the l/r margins for our menu item */
    margin:0;
    text-align:right;   /* this right alignment goes with the float:left below */
    cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
    cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
}

.drop span {        /* this simultaneously left and right aligns the text and */
    float:left;       /* the >> in the drop-down menus which link to sub-menus */
}

.rightmenu {
    position:relative;  /* establish a local positioning context for YAH label */
    float:right;                  /* and right-align it at the top of our page */
}

#research {            /* this rightmost "Research" button must be positioned */
    position:absolute;       /* absolutely so that the YAH (you are here) text */
    top:0px;               /* label will slide underneath it under Opera v8.54 */
    left:364px;    /* which has a z-order sequencing bug with abs-pos elements */
}

/*======================== TOP LEVEL MENU DEFINITIONS ========================*/

.menu ul li ul {
    display:none;                  /* initially hide the entire list hierarchy */
    padding:1px;                               /* this is our box border width */
}

.menu ul li a,
.menu ul li a:visited {                    /* unselected top-level menu items */
    display:block;
    float:left;
    text-decoration:none;
    height:18px;
}

.menu ul li:hover a,
.menu ul li a:hover {                        /* selected top-level menu items */
    border-top:1px solid #000;    /* these 2 lines create the push-in illusion */
    height:16px;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul,
.menu ul li a:hover ul {                           /* 2nd level drop-down box */
    display:block;
    position:absolute;
    margin:0;
    top:18px;              /* place us just up underneath the top-level images */
    left:-1px;       /* left-align our drop-down to the previous button border */
    height:auto;      /* the drop-down height will be determiend by line count */
    width:13.5em;
    color:black;                        /* this sets the unselected-text color */
    background:black;         /* this sets our menu's effective "border" color */
}

.menu ul li:hover ul.leftbutton,
.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
    left:0px;
}

.menu ul li:hover ul.skinny,
.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
    width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
}

.menu ul.rightmenu li:hover ul,
.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
    left:auto;
    right:0;         /* nudge the right menu right to line up under the border */
}

* html .menu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
    right:-1px;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {                   /* 2nd level unselected items */
    border:0;
    margin:0;
    padding:0;
    height:auto;
    color:#000;               /* this sets the unselected drop-down text color */
    background:#d8d8d8;       /* this sets the drop-down menu background color */
    width:13.5em;
}

.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
    color:black;
    background:white;
}

.menu ul li:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a,
.menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
    width:8.08333em;
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
    visibility:hidden;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
    visibility:visible;
    position:absolute;
    margin-top:-1px;          /* bring the top edge of the 3rd level menu up one */
    top:0;
    left:8.08333em;
    width:14em;
}

.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
    width:14em;
    background:#d8d8d8;
}

.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
    width:14em;
    background:white;
}

#text {           /* the Mac's standard Safari browser will not see this code */
    height:1.215em;#           /* ...  but every other browser will and should */
} /* Safari barfs on the illegal pound sign (#) after the rule's property val */

Thanks, but thats pretty long. I can't find what i'm supposed to put in my css...

html - How to make a menu have submenus in pure CSS - Stack Overflow

html css
Rectangle 27 0

Looks like every <img> is wrapped inside an <em> tag, you certainly want to remove it along.

Interesting that you managed to get so far and be stuck at this stage. Anyways, try this regex:

/<em><img[^>]+\><\/em>\<strong>[^>]+>/i

This only works if the <strong> tag does not contain any sub-tag.

ok it is removed...but If I would extract the content of <strong>content</strong>

$input
preg_match_all('/<em><img[^>]+\><\/em>\<strong>([^<]+)<\/strong>/i' , $input, $matches); print_r($matches);

php - deleting label from image in html code - Stack Overflow

php html xml rss simplepie
Rectangle 27 0

You can check out the classes NSAttributedString+HTML.h and NSAttributedString+HTML.m and use html to insert and image in the label.

objective c - Image inside UILabel text - Stack Overflow

objective-c ios cocoa-touch
Rectangle 27 0

I feel stupid using semantically incorrect background-image instead of <img> because of stupid browsers.

I'm not able to use background in CSS to get the image as the img src is dynamically obtained. Is there another workaround for this? I'm facing exactly the same scenario as the original question. Thanks.

html - Image and Checkbox Inside Label in Internet Explorer - Stack Ov...

html checkbox internet-explorer-8
Rectangle 27 0

Create the element with the banner graphic, place it in the root of your HTML code (ie inside the <body> tag, but not inside anything else), then style it as follows:

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

position:fixed - this sets it so that its position is fixed in the browser window. You can scroll the rest of the page, and the banner won't move. (If you'd prefer it to move with the rest of the page, change it to position:absolute;)

top:0 and right:0 - do exactly what they sound like they should do, and position the banner in the top right corner of the page. Feel free to use bottom and left if you'd prefer. If you want to indent it slightly, set it something like this right:5px; (note the px for pixels).

z-index:1000 - this can be any value, or could even be left off entirely, depending on how the rest of you page is laid out. The idea is to ensure that the banner shows up in front of any other content you may have placed on the page.

Thank you Spudley, your explanation of the CSS helps a lot and helped me understand the other answers more fully. Thanks!

html - Image Badges/Labels on the corner. What library (jQuery?) would...

jquery html css image badge
Rectangle 27 0

simple just: input name should be inside label and make some width to id box. Just copy paste code below: 

HTML CODE:

<html>
    <head>
    </head>
    <body>


        <div id="container">
            <h3 class="header"> Welcome to the registration form </h3>
            <div id="border"> </div>


            <div id="box">

                <p> <label>Enter Name:</label> <input class="in" type="text" name="name" value="${param.name}"> </p>
                    <p><label> Enter Age:</label> <input class="in" type="text" name="name" value="${param.name}"> </p>
                        <p><label> Enter Address: </label><input class="in" type="text" name="name" value="${param.name}"> </p>
                            <p> <label>Enter phone: </label><input class="in" type="text" name="name" value="${param.name}"> </p>

                            </div><!--box -->


                        </div><!--container -->
                    </body>
                </html>

CSS CODE:

/* 
Document   : style
Created on : Jan 18, 2014, 9:53:43 AM
Author     : will
Description:
Purpose of the stylesheet follows.
*/

*{
    margin: 0px;

}
body{
    background-color: black;
}




#container{
    color: black;
    margin: 50px auto;
    border: solid black 2px;
    text-align:center;
    width: 700px;
    height: 540px;
    background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');


}


#block{
    width: 300px;
    color: black;
    margin: 36px auto;

}



h3.header{
    color: black;
    font-size:25px;
    margin: 30px 30px 5px;

}

#border{
    width: 400px;
    border-top: solid black 1px;
    margin: auto;

}

#box p{
    margin: 20px; text-align:left;

}

#box label { width:95px; float:left }

#box { width:300px; /* or 42% width*/  margin:0px auto; }

#box input{
    margin-left: 10px;
}

css - how to align HTML positioning and inputs on P and centered text ...

html css css3
Rectangle 27 0

As I answered previously in the referred question, there is a pure CSS way.

display: block
label img{
    display: block; /* requirement */
    /* fix */
    pointer-events: none;
    position: relative;
}

/* fix */
label{
    display: inline-block;
    position: relative;
}
label::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
<form>
<label>
    <input type="checkbox"> some text
    <img src="http://placekitten.com/200/200" alt="kitten!">
</label>
</form>

If the problem is with click handlers on the image it self, you may be able to solve that with a wrapper element on the image instead (which maybe the label, so no extra element may be needed). (But for that I'd like to see a more specific example that you are trying to do.)

html - IE 11 Bug - Image inside label inside form - Stack Overflow

html css internet-explorer-11
Rectangle 27 0

You can put the image in the background of the label..

<label  for="myField1" ><img src="image1.jpg"></label>
<style>
 #lblMyField1 {  
    background-image: url('image1.jpg');
    background-position: center center;/* depend..*/
    background-repeat: no-repeat; 
 } 
</style>

<label id="lblMyField1" for="myField1" >&nbsp;</div>

html - IE 11 Bug - Image inside label inside form - Stack Overflow

html css internet-explorer-11
Rectangle 27 0

Adding the following workaround for IE solves the problem:

label{
        display: inline-block;
    }
    label img{
        pointer-events: none;
    }
<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
	position: absolute;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	top: 40px;
}

#navigation-menu .menu-items {
	display: none;
}

#navigation-button:checked + .menu-items {
  display: inline-block;
}

#navigation-menu input[type="checkbox"], 
#navigation-menu span.drop-icon {
	display: inline;
}
label{
    display: inline-block;
}
label img{
    pointer-events: none;
}
</style>

</head>
<body>

<form>
 <div id="navigation-menu">
  <input type="checkbox" id="navigation-button">
  <div class="menu-items">
   <div>Option 1</div>
   <div>Option 2</div>
  </div>
  <label for="navigation-button" id="navigation-label">
   <span class="drop-icon">
    X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
   </span>
  </label>
 </div>
</form>

</body>
</html>
#navigation-menu ul span.drop-icon {

That was it. I had no idea that images could sink events and not pass them to the parent elements, at least in Internet Explorer. Also that style was a remainder of previous edits. Thank you for solving the issue.

html - Clicking on image icon inside label does not toggle checkbox st...

html css