I used the slider where i got bug occur. I wanted to show counter pagination on slider but i was unable to do this. In form of Current Number of Page/ Total number of pages like 1/4,2/4 and so on.
https://codepen.io/anon/pen/WJRqQj
<div id="credit"><br>Slide No.<span id="count">1/4</span><br></div>
You can modify the left and right buttons click functions. Also do not forget to update the automatic slider accordingly. I'm also sure you can get the total index somewhere within so that you don't have to hardcode the "/4" part. Update the below functions:
var leftArrow = $('<div>', {'class': 'jislider__left-arrow'}).click(function () {
animate.control(--animate.index);
document.getElementById("count").textContent = animate.index+"/3";
});
var rightArrow = $('<div>', {'class': 'jislider__right-arrow'}).click(function () {
animate.control(++animate.index);
document.getElementById("count").textContent = animate.index+"/3"
});
This will not be enough, you probably should not hardcode the denominator "/4" part as well. I do not know the library you use, but I guess this is sufficient to give you the overall number of "unique" divs with different source:
var x = Array.prototype.slice.call(document.querySelectorAll(".jislider__img"))
.map(function(d,i){return {node:d,url:getComputedStyle(d).backgroundImage}})
.reduce(function(ac,d,i,a){
!ac.some(function(dd,ii){return dd.url === d.url})
? ac.push(d)
: void(0);
return ac
},[]).map(function(d,i){
return d.node;
})
x.length is 3 in your case. So although you have 5 divs, you have 3 images. You can also see it in the dots below (3 dots are there in your carousel). For the left and right arrow functions above, calculate var l = x.length before hand, and then you can do:
document.getElementById("count").textContent = animate.index+"/" + l;
so you don't have to hardcode it. I had to modify your slider a bit, a working fiddle:
https://jsfiddle.net/ibowankenobi/szwr20ec/5/
Related
I am trying to make current number and total number of slides using vue-slick-carousel.
This is what I tried so far.
<VueSlickCarousel ref="carousel">
<div>1 <button tabindex="-1">11</button></div>
<div>2 <button tabindex="-1">22</button></div>
<div>3 <button tabindex="-1">33</button></div>
<div>4<button tabindex="-1">44</button></div>
</VueSlickCarousel>
methods: {
customPaging: function (slider, i) {
var slideNumber = i + 1,
totalSlides = slider.slideCount;
return (
'<a class="custom-dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '</span></a>'
);
},
},
But this is not working.
And this is vue-slick-carousel API url below.
https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#methods
What do i need to fixed the code to show a current slide number and total slide.
ex) "3/10"
I had the same problem recently.
This probably comes late, but to whom it may still concern:
If you want to display current page numbers instead of the default dots, there is an example at the bottom of this VueSlickCarousel documentation page and you should be good.
If you want to display the current page number only once anywhere on your page, I found a solution that worked for me:
this.$refs solution did not work for me, but this was likely due to v-if that I was using to render the <VueSlickCarousel>.
v-if and this.$refs don't like each other very much - see also Vue.js refs are undefined, even though this.$refs shows they're there.
Eventually I tried looking at the events that the children emitted in Vue Devtools and I found this afterChange event.
The afterChange event is fired each time you move your carousel to the next page (regardless of whether you drag-slide or click the arrow) and contains a very useful param - the current page index. In my case, this param starts at 0 and for each change it is incremented or decremented by 3 - that is because my carrousel settings are set to slidesToScroll : 3.
So my solution was to:
Add event listener like this:
<VueSlickCarousel #afterChange="afterPageChange">
Create the sliderPageIndex in your data with the initial value 0.
data() {
return {
sliderPageIndex: 0;
}
}
Create the afterPageChange in methods: {}.
methods: {
afterPageChange(page) {
this.sliderPageIndex = page;
}
}
Create the currentPage in computed: {} with some additional logic to compensate for the abovementioned slidesToScroll setting and for the sliderPageIndex starting at 0, like this:
computed: {
currentPage() {
// always display 1 if page index is 0
if (this.sliderPageIndex == 0) {
return 1;
} else {
// compensate for slidesToScroll settings and compensate the shift by 1
return this.sliderPageIndex / this.carouselSettings.slidesToScroll + 1;
}
},
}
Now you should have access to the currentPage computed property and can use it anywhere in your <template>.
When it comes to the totalPages, I compute it from the length of the picture array that I send to the carousel instead of taking it from the carousel directly. Here, I also compensate for carouselSettings - if this requires further explanation, let me know.
You can read more about the VueSlickCarousel events here.
Hope this will be of use to someone! :)
Cheers and have a nice day.
I have some logic
$("#finish-button").click(function () {
$(".hidebuttonvresults").hide();
$(".showbuttonvresults").show();
});
This works for most of my pages, however one page does not have #finish-button. The only unique is id is #question-number but I only want this action to happen when the ID prints Question 15 of 15.
Any idea how to alter my logic to include this extra factor? I was trying
var str = $('#question-number').html();
if (str.indexOf("Question 40 of 46") !== -1) {
$(".hidebuttonvresults").hide();
$(".showbuttonvresults").show();
}
but it does not work
I have multiple buttons that when they are clicked an image is loaded and the image is supposed to stay there based even when the page refreshes. When I use this the button with the highest setItem value always shows even if I click on other button. How do I fix this?
here is one of the scripts:
<script type="text/javascript">
var isImage1 = sessionStorage.getItem('2');
function showImage1() {
sessionStorage.setItem('isImage1', '2');
$("#loadingImage1").show();
$("#loadingImage").hide();
$("#loadingImage2").hide();
$("#loadingImage3").hide();
$("#loadingImage4").hide();
$("#loadingImage5").hide();
$("#loadingImage6").hide();
}
if(isImage1 == 2) showImage1();
</script>
and here is one of my buttons:
<input name="EPL/MECH DESIGN - TECHS" style="white-space:normal"
onclick="moveText(this.name);showImage1();form1.submit()"
style="width: 275px" type="button" value="7SBD EPL/Mech. Design Techs" />
Update: I have updated this line
var isImage1 = sessionStorage.getItem('2');
to
var isImage1 = sessionStorage.getItem('isIamge1');
but my issue still exists, that the isImage with the largest value stays even when i click the other buttons, so help is still needed.
In your session storage, you are setting the value of the 'isImage1' Item to '2'
sessionStorage.setItem('isImage1', '2');
But in your code to retrieve the value you are actually retrieving the item '2'
var isImage1 = sessionStorage.getItem('2');
You need to change your sessionStorage.getItem to reference 'isImage1'
var isImage1 = sessionStorage.getItem('isImage1');
Then you should get the value you are expecting.
There are loads of good jsfiddles on session storage. you may get some ideas from this one:
http://jsfiddle.net/gabrieleromanato/XLRAH/
Incidently; this is a very small value you are storing, why not store it in a cookie instead?
EDIT:
based on the fact that you have multiple functions exactly like this one, you are better off following Ken's solution, the only thing I would add is a wildcard to turn off the other images:
function showImage(imgNum) {
sessionStorage.setItem('Image',imgNum);
$("[id^=loadingImage]").hide();
$("#loadingImage" + imgNum).show();
}
showImage(sessionStorage.getItem('Image'));
The code in the buttons would then be showImage(1) instead of showImage1();
_Pez
By re-factoring the code a little you can do something like this:
/// setup some vars including max number of images
var maxImages = 6, i = 1, v;
/// now loop through and get the items for each image
for(; i =< maxImages; i++) {
v = sessionStorage.getItem('isImage' + i);
/// if in storage, call show image with the number to show
if (v !== null) showImage(i);
}
/// show image based on number
function showImage(num) {
sessionStorage.setItem('isImage' + num, '1');
$("#loadingImage" + num).show();
}
Also note that sessionStorage only deals with strings. So in order to check a specific number you need to convert it to one first parseInt(value, 10);.
But in this case the 1 that we set can be anything - it's just to store some value so sessionStorage doesn't return null.
In the button code you can change it to do this:
<input name="EPL/MECH DESIGN - TECHS" style="white-space:normal"
onclick="moveText(this.name);showImage(1);form1.submit()"
style="width: 275px" type="button" value="7SBD EPL/Mech. Design Techs" />
This is the sequel to this thread:
4 toggle buttons speak javascript to each other but none of them are good listeners
Our heros have overcome the ridiculous amount of nonsense originally presented in the fiddle http://jsfiddle.net/EjW7A/8/ (no longer available) when #nbrooks -reinvigorated by the forces of good- conquered all of the stupidly placed arrays, functions and the mammoth amount of redundant content with his solution:
http://jsfiddle.net/EjW7A/24/
We rejoin Luhring after 8 hours of poking, prodding, red bull drinking, concrete wall head-bashing at the final step of solving the epic problem of doom- implementation:
The new fiddle:
http://jsfiddle.net/Luhring/EjW7A/38/
Problem:
How can I insert the content dynamically- allowing each button to toggle it's own content while making sure the other buttons are toggled off and their content hidden? ex, if button 1 is toggled on (it is animated as if it were a 'real' pressed button), button 1s content is displayed in a gallery where the contents can be clicked to display a lightbox. when button 2 is clicked should toggle button 1 off and replace button 1's contents with its own.
New Working Demo
Anything invoking jQuery on DOM elements must be wrapped within the DOM ready function to work correctly (this is why your $('a').click() was failing. Also, normally if you see yourself creating multiple arrays that you never end up using, and still end up referencing each element directly, you're making a lot of wasted effort. I cleaned your code up a bit - take a look:
jQuery(document).ready(function($) {
//variable declaration section.
var contentArray = ['albumArt', 'logoDesign', 'UX', 'other'],
content = {}, newClassName, $selectedArray, i;
for ( i = 0; i < contentArray.length; i++) {
var className = contentArray[i];
content[className] = $('.' + className);
}
//prevent links that are clicked from going anywhere
$("a").click(function(e) {
e.preventDefault();
});
$('.workTypes').click(function() {
if ($(this).is('#centeringDiv a')) return;
$(this).toggleClass('workTypesSelected');
$('.workTypesSelected').not(this).removeClass('workTypesSelected');
$selectedArray = content[$('.workTypesSelected').attr('id')];
$('#galleryDiv').empty();
if ( $selectedArray ) {
// note creates #largeGallery elements dynamically
for ( i = 0; i < $selectedArray.length; i++ ) {
var $selected = $selectedArray.eq(i);
$('<a>').attr({
href: $selected.attr('href'),
title: $selected.attr('title'),
class: "lb_gal"
}).append(
$('<img>').attr({
id: "largeGallery"+i,
src: $selected.attr('href'),
class: "gallery cf"
}).rlightbox()
)
.appendTo('#galleryDiv')
.rlightbox();
}
}
}); // end click handler
}); //end the document ready jquery function​
Recently I am giving another shot to Dashcode ;)
It's great. Is just I think is not well documented.
I have a stackLayout object with only two views in it, and a couple of buttons that interchange the views with a transition.(views show data of a large array, list)
Animations and transitions work perfect. The problem is, when I press a button while animating the animation starts again and it looks ugly (If I had n views for a datasource array of length n this should't be a problem, but this is not my case).
I want to disable buttons while animation is taking place.
Is there any callback, delegate, or any way I can get a notification when the animation is finished?
This is what I have done:
function _changeView(transitionDirection, newIndex){
//Create transition
var newTransition = new Transition(Transition.SWAP_TYPE, 0.9, Transition.EASE_TIMING);
newTransition.direction = transitionDirection;
//I only have two views. I use currentView's id to calculate not current view id and change text inside of it.
var stackLayout = document.getElementById('stackLayout').object;//stackLayout object
var nextViewId = (stackLayout.getCurrentView().id == 'view1')? '2':'1'; //
//change the text in the view that is going to appear
document.getElementById('text'+nextViewId).innerHTML = list[curIndex];
stackLayout.setCurrentViewWithTransition('view'+ nextViewId, newTransition, false);
}
function goPrevious(event)
{
curIndex--;
if(curIndex < 0){
curIndex = list.length-1;
}
_changeView(Transition.LEFT_TO_RIGHT_DIRECTION, curIndex);
}
function goNext(event)
{
curIndex++;
if(curIndex >list.length - 1){
curIndex = 0;
}
_changeView(Transition.RIGHT_TO_LEFT_DIRECTION, curIndex);
}
Eventually found the answer to this. Here's how I did it:
document.getElementById('stackLayout').object.endTransitionCallback=function(stackLayout, oldView, newView) {
//PUT CODE HERE USING stackLayout, oldView, newView to show params
}
In fact you can find all the stackLayout methods and properties in the StackLayout.js file in your project!!
Hope this helps