HighSpotter Documentation

presentationMode:false,

If true, Top and Bottom panel DATA are hidden. They are visible only if you press the key defined on navKeysScroll option or by using the mouse wheel (scrollPageOnMouseWheel:true) or even by clicking on top and bottom panel (scrollPageOnMouseClick:true).

rememberScrollPosition:false,

Remembers page scroll position after going to next or previous element.

tbPanel_yOffset:[0,0],

Default sliding panels Y Axis offset.

tbPanel_opacity:[0.9,0.9],

Default opacity for the top and bottom sliding panels

tbPanel_class:['',''],

Set classes for top and bottom panels.

closePanel_display:true,

Set false if you do not want to show close panel, if set false you must determine other ways to close effect such as esc button or by setting closeEffect option to true.

closePanel_data:'close me',

Define close panel text.

closePanel_class:'',

Define your class in your css , ex: .myclass a{cursor:pointer;color:navy;} .myclass a:hover{color:red;}

closePanel_opacity:1,

Default opacity for close Panel.

closePanel_fade:false,

If true fades while navigating.

closePanel_xPosition:'elemleft',

Available positions:: left , right , elemleft , elemright , center, outelemleft, outelemright.

left:: closePanel will be placed on the left of the screen.

right:: closePanel will be placed on the right of the screen.

center:: closePanel will be placed on the center of the screen.

elemleft:: closePanel will be placed at the beginning (X-axis) of the focused element.

elemright:: closePanel will be placed on the end (X-axis) of the focused element.

elemcenter:: closePanel will be placed on the center of the focused element.

outelemleft:: closePanel will be placed on the left of the focused element (better use it with closePanelYPosition:”inside” ).

outelemright:: closePanel will be placed on the right of the focused element (better use it with closePanelYPosition:”inside” ).

closePanel_yPosition:'top',

Available positions:: top , bottom, top_inside, middle_inside, bottom_inside.

top:: closePanel will be placed on the top panel.

bottom:: closePanel will be placed on the bottom panel.

top_inside:: closePanel will be placed under top panel.

middle_inside:: closePanel will be placed in the middle, between top and bottom panels.

bottom_inside:: closePanel will be placed over bottom panel.

closePanel_closeMethod:'fadeOut',

Available positions:: fadeOut , scrollUp, scrollBottom, scrollUpFading, scrollBottomFading.

fadeOut:: closePanel just fades out.

scrollUp:: closePanel scrolls up and then disappears.

scrollBottom:: closePanel scrolls down and then disappears.

scrollUpFading:: closePanel scrolls up fading.

scrollBottomFading:: closePanel scrolls down fading.

closePanel_offset:[0,0]

Default X, Y Axis offsets for close panel. First parameter refers to X Axis and second to Y.
You can also set negative values.

infoPanels_enable:false,

Enables showing data info on top or bottom panel, set false if you dont want to use them otherwise you can leave infoPanels_topData[] and infoPanels_bottomData[] empty. Setting false, plugin works a little faster cause it does not create the elements and the array to hold the text.

infoPanels_topData:[],

infoPanels_bottomData:[],

HTML DATA to display in the top or bottom panel. ["","","",...] //Can also be html code such as ole, or even an iframe or an image!!!.

exmp:: topPanelText["hello this is the first focused element","this is the second focused element","this is the third focused element"]

exmp1:: topPanelText[$('#data').html(),$('#data1').html(),"hello"] //gets the text from elements with id=data , id=data1

infoPanels_dataIfNotDefined:['',''],

Examp: if wrapper has 3 elements and you set two top panel text, lets say infoPanels_topData:["one","two"] , then in the third element the top panel text will be infoPanels_dataIfNotDefined['hello this is the default text for top panel','']..

Tip: use infoPanels_dataIfNotDefined option if you want the same text – data to appear on all spotted elements

infoPanels_class:['',''],

Define styling class of the top and bottom panel data.

infoPanels_opacity:[0.8,0.8],

Define opacity for the top and bottom panel data.

You can set opacity inside the css class to be included in panels but jquery handles opacity for all browsers.

infoPanels_xPosition:['elemcenter','elemcenter'],

Available positions:: left , right , elemleft , elemright , center, outelemleft, outelemright.

Same as closePanelXPosition. Check close panel tab!!!.

infoPanels_yPosition:['top','bottom'],

Available positions:: top , middle , bottom. Warning Due to some bugs first argument must be top or middle and the second one must bottom or middle.

