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.
Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...
Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...
Yesterday, I successfully uploaded a new build but it has not appeared in iTunes Connect under the "prepared for submission" section yet. The upload was done using Application Loader and everything seemed to go smoothly. However, it's been 18 hours n ...
I've encountered an issue with Angular 8 and Font Awesome icons. I initially added the font-awesome path in the angular.json as follows: "./node_modules/font-awesome/css/font-awesome.css" However, all the icons were displaying as empty boxes (not lo ...
I am receiving an error even though I believe I have done everything correctly. I am currently using localhost, could that be the issue? If not, what else could it be? The error is occurring on this line: $name = $_POST['name']; Here is the co ...
I am currently working on a function in Angular 2 where I want to toggle the disabled attribute of an input tag upon button click. Right now, I can disable it once but I am looking to make it switch back and forth dynamically. Below is the HTML template c ...
Having trouble getting this to work on my website, especially in Internet Explorer. Check it out here: http://jsfiddle.net/b43hj/24/ Any tips on how to make it compatible with all browsers? Thank you edit - I've only used the code from the jsfidd ...
I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...
Seeking help on a persistent issue, but previous solutions haven't worked for me. Looking to implement a hamburger menu that transitions in from offscreen. The design appears correctly on desktop and simulating mobile, but actual mobile view require ...
On a mobile screen, here is how my navigation bar looks: Just to clarify, I am currently only focusing on making the nav bar responsive and not other content. The stylus code for the navigation bar is as follows: -> code in stylus!!! .nav display ...
Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles. const data = [ { id: 1, color: '#000' }, { ...
I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...
Hey there, I could really use some help! If anyone has any ideas for fixing a z-index issue in Internet Explorer 7 with CSS/JavaScript on this page while keeping the DOM structure intact (it's currently optimized for easy tab navigation), I would gre ...
I've searched through previous answers on the SO platform, but I'm still unable to find a solution that works for me. I have a static Gatsby site with an infinite scrolling background implemented on desktop, and a static image displayed on mobile ...
My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...
Hey there! I have a question about adding telephone links to the numbers on my website. How can I ensure that it passes W3C validation successfully? Currently, when using this syntax: <a href="tel: 0141 123456">0141 123456</a> I am getting th ...
Hey there! I'm having an issue with the redirect not working when I click the "Submit" button on the login page. The code in my index.js file looks like this: app.use(bodyParser.urlencoded({ extended: true })); app.use(express.static(path.join(__dir ...
I am new to the concept of JSON parsing. Currently, I am attempting to retrieve data from a local JSON file in my Swift project. I have successfully implemented the code to fetch the data. However, I am facing difficulties in creating an array of objects b ...
Can anyone offer advice on how to properly integrate and organize the 'templateHyper' (Bootstrap template) folder within my web project? I've been developing a project using C#, JavaScript, HTML, and Bootstrap's templateHyper. I'm ...
I'm currently working on a WordPress project and I've been attempting to create a smooth text flow between columns using the Bootstrap framework. What I'm aiming for is to have the same story seamlessly transition from one column to another ...