Develop Reference

Move the menu to the right of the page

This code is in the default setting, the list opens to the right, but I want to open this list to the left and move the menu to the right of the page.
When you click on the word file, the menu list gets collated and when you click on the new word, a new list opens. I want to open this new list to the left.
what's the solution?
The Code:
var MainMenu = function () {
var activated = false;
var settings = {
disabledClass: 'disabled',
submenuClass: 'submenu'
}
var mask = '<div id="menu-top-mask" style="height: 2px; background-color: #fff; z-index:1001;"/>';
var timeOut;
this.init = function (p) {
$.extend(settings, p);
$mask = $('#menu-top-mask');
$('ul.main-menu > li').click(function (event) {
var target = $(event.target);
if (target.hasClass(settings.disabledClass) || target.parents().hasClass(settings.disabledClass) || target.hasClass(settings.submenuClass)) {
return;
}
toggleMenuItem($(this));
});
$('ul.main-menu > li > ul li').click(function (event) {
// Prevent click event to propagate to parent elements
event.stopPropagation();
// Prevent any operations if item is disabled
if ($(this).hasClass(settings.disabledClass)) {
return;
}
// If item is active, check if there are submenus (ul elements inside current li)
if ($(this).has( "ul" ).length > 0) {
// Automatically toggle submenu, if any
toggleSubMenu($(this));
}
else{
// If there are no submenus, close main menu.
closeMainMenu();
}
});
$('ul.main-menu > li').mouseenter(function () {
if (activated && $(this).hasClass('active-menu') == false) {
toggleMenuItem($(this));
}
});
$('ul.main-menu > li > ul li').mouseenter(function (e) {
// Hide all other opened submenus in same level of this item
$el = $(e.target);
if ($el.hasClass('separator')) return;
clearTimeout(timeOut);
var parent = $el.closest('ul');
parent.find('ul.active-sub-menu').each(function () {
if ($(this) != $el)
$(this).removeClass('active-sub-menu').hide();
});
// Show submenu of selected item
if ($el.children().size() > 0) {
timeOut = setTimeout(function () { toggleSubMenu($el) }, 500);
}
});
$('ul.main-menu > li > ul li').each(function () {
if ($(this).children('ul').size() > 0) {
$(this).addClass(settings.submenuClass);
}
});
$('ul.main-menu li.' + settings.disabledClass).bind('click', function (e) {
e.preventDefault();
});
//#region - Toggle Main Menu Item -
toggleMenuItem = function (el) {
// Hide all open submenus
$('.active-sub-menu').removeClass('active-sub-menu').hide();
$('#menu-top-mask').remove();
var submenu = el.find("ul:first");
var top = parseInt(el.css('padding-bottom').replace("px", ""), 10) + parseInt(el.css('padding-top').replace("px", ""), 10) +
el.position().top +
el.height();
submenu.prepend($(mask));
var $mask = $('#menu-top-mask');
var maskWidth = el.width() +
parseInt(el.css('padding-left').replace("px", ""), 10) +
parseInt(el.css('padding-right').replace("px", ""), 10);
$mask.css({ position: 'absolute',
top: '-1px',
width: (maskWidth) + 'px'
});
submenu.css({
position: 'absolute',
top: top + 'px',
left: el.offset().left + 'px',
zIndex: 100
});
submenu.stop().toggle();
activated = submenu.is(":hidden") == false;
!activated ? el.removeClass('active-menu') : el.addClass('active-menu');
if (activated) {
$('.active-menu').each(function () {
if ($(this).offset().left != el.offset().left) {
$(this).removeClass('active-menu');
$(this).find("ul:first").hide();
}
});
}
}
//#endregion
//#region - Toggle Sub Menu Item -
toggleSubMenu = function (el) {
if (el.hasClass(settings.disabledClass)) {
return;
}
var submenu = el.find("ul:first");
var paddingLeft = parseInt(el.css('padding-right').replace('px', ''), 10);
var borderTop = parseInt(el.css('border-top-width').replace("px", ""), 10);
borderTop = !isNaN(borderTop) ? borderTop : 1;
var top = el.position().top - borderTop;
submenu.css({
position: 'absolute',
top: top + 'px',
left: el.width() + paddingLeft + 'px',
zIndex: 1000
});
submenu.addClass('active-sub-menu');
submenu.show();
//el.mouseleave(function () {
// submenu.hide();
//});
}
//#endregion
closeMainMenu = function () {
activated = false;
$('.active-menu').find("ul:first").hide();
$('.active-menu').removeClass('active-menu');
$('.active-sub-menu').hide();
};
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMainMenu();
}
});
$(document).bind('click', function (event) {
var target = $(event.target);
if (!target.hasClass('active-menu') && !target.parents().hasClass('active-menu')) {
closeMainMenu();
}
});
}
}
$(document).ready(function () {
new MainMenu().init();
});
#menu-bar
{
}
ul.main-menu
{
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
ul.main-menu > li
{
margin: 0;
display: inline;
list-style-type: none;
padding: 6px 4px 6px 6px;
line-height: 28px;
vertical-align: middle;
cursor: default;
outline: none;
border-style: solid;
border-width: 1px 1px 0 1px;
border-color: transparent;
}
ul.main-menu > li.active-menu
{
background-color: #fff;
border-color: #ccc;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul.main-menu ul li a
{
color: #000;
text-decoration: none;
display: block;
white-space: nowrap;
}
ul.main-menu li ul li a span
{
font-size: 11px;
color: #999;
float:right;
right: 10px;
left: auto;
position: absolute;
}
/* SUBMENU */
ul.main-menu > li ul
{
list-style-type: none;
padding: 0;
margin: 0;
display: none;
border-width:1px;
border-style: solid;
border-color: #ccc;
background-color: #fff;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul.main-menu li ul li
{
display:list-item;
margin: 0;
line-height: 26px;
padding-right: 40px;
min-width: 100px;
cursor: pointer;
text-indent: 30px;
white-space:nowrap;
}
ul.main-menu a:hover{
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li:hover
{
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li.active-menu:hover
{
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li ul li.disabled, ul.main-menu li ul li.disabled:hover, ul.main-menu li ul li.disabled:hover a
{
cursor:default;
background-color: #ff4718;
color: #FFFFFF;
}
ul.main-menu li.separator
{
border-top: 1px solid #ddd;
margin-top: 5px;
margin-bottom: 5px;
}
.submenu
{
background-image: url(../images/menu-right-arrow.png);
background-repeat: no-repeat;
background-position: right center;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="menu-bar">
<ul class="main-menu">
<li>
File
<ul>
<li>
<li>New
<ul>
<li>Data</li>
<li>Storage</li>
<li>Network</li>
</ul>
</li>
</li>
<ul>
<li>Google search (opens in new tab)</li>
<li>Product</li>
<li>Document</li>
<li>Client</li>
</ul>
</li>
<!--<li class="separator"></li>-->
<li>Save<span>Ctrl+S</span></li>
<li>Import</li>
<li>Export</li>
<li>Print<span>Ctrl+P</span></li>
<li>Logout</li>
</ul>
</li>
</ul>
<!-- end mainmenu -->
</div>

If you update this css:
#menu-bar {
justify-content: flex-end;
display: flex;
}
and update this JS:
submenu.css({
position: 'absolute',
top: top + 'px',
left: 'auto',
right: '0'
zIndex: 100
});
I believe it should do the trick.
Edit: I added right: '0'.

ul {
position: fixed; right: 0; top:0;
}

how to make a div return to starting point when the div slides to end

I'm trying to make am image scroll that uses control button and also slides automatically, my problem now is I need to know how to return the div to starting point when the div hit end on left side or on right side, what I could get so far is to know when the div hit an end but don't know how to return it to starting point in case of automatic sliding.
var n = 3; //total number of slides to be display at once
var totalDeal = 9; //total deals to be display
var sliderTotalWidth = 100; //in percentage append % later
var z = (100 / totalDeal) + '%'; //ddslides width
var x = totalDeal / n;
var counter = 1;
$(".dialyDealSlider").css('width', x + '00%');
//$(".ddslides").css('width', ddslidesWidth);
fillDailyDeal(totalDeal, z);
function fillDailyDeal(totalDeal, z) {
var imgUrl = '{$img}';
var ext = '.jpg';
var width = "width:" + z
for (var i = 1; i <= totalDeal; i++) {
var myDiv = $(
"<div class='ddslides' style='" + width + "' >" +
'<div class="dddesc">' +
'<div class="ddtitle">' +
'The is the title of the item it\'s a long title' +
'</div>' +
"<div class='ddprice'>$"+i+"00</div>" +
'<button class="ddview" title="View Item">view item</button>' +
'</div>' +
'<div class="ddimg">' +
'</div>' +
'<div class="vDivider"></div>' +
'<div class="ddSaleBadge">sold 44%</div>' +
'</div>');
$("#dialyDealSlider").append(myDiv);
}
}
$("#prev, #next").click(function() {
if (this.id == "next") {
counter++;
} else {
counter--;
}
//console.log(counter);
if (counter == x) {
alert('rigth end');
//$("#dialyDealSlider").css('left', '0px');
}
if (counter == 1) {
alert('left end');
}
var ddslidesWidth = $(".ddslides").width();
var dir = this.id == "next" ? '-=' : '+=';
var width = ddslidesWidth * n;
//alert(leftpos);
$("#dialyDealSlider").animate({
left: dir + width
}, 800);
});
my code is here JSFIDDLE: https://jsfiddle.net/sammyzeal/LqpL1n2g/
As we can see in the above fiddle, when we slide the div and the price is between $700 and $900 we hit an end then there's an alert, on this point if a user keeps on clicking this next button how do I scroll to the starting point which is between price $100 and $300, I hope my question is cleared and thanks in advance for any help

I just saw that you updated the code as i said , good work. So i wont hesitate to help now, you should make a separate slideNow() function that slides next or previous and you should increment/decrement the counter after checking the current or previous slides, if it is the last slide create a function separate to goToStart() to move to the first slide and if it is th first slide just return from there and do nothing, you can use the following script and test it with various combinations like, first going to the last slide by clicking and then on the last slide click next and see if it goes to the first on and then try clicking left from the first slide and verify if it goes left or stays still.
See a demo below
var n = 3; //total number of slides to be display at once
var totalDeal = 9; //total deals to be display
var sliderTotalWidth = 100; //in percentage append % later
var z = (100 / totalDeal) + '%'; //ddslides width
var x = totalDeal / n;
var counter = 1;
$(".dialyDealSlider").css('width', x + '00%');
//$(".ddslides").css('width', ddslidesWidth);
fillDailyDeal(totalDeal, z);
function fillDailyDeal(totalDeal, z) {
var imgUrl = '{$img}';
var ext = '.jpg';
var width = "width:" + z
for (var i = 1; i <= totalDeal; i++) {
var myDiv = $(
"<div class='ddslides' style='" + width + "' >" +
'<div class="dddesc">' +
'<div class="ddtitle">' +
'The is the title of the item it\'s a long title' +
'</div>' +
"<div class='ddprice'>$" + i + "00</div>" +
'<button class="ddview" title="View Item">view item</button>' +
'</div>' +
'<div class="ddimg">' +
'</div>' +
'<div class="vDivider"></div>' +
'<div class="ddSaleBadge">sold 44%</div>' +
'</div>');
$("#dialyDealSlider").append(myDiv);
}
}
$("#prev, #next").click(function() {
var target = this.id;
//console.log(counter);
if (counter == x && target == "next") {
counter = 1;
goToStart();
return;
}
if (counter == 1 && target == "prev") {
return;
}
if (target == "next") {
counter++;
} else {
counter--;
}
//slide the slides
slideNow(target, n);
});
function goToStart() {
$("#dialyDealSlider").animate({
left: 0
}, 800);
}
function slideNow(target, n) {
var ddslidesWidth = $(".ddslides").width();
var dir = target == "next" ? '-=' : '+=';
var width = ddslidesWidth * n;
//alert(leftpos);
$("#dialyDealSlider").animate({
left: dir + width
}, 800);
}
.dailyDeal {
height: 150px;
width: 100%;
margin-top: 15px;
padding: 0 !important;
}
.dialyDealBox {
float: left;
height: 150px;
padding: 0 !important;
overflow: hidden;
}
.dialyDealSlider {
width: 100%;
height: 150px;
position: absolute;
border: 1px solid #ddd;
}
.ddslides {
height: 150px;
width: 2%;
float: left;
background-color: #fff;
position: relative;
padding: 10px 0;
}
#media only screen and (max-width: 768px) {
.ddslides {
width: 16.66%;
}
}
#media (max-width:320px) {
.ddslides {
width: 33.33%;
}
}
.ddimg {
float: left;
margin: auto;
height: 100%;
width: 32%;
margin-right: 4px;
}
.ddimg>a>img {
height: 100%;
width: 100%;
}
.dddesc {
float: left;
margin: auto;
height: 100%;
width: 65%;
padding: 0 10px 0 15px;
}
.ddSaleBadge {
position: absolute;
top: 5px;
right: 5px;
width: 37px;
height: 38px;
padding: 5px 2px 4px 3px;
overflow: hidden;
background: url("/trobay/img/icon/label.png") no-repeat 50% 50%;
line-height: 14px;
text-align: center;
color: #fff;
}
.ddtitle {
margin-bottom: 10px;
}
.ddtitle>a {
font-size: 14px;
color: #666666;
text-decoration: none;
}
.ddtitle>a:hover {
color: #e4393c;
text-decoration: none;
}
.ddprice {
color: #e4393c;
font-size: 16px;
margin-bottom: 10px;
}
.ddview {
color: #fff;
background-color: #e4393c;
font-size: 14px;
border: 0;
outline: 0;
padding: 4px;
font-weight: bold;
}
.ddslider-prev {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 5px;
color: #666666;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
left: 0;
z-index: 10;
background-color: rgba(221, 221, 221, 1);
display: block;
}
.ddslider-next {
cursor: pointer;
position: absolute;
right: 0;
top: 50%;
width: auto;
margin-top: -22px;
padding: 5px;
color: #666666;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
z-index: 10;
background-color: rgba(221, 221, 221, 1);
display: block;
}
.vDivider {
height: 130px;
border-right: 1px dotted #666;
position: absolute;
top: 10px;
;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="dailyDeal col-md-12">
<div class="dialyDealBox col-xs-10" id="dialyDealBox">
<div class="dialyDealSlider" id="dialyDealSlider">
</div>
<div class="ddslider-prev" id="prev">❮</div>
<div class="ddslider-next" id="next">❯</div>
</div>
</div>
</div>

How to display XML sub menu of sub menu and display image if it is last node

I am working on one task for school, I want to display a menu from an XML file.
Here is the XML file:
<?xml version="1.0" encoding="UTF-8"?>
<menus>
<menu text="Subjects">
<menu text="English">
<school text="English A" image="E_A.png" />
<school text="English B" image="E_B.png" />
</menu>
<menu text="Maths">
<school text="Maths A" image="M_A.jpg" />
<school text="Maths B" image="M_B.jpg" />
</menu>
</menu>
<menu text="Teachers">
<school text="Sara" image="phones/sara.jpg" />
<school text="Maya" image="phones/maya.jpg" />
</menu>
</menus>
My HTML markup looks like that:
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome</h1>
</div>
</div>
</section>
<footer id="footer">
<nav id="nav">
</nav>
</footer>
I am using jQuery and JavaScript to read data from XML file and display in the navigation bar. The JavaScript and jQuery code for that is given.
$(document).ready(function() {
$.ajax({
type: "GET",
url: "record.xml",
dataType: "xml",
success: function(xml) {
html = generateMenu(xml);
}
});
});
function generateMenu(xml) {
var mainMenu = $("<ul />");
$(xml).find('menu').each(function() {
if ($(this).children().length) {
var subMenu = $("<ul />");
$(this).children().each(function() {
subMenu.append('<li id="' + $(this).attr("text") + '">' + $(this).attr("text") + '</li>');
});
var li = $('<li id="' + $(this).attr("text") + '">' + $(this).attr("text") + '</li>');
mainMenu.append(li.append(subMenu));
} else {
mainMenu.append('<li id="' + $(this).attr("text") + '">' + $(this).attr("text") + '</li>');
}
});
$("#nav").append(mainMenu);
}
The CSS you will help you to understand the logic going on.
html, body {
background-color: #f0efed;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Oswald', sans-serif;
}
.intro {
height: 90%;
width: 100%;
margin: auto;
top: 0;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 90%;
margin: 0 auto;
text-align: center;
padding: 20px 20px 40px 20px;
}
.content h1 {
font-family: 'Raleway', sans-serif;
text-shadow: 0px 0px 300px #000;
padding-bottom: 10px;
font-size: 225%;
}
#footer {
position: fixed;
bottom: 0;
margin: 0;
padding: 0;
left: 0;
right: 0;
width: 100%;
height: 10%;
font-family: Arial;
text-shadow: 1px 1px 1px black;
border-top: 1px solid #dbdbdb;
background-color: #ffffff;
box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(255,255,255,0.3);
}
nav {
width: 100%;
background: #ffffff;
padding: 0;
margin: 0;
height: 60px;
position:relative;
}
nav ul {
background: #ffffff;
list-style:none;
padding:0 20px;
margin: 0;
height: 60px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 50px;
line-height: 50px;
}
nav ul li:hover {
background: #205791;
border-radius: 20px;
}
nav ul li:hover > a{
color:#ffffff;
}
nav ul li:hover > ul {
display:block;
}
nav ul ul {
background: #ffffff;
padding:0;
display:none;
width: 100%;
position: absolute;
top: -61px;
left: 0px;
}
Display: Then menu looks like that
In case if you want to see the code in action here is the link to jsfiddle
Issue: As you can see the English and Math are showing in the parent node, and at the same time it is showing in the child node. When I mouse over on Egnlish which is in parent node it shows English A, English B. I want it in the proper order.
I also want to fire an event to display image in content div base on mouse over on the last node.
The structure flow will be something like that.
I will appreciate your help. Thank you!

You have used find, which has ignored the structure of child nodes.
Also your script is missing iteration through Sub-menu level 2
Here is corrected JS code:
$(document).ready(function() {
generateMenu();
});
function generateMenu(xml) {
var emptySubMenu = $("<ul />");
var mainMenu = $("<ul />");
$('menus').children('menu').each(function() {
var li = generateLiNode($(this).attr("text"));
//get subMenu level 1
var subMenuLvl1 = $("<ul />");
$(this).children().each(function() {
var li2 = generateLiNode($(this).attr("text"));
//get subMenu level 2
var subMenuLvl2 = $("<ul />");
$(this).children().each(function() {
subMenuLvl2.append(generateLiNode($(this).attr("text")));
});
if (subMenuLvl2.html() != emptySubMenu.html())
li2.append(subMenuLvl2);
//subMenu level 2 is prepared.
subMenuLvl1.append(li2);
});
if (subMenuLvl1.html() != emptySubMenu.html())
li.append(subMenuLvl1);
//subMenu level 1 is prepared.
mainMenu.append(li);
});
$("#nav").append(mainMenu);
}
function generateLiNode(text)
{
return $('<li id="' + text + '">' + text + '</li>')
}
and also a working JSFiddle:
http://jsfiddle.net/c5ghc80s/8/
Your second question can be solved by 3 steps:
Pass 2nd parameter to generateLiNode, the same way you are passing "text" right now but this time with "image"
Print the image attribute next to "id" attribute
In document ready function, after generateMenu(), register onhover event
where you will do whatever you want with the image attribute of current li node.
For example you can take it out from li element and put into src attribue of img node which can be placed in your main div:
$("li").mouseover(function() {
$('div > img').attribute("source", $("this").attribute("image"));
});

ResponsiveSlides Navigation Buttons

I am using ResponsiveSlides for a photo slideshow on a page, and I cannot make the navigation button show up as they do on the website. Currently, the Previous and Next links appear below the slider as simple hypertext links. Here is how this is showing on the website:
website-slideshow. See the Previous/Next buttons below image. Here is how I would like for this to look: navigation-buttons-centered. I've tried so many different things and nothing is working, so any help would be appreciated.
Here is the code that is being used:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="/wp/wp-content/themes/Avada-Child-Theme/responsiveslides.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "rslides",
});
});
</script>
<link href="/wp/wp-content/themes/Avada-Child-Theme/css/responsiveslides.css" rel="stylesheet" type="text/css" />
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
</ul>
</div>
JS:
(function($, window, i) {
$.fn.responsiveSlides = function(options) {
// Default settings
var settings = $.extend({
"auto": true, // Boolean: Animate automatically, true or false
"speed": 500, // Integer: Speed of the transition, in milliseconds
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
"pager": true, // Boolean: Show pager, true or false
"nav": true, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
"prevText": "Previous", // String: Text for the "previous" button
"nextText": "Next", // String: Text for the "next" button
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels
"navContainer": "", // Selector: Where auto generated controls should be appended to, default is after the <ul>
"manualControls": "", // Selector: Declare custom pager navigation
"namespace": "rslides", // String: change the default namespace used
"before": $.noop, // Function: Before callback
"after": $.noop // Function: After callback
}, options);
return this.each(function() {
// Index for namespacing
i++;
var $this = $(this),
// Local variables
vendor,
selectTab,
startCycle,
restartCycle,
rotate,
$tabs,
// Helpers
index = 0,
$slide = $this.children(),
length = $slide.length,
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
// Namespacing
namespace = settings.namespace,
namespaceIdx = namespace + i,
// Classes
navClass = namespace + "_nav " + namespaceIdx + "_nav",
activeClass = namespace + "_here",
visibleClass = namespaceIdx + "_on",
slideClassPrefix = namespaceIdx + "_s",
// Pager
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
// Styles for visible and hidden slides
visible = {
"float": "left",
"position": "relative",
"opacity": 1,
"zIndex": 2
},
hidden = {
"float": "none",
"position": "absolute",
"opacity": 0,
"zIndex": 1
},
// Detect transition support
supportsTransitions = (function() {
var docBody = document.body || document.documentElement;
var styles = docBody.style;
var prop = "transition";
if (typeof styles[prop] === "string") {
return true;
}
// Tests for vendor specific prop
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
prop = prop.charAt(0).toUpperCase() + prop.substr(1);
var i;
for (i = 0; i < vendor.length; i++) {
if (typeof styles[vendor[i] + prop] === "string") {
return true;
}
}
return false;
})(),
// Fading animation
slideTo = function(idx) {
settings.before(idx);
// If CSS3 transitions are supported
if (supportsTransitions) {
$slide
.removeClass(visibleClass)
.css(hidden)
.eq(idx)
.addClass(visibleClass)
.css(visible);
index = idx;
setTimeout(function() {
settings.after(idx);
}, fadeTime);
// If not, use jQuery fallback
} else {
$slide
.stop()
.fadeOut(fadeTime, function() {
$(this)
.removeClass(visibleClass)
.css(hidden)
.css("opacity", 1);
})
.eq(idx)
.fadeIn(fadeTime, function() {
$(this)
.addClass(visibleClass)
.css(visible);
settings.after(idx);
index = idx;
});
}
};
// Random order
if (settings.random) {
$slide.sort(function() {
return (Math.round(Math.random()) - 0.5);
});
$this
.empty()
.append($slide);
}
// Add ID's to each slide
$slide.each(function(i) {
this.id = slideClassPrefix + i;
});
// Add max-width and classes
$this.addClass(namespace + " " + namespaceIdx);
if (options && options.maxwidth) {
$this.css("max-width", maxw);
}
// Hide all slides, then show first one
$slide
.hide()
.css(hidden)
.eq(0)
.addClass(visibleClass)
.css(visible)
.show();
// CSS transitions
if (supportsTransitions) {
$slide
.show()
.css({
// -ms prefix isn't needed as IE10 uses prefix free version
"-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
"-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
"-o-transition": "opacity " + fadeTime + "ms ease-in-out",
"transition": "opacity " + fadeTime + "ms ease-in-out"
});
}
// Only run if there's more than one slide
if ($slide.length > 1) {
// Make sure the timeout is at least 100ms longer than the fade
if (waitTime < fadeTime + 100) {
return;
}
// Pager
if (settings.pager && !settings.manualControls) {
var tabMarkup = [];
$slide.each(function(i) {
var n = i + 1;
tabMarkup +=
"<li>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
"</li>";
});
$pager.append(tabMarkup);
// Inject pager
if (options.navContainer) {
$(settings.navContainer).append($pager);
} else {
$this.after($pager);
}
}
// Manual pager controls
if (settings.manualControls) {
$pager = $(settings.manualControls);
$pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
}
// Add pager slide class prefixes
if (settings.pager || settings.manualControls) {
$pager.find('li').each(function(i) {
$(this).addClass(slideClassPrefix + (i + 1));
});
}
// If we have a pager, we need to set up the selectTab function
if (settings.pager || settings.manualControls) {
$tabs = $pager.find('a');
// Select pager item
selectTab = function(idx) {
$tabs
.closest("li")
.removeClass(activeClass)
.eq(idx)
.addClass(activeClass);
};
}
// Auto cycle
if (settings.auto) {
startCycle = function() {
rotate = setInterval(function() {
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}, waitTime);
};
// Init cycle
startCycle();
}
// Restarting cycle
restartCycle = function() {
if (settings.auto) {
// Stop
clearInterval(rotate);
// Restart
startCycle();
}
};
// Pause on hover
if (settings.pause) {
$this.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
// Pager click event handler
if (settings.pager || settings.manualControls) {
$tabs.bind("click", function(e) {
e.preventDefault();
if (!settings.pauseControls) {
restartCycle();
}
// Get index of clicked tab
var idx = $tabs.index(this);
// Break if element is already active or currently animated
if (index === idx || $("." + visibleClass).queue('fx').length) {
return;
}
// Remove active state from old tab and set new one
selectTab(idx);
// Do the animation
slideTo(idx);
})
.eq(0)
.closest("li")
.addClass(activeClass);
// Pause when hovering pager
if (settings.pauseControls) {
$tabs.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
// Navigation
if (settings.nav) {
var navMarkup =
"<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
"<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
// Inject navigation
if (options.navContainer) {
$(settings.navContainer).append(navMarkup);
} else {
$this.after(navMarkup);
}
var $trigger = $("." + namespaceIdx + "_nav"),
$prev = $trigger.filter(".prev");
// Click event handler
$trigger.bind("click", function(e) {
e.preventDefault();
var $visibleClass = $("." + visibleClass);
// Prevent clicking if currently animated
if ($visibleClass.queue('fx').length) {
return;
}
// Adds active class during slide animation
// $(this)
// .addClass(namespace + "_active")
// .delay(fadeTime)
// .queue(function (next) {
// $(this).removeClass(namespace + "_active");
// next();
// });
// Determine where to slide
var idx = $slide.index($visibleClass),
prevIdx = idx - 1,
nextIdx = idx + 1 < length ? index + 1 : 0;
// Go to slide
slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
if (settings.pager || settings.manualControls) {
selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
}
if (!settings.pauseControls) {
restartCycle();
}
});
// Pause when hovering navigation
if (settings.pauseControls) {
$trigger.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
}
// Max-width fallback
if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
var widthSupport = function() {
$this.css("width", "100%");
if ($this.width() > maxw) {
$this.css("width", maxw);
}
};
// Init fallback
widthSupport();
$(window).bind("resize", function() {
widthSupport();
});
}
});
};
})(jQuery, this, 0);
CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides1_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
z-index: 99;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.rslides1_nav:focus {
outline: none;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
a {
color: #fff;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 10;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0, 0, 0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0, 0, 0, .8);
}

I believe your problem is in this line under .rslides1_nav:
background: transparent url("themes.gif") no-repeat left top;
Try:
background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
Or copy that image to your local and use whatever link would be appropriate. I've been messing around with a fiddle, but it doesn't look quire right yet. Hopefully, this can at least get you started

You need to add the responsiveslides.css and theme.css. After that you can download the image with the arrows from here. Or you can just change the background images path of .centered-btns_nav with the path from this link.
You can get the responsiveslides.css file from here.
You can get the theme.css file from here.
You also have to change the namespace property value from the plugin initialization to be:
namespace: "centered-btns"
See the working snippet below:
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "centered-btns"
});
});
http://responsiveslides.com/themes/themes.gif
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
* {
margin: 0;
padding: 0;
}
html {
background: #fff;
}
body {
color: #333;
font: 14px/24px sans-serif;
margin: 0 auto;
max-width: 700px;
_width: 700px;
padding: 0 30px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
#wrapper {
float: left;
width: 100%;
margin-bottom: 50px;
}
h1 {
font: 600 28px/36px sans-serif;
margin: 50px 0;
}
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
a {
color: #222;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://responsiveslides.com/themes/themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("http://responsiveslides.com/themes/themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0,0,0, .8);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
</ul>
</div>

Unable to print output in specific div?

First of all I am not very good in designing but with some help I am able to acheive this code
My main issue is that when a user opens a div it becomes the target div, so if I have five divs open at the same time it doesn't matter which I type in because the text gets appended to the last opened div. I can also open an unlimited amount of the same div, which should not happen.
The small issue I have is that I'm unable to close the div and minimize it(much like fb when we click on the chat box it gets minimized).
Fiddle
HTML
<div id="contact">
<header>Users</header>
<main>
<ul>
<li id="Prashant">Prashant</li>
<li id="Katrina">Katrina</li>
<li id="Priyanka">Priyanka</li>
<li id="Kareena">Kareena</li>
<li id="Anushka">Anushka</li>
</ul>
</main>
</div>
<div id="chat"></div>
CSS
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
body{margin:0;padding:0;}
#contact {
height: auto;
background: #ececec;
position:absolute;
right:0;
bottom:0;
width:100px;
}
#contact header {
padding: 10px;
background: #333;
color: #FFF;
}
#contact main {
padding: 10px
}
#chat {
position: fixed;
bottom: 0;
left: 0;
right: 100px;
height: auto;
}
#chat .user {
border: 1px solid #333;
background: #fff;
width: 200px;
height: 100%;
float: left;
margin-right: 5px;
}
.user header {
position: relative;
background: #4b67a8;
border: 1px solid #2e4588;
}
.user header .status {
position: absolute;
top: 36%;
left: 10px;
width: 8px;
height: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: green;
}
.user header .header-text {
color: #fff;
font-weight: bold;
padding: 8px;
margin: 0 0 0 15px;
font-size: 12px;
text-shadow: 0 -1px rgba(0, 0, 0, .25);
}
.user header .close {
position: absolute;
right: 5px;
top: 7px;
color: #fff;
}
.message-area {
background: #fff;
height: 120px;
padding: 5px;
color: #333;
overflow: scroll;
}
.user .input-area {
border-top: 1px solid #333;
padding: 3px;
}
.user .input-area input {
padding: 5px;
width: 100%;
font-size: 12px;
border: none;
outline: none;
}
Javascript
var username = 'user201';
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var targetUser = ($(this).html());
$(document).data('chat.targetUser', targetUser);
var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">×</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
$('#chat').append(user);
});
$('#chat').on('keydown', '#input', function(event) {
if (event.keyCode == 13) {
var targetUser = $(document).data('chat.targetUser');
var txt = $(this).val();
$('#' + targetUser + ' .message-area').append(username + ': ' + txt + '<br/>');
$(this).val('');
}
});
});