infoPanels_width:['500px','500px'],

Width is important for our panels. If you set a width in the included class then this option has no effect.

TIP: set null for AUTO width:: infoPanels_width:[null,null],
You can also use int number instead of string, infoPanels_width:[500,200],

infoPanels_offset:[0,0,0,0],

Default offsets.
Arguments::
1st: TOP info panel X Axis,
2nd: TOP info panel Y Axis,
3rd: BOTTOM info panel X Axis,
4th: BOTTOM info panel Y Axis.
Accepts positive and negative numbers.

infoPanels_navigationEffect:['',''],

Apply an effect while moving. Available are: fade, slide, fadeslide, fadeonlyletters or leave empty for not using an effect.

extraPanel_enable:false,

If true an extra panel is created and ready to be used.

extraPanel_showOn:null,

1 ~ n , where n is the last element. If you do not know the n number then set the word last, extraPanel_showOn:’last’ for showing it when you reach the last element.

extraPanel_close:false,

Just like closeEffect but for extra panel. True when we programmatically want to close the Extra Panel. extraPanel_enable must be true.

WARNING If you programmatically close extra panel then you can show it again only by using extraPanel_showOn option.

Check example bellow:

	$("#My_Paragraph_Wrapper").click(function(e){
		$("#My_Paragraph_Wrapper").highspotter ({
		spotElements: "p", //We want to spot only p elements inside the My_Div_Wrapper
 
		clickEvent:e,
 
		extraPanel_enable:true,
		extraPanel_xPosition:'outelemleft', //Same positions with close panel
		extraPanel_yPosition:'middle_inside', //Same positions with close panel
		extraPanel_offset:[-20,0],
		extraPanel_data:['paranatem',null,'dsfs'],
		extraPanel_defaultDataIfNotDefined:'<div style="float:right;" class="closeEP">X</div>Use <strong>DOWN</strong> Keyboard arrow to highspot next item
<br />Use <strong>UP</strong> Keyboard arrow to highspot previous item',
		extraPanel_class:'extraPanel',
 
		});
	});
 
	$("div.closeEP").live('click',function(e){
		$("#My_Paragraph_Wrapper").highspotter ({extraPanel_close:true,extraPanel_enable:true});
	});

extraPanel_data:[],

Same as infoPanels_topData and infoPanels_bottomData options.

extraPanel_dataIfNotDefined:'',

Display this text if extraPanel_data option is not set or null.

extraPanel_width:'200px',

Default width. If you set width on a class, then this option is not added. If set a class but not a width in it, then extraPanel_width will be added.

extraPanel_opacity:0.8,

Default opacity. Set opacity from here because Jquery handles opacity for all browsers.

extraPanel_xPosition:'outelemleft',

Same positions with close panel

extraPanel_yPosition:'middle_inside',

Same positions with close panel

extraPanel_class:'',

Set a class. Read extraPanel_width option.

extraPanel_closeMethod:'fadeOut',

Same as close panel (fadeOut || scrollUp || scrollBottom || scrollUpFading || scrollBottomFading)

extraPanel_offset:[0,0],

Same as other panels. XOfsset,YOffset : accepts positive and negative numbers.

extraPanel_navigationEffect:'',

fade || slide || fadeslide || fadeonlyletters || or leave empty,

autoNavigateEvery:null,

Set a number (1000 = 1 sec, 5000 = 5 secs, 20000 = 20 secs) for Auto navigating. Exmp. autoNavigateEvery:2000 goes to next or previous item every 2 secs.

WARNING if Wrapper Id has only ONE element for spotting, auto navigation does not work.

autoNavigateNextOrPrevious:'next',

Define auto navigation direction. Available options are: next, previous.

autoNavigationPauseOn:'space',

Default keyboard key for pausing autoNavigation.

WARNING HAS NO EFFECT WHEN useKeyboard IS SET TO FALSE. CHECK KEYBOARD NAVIGATION OPTIONS

useMouseClick:true,

Set false if you do not want to navigate through elements by clicking on panels.

scrollPageOnMouseClick:false,

If true, does not navigate through elements but toggles scrollPageTo option.

reverseMouseClick:false,

Set true if you want to go next by clicking on the top panel.

clickEvent:null,

When effect is off, if you click on any child of the wrapper id then this child gets focused instead of first one.

NOTE If activator is the same with wrapper id, when you click on any child of wrapper then the effect starts. You can also use a class for activation.
If you want to start the effect not by clicking in the element to be focused but to lets say a link. Examine Examples Below:

Check example below:

$("#mytable").click(function(e){
		$('#mytable').highspotter ({
			spotElements:"tr",
			clickEvent:e
		});
});

$(".activationClass").click(function(e){
		$('#mytable').highspotter ({
			spotElements:"tr",
			clickEvent:e
		});
});

useMouseWheel:false,

Enables going next or previous by scrolling your mouse wheell.
WARNING you must include jQuery mousewheel plugin, get it from the creator http://brandonaaron.net/code/mousewheel/docs

WARNING if true ,default behavior is disabled, means that when effect is on, you cannot scroll the page down or up with the mouse wheel.

scrollPageOnMouseWheel:false,

If true, does not navigate through elements but toggles scrollPageTo option.

WARNING if true ,default behavior is disabled, means that when effect is on, you cannot scroll the page down or up with the mouse wheel.

useMouseWheelOn:'wholepage',

4 options available:

panels: Go next or previous, if your mouse pointer is over top or bottom panel when using the mouse wheel.

wrapper: Go next or previous, if your mouse pointer is over the wrapper (the currently spotted element) when using the mouse wheel.

panels&wrapper: Go next or previous, if your mouse pointer is over top or bottom panel and over the wrapper (the currently spotted element) when using the mouse wheel.

wholepage: Go next or previous, if use the mouse wheel anywhere in screen area.

useKeyboard:false,

Set true if you want keyboard navigation.

navKeys:['up','down']

Keyboard Navigation. up and down arrow goes to to previous and next element.

You can use the lower letters of keyboard, example: navKeys:['f','g'] (user must press keyboard f button to go to previous element and g to go to the next one).

You can use numeric values from 0 to 9, example navKeys:[2,4] (user must press keyboard 2 button to go to previous element and 4 to go to the next one).

You can use right, down, up or down (the keyboard arrow keys) for going next or previous, example: navKeys:['left','right']

you can also use , or . or [ or ] or – or = Example: navKeys:["[","."]

If None of the above is set, it uses default right and left arrow keys.

Example: navKeys:["ctlr","ctlr"] does not go to next or previous but uses default keys.

Example: navKeys:["dfgfdhgdjghj","fghdfg"] does not go to next or previous but uses default keys.

Example: set up or down for up or down arrow key.

Example: set space for spacebar…

Example: set tab for tab…

WARNING if you use keyboard letters for navigation on input elements such as textarea, if you press for example, the A key then you will type a in textarea but it will also go to next or previous.

navKeys_scroll:['',''],

First Argument Scrolls Page DOWN so the focused element goes UP.
Second Argument Scrolls Page UP so the focused element goes DOWN.

Note navKeys_scroll works only if webpage is scrollable.

Note navKeys_scroll is circular.

If you do not want keyboard scrolling feature use navKeys_scroll:['','']

preventDefault:true,

Prevents default key action (key set by navKeys,navKeysScroll). Means that when you press f.e. the left arrow, if the horizontal scrollbar is present on your browser the page will not scroll to left.
Note if you spot input elements such as textarea, text input, (those which need keyboard typing) set preventDefault:false or even disable keyboard navigation (useKeyboard:false).

navPanels_enable:false,

Set true to enable Navigation Panels.

navPanels_scroll:false,

If true when clicking on navigation panels highspotter does not spot next or previous elements but toggles scrollTop position.

navPanels_data:['Spot Previous','Spot Next'],

Default data for navigation panels.

navPanels_class:['',''],

Default class for navigation panels.

navPanels_width:[null,null],

Default width. If you set width on a class, then this option is not added. If set a class but not a width in it, then extraPanel_width will be added.

navPanels_opacity:[0.8,0.8],

Default opacity. Set opacity from here because Jquery handles opacity for all browsers.

navPanels_xPosition:['outelemleft','outelemleft'],

Same positions with close panel.

navPanels_yPosition:['top_inside','top_inside'],

Same positions with close panel.

navPanels_closeMethod:['',''],

Same positions with close panel. fadeOut || scrollUp || scrollBottom || scrollUpFading || scrollBottomFading

navPanels_showEffect:['fade','fade'],

fade || fadeonlyletters

navPanels_offset:[0,0,0,0],

Arguments::
1st: PREVIOUS navigation panel X Axis,
2nd: PREVIOUS navigation panel Y Axis,
3rd: NEXT navigation panel X Axis,
4th: NEXT navigation panel Y Axis.

Accepts positive and negative numbers.