I am trying to create a post page where user scroll to view the posts. There are multiple posts with a sidebar so I want to display a progress bar to indicate the article position.
The code I wrote for this is working good when I navigate to the first element but not for the elements after this.
Here is the code. I tried to set up a fiddle here I want to achieve something like this in the sidebar Reference link
var contentSections = $('.single_page_post');
jQuery(window).on('scroll', function () {
updateNavigation();
});
function updateNavigation() {
contentSections.each(function () {
$this = $(this);
var theID = $this.attr("id");
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
var s = $(window).scrollTop(),
d = $this.height(),
c = $this.offset().top;
var scrollPercent = (s / (d - c)) * 100;
var progressheight = 100-scrollPercent;
$("a[href='#" + theID + "']").prev().css({'height' : progressheight+"%", 'display' : 'block'});
$("a[href='#" + theID + "']").parents('.post_page_sidebar').addClass("current");
} else {
$("a[href='#" + theID + "']").prev().css({'display' : 'none'});
$("a[href='#" + theID + "']").parents('.post_page_sidebar').removeClass("current");
}
});
}
.content_area {
width: 60%;
float:left;
}
.post_page_sidebar {
position: relative;
}
.post_progress {
position: absolute;
width: 5px;
background: red;
bottom:0px;
}
a {
padding: 10px 10px 10px 7px;
display: inline-block;
}
li {
list-style: none;
}
.sidebar {
width: 30%;
position: fixed;
top: 0px;
}
.single_page_post {
height: 500px;
border: 2px solid #e2e2e2;
margin-top: 5px;
margin-left:200px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li id="sidebar_post_267" class="post_page_sidebar">
<div class="post_progress"></div>
Dummy Post 4
</li>
<li id="sidebar_post_263" class="post_page_sidebar">
<div class="post_progress"></div>
Dummy Post 3
</li>
<li id="sidebar_post_261" class="post_page_sidebar">
<div class="post_progress"></div>
Dummy Post 2
</li>
<li id="sidebar_post_131" class="post_page_sidebar">
<div class="post_progress"></div>
Test Post
</li>
</ul>
</div>
<div class="content_area">
<div class="single_page_post" id="post_section_267">
</div>
<div class="single_page_post" id="post_section_263">
</div>
<div class="single_page_post" id="post_section_261">
</div>
<div class="single_page_post" id="post_section_131">
</div>
</div>
There's two issues with your code. The first one is that, logically, you would not be wanting to subtract $this.offset().top from $this.height() but rather from $(window).scrollTop() giving you:
var scrollPercent = ((s-c) / (d)) * 100;
The second one is that your logic to switch which article is the currently visible one is convoluted and wrong. The statement you posted switches active article "too early" and therefore returns something a long the lines of "the user read -30% of this article". It is a lot easier to just check for each item whether:
$this.offset().top - $(window).scrollTop() < 0
to determine if it is completely in the viewport.
These two changes give you the following snippet:
var contentSections = $('.single_page_post');
jQuery(window).on('scroll', function () {
updateNavigation();
});
function updateNavigation() {
contentSections.each(function () {
$this = $(this);
var theID = $this.attr("id");
if ($this.offset().top - $(window).scrollTop() < 0) {
var s = $(window).scrollTop()-13,
d = $this.outerHeight(),
c = $this.offset().top;
var scrollPercent = ((s-c) / (d)) * 100;
var progressheight = 100-scrollPercent;
$("a[href='#" + theID + "']").prev().css({'height' : progressheight+"%", 'display' : 'block'});
$("a[href='#" + theID + "']").parents('.post_page_sidebar').addClass("current");
} else {
$("a[href='#" + theID + "']").prev().css({'display' : 'none'});
$("a[href='#" + theID + "']").parents('.post_page_sidebar').removeClass("current");
}
});
}
.content_area {
width: 60%;
float:left;
}
.post_page_sidebar {
position: relative;
}
.post_progress {
position: absolute;
width: 5px;
background: red;
bottom:0px;
}
a {
padding: 10px 10px 10px 7px;
display: inline-block;
}
li {
list-style: none;
}
.sidebar {
width: 30%;
position: fixed;
top: 0px;
}
.single_page_post {
height: 500px;
border: 2px solid #e2e2e2;
margin-top: 5px;
margin-left:200px;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<ul>
<li id="sidebar_post_267" class="post_page_sidebar">
<div class="post_progress"></div>
Dummy Post 4
</li>
<li id="sidebar_post_263" class="post_page_sidebar">
<div class="post_progress"></div>
Dummy Post 3
</li>
<li id="sidebar_post_261" class="post_page_sidebar">
<div class="post_progress"></div>
Dummy Post 2
</li>
<li id="sidebar_post_131" class="post_page_sidebar">
<div class="post_progress"></div>
Test Post
</li>
</ul>
</div>
<div class="content_area">
<div class="single_page_post" id="post_section_267">
</div>
<div class="single_page_post" id="post_section_263">
</div>
<div class="single_page_post" id="post_section_261">
</div>
<div class="single_page_post" id="post_section_131">
</div>
</div>
Related
I have a dynamic slider with two buttons left and right.
that means for each slide, the slide parent width increases by 100%. 2 slides * 100% = 200%. In example class="slider"; width:'200%'
I want to center each slide's text in the middle of the page. But i want the text to slide not in just slides container, but in its parent-parent width (class='carousel' in example).
Code below, is example how the slider is looking right now.
JavaScript, you should ignore this. Implemented it, for the code to work.
document.addEventListener('DOMContentLoaded', function() { //Display function after HTML is loaded
const left = document.querySelector('.left');
const right = document.querySelector('.right');
var slider = document.getElementById('slider');
var leftImg = document.getElementById('left');
var rightImg = document.getElementById('right');
var sections = document.querySelectorAll('.slide').length; // get number of slides
var sectionIndex = 1;
slider.style.width = ' ' + 100 * sections + '%';
function changeOpacity() {
if (sectionIndex == 1) {
leftImg.style.opacity = '0.4';
} else {
leftImg.style.opacity = '1';
}
if (sectionIndex == sections) {
rightImg.style.opacity = '0.4';
} else {
rightImg.style.opacity = '1';
}
}
left.addEventListener('click', function() {
var leftImg = document.getElementById('left');
sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
right.addEventListener('click', function() {
sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
})
.slider-container {
padding: 25px 0px;
width: 40%;
margin: auto;
}
.slider-container .carousel {
overflow: hidden;
height: 260px;
width: 100%;
border:solid 2px black;
position:relative;
}
.slider-container .slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-transition: .5s;
transition: .5s;
}
.slider-container .slider .slide {
width: 100%;
}
.slider-container .arrow-container {
width: 70px;
position: absolute;
bottom: 0;
}
<div class="slider-container mobile-container text-left">
<div class="carousel relative">
<div id="slider" class="slider">
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="arrow-container d-flex justify-content-between ">
<div>
<button class="left" id="left" style="opacity: 0.4;">Left </button>
</div>
<div>
<button class="right" id="right">Right</button>
</div>
</div>
</div>
</div>
</div>
The Snippet below is what i want. But i should be centered, and i don't know how.
I have tried using fl
document.addEventListener('DOMContentLoaded', function() { //Display function after HTML is loaded
const left = document.querySelector('.left');
const right = document.querySelector('.right');
var slider = document.getElementById('slider');
var leftImg = document.getElementById('left');
var rightImg = document.getElementById('right');
var sections = document.querySelectorAll('.slide').length; // get number of slides
var sectionIndex = 1;
slider.style.width = ' ' + 100 * sections + '%';
function changeOpacity() {
if (sectionIndex == 1) {
leftImg.style.opacity = '0.4';
} else {
leftImg.style.opacity = '1';
}
if (sectionIndex == sections) {
rightImg.style.opacity = '0.4';
} else {
rightImg.style.opacity = '1';
}
}
left.addEventListener('click', function() {
var leftImg = document.getElementById('left');
sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
right.addEventListener('click', function() {
sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
changeOpacity();
});
})
.slider-container {
margin: auto;
padding: 25px 0px;
}
.slider-container .carousel {
overflow: hidden;
height: 260px;
width: 80%; /* the width i want */
border: solid 2px black; /* the border for your understading */
position: relative;
}
.slider-container .slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-transition: .5s;
transition: .5s;
}
.slider-container .slider .slide {
width: 100%;
}
.slider-container .comment {
max-width: 352px;
padding: 30px 0px;
}
.slider-container .arrow-container {
width: 70px;
position: absolute;
bottom: 0;
}
<div class="slider-container mobile-container text-left">
<div class="carousel relative">
<div id="slider" class="slider">
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
<div class="slide">
<div class="author d-flex flex-column">
<h3>Ken Ludden</h3>
<span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
</div>
</div>
</div>
<div class="controls">
<div class="arrow-container d-flex justify-content-between ">
<div>
<button class="left" id="left" style="opacity: 0.4;">Left </button>
</div>
<div>
<button class="right" id="right">Right</button>
</div>
</div>
</div>
</div>
</div>
</div>
You can see in this snippet that text is sliding from a lot further right than the previous example.
I need to center the slide, because i want the same for left side.
I have tried using flex-column, align-items:center on class="slide". And it works fine, but the class="controls" aren't centering because they are position:absolute and i tried to putting them elsewhere, but it didnt work..
I really hope you guys did understand what i want and really hope that i recieve atleast some suggestions. This is my 1st question, sorry for long code.
Thank you anyway :)
Your carousel is 80% of the width, so if you want that to be centered, you can do: margin: 0 auto on the carousel class.
I'm working to create a List news ticker and found a simple implementation on this link:
jQuery News Ticker
I want to include the <br> statement inside the generated dynamic list contents and would like the news ticker to manage the height of ticker automatically.
However, the list items containing <br/> element doesn't display the news item in multiple lines.
Please note that in my actual code, the list contents will be generated dynamically, thus, my news ticker should be able to manage any number of <br/> in its content and manage the height of ticker dynamically.
Can anyone please suggest how to achieve this?
Here's my sample code:
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());
#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
position: relative;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>
Please remove the statement "position:relative;" from the class ".news-list"
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());
#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());
#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
position: relative;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>
I have a div having position: fixed; otherwise at a certain time on scroll down it's having position: absolute;.
My issue is that the position: fixed; of my div depends on the top of my footer. However the top of my footer changes but not the limit of the part where my div should be 'fixed'. Maybe the code would be more clear :
html :
<div id="header" style="height:500px; width:800px; border: 5px solid green; " >
header
</div>
<div id="top" style="height:3000px; width:800px; border: 5px solid yellow; " >
<button onclick="ReduceSize()"> Reduce size </button>
<div id="comment" style="padding-bottom:30px; height:700px; width : 300px; margin-left:30px; border: 5px solid orange;" >
</div>
</div>
<div id="bottom" style="height:3000px; width:800px; border: 5px solid green; " >
footer
</div>
js :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
</script>
<script>
function ReduceSize() {
var obj = document.getElementById('top');
obj.style.height = "750px";
}
$(document).ready(function () {
var haut = $('#comment').offset().top;
var hautBottom = $('#bottom').offset().top - parseFloat( $('#comment').css('height').replace(/auto/, 0) ) ;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if( (y >= (haut-20) ) && (y < hautBottom ) ) {
$('#comment').css({ position: 'fixed', top:20 });
}else{
if(y >= haut){
$('#comment').css({ position: 'absolute', top:hautBottom });
}
if(y < hautBottom ){
$('#comment').css({ position: 'absolute', top:parseFloat( $('#top').offset().top) });
};
};
});
});
</script>
Thanks in advance.
It is not 100% clear for me, what you want to achieve, but I think this is it:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script>
function ReduceSize() {
$(content).css('height', '600px');
set_comment_position();
}
function set_comment_position(){
var header = $('#header');
var comment = $('#comment');
var footer = $('#footer');
var scroll = $(window).scrollTop();
var header_height = header.outerHeight();
var comment_height = comment.outerHeight();
var comment_distance_top = header_height - scroll;
var footer_offset_top = footer.offset().top;
var footer_distance_top = footer_offset_top - scroll;
var comment_distance_footer = footer_distance_top - comment_height;
if (comment_distance_top <= 0) {
if (comment_distance_footer > 0) {
comment.css({
position: 'fixed',
top: '0px',
bottom : 'auto'
});
} else {
comment.css({
position: 'absolute',
top: 'auto',
bottom: '0px'
});
}
} else {
comment.css({
position: 'absolute',
top: '0px',
bottom : 'auto'
});
}
}
$(document).ready(function(){
set_comment_position()
});
$(window).scroll(function(){
set_comment_position();
});
</script>
</head>
<body>
<div id="header" style="height:100px; width:800px; background-color: lightgreen; " >
header
</div>
<div id="content" style="height:800px; width:800px; background-color: lightgrey; position: relative;" >
<div id="comment" style="height:400px; width : 300px; background-color: orange; position: absolute; top: 0px;" >
comment
<button onclick="ReduceSize()"> Reduce size </button>
</div>
</div>
<div id="footer" style="height:800px; width:800px; background-color: lightgreen; " >
footer
</div>
</body>
</html>
The point is to wrap the positioning logic into one separate function and call this function on docready, scroll and resize.
I got a variable that represents required number of items and counting of dropped items inside droppable area. You can view example here. So what I want is to pass a variable to javascript and then calculate the difference.
I put my variable into div:
<div id="numbr" >10</div>
And here is the js code which counts dropped items and displays the total:
var n = $(this).closest("div.proc").find(".dropClass").length -1;
$(this).closest("div.proc").find("div.dropped").text("Items Dropped: " + n + ".");
My goal is to find differences between <div class="numbr"> and n, and then display it. How can I achieve this in js?
It is just an example.In my system, the number is a php variable received from user's input. There could be more than 2 boxes: it depends on user's input.
Try the following in both the drop event and the click event:
var proc = $(this).closest("div.proc");
proc.find('.dif').text('Difference ' +(proc.find('.numbr').text() - n));
demo: https://jsfiddle.net/d1ddsj8m/2/
var itm = [];
$("#savebutton").click(function() {
LISTOBJ.saveList();
});
$("#myAccordion").accordion({
heightStyle: "content",
active: false,
collapsible: true
});
$("#myAccordion li").draggable({
appendTo: "body",
helper: "clone",
start: function(ev, ui) {
ui.helper.width($(this).width());
}
});
$(".projLeader ol").droppable({
tolerance: 'pointer',
hoverClass: 'highlight',
drop: function(ev, ui) {
var zz = ui.draggable.text()
var xyz = itm.includes(zz);
if (xyz === false) {
var item = ui.draggable;
if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable(); // if item was dragged from the source list - clone it
//this.innerHTML = ''; // clean the placeholder
item.addClass('dropClass').appendTo(this);
// append item to placeholder
//add to array
itm.push(zz);
var n = $(this).closest("div.proc").find(".dropClass").length;
$(this).closest("div.proc").find(".dropped").text("Items Dropped: " + n + ".");
$(this).closest("div.proc").find('.dif').text('Difference ' + ($(this).closest("div.proc").find('.numbr').text() - n));
} else {
alert('Name is Already Exist');
}
}
});
$(".projLeader").on('click', '.closer', function() {
var item = $(this).closest('.item');
var element = $("#myAccordion ul li").filter(function() {
return $(this).text() == item.text();
});
itm.splice(item);
var n = $(this).closest("div.proc").find(".dropClass").length - 1;
$(this).closest("div.proc").find("div.dropped").text("Items Dropped: " + n + ".");
$(this).closest("div.proc").find('.dif').text('Difference ' + ($(this).closest("div.proc").find('.numbr').text() - n));
item.fadeTo(200, 0, function() {
item.remove();
})
});
var LISTOBJ = {
saveList: function() {
var listCSV = "";
$(".projLeader li").each(function() {
if (listCSV === "") {
listCSV = $(this).text();
} else {
listCSV += ", " + $(this).text();
}
$("#output").text(listCSV);
$(".hiddenListInput").val(listCSV);
});
}
}
body {
font-family: verdana;
font-size: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
ol {
list-style-type: none;
}
.item {
height: 20px;
width: 180px;
margin: 5px;
padding: 5px;
border: 1px solid gray;
background-color: #cd8;
position: relative;
}
.item .closer {
position: absolute;
right: 5px;
top: 2px;
font: bold 14px arial;
color: #666;
padding: 1px 3px;
line-height: 1;
cursor: pointer;
display: none;
}
.item .closer:hover {
color: #000;
}
.placeholder {
height: 30px;
width: 195px;
margin: 5px;
background: #eee;
border: 1px dashed #999;
}
.placeholder .item {
margin: 0;
}
ol .item .closer {
display: block;
}
.highlight {
border: 1px solid red;
background: #fff;
}
.highlight .item {
opacity: 0.3;
}
.ui-draggable-dragging {
z-index: 99;
opacity: 1 !important;
}
.dropClass {
background-color: lightblue;
padding-left: 10px;
width: 180px;
border: 1px solid black;
border-radius: 8px;
margin-bottom: 5px;
}
.dropped {
display: inline;
}
.dif {
display: inline;
}
.numbr {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
<h3>T-Shirts</h3>
<div>
<ul>
<li class="item"><span class="closer">x</span>Lolcat Shirt</li>
<li class="item"><span class="closer">x</span>Cheezeburger Shirt</li>
<li class="item"><span class="closer">x</span>Buckit Shirt</li>
</ul>
</div>
<h3>Bags</h3>
<div>
<ul>
<li class="item"><span class="closer">x</span>Zebra Striped</li>
<li class="item"><span class="closer">x</span>Black Leather</li>
<li class="item"><span class="closer">x</span>Alligator Leather</li>
</ul>
</div>
<h3>Gadgets</h3>
<div>
<ul>
<li class="item"><span class="closer">x</span>iPhone</li>
<li class="item"><span class="closer">x</span>iPod</li>
<li class="item"><span class="closer">x</span>iPad</li>
</ul>
</div>
</div>
<div class='proc'><pre>
<br /></pre>
<div class="projLeader">
<label>Box1. Required number:
<div class="numbr">10</div>.
<div class="dropped"></div>
<div class="dif">Difference:</div>
</label>
<div class="ui-widget-content">
<ol>
<li class="placeholder" name="projLeader"></li>
<input type="hidden" name="projLeader" class="hiddenListInput1" />
</ol>
</div>
</div>
</div>
<div class='proc'><pre>
<br /></pre>
<div class="projLeader">
<label>Box2. Required number:
<div class="numbr">5</div>.
<div class="dropped"></div>
<div class="dif">Difference:</div>
</label>
<div class="ui-widget-content">
<ol>
<li class="placeholder" name="projLeader"></li>
<input type="hidden" name="projLeader" class="hiddenListInput1" />
</ol>
</div>
</div>
</div>
<br/>
<input type="submit" id="savebutton" class="button" value="Save" onclick="userSubmitted = true;" />
<div id="output"></div>
It looks like you are using jQuery, which makes it really easy to manipulate the DOM dynamically.
Here is what I would do. First, add a difference div which will hold the difference of n and numbr:
<div id="numbr">10</div>
<div id="difference"></div>
And in your JS, calculate the difference and add it to the div:
var n = $(this).closest("div.proc").find(".dropClass").length - 1;
var difference = parseInt($('#numbr').text(), 10) - n;
if (difference >= 0) {
$('#difference').text('Difference ' + difference);
}
Do you mean that you can use a PHP variable in javascript. If that's the case, this is probably what you are looking for:
<?php
$myVariable = 200;
?>
<script type="text/javascript">
$(document).ready(function () {
var myvar = <?= $myVariable; ?>;
$(document).on('change', '.numbr', function () {
var number = parseInt($(this).text(), 10);
var difference = myvar - number;
$('.somediv').text($difference);
});
});
</script>
<div class="numbr">20</div>
To get the dropClass content, use the text() method. length will give you the number of nodes for the given selector, it's not what you want here.
You can get the numbr and dropClass content with the text() method.
Try this(added some html for the snippet to work):
inner = $('#innerproc').closest("div.proc");
numbr = $('#numbr').text();
n = inner.find(".dropClass").text();
inner.find("div.dropped").text("Items Dropped: " + (n - numbr) + ".");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="numbr">10</div>
<div class="proc">
<div id="innerproc"></div>
<div class="dropClass">21</div>
<div class="dropped"></div>
</div>
I've set up an animated slider using jQuery:
jsFiddle demo: http://jsfiddle.net/neal_fletcher/9zRDV/
The reason being I wanted to achieve a slight overhang on the slides, i.e. while viewing slide 1 you can see some of slide 2 etc. The slider works great, perfect in fact for what I'm after, now though I'm trying to figure out if it's possible to set up a pager for this slider, the aim of which being to click on a .slide-menu-item and the slider will slide to the relevant slide, if at all possible?
One other slight problem too, is it possible to animate the slider on load? Thus, the pager will slide every 5 seconds, but you can still navigate the slider using the pager / next and previous buttons?
Any suggestions would be greatly appreciated!
HTML:
<div class="outerwrapper">
<div class="innerwrapper">
<div class="inner-slide">SLIDE 01</div>
<div class="inner-slide">SLIDE 02</div>
<div class="inner-slide">SLIDE 03</div>
<div class="inner-slide">SLIDE 04</div>
<div class="inner-slide">SLIDE 05</div>
<div class="inner-slide">SLIDE 06</div>
<div class="inner-slide">SLIDE 07</div>
</div>
</div>
<ul id="slide-menu">
<li id="one" class="slide-menu-item">01</li>
<li id="two" class="slide-menu-item">02</li>
<li id="three" class="slide-menu-item">03</li>
<li id="four" class="slide-menu-item">04</li>
<li id="five" class="slide-menu-item">05</li>
<li id="six" class="slide-menu-item">06</li>
<li id="seven" class="slide-menu-item">07</li>
</ul>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
CSS:
.outerwrapper {
position: absolute;
left: 50%;
height: 250px;
width: 400px; margin-left: -225px;
border: 1px solid black;
overflow: hidden;
padding-left: 50px;
}
.innerwrapper {
height: 250px;
width: 4000px;
}
.inner-slide {
height: 250px;
width: 350px;
float: left;
background: silver;
}
.innerwrapper div:nth-child(odd) {
background: silver;
}
.innerwrapper div:nth-child(even) {
background: red;
}
#left, #right {
position: absolute;
cursor: pointer;
}
#left {
left: 10px; bottom: 10px;
}
#right {
right: 10px; bottom: 10px;
}
#slide-menu {
position: absolute;
top: 250px;
list-style: none;
}
.slide-menu-item {
display: inline-block;
width: 50px;
cursor: pointer;
}
jQuery:
var animating = false,
slideWidth = $('.inner-slide').width(),
$wrapper = $('.outerwrapper'),
slideIndex = 2,
slideLen = $('.inner-slide').length,
build = function() {
$firstClone = $('.inner-slide').eq(0).clone();
$secondClone = $('.inner-slide').eq(1).clone();
$preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
$lastClone = $('.inner-slide').eq(slideLen - 1).clone();
$wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
$wrapper.animate({
scrollLeft: '+=' + slideWidth * slideIndex + 'px'
}, 0);
},
slide = function(dir, speed) {
if(!animating) {
animating = true;
dir == 'right' ? slideIndex++ : slideIndex--;
slideIndex == slideLen - 1 ? slideIndex == 0 : '';
if(slideIndex == 0 && dir == 'left') {
//if the slide is at the beginning and going left
slideIndex = slideLen + 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex--;
} else if(slideIndex == slideLen + 2 && dir == 'right') {
//if the slide is at the end and going right
slideIndex = 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex++;
}
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, speed, function() {
animating = false;
});
}
};
$(function() {
build();
$('#right, #left').on('click', function() {
slide($(this).attr('id'), 600)
});
});
Add the slideTo function:
slideTo = function (index, speed) {
slideIndex = index+1;
$wrapper.animate(
{scrollLeft: slideIndex * slideWidth + 'px'},
speed, function () {animating = false;}
);
}
Then call it when you click one of the page buttons:
$('.slide-menu-item').click(function() {
var toSlideIndex = Math.round($(this).text());
slideTo(toSlideIndex, 600);
});
And then, to make it slide automatically every 5 seconds, add this:
setInterval(function() {slide("right", 600);}, 5000);
JSFiddle demo: http://jsfiddle.net/9zRDV/3/
for example ?
$('#yourFavouriteIdForButtonThree').click(function(){
slide('three', 600)
});