homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Swipe Show Navigation
dots under show not moving
bsim

5+ Year Member



 
Msg#: 4638045 posted 5:29 am on Jan 17, 2014 (gmt 0)

I thought this was a css issue, but was suggested I post here. I didn't create the js code. My problem:

I am using a swipe show/slide show. The show works, but the "dots" below the show, which should follow as the user swipes don't, it also should follow the images as the slide show progresses. I have not altered the javascript, so am pretty sure this is a css issue.

I have tried adding an "a" tag within the list item, also tried a span with a class "on" <span class="on"></span>. The swipejs code (I did not create) I have used as written, but they have since updated the entire swipeshow, and no response to inquiries.
HTML:
<div class="dots">
<ul id='position'>
<li class='on'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS:
.dots {
margin: 7px auto 0px;
position: relative;
max-width: 680px;
}
.dots a {
color: rgb(205, 205, 205) !important;
font-style: normal;
}
.dots #position {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.dots #position li {
background: rgb(255, 255, 255);
margin: 0px 2px;
border-radius: 10px;
width: 10px;
height: 10px;
display: none;
cursor: pointer;
box-shadow: inset 0px 1px 3px grey, 0px 0px 1px 1px #8b8989;
}
.dots #position li.on {
box-shadow: inset 0px 1px 3px -1px #7EC153, 0px 1px 2px rgba(0, 0, 0, 0.5);
background-color: rgb(126, 193, 83);
}
Test page:
[192.185.168.157 ]

 

GoNC



 
Msg#: 4638045 posted 2:06 am on Jan 31, 2014 (gmt 0)

I can't envision how this is supposed to look, and the test page link you gave is giving me a 404. If you're still needing help, please post a working link, and I'll look at it.

bsim

5+ Year Member



 
Msg#: 4638045 posted 3:09 am on Jan 31, 2014 (gmt 0)

This is a test site - hope it will work on the forum. Am still wrestling with this. Thanks for any help.

[192.185.168.157 ]

GoNC



 
Msg#: 4638045 posted 4:23 am on Jan 31, 2014 (gmt 0)

I'm not familiar with cookie-cutter programs like that, so I can only speak generically.

At around line 245 on the main page, you have these:

<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
// startSlide: 4,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>

Are all of the variables supposed to be commented out? The // in the beginning denotes it as a comment.

bsim

5+ Year Member



 
Msg#: 4638045 posted 4:27 am on Jan 31, 2014 (gmt 0)

I think so - it is what was supplied to copy. It is interfering with the function?

GoNC



 
Msg#: 4638045 posted 9:19 am on Jan 31, 2014 (gmt 0)

I'm really not familiar with the swipe.js program you're using, and it's quite a bit to try to read through manually (which is probably why no one else has replied). But putting the // before every line seems counterproductive; why set the variable values if the line is ignored?

You might try removing the //, just to find out. I'm guessing that it should either be this:

<script>

var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 4,
auto: 3000,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});

</script>

OR this, if you're using jQuery:

<script>
window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>

If that's not it, the other thing that stood out to me is that I couldn't find "dots" or "position" in the swipe.js file, so I'm not sure how these are defined. Are these the ID names that the instruction file gave?

I would have thought that there would be something to make each picture correspond to a dot image; like:

<div id="pic_1"><img src="image_1.jpg"></div>
<div id="dot_1"><img src="dog_1.jpg"></div>

Then, the script could refer to

for (var i=0; i < n; i++) {
document.getElementById('pic_' + i).innerHTML = "something";
document.getElementById('dot_' + i).innerHTML = "something";
}

If you're doing this for the sake of learning, this code might be easier to read and learn:

[javascriptkit.com...]

If this is more than a project, though, and necessary for work, it might be easier to just make it a regular onClick event rather than trying to code a swipe.

bsim

5+ Year Member



 
Msg#: 4638045 posted 12:38 am on Feb 2, 2014 (gmt 0)

You were right it was commented out. I've gotten this (bottom of the page) to show the dots move as the swipe moves. Yes, the dots, and position class and ID are in the css file. Thanks so much for your help!


var bullets = document.getElementById('position').getElementsByTagName('li');
window.mySwipe = Swipe( document.getElementById('mySwipe'), {
callback: function (pos) {

var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';

}
});

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved