<Surf & Perf/>

A repository of notes about Performance Testing, Automation, RPA, and Web Design.

  • UiPath

    Show all posts related to UiPath

  • Windows

    Show all posts related to Windows

  • Web Design

    Show all posts related to Web Design

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

How to make an HTML modal window using Javascript and CSS

, , ,
This is basically an application of this tutorial from w3schools. I've created a fiddle for it and customized mainly the CSS.

Modals are a neat way to present content in an HTML page without making it look cluttered. You can use it to contain information you don't want to be visible at all times. You increase the usability of your website by not having your user jump to a new page for small information or a form.


This is really more of a note to self haha but hope you find is useful too!
Share:
Read More

How to override Internet Explorer Compatibility View Settings on HTML

, , ,
By adding this meta tag inside the <head> part of your script, you allow the page to emulate on Microsoft Edge (which is Windows 10's latest browser), essentially overriding IE compatibility view settings:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Note that it should be the first thing inside your head for it to work (lol). So make sure to put it right after the <head> tag. Alternatively, but I haven't tried, if your application runs on IIS Manager you can try adding this code on web.config:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=edge" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Helpful link here.

This workaround works on intranet sites hosted on domains where IE compatibility view settings are applied. We have several apps deployed on a whitelisted domain that are being forced to emulate on IE 5, essentially messing up our CSS. So yep, adding a meta tag worked for me! :) Hope this helps!
Share:
Read More

CSS Horizontal drop-down menu

, ,
Here's how you can create a horizontal navigation bar with drop-down feature using CSS. The limitation of this code is that it can only handle 1 level of sub menu. So if you intend you create more levels, you have to add to the code.

 See jsfiddle here


CSS properties will vary depending on your existing layout and styles, but basically the horizontal drop-down menu works by converting an unordered vertical list into a horizontal one, and hiding any sub list from sight until the parent is hovered by the mouse.
Share:
Read More