Category Archives: HTML

Hyper Test Markup Language

textarea highlight / select and scroll to text – cross browser – pure javascript

I wanted a cross browser solution to select and highlight text within a text area. Trawling the internet yielded some partial solutions.

But I could not find one that scrolled to the correct location without a hack or some jiggery pockery

So I took what others had done and made it better. This is a cross browser solution that works in IE, firefox and chrome

the code pure javascript

Uasage

this is how to use it

how it works

Essentially, it uses the textareas full height (totalHeight), and the total number of new lines (totalLines). From this we can determine the line height

Now that we have the number of lines and the line height all we need now is to determine which line the selected text is on. To find this we take the total number of lines in the textare and deduct the number of new lines after our selected text

Finally to get the scroll to position we multiply the line number by the line position of the selected text

HTML 5 ASP.NET Drag n Drop IE Chrome Firefox

drag and drop, cross browser support in asp.net

part of a project involved allowing a user to select from a list of 200+ items, and it needed to be easy. So, we decided to provide users with a drag and drop facility

Drag and drop has been around for quite some time, and its a little tricky to get it right. I’m going to show you the basics that i used to enable a drag and drop between lists

What are we after?

we want draggable lists that will do the following

  • Two lists
  • drag and drop
  • support multi select
  • support re order of list items

The end result

this is what the HTML will look like once the page has rendered, go ahead, give it a try. Try selecting multiple items then dragging them over

as you play around with the drag and drop, monitor your browser console to view the events that are firing

notice that when you change the selected fields the text area displays a comma separated list of selected items

Filter list
Choice fields

  • Name 1
  • Name 2
  • Name 3
  • Name 4
  • Name 5
  • Name 6
  • Name 7
  Selected fields

  • Name 8
  • Name 9
  • Name 10
  • Name 11
  • Name 12
  • Name 13
  • Name 14

 

This drag and drop is tied together with just 4 javascript functions, tied to the browser drag events

  • handleStartDrag()
  • handleDragEnter()
  • handleDragOver()
  • handleDropped()

there are ancillary functions that bind events and respond to the filter

  • fltrChanged()
  • UpdatehiddenFields()
  • bindUIactions()

How its done

In a nutshell

The rendered HTML

So whats going on ?

Well a few things are happening here, CSS is styling our stuff. ASP.NET is loading the repeater and generating our “li” elements for the un-ordered lists. And jQuery is doing the rest

the keys points to note here are:

  • the classes used {ctlDrop, ctlDrag} (for CSS and more importantly jQuery hooks)
  • the draggable attribute on the items tell the browser these are allowed to be dragged
  • the use if ID‘s and Data- attributes as hooks for our functionality

how it works

first up i will say you have to do a few inexplicable things to get drag and drop working, but its a given, just do it and don’t ask, or you’ll simply lose your mind like many other techies who ask the “why did they do that?” question. like me

1. enable jQuery to support passing a payload across drag n drop.
2. declare a variable in your class to hold the last entered item that the drag action has entered.

The singleton script layout looks like this

 

The Code

Loading the form

The code infront

jumping straight in, we need two lists, driven by some data source. Here is how we load the lists, using .net repeaters

Notice we have a hidden field in the right hand column, this will be used to stored the selected values, as the selection changes

Code Behind – the repeater code

On our data bind we add list items to the list, and some information to the each list item. Class, draggable, data-fieldName, data-ordinal.

jQuery – the ancillary functions

bindUIactions()

We will bind to the dragover and the drop event on the elements with class ctlDrop

We will bind to the dragstart, dragenter, drop and click events of the elements with class ctlDrag

Finally we will bind to the txtfltr element so we can filter our list

UpdateHiddenFields()

handling the collecting of the selected items into a comma separated list is relatively simple, and this function will be called from the end of the drop event

jQuery – The Drag and Drop routines

handleStartDrag()

The start drag routine, a must have to set the sllowed effect property, this is searchable on the drop if you need to.

handleDragOver()

The drag over routine, this is another must have, without this, obscurely no draggable item will drop. Don’t ask just do

handleDragEnter()

The drag enter routine, this is required because internet explorer doesn’t correctly record which element the drop occurs over, so here we record the last entered element before the drop. And thus we have cross browser compatibility

handleDropped()

The drop routine, this is where all of the hard work is done. If you are a public facing website you might want to add screening of the mime type that is dropped, just incase its not what you are expecting. I’m not doing that here, our project was internal

 

the javascript file is available for download here dragndrop

the CSS is available for download here dragndrop CSS

HTML embed an audio clip and repeat / loop it

I needed to loop an audio clip for a friends static web page. I found out that there are so many idosyncracies to take into account with various browsers.
Here’s how to do it with an mp3

ok so

1. The header contains the tag

enclosed within a tag

This is used in older browsers that do not support the tag

2. The tag

is used with the correct parameters to call the sound autoplay it and loop it
3. The

supported by pretty much anything is there just in case the browser is not IE and does not support the tag

The only other alternative is to do the following

HTML Background image fullscreen to screen size

Have you ever needed to have your background image automatically fullscreen to the browser dimensions

There are so many different ways to do it but i found the most reliable way is to use a div container. Place an image within it setting the width and height to 100%