Unset Width to Revert Back to Inline HTML Attribute "Width=Xx"

Unset width to revert back to inline html attribute width=XX

Simply add the attribute srcset="" to the image to avoid the first style being applyed and remove the style you added. The idea is to keep only one CSS property to auto (height or width) and the other one will get the value specified on the image and your image will have the desired height/width:

By the way I advice you to specify a correct value to srcset and don't leave it empty

/* Untouchable CSS */.row .col img:not([srcset]) {    width: auto;}
.row .col img {    height: auto;}/*End Untouchable CSS */

<div class="row">  <div class="col">    <a href="#"><img width="85" height="30" srcset="" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>     </div></div>

How to remove width with center DIV

If you want to take the width as per the content you can use display:inline-block and set css to parent as text-align:center which will align the element center

.parent {  text-align: center;}.center {  display: inline-block;  border: 1px solid red;}

<div class="parent">  <div class="center">    This is some text!  </div></div>

HTML5 - Can I use Width and Height in IMG?

First use is recommended as hints for the browser's rendering, second one works.

In the first form you must not add 'px'.

http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

To sum it up:

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

This seems to be the most beneficial effect in my opinion.

Can I override the width of an HTML element with CSS?

Strip out the position attributes from #foo and #bar.

Then add:

<style type="text/css">
#bar li { white-space:nowrap !important; }
</style>

html div settings to restrict inner div width

max-width property can help you.

Remove width attribute from img tag and write additional css code:

<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>

Replace all XX attributes to numeric ID with jQuery

You don't need to use each and also .html() only returns the markup content. For updating, you need to do .html(YOUR-UPDATE-CODE),

change,

// Where I have problem!!
elementRow.each(function() {
  elementRow.html().replace(/XX/g, elementCounter);
});

To

elementRow.html(elementRow.html().replace(/XX/g, elementCounter));

Demo:

var elementCounter = 0;
jQuery(document).ready(function() {
  jQuery("#add-new-game").click(function() {    var elementRow = jQuery("#placeholder-item").clone();    var newId = "gr-item-" + elementCounter;
    elementRow.attr("id", newId);    elementRow.show();
    elementRow.html(elementRow.html().replace(/XX/g, elementCounter));
    var removeLink = jQuery("a", elementRow).click(function() {      removeElement(elementRow);      return false;    });
    elementCounter++;    jQuery("input[name=element-max-id]").val(elementCounter);
    jQuery(".add-and-remove-items").append(elementRow);
    return false;  });
});
function removeElement(element) {  jQuery(element).remove();}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sortable-items add-and-remove-items settings-items gr-items"></div>
<input type="hidden" name="element-max-id" /><a href="#" id="add-new-game">Add new</a>
<div class="sortable-item add-and-remove-item settings-item gr-item front-page-element" id="placeholder-item" style="display: none;">  <label for="gr_name_XX" style="width: 90px; display: inline-block;">Name: </label>  <input type="text" name="grfield[XX][name]" class="regular-text" id="gr_name_XX" value="" />  <label for="gr_genre_XX" style="width: 90px; display: inline-block;">Genre: </label>  <input type="text" name="grfield[XX][genre]" class="regular-text" id="gr_genre_XX" value="" />  <br>  <label for="gr_backg_XX" style="width: 90px; display: inline-block;">Background: </label>  <input type="text" name="grfield[XX][backg]" class="regular-text" id="gr_backg_XX" value="" />  <label for="gr_date_XX" style="width: 90px; display: inline-block;">Date: </label>  <input type="text" name="grfield[XX][date]" class="regular-text" id="gr_date_XX" value="" />  <label for="gr_nc_XX"><input type="checkbox" name="grfield[XX][nc]" id="gr_nc_XX" value="1" /> String date</label>  <a href="#">Remove</a><br></div>

getting html inline style attribute value with jsoup

You can definitely use Jsoup the way you do it to find the correct element.

To get the attribute information, there is no simple way to do this using only Jsoup. You can get the attributes by calling the Element.attributes() method in Jsoup, but as far as I know you will have to use a regex matcher to select the information you want.

You can set up a regex lookahead and lookbehind pattern that will check for occurences that matches your pattern.

Pattern p = Pattern.compile("(?<=border-right-width:1px;)(.*)(?=;width:140px;)");

This pattern will look for all characters that are between border-right-width:1px; and ;width:140px;

Going from this, the code below should produce your desired result:

Pattern p = Pattern.compile("(?<=border-right-width:1px;)(.*)(?=;width:140px;)");
String elementInformation = "";
for (Element elem : names) {
    if (elem.text().contains("Montag")) {
        Matcher m = p.matcher(elem.attributes().toString());
        elementInformation = elem.text() + " -> ";
        while(m.find()){
            elementInformation += m.group();
        }
    }
}
System.out.println(elementInformation);

Result:

Montag -> left:57px

You can modify the for each loop and parse the same information for all elements, though it

for (Element elem : names) {
    if (!elem.text().contains("Zeit")) {
        Matcher m = p.matcher(elem.attributes().toString());
        elementInformation += "\n";
        elementInformation += elem.text() + " -> ";
        while (m.find()) {
            elementInformation += m.group();

        }
    }
}

and you'll get:

Montag -> left:57px
Dienstag -> left:197px
Mittwoch -> left:337px
Donnerstag -> left:477px
Freitag -> left:617px

Take a look at this Regex tutorial if you want to learn how it works.

Regex Tutorial

---

Related Topics