Creating an icon to serve as a placeholder

Question

Creating an icon to serve as a placeholder

I attempted to create a placeholder image in jQuery Mobile, but unfortunately was unsuccessful. You can view what I am trying to achieve by following this link. Below is the code I used to make the "Icon of Expedia" act as a placeholder - when someone touches the icon on mobile devices or clicks on it from desktop browsers, a blue square will cover the icon and make it stand out.

<div data-role="content">

     <ul data-role="listview" data-inset="true" data-dividertheme="b">
                    <li>
                        <img alt="Hotels.com" src="images/H.jpg" />
                        <div style="margin-top: 0px; width: 53%; float: left;">
                            <a style="font-size: 10px; color: Black;">Great Deal- Collect 10 nights and get 1 free
                                at Hotels.com</a>  
                    </li>
    </ul>
</div>

jquery css html jquery-mobile

Answer 1

Answer №1

To achieve this effect, you would utilize the :active CSS selector.

Check it out here: http://jsfiddle.net/2N7Ja/3/

Here is the HTML snippet:

<ul id="list">
    <li class="cf">
        <span class="wrapper">
            <img src="image.png"/>
        </span>
        <a>Great Deal- Collect 10 nights and get 1 free at Hotels.com</a> 
    </li>
</ul>

And here is the CSS code:

img { display: block; }
#list { list-style: none; }
#list, #list > li {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
}
#list > li > a {
    display: block;
    float:left;
}
.cf:after {
    content:"";
    display:table;
    clear:both;
}
#list img {
    float: left;
    padding: 2px;
}
#list > li:active img {
    border: 2px solid blue;
    padding: 0;
}

Answer 2

To achieve this effect, you would utilize the :active CSS selector.

Check it out here: http://jsfiddle.net/2N7Ja/3/

Here is the HTML snippet:

<ul id="list">
    <li class="cf">
        <span class="wrapper">
            <img src="image.png"/>
        </span>
        <a>Great Deal- Collect 10 nights and get 1 free at Hotels.com</a> 
    </li>
</ul>

And here is the CSS code:

img { display: block; }
#list { list-style: none; }
#list, #list > li {
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
}
#list > li > a {
    display: block;
    float:left;
}
.cf:after {
    content:"";
    display:table;
    clear:both;
}
#list img {
    float: left;
    padding: 2px;
}
#list > li:active img {
    border: 2px solid blue;
    padding: 0;
}

Creating an icon to serve as a placeholder

Answer №1

Similar questions

"Enhancing selector parsing with the use of pseudo-elements for improved forgiveness

The header and sub-navigation are in disarray and require some help

What is the best way to locate {Tags} only within the visible HTML content, excluding the elements' attributes?

Populate the form fields with data extracted from the uploaded CSV file

Instructions on how to extract a specific timestamp from a video and utilize it to initiate an event

Retrieve the report information and present it in a HTML data table using a REST API

"Optimizing App Pool Performance with IIS Precache Event Monitoring

Change the class upon clicking the element

Customize the bootstrap carousel to show multiple slides at the same time

A multimedia player featuring various video source files and multiple text track options

Adjusting the size of h1 when hovering over an image

Icons are now toggling for all items, not just one

Creating a Naming Convention in JavaScript for Object Properties based on Specific Criteria

Tips for eliminating null values from a JavaScript object

The fit-content max-height property is not functioning properly in Firefox

What is the best way to ensure a consistent fixed-width layout viewport in Android and iPhone while allowing for user scalability by using jQuery Mobile?

PHP reports array size=0 after successfully sending an array of JSON objects to it using jQuery AJAX

Interactive Ionic menu available on a designated page for enhanced user engagement

Submitting information via jQuery

Unable to save Ajax data in session array