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 Web Design. Show all posts
Showing posts with label Web Design. 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:

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:

How to implement SSO Windows authentication in PHP

I'm currently working on a PHP web application and would like to skip the login page by automatically authenticating a user using his Windows logon credentials. Quite simply I just wanted to get which user is currently logged in the system, and use that variable to query the database and display relevant information on the web page. By getting the authenticated username value, we eliminate the need for a login form because the user has already been authenticated the moment he logs into his computer. Ideally, intranet applications should be using single sign on to avoid redundancy in forms. But LDAP authentication should still be present to handle certain scenarios that still need login screens. So here's how to implement it if you're running a PHP web application served using IIS manager.

What you need to do is enable Windows Authentication on IIS manager and use $_SERVER['AUTH_USER'] on PHP to retrieve the windows logged-in user:

If you don't have Windows Authentication installed on IIS, here's how.
  • Open Server Manager (Start > All Programs > Administrative Tools > Server Manager)
  • Navigate to Roles > Web Server (IIS)
  • Right-click on Web Server (IIS) and select Add Role Services. 
  • Scroll down on the list of services and find Windows Authentication under Security.
  • Select and install.


Once Windows Authentication is installed, go to IIS Manager, navigate to your site and enable it under IIS > Authentication. Also make sure to disable Anonymous Authentication to avoid conflict.



Now to back to your PHP code, as mentioned, $_SERVER['AUTH_USER']returns the domain and username of the currently logged in person, ie: DOMAIN\myusername01

If you want to extract just the username, you can use PHP's str_replace() function, ie:

str_replace("DOMAIN\\","",$_SERVER['AUTH_USER']);

This returns the naked username, which you can then use to query your database for validation.

That's it, hope this helps! :)
Share:

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: