We Keep Coding

Showing error 'Uncaught TypeError: $(...).unhighlight is not a function', Even after loading the Highlight.js plugin

I'm getting a console error
Uncaught TypeError: $(...).unhighlight is not a function'
Even after loading the Highlight.js plugin. Please find the attached HTML code.
var userGuide = {
id: null,
initialize: function() {
//debugger
userGuide.initializeUSerGuide();
},
initializeUSerGuide: function() {
var data1 = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis lectus et libero faucibus, convallis aliquam ante pharetra. Sed efficitur convallis lectus, in egestas tellus ornare tristique. Quisque blandit dolor non convallis convallis. Etiam facilisis velit ac dolor porta gravida. In hac habitasse platea dictumst. Ut suscipit efficitur diam, non rutrum mi posuere venenatis. Sed ullamcorper, ligula vitae convallis lacinia, lectus nibh scelerisque lacus, sed molestie lorem massa non orci. Duis sit amet justo magna. Nam malesuada neque et lectus scelerisque, sit amet rhoncus arcu blandit. Ut congue et est elementum bibendum. Morbi ligula mi, iaculis vitae pharetra ut, tristique eu arcu. Sed at dolor et magna pellentesque ornare. In urna sem, semper in augue id, tempus hendrerit augue. Maecenas vel porta justo. Aliquam porttitor elit eu neque hendrerit maximus.</p><p>Pellentesque mollis est vitae ornare elementum. Praesent sed neque ut lorem vestibulum malesuada eget a sem. Maecenas quam dui, ornare vitae orci nec, commodo vehicula nulla. Donec fermentum nisi eu mollis porttitor. Curabitur semper tortor eu magna cursus molestie. Praesent at pellentesque sapien, eget mollis quam. In vitae fringilla nisi, a ullamcorper sapien. Nunc ac enim porta, molestie leo quis, tristique sapien. Suspendisse in elit id urna faucibus rutrum.</p><p>Praesent convallis laoreet'
$("#ListView").html(data1);
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.7;
font-family: 'Roboto';
background-color: #fafafa;
}
.finder {
position: fixed;
top: -50px;
right: 0;
left: 0;
z-index: 999;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 50px;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-bottom: 1px solid #e5e5e5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 5px;
transition: top 0.15s ease-out;
}
.finder.active {
top: 0;
}
.finder-input {
flex-grow: 1;
width: 0;
height: 40px;
border: none;
padding: 8px;
outline: none !important;
}
.finder-input.not-found {
color: #e7353f;
}
.btn-finder {
width: 40px;
height: 40px;
text-align: center;
padding: 0;
}
.finder-input,
.btn-finder:not(:last-child) {
margin-right: 5px;
}
.finder-count {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
color: #888;
border-right: 1px solid #e5e5e5;
margin-right: 5px;
padding-right: 20px;
white-space: nowrap;
}
.btn-finder,
.finder-count {
flex-shrink: 0;
flex-grow: 0;
}
.highlight {
background: #ff8;
}
.highlight.active {
background: #ffd71b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johannburkard.de/resources/Johann/jquery.highlight-5.js"></script>
<script src="https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js"></script>
<script type="text/javascript">
/**
* jQuery Finder Plugin
* #author Danny McGee
* #version 1.0
* github.com/dannymcgee
*
* Copyright 2018 Danny McGee
* Released under the MIT License
* https://opensource.org/licenses/MIT
*/
$(document).ready(function() {
$(finder.activator).click(function() {
finder.activate();
});
$(document).mousedown(function(event) {
if (event.which === 1) {
switch ($(event.target).attr('id') || $(event.target).parents().attr('id')) {
case 'finderClose':
finder.closeFinder();
break;
case 'finderPrev':
finder.prevResult();
break;
case 'finderNext':
finder.nextResult();
break;
default:
return true;
}
}
});
});
const finder = {
activator: '[data-finder-activator]',
content: '[data-finder-content]',
wrapper: '[data-finder-wrapper]',
scrollOffset: () => $(finder.wrapper).data('finderScrollOffset'),
activate: () => {
if (!$('#finder').length) {
finder.createFinder();
}
setTimeout(function() {
$('#finder').addClass('active');
$('#finderInput').focus();
if ($('#finderInput').val()) {
finder.findTerm($('#finderInput').val());
}
$('#finderInput').on('input', function() {
finder.findTerm($(this).val());
});
}, 50);
},
createFinder: () => {
const finderElem = $('<div />')
.attr({
'id': 'finder',
'class': 'finder'
})
.prependTo(finder.wrapper);
const input = $('<input />')
.attr({
'id': 'finderInput',
'type': 'text',
'class': 'finder-input',
})
.appendTo(finderElem);
const prev = $('<button />')
.attr({
'id': 'finderPrev',
'class': 'btn btn-finder btn-finder-prev',
})
.appendTo(finderElem);
const prevIcon = $('<i />')
.attr({
'class': 'fas fa-angle-up',
})
.appendTo(prev);
const next = $('<button />')
.attr({
'id': 'finderNext',
'class': 'btn btn-finder btn-finder-next',
})
.appendTo(finderElem);
const nextIcon = $('<i />')
.attr({
'class': 'fas fa-angle-down',
})
.appendTo(next);
const close = $('<button />')
.attr({
'id': 'finderClose',
'class': 'btn btn-finder btn-finder-close',
})
.appendTo(finderElem);
const closeIcon = $('<i />')
.attr({
'class': 'fas fa-times',
})
.appendTo(close);
},
closeFinder: () => {
$('#finder').removeClass('active');
$(finder.content).unhighlight();
},
resultsCount: 0,
currentResult: 0,
findTerm: (term) => {
// highlight results
$(finder.content).unhighlight();
$(finder.content).highlight(term);
// count results
finder.resultsCount = $('.highlight').length;
if (finder.resultsCount) {
// there are results, scroll to first one
finder.currentResult = 1;
finder.scrollToCurrent();
} else {
// no results
finder.currentResult = 0;
}
// term not found
if (!finder.resultsCount && term) {
$('#finderInput').addClass('not-found');
} else {
$('#finderInput').removeClass('not-found');
}
finder.updateCurrent();
},
scrollToCurrent: () => {
let scrollingElement;
let i = finder.currentResult - 1;
$('.highlight').removeClass('active');
$(`.highlight:eq(${i})`).addClass('active');
let offsetTop = -100;
if (finder.scrollOffset() !== null) {
offsetTop = finder.scrollOffset() * -1;
}
$(finder.wrapper).scrollTo('.highlight.active', {
offset: {
left: 0,
top: offsetTop,
},
});
},
prevResult: () => {
if (finder.resultsCount) {
if (finder.currentResult > 1) {
finder.currentResult--;
} else {
finder.currentResult = finder.resultsCount;
}
finder.scrollToCurrent();
}
finder.updateCurrent();
},
nextResult: () => {
if (finder.resultsCount) {
if (finder.currentResult < finder.resultsCount) {
finder.currentResult++;
} else {
finder.currentResult = 1;
}
finder.scrollToCurrent();
}
finder.updateCurrent();
},
updateCurrent: () => {
if ($('#finderInput').val()) {
if (!$('#finderCount').length) {
const countElem = $('<span />')
.attr({
'id': 'finderCount',
'class': 'finder-count',
})
.insertAfter('#finderInput');
}
setTimeout(function() {
$('#finderCount').text(finder.currentResult + ' / ' + finder.resultsCount);
}, 50);
} else {
$('#finderCount').remove();
}
},
}
</script>
<script type="text/javascript">
$(document).ready(function() {
userGuide.initialize();
});
</script>
<div class="container-fluid page-content">
<div class="app" data-finder-wrapper data-finder-scroll-offset="175">
<button class="finder-activator" data-finder-activator>
Search
</button>
<div class="content" data-finder-content id="ListView">
</div>
</div>
</div>
What am I doing wrong here?

How do i add an individual onclick/EventListener function to each row of PHP generated content?

Trying to expand PHP generated divs individually with an onclick event. How do I add an EventListener or onclick function to each div object so that I can expand them individually by clicking on them?
Right now i want to do something like this:
document.getElementsByClassName('card').addEventListener('click', function() {
document.getElementsByClassName('card').classList.toggle('expand');
});
In a for loop:
echo "<div class='card z-depth-1'>
<div class='event-text'>
<p class='event-time white-text'>" . date('H:i',strtotime($array[$i]['DTSTART'])) . "</p>
<p class='event-information red-text text-lighten-4'>" . explode("\\,", $array[$i]['SUMMARY'])[0] . " " . $type . " " . str_replace('Lokal : ', '', $array[$i]['LOCATION']) . "</p>
<p><br><br>Lorem ipsum leo cursus commodo quam dapibus metus dictumst etiam, quisque posuere ut molestie quam ad duis neque quis adipiscing posuere cras vulputate augue curae, leo lacinia diam ullamcorper aenean, ipsum donec luctus quam ad.</p>
</div>
</div>
</div>";
CSS:
.card {
max-height: 10vh;
overflow: hidden;
}
.card.expand {
max-height: 20vh;
overflow: hidden;
}

Since document.getElementsByClassName('card') returns a HTMLCollection of elements and not a single item, you will have to loop through your cards to attach the event.
Like this:
var cards = document.getElementsByClassName('card');
for (let card of cards) {
card.addEventListener('click', function() {
this.classList.toggle('expand');
});
}

display all textarea rows without scrolling [duplicate]

This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 7 years ago.
How can I display all textarea rows instead of having that vertical scroll. I have tried with css using min-height and max-height and height: auto but is not working.
.form-control{
width:400px;
min-height: 100px;
max-height: 900px;
height: auto;}
I don't really know if is possible to do that with css.
Maybe is possible with native javascript so I am trying something like this
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!")>
}
}
I find something nice here but it only increase and decrease rows , so how can I display all textarea rows without using scroll. DON'T NEED SOLUTION WITH FIXED HEIGHT, NEED SOMETHING DYNAMIC or other solutions that works only on chrome browser or only on firefox like Object.observe().
Demo
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!") >
}
}
body {
padding: 20px;
}
.form-control {
width: 400px;
min-height: 100px;
max-height: 900px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>
External JSFiddle.

Simple jQuery solution is:
$(function() {
$('textarea').each(function() {
$(this).height($(this).prop('scrollHeight'));
});
});
Check Fiddle.
As you need a plain JavaScript solution, use following script that was created by User panzi. You can view the original answer here.
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('textarea');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
Check Fiddle Here.

No Javascript required.
You can display a no-scroll (ie. automatically re-sizing) editable text area with the following HTML and CSS:
.textarea {
width:250px;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
<div class="textarea" contenteditable="true">

The Mozilla Developer Network has an Autogrowing textarea example on their HTMLTextAreaElement page. You should definitely check this out if you want to stay away from CSS3 solutions that can break on older browsers.
Here is the code from the example.
The following example shows how to make a textarea really autogrow while typing.
function autoGrow(oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
textarea.noscrollbars {
overflow: hidden;
width: 300px;
height: 100px;
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>
Autoadjust
This example will take care of the case where you remove lines.
function autoAdjustTextArea(o) {
o.style.height = '1px'; // Prevent height from growing when deleting lines.
o.style.height = o.scrollHeight + 'px';
}
// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================
// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);
textarea.noscrollbars {
overflow: hidden;
width: 400px; /** This is via your example. */
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>

Using Jquery and some logic I have tried to do what you need.
Here is the jsfiddle;
https://jsfiddle.net/45zsdzds/
HTML:
<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>
Javascript:
$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');
CSS:
textarea[name='FurnishingDetails']{
height:2em;
}
Used How to get the number of lines in a textarea? to add a String prototype inorder to get the linecount.

Constrain user selection to node without making it editable?

I have the following page:
<div class="a">
...
</div>
<div class="b">
...
</div>
My users interact with this page by selecting various pieces of text within .a and .b. The browser's native selection behaviour almost works, but I need to prevent my users from making selections, which span the boundary between .a and .b.
Is there a way to constrain the user's selection to a <div>?
Unfortunately, this content is not user editable - which is unfortunate, because setting contenteditable="true" on each <div> achieves the constraint I'm looking for.

How about starting with this:
HTML:
<div class = "a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus.
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.noSelection {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
div + div {
padding-top: 10px;
}
jQuery:
$(function() {
$("div").hover(function() {
$(this).siblings("div").toggleClass("noSelection");
});
});
Here's a fiddle: http://jsfiddle.net/J2fJz/.

Jquery Slide DIV half of page only

I try To make Something Like that which present at Microsoft's Support Website.See -> (Visit Here)
Click on any Product which list there. (Note: Purpose of this article/Question is not MARKETING on any Product!!! It just for Knowledge.)
When You click on any one of listed there, one drop-down appear.
Now Here Points of my question are comes out. After click on menu item you can see that there is one "Select a topic" list and when you click on any one of them, 2nd list comes out. and after click on item from 2nd list 3rd one list comes out. I exactly try to make a script like that. I search over internet and make a one div slider. But it slide whole div.
Here is my code what I done
HTML
<div id="gallery">
<div id="slider">
<div style="background:#cf5">1</div>
<div style="background:#ada">2</div>
<div style="background:#b0b">3</div>
</div>
<span id="prev">Prev</span>
<span id="next">Next</span>
</div>
CSS
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:330px; /* +30 = space for buttons */
text-align:center; /* to center the buttons */
}
#slider{
position:absolute;
left:0;
height:300px;
text-align:left; /* to reset text inside slides */
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
#prev, #next{
display:inline-block;
position:relative;
top:300px;
cursor:pointer;
padding:5px;
}
Jquery
$(function(){
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0; // a counter
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
});
And Here Is Example of Of my code on Fiddle

After do some R&D on it. I make something like that
HTML
<div>
<input type="submit" id = "submit" value = "Show panel"/>
<span id = "showpanel1"></span>
</div>
<div id = "slider" style = "display:none">
<div class = "panel1" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
<div class = "panel2" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
<!-- Load Loder GIF -->
<div id = "loader" style = "display:none">
<img src = "loader.gif">
</div>
<!-- QnA Div Start -->
<div id = "qaslider" style = "display:none">
<div class = "mainpanel" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
JS
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var firsttext;
$(".panel1").on('click','li',function (){
$(".panel2").show("slide", { direction: "right" }, 1000);
$("span").text($(this).html());
firsttext = $(this).html();
});
$('#submit').click(function() {
$(".mainpanel").hide();
$("#slider").show("slide", { direction: "right" }, 0);
$(".panel2").hide("slide", { direction: "right" }, 0);
$(".panel1").show("slide", { direction: "right" }, 1000);
});
$(".panel2").on('click','li',function (){
$("span").text(firsttext + " > " + $(this).html());
$( "#slider" ).fadeOut( "slow" );
$("#loader").show("slide", { direction: "right" }, 800);
$("#loader").center(true);
setTimeout(removeslider,4000)
});
});
function removeslider()
{
$("#loader").hide("slide", { direction: "left" }, 800);
$("#qaslider").show("slide", { direction: "right" }, 0);
$(".mainpanel").show("slide", { direction: "right" }, 1000);
}
// Custome Jquery Function to stop/place element at center screen
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}
</script>
Style
<style>
.panel1 .panel1
{
border:1px solid black;
margin-right:800;
margin-top:20px;
}
#loader
{
margin-right:708;
margin-top:117px;
margin-left:525px;
}
.panel1 ul li:hover, .panel2 ul li:hover
{
cursor:hand
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
</style>