Scroll Page on Page Load

On loading a web page scroll to the top of a form.

I had a web page with a form, part of a sequence of pages. Rather than the user scrolling down to the start of the form, I scrolled the page to the start of the form on page load.

Or more specifically to scroll to just above the top of the form on page load. Giving a degree of orientation reference within the page.

Above the form I added a div with an id:

<div id=”FormTop”></div>

Within the header (or separate JavaScript file if preferred) add the entry to scroll the page.

$(document).ready(function(){
  $('html, body').animate({scrollTop: $('#FormTop').offset().top}, 'slow');
});

Shown above is the animation, associated with either html or body. Here the scrollTop function moves the page to the FormTop ident, at a speed set as slow. Once the page has completed loading and is ready.

Perhaps the scroll isn’t to your liking. Both the speed and the flow (easing) of the scroll can be changed.

Other speeds can be used, try experimenting with these (in milliseconds):

$(‘html, body’).animate({scrollTop: $(‘#FormTop’).offset().top}, ‘500’);

The easing effects used for the animation can also be added, for example:

$(‘html, body’).animate({scrollTop: $(‘#FormTop’).offset().top}, ‘slow’, ‘swing’);

Linear is an alternative. This specifies how the path of the animation flows. There are more available by incorporating the jQuery UI script.

No doubt when you implement this you’ll add the single action line along with the rest of your items within $(document).ready(function(), not give its own distinct wrapper.

References

https://api.jquery.com/animate/

https://www.w3schools.com/jquery/eff_animate.asp

https://jqueryui.com/easing/

 

Bootstrap3 Removing Parent Menu onClick

Using the Bootstrap menu clicking on a parent menu item reveals the child items. The parent page isn’t opened in the traditional menu way.

This is by design.

In summary, clicking on the parent menu item shows child menu items as drop down
Hovering over the parent page has no effect.

The result which I wanted was:

Hover over parent menu item to show child menu items in a drop down
Click on parent to change page, showing parent page.

The onclick of the parent menu item causes a drop down to appear and not to move forward to view the parent item

Changes to be made

  • onclick to open parent item
  • hover to show dropdown

To implement the changes I removed the data-toggle attribute and added a hover function emulating the click action but adding the open class.

I added the following to the header.php file of the WordPress child theme.

<script type="text/javascript">
var $vntweb =jQuery.noConflict();
$vntweb(document).ready(function ($vntweb) {
	$vntweb('a').removeAttr( 'data-toggle');
	$vntweb('.dropdown').hover(function() {
	     $vntweb(this).toggleClass('open');
	});
});
</script>

A better place to add this would be an included JavaScript file.

I like to add my own variable $vntweb with a noConflict, rather than simply the use of $. Usually this keeps me out of trouble, avoiding conflicts with other uses of $ as a variable

 

jQuery Scroll to Page Top

For a long web page it can be nice for your visitor to click on an icon and for the page to scroll back to the top.

None of that frantic skipping of the fingers on a small phone screen!

For a web page with lots of content, it may be helpful to your visitors to add a scroll to page top text and/or icon.

This can be implemented using jQuery.

An icon placed at the bottom of the page content, or the end of sections of text, can action a return to page top by calling a simple piece of jQuery.

For a recent project I chose to use one of the glyphicons as my up arrow at the bottom the page.

Here’s the arrow icon in the footer of the page

<a href=”javascript:void(0);” id=”scroll-top” title=”Scroll to Top” style=”display: none;”>
<span class=”glyphicon glyphicon-circle-arrow-up”></span>
</a>

As an addition to this you may wish to keep the icon hidden, showing it only when the page view reaches the bottom.

As can be seen in the above example its hidden initially.

And here’s the jQuery scroll top

$VNTweb(window).scroll(function(){ 
    if ($VNTweb(this).scrollTop() > 100) { 
        $VNTweb('#scroll-top').fadeIn(); 
    } else { 
        $VNTweb('#scroll-top').fadeOut(); 
    }     
    var p=$VNTweb(".puzzle-piece-tile").position();
    if($VNTweb(this).scrollTop() > p.top+100 && !frontpagetileOnce){
        frontpagetile();
    }
}); 
$VNTweb('#scroll-top').click(function(){ 
    $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
}); 

To avoid conflict I use $VNTweb in my jQuery, declared using:

var $VNTweb = jQuery.noConflict();

As the screen nears the target area the scroll to icon fades into view.

I had looked through the arrow icons available in font awesome but didn’t find what I wanted to use on this occasion. I chose to use one from Glyphicons. I added a reference to the set in the top of the CSS file:

@font-face {font-family: glyphicons;src: url('../fonts/glyphicons-halflings-regular.otf') format('truetype'),url('../fonts/glyphicons-halflings-regular.eot') format('eot'),url('../fonts/glyphicons-halflings-regular.woff') format('woff');}

My CSS for positioning the arrow:

#scroll-top {position:fixed;right:20px;bottom:40px;display:block;z-index:999999;}
#scroll-top span {font-size:48px;color:#fa00ff;text-shadow: 0px 0px 1px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
#scroll-top span:hover {color:#ffc300;text-shadow: 0px 0px 6px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}

As can be seen I also have a transition to take the suddenness out of its appearance/disappearance.

A jQuery scroll to top, which appears in a fixed place, bottom corner, as the page scrolls down. Clicking on the arrow link smoothly scrolls the page back to the top of the page, avoiding lots of mouse or finger movement on the screen.

Changing Browser Window Location

JavaScript can be used to change the current browser window location, using window.location.href.

Using JavaScript we are able to change the URL referenced in our browser. This may be used for creating onclick actions for images, form buttons, or perhaps as a redirect on a page which is no longer in use.

Using JavaScript the location for the current browser is set using

window.location.href = url(‘newpagelocation.html’)

As an example, within the head of the html page add

<script type="text/javascript">
function redirect() {
  window.location = 'http://www.newpagelocation.com'
}
</script>

and in the body of the page add

<form id="Form1">
  <input onclick="redirect()" type="button" value="Next" ID="Button1" NAME="Button1">
</form>

If the aim is to reload the current page, then there is a simpler specific method.

window.location.reload()

A full reference will be required to the new URL otherwise the page will be taken to be relative to the current domain.

Redirecting the browser using JavaScript may be blocked by in-browser security add-ons. There’s a Google web page listing redirection methods and HTML5 security.

Browser History

JavaScript can access the history of the web browser through the history object.

The history object holds information about the URLs which have been visited both before and after the current one.

Using the history object the current page can be changed, single stepping backwards and forwards through this list, and jump to any point.

History Object Properties

The table below lists the history object properties of interest.

Property Description
history.length keeps track of the length of the history list.
history.current is the value of the current history entry.
history.next is the next entry in the list. This is equivalent to pressing the forward button on the browser. It is therefore quire likely that it will have no value.
history.previous is the page before, equivalent to pressing the back button on the browser.

The history list may also be treated as an array. So we can access history[0].

Examples

To step one page backwards in the history
window.history.back();
or
window.history.go(-1);

Similarly to step forward a page

window.history.go(1);

History Object Methods

History object methods allow actions to be taken, similar to pushing the browser forward or backward buttons a number of times.

Method Description
history.forward the same as history.next
history.back the same as history.previous
history.go the equivalent to pushing either the forward or back button a number of times. For example history.go(-3) is equivalent to pressing the back button 3 times.

 

Change Image on Mouse Over

stick man
Adding a change of image for image mouseover image changes can be used to confirm the mouse over and to indicate content available by following the link.

The original image, without the mouse over effects, is given as:
<img src=”stickman-orange.png” border=”0″  />

I have also set a size for the border of 0, ensuring that the default image border is removed.

Producing the image change effects when a mouse moves over an image are implemented with the addition of an onMouseOver and onMouseOut parameter to the <img> tag surrounding the image.

The image of the orange stick man with the blue replacement for the mouse over is shown below:

And the associated code below:

<img
  src=”http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-orange.png”
  onmouseover=”this.src=’http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-blue.png'”
  onmouseout=”this.src=’http://www.vntweb.co.uk/wp-content/uploads/2013/01/stickman-orange.png'”
  border=”0″  />

Take care when using the above code not to miss the use of single quotes around the image name, inside the onMouseover and onMouseOut event handlers.

onMouseover defines the action when the mouse hovers over the image. onMouseOut provides the action handling for the mouse moving away from the image.

As can be seen the two actions onMouseOver and onMouseOut both change the src reference of the image. this is a special reference to the item itself.

An alternative is to change the image based on mousing over, for example a hyperlink. To do this a name is given to the image, to provide a unique reference, this will not work when referencing a different item on the page. The image src is now referenced using document.menu5.src, Document is the root node of the page.

To make these actions work an additional parameter is added to the image. Naming the image provides a reference for the mouse actions.

<a href="http://www.vntweb.co.uk/"
  onMouseOver="document.menu5.src='stickman-blue.png'"
  onMouseOut="document.menu5.src='stickman-orange.png'">Home</a>
<img src="stickman-orange.png" border="0" name="menu5 alt="stick man" /">

The image of the orange stick man with the blue replacement for the mouse over is shown below. Hover over the word home below to change the image.

Home

Simple E-mail Address Validation

A simple e-mail address validation function, testing for character positions, without using regular expressions.

The function tests for the presence of the characters @ and the full stop, returning either true or false.

For the full stop check it looks for its presence after the 3rd character in the string.

The @ symbol, is tested to ensure it exists.

The position test of both of these characters could be readily changed.

If both of these characters exist then the function returns true, otherwise false.

function isValidEmail(str) {
  return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
}

str is the string passed to the function isValidEmail for testing.

The single line has the two tests, combining their results with && and returning the result.

On the left str.indexOf(“.”) > 2) tests for the full stop and on the right (str.indexOf(“@”) > 0) checks to ensure that the @ symbol is present.

For the function to return true both parts of the test must be valid.

JQuery Page Scroll on Load

JQuery can be used to smoothly re-position the web page With an onload I positioned the page at the top of a form.

I began by adding links to reposition the page back to the top and then extended this to incorporate the JQuery onload to set the top of the page.

A point is required on the page which the browser will orientate to, scrolling the page up or down, so that it is at the top of the browser window.

A hyperlink anchor is created, I called the reference FormTop.

<a id=”FormTop”>

and added a little above the form on the page.

A return to top link can be added further down the page using a simple hyperlink.

<a href=”#” class=”FormTop”>Top</a>

or with an image

<a href=”#” class=”FormTop“><img src=”/images/top.gif” alt=”Top” width=”50″ height=”20″></a>
However, I was creating a back to top for a DotNetNuke skin. In this situation the above was converted to:
<a href=”<%= SkinPath%>#top”><img src=”/images/top.gif” alt=”Top” width=”50″ height=”20″></a>

I therefore needed to implement the back to page top using a different method. JavaScript can be used to define a move to a specific coordinate, for example 0,0.

<img onClick=”javascript:scroll(0,0)” onmouseover=”this.style.cursor=’pointer'” src=”/images/top.gif” alt=”Scroll to top of form” />

By using JavaScript to achieve the Top of Page function enabled me to build this into a DotNetNuke skin. It also means that the page repositioning did not require a page refresh and a call back to the server. The function is dependant upon the client browser having JavaScript enabled for the website.

The JQuery to scroll to the top of the form on page load is

<script type="text/javascript">
$(document.ready(function(){
$('.FormTop').click(function(){
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');
return false;
});
});
</script>

and the JQuery to perform the scoll to the top of the form on page load is

<script type="text/javascript">
$(document.ready(function(){
$('html, body').animate({scrollTop: $('#Formtop').offset().top}, 'slow');
});
</script>

On Page Load Popup Window

Using JavaScript onLoad to pop-up a second window when a page loads.

To create the pop-up window when the page is loaded the <body> tag will be modified and the onLoad() parameter added.  For clarity, and to permit easy expansion of the code in the future, a JavaScript function called thisIsOnload() will be used.

Firstly modify the <body> tag:

<body onLoad=”thisIsOnload()”>

Now add the following into the <head></head> part of the page, before the closing tag.

<script type="text/javascript">
  function thisIsOnLoad() {
    window.open('/popup.html','popup','')
  }
</script>

In the above I have assumed that our pop-up window page is located in the root directory of our website and that its name is popup.html.

We can improve the opening of our pop-up window by setting the size, turning off the decoration of the window. To do this change we shall change our JavaScript code:

<script type="text/javascript">
  function thisIsOnLoad() {
    window.open('/popup.html','popup','width=600,height=530,resizable=yes,scrollbars=1')
  }
</script>

One last nicety to add to the popup window.  Add the word close, which when clicked will close the pop-up window.  For this add the following at the bottom of the page.

<p align=”center”><a href=”” onClick=”self.close()”>Close</a></p>

Internet Explorer Image Transition Effects

Internet Explorer supports its own custom transition effects. These can be used when changing the source of an image, for example on mouse over.

An image on an html page, is represented by the HTML code

<img id=”imgFruit” src=”/images/apples.jpg”>

To change this using JavaScript the src parameter is re-assigned to a different iamge reference:

document.getElementById(“imgFruit”).src=’/images/bananas.jpg’;

The Internet Explorer transitions can be a simple fade between the two images or effects such as swipes and blinds.

JavaScript is used to set the relevant parameters and to trigger the effect.

The example below shows the image tag with its onmouseover and onmouseout actions.

<img src="/images/fruit.png"
onmouseover="replaceImage(this,'fruitO.png');"
onmouseout="imageTrans(this,'fruit.png');">
//
// JavaScript function to enact transition effects
// dependant upon browser type
//
function imageTrans(item,newImage) {
// Get browser name
var browserName=navigator.appName;
// If the browser is Internet Explorer do transition effect
if (browserName=="Microsoft Internet Explorer") {
item.style.filter="blendTrans(duration=5)";
item.style.filter="blendTrans(duration=20)";
item.filters.blendTrans.Apply();
item.filters.blendTrans.Play();
}
// Replace the image
if (document.getElementById){
item.src=newImage;
}
}

The table below shows the Internet Explorer effects and their codes.

Effect MSIE Transition # MSIE Effect
None 0 Box in
Box in 0 Box in
Box out 1 Box out
No PPT equiv. 2 Circle in
No PPT equiv. 3 Circle out
Wipe up 4 Wipe up
Wipe down 5 Wipe down
Wipe right 6 Wipe right
Wipe left 7 Wipe left
Vertical blindss 8 Vertical blinds
Horizontal blinds 9 Horizontal blinds
Checkerboard across 10 Checkerboard across
Checkerboard down 11 Checkerboard down
 Random dissolve 12 Random dissolve
Split vertical in 13 Split vertical in
Split vertical out 14 Split vertical out
Split horizontal in 15 Split horizontal in
Split horizontal out 16 Split horizontal out
Strips left down 17 Strips left down
Strips left up 18 Strips left up
Strips right down 19 Strips right down
Strips right up 20 Strips right up
Random bars horizontal 21 Random bars horizontal
Random bars vertical 22 Random bars vertical
Random 23 Random