I edited div.close and added a div.mini like
<div class="mini" title="MINIMIZE">-</div>
<div class="close" title="CLOSE">×</div>
Css for .mini
.user header .mini {
position: absolute;
right: 25px;
top: 7px;
color: #fff;
cursor:pointer;
}
JS code for them to work
$(document).on("click", "div.close", function(){
$(this).parent().parent().remove();
});
$(document).on("click", "div.mini", function(){
var elem = $(this).parent().parent().children().not("header");
elem.slideToggle();
});
Also added this js code to prevent add the div if it's already opened and make it append to last section of chat
if ($("div#" + targetUser).length > 0) {
$("div#" + targetUser).appendTo("#chat");
return false;
}
FIDDLE
EDIT
Edited div.mini click function for -/+ Minimize/Maximize
$(document).on("click", "div.mini", function(){
var elem = $(this).parent().parent().children().not("header");
elem.slideToggle();
$(this).text($(this).text() == "-" ? "+" : "-");
$(this).attr("title", $(this).attr("title") == "MINIMIZE" ? "MAXIMIZE" : "MINIMIZE");
});
UPDATED FIDDLE

The text you enter will appear in the last opened div because your var targetUser is changed every time you click on one of the users. The best way to solve this I think is to find the parent of the input field and search for the previous .message-area.
Like this:
$('#chat').on('keydown', '#input', function(event) {
if (event.keyCode == 13) {
var txt = $(this).val();
$(this).parent().prev(".message-area").append(username + ': ' + txt + '<br/>');
$(this).val('');
}
});
Working JSFiddle

Here is the fix for your code:
http://jsfiddle.net/afzaal_ahmad_zeeshan/36pcu/14/
I have updated the code in your fiddle, and I have added a fix so that the divs don't open up twice.
I just added a class to the link of the user, to show that this user is now active. Here is the code
if($(this).attr('class') != 'active') {
var targetUser = ($(this).html());
$(document).data('chat.targetUser', targetUser);
var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">×</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
$('#chat').append(user);
}
$(this).attr('class', 'active');
Then the div thing was handled using this code:
if (event.keyCode == 13) {
var txt = $(this).val();
$(this).parent().prev(".message-area").append(username + ': ' + txt + '<br/>');
$(this).val('');
}
This was the fix for your code, now it works.

According to your statement "...Also I am able to open an unlimited amount of the same divs, which should not happen**..." this can be prevented if you know what are the boxes opened
please check the Fiddle
var id = '#Box' + targetUser;
var existent = $('#chat').find(id)[0];
// This will ensure that you can only open one box at each time
if(existent != null){
alert('There is already one chat to user "' + targetUser + '" open');
}
else
{
your code...
}
Also the fix proposed by speetje33 helps you prevent to write always in the last box.
I've added some comments to the code for your better understanding.