When using an iOS UIWebview, I am facing the issue of needing to add an icon before standalone links that are within a locally loaded HTML file. In addition to adding the icon, I also need both the icon and link to be highlighted when tapped. The desired outcome is for the icon to transition from a non-active version to an active one upon tapping. The final result should resemble:
Thankfully, I managed to find a working solution:
Here is the HTML code:
<a href="http://www.google.de" class="standalone-link">
<div class="standalone_link_background">
<div class="standalone_link_icon">
<div class="standalone_link_text">Google</div>
</div>
</div>;
</a>
And here is the corresponding CSS:
/* Styling for links */
a, a:link, a:visited, a:hover
{
color: #00f;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
a:active
{
color: #f00;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
a.standalone-link, a.standalone-link:link, a.standalone-link:visited, a.standalone-link:hover
{
color: #ffffff;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
a.standalone-link:active
{
color: #f00;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
/* Styling for icon and text in the link */
div.standalone_link_icon
{
background: url('link_icon.png') no-repeat left;
width: 20pt;
height: 12pt;
}
div.standalone_link_icon:active
{
background: url('link_icon_highlight.png') no-repeat left;
}
div.standalone_link_text
{
margin-left: 14pt;
width: 9999pt;
float: left;
}
/* Styling for link background */
div.standalone_link_background
{
background-color: rgba(0, 0, 0, 0);
clear: left;
}
If there are any suggestions on how to make this code shorter or better, please feel free to share! Your comments and improvements are welcomed.
Is it possible to extract CSS/XPath from a Capybara Element? I have attempted to use #path but it doesn't appear to be effective. Here is the link I tried: The test is being executed on Selenium Webdriver. ...
I'm looking to create an interactive image gallery where the user can hover over an image to reveal text below it. I've been trying to achieve this by setting up my images in a specific way: echo "<div class=textimage style=background-image:u ...
Trying to adjust the margin-top of a div to 100% of screen height within an iframe seems to be causing issues with jQuery, as it either returns 0 or inaccurate values. While CSS3's 100vh can work as an alternative, it may not be supported in older an ...
When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...
When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...
Appreciate your time. I'm working on adding background color to the TEXT exclusively, and have successfully done so by styling .post-title { text-transform:capitalize; margin-top:4px; margin-bottom:1px; font-size:22px; background-color:#FFF; dis ...
I took the initiative to manually download the css and js files for an angular module (here). In order to make a small adjustment, I modified the css (specifically changing max-width in the media query): Original: @media only screen and (max-width: 800px ...
My JavaScript function looks like this: function appendAllQna(qnaList, num){ for (var i in qnaList){ var qnaCom = ""; qnaCom += "<div class='scomment scommentLine'>"; if(qnaList[i].sellerYn == "Y"){ ...
Creating responsive menus involves using ordered and unordered lists, along with CSS for styling. I have added a script to dynamically generate dropdown menus, but encountered an issue where nothing appears on the screen upon resizing - only the backgrou ...
I'm currently experimenting with the currency converter API offered by Mashape, which can be found at ! Being a newcomer to Objective-C, I am attempting to interact with the API using the following code snippet: NSDictionary* headers = @{@"X-Mashape ...
I'm currently using Bootstrap 4 and facing some issues while attempting to create a button group with multiple rows, similar to the design shown in the image provided below. The default button groups in Bootstrap appear to only support arranging butto ...
I've been struggling with this issue for the past few days. My goal is to send an array to PHP, but I am encountering difficulties in receiving it as a post-variable named "json". I have tried various solutions and techniques, but so far, I have not b ...
index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...
Having the HTML structure below: <div id="main"> <div id="myDiv1"> <ul> <li>Abc</li> <li>Def</li> </ul> </div> <div id="myDiv2"> <ul> <li>Ghi</l ...
Within my textarea, I have lines that start with a number and a period: <textarea autoFocus id="text-area"wrap="hard" defaultValue ={this.state.textAreaVal} onKeyUp={this._editTextArea}/> For example: Line 1 Line 2 Line 3 I've created a ...
I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text ve ...
Is there a way to incorporate the 'Futura Bk BT Bok.ttf' font into my website using the CSS @font-face rule? Here is a snippet of my current CSS: @font-face { font-family: abcd; src:url('Futura Bk BT Bok.ttf') format('true ...
I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top. I attempted t ...
My method for collecting files from a folder involves using some Smarty code: {assign var=files value="uploads/Documenten/GPS-Tracks/*.html"|glob} {if count($files)} <ul> {foreach from=$files item='file'} {assign v ...
I am currently working on building a responsive portfolio grid that spans the full width of the screen. To achieve this, I have set the width of the items using calc() and ensured that the thumbnail image fills the entire div by applying the following CSS: ...