Slide??? Need help with some coding!

[alleyesonme]

I was wondering if anyone knew how to do the coding for something similar to this: www.bbspy.co.uk/  for proboards? I would like to have scrolling images (continuous) and when you put your cursor over the image, the text changes. I know it requires html and java-script but I'm awful at it. I've tried googling or even looking at the source code but it didn't work. If someone could help me that would be amazing!! Thanks in advance

[Tumbleweed]

Sept 21, 2015 7:50:20 GMT -8 alleyesonme said:

I was wondering if anyone knew how to do the coding for something similar to this: www.bbspy.co.uk/  for proboards? I would like to have scrolling images (continuous) and when you put your cursor over the image, the text changes. I know it requires html and java-script but I'm awful at it. I've tried googling or even looking at the source code but it didn't work. If someone could help me that would be amazing!! Thanks in advance

This is a pretty simple one using good ole marquee as seen here on my test site: abetteramerica.freeforums.net/page/margquee

Any questions about what anything does, just post back.

<style>
   #my_people_box{
       width:96%;
       height:130px;
       background-color: #ffffff;
       border:1px solid #000000;
       margin:auto;
   }
   #the_people{
       width:100%;
       height:125;
       position:relative;
       margin-top:2px;
   }
   .the_image{
       background-repeat:no-repeat;
       margin-left:2px;
       width:75px;
       height:125px;
       display:inline-block;
   }
.the_name a:link{
        color:#ffffff!important;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
   }
.the_name a:hover{
       color:#ffff00!important;
   }
   .the_name{
       background-color:#000000!important;
       width:75px;
       text-align:center;
       margin:auto;
       font-size:10px;
       position:relative;
       top:100px;
       padding:
       z-index:1000;
   }
</style>

<div id="my_people_box">
   <div id="the_people">
       <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
           
<div class="the_image" style="background-image:url(http://storage.proboards.com/6132784/i/mCCMrcNbCBV7iZmIw0TV.png);">
<div class="the_name"><a href="http://linktoprofile.com">Tumbleweed</a></div>
</div>

<div class="the_image" style="background-image:url(http://storage.proboards.com/6132784/i/hpFYucJgPAlhuoT1JvWV.jpg);">
<div class="the_name"> <a href="http://linktoprofile.com">Name Two</a></div>
</div>          
           
</marquee>        
       
   </div>
</div>

[alleyesonme]

I tried it out and it looks good. The only problem I have is how to make the name change (hover)
and is there any way to have the images load continuously so like the first image appears straight after the last one? Instead of waiting for it all to get off the screen before it starts again (if that makes sense?)

[Tumbleweed]

Sept 21, 2015 19:51:13 GMT -8 alleyesonme said:

I tried it out and it looks good. The only problem I have is how to make the name change (hover)
and is there any way to have the images load continuously so like the first image appears straight after the last one? Instead of waiting for it all to get off the screen before it starts again (if that makes sense?)

Gosh alleyesonme, I'm sorry for wasting your time. I now realize I skimmed your post too fast and missed pertinent information you made a point to include. You'll need a JQuery code for continuous movement and I didn't realize it was actually a name change. Just thought you wanted a different color on-hover.  The code you linked to doesn't move at all for me so when I read "continuous" I simply thought you meant "actually moves automatically". Not sure where my head was when I read your request.

I'll see if I can come up with something but not sure when I'll get at it. Meanwhile, if anyone else wants to jump in, feel free. 

[alleyesonme]

It's all good Tumbleweed
Thank you for offering to help tho <3

[Tiffy-Bean]

Sept 21, 2015 21:02:58 GMT -8 Tumbleweed said:

Sept 21, 2015 19:51:13 GMT -8 alleyesonme said:

I tried it out and it looks good. The only problem I have is how to make the name change (hover)
and is there any way to have the images load continuously so like the first image appears straight after the last one? Instead of waiting for it all to get off the screen before it starts again (if that makes sense?)

Gosh alleyesonme, I'm sorry for wasting your time. I now realize I skimmed your post too fast and missed pertinent information you made a point to include. You'll need a JQuery code for continuous movement and I didn't realize it was actually a name change. Just thought you wanted a different color on-hover.  The code you linked to doesn't move at all for me so when I read "continuous" I simply thought you meant "actually moves automatically". Not sure where my head was when I read your request.

I'll see if I can come up with something but not sure when I'll get at it. Meanwhile, if anyone else wants to jump in, feel free. 

Well if it makes you feel any better Tumbleweed, I ended up using the code you offered. lol.  Using it on the forum linked in my banner for member awards on the Home Page.  However, if someone else does come up with the jquery for continuous scroll, I'd be interested in that too.  

[Tumbleweed]

Sept 22, 2015 1:16:44 GMT -8 Tiffy-Bean said:

Sept 21, 2015 21:02:58 GMT -8 Tumbleweed said:

Gosh alleyesonme, I'm sorry for wasting your time. I now realize I skimmed your post too fast and missed pertinent information you made a point to include. You'll need a JQuery code for continuous movement and I didn't realize it was actually a name change. Just thought you wanted a different color on-hover.  The code you linked to doesn't move at all for me so when I read "continuous" I simply thought you meant "actually moves automatically". Not sure where my head was when I read your request.

I'll see if I can come up with something but not sure when I'll get at it. Meanwhile, if anyone else wants to jump in, feel free. 

Well if it makes you feel any better Tumbleweed, I ended up using the code you offered. lol.  Using it on the forum linked in my banner for member awards on the Home Page.  However, if someone else does come up with the jquery for continuous scroll, I'd be interested in that too.  

Awww, It does make me feel better.

But to both of you,  alleyesonme & Tiffy-Bean, I rarely give up on something and just got started on one that is continuous and has the swapping text. I barely got it going and need to do a lot of customizing yet but you can see it in it's "not very presentable state" here:

putteraroundix.proboards.com/

But fair warning, you'll need to download a file (very trustworthy as it's from Dynamic Drive from a long time contributor) and I can talk you through that. It's a massively long script (actually two with one small) but it loads fast so no big deal there. The css to swap the text is a bit time consuming. I hope to work on it to pretty it up, at some point today but probably late. So there is hope.

[alleyesonme]

Thanks Tumbleweed

It's looking good!!

[Tiffy-Bean]

Sept 22, 2015 5:19:54 GMT -8 Tumbleweed said:

Sept 22, 2015 1:16:44 GMT -8 Tiffy-Bean said:

Well if it makes you feel any better Tumbleweed, I ended up using the code you offered. lol.  Using it on the forum linked in my banner for member awards on the Home Page.  However, if someone else does come up with the jquery for continuous scroll, I'd be interested in that too.  

Awww, It does make me feel better.

But to both of you,  alleyesonme & Tiffy-Bean, I rarely give up on something and just got started on one that is continuous and has the swapping text. I barely got it going and need to do a lot of customizing yet but you can see it in it's "not very presentable state" here:

putteraroundix.proboards.com/

But fair warning, you'll need to download a file (very trustworthy as it's from Dynamic Drive from a long time contributor) and I can talk you through that. It's a massively long script (actually two with one small) but it loads fast so no big deal there. The css to swap the text is a bit time consuming. I hope to work on it to pretty it up, at some point today but probably late. So there is hope.

Awe, I'm adorable in that!  lol.  Well, thank you for looking at it.  I trust you.  Whenever you have something presentable, I'd love to be part of it.  <3 Thank you.

[alleyesonme]

LOL I didn't realise it had our names

[Tumbleweed]

Sept 22, 2015 18:54:20 GMT -8 alleyesonme said:

LOL I didn't realise it had our names

All righty, you guys ready to do this? I think I've got things where you can take over and style how you like. Upfront I want you to know three things.

1. There was an aggravating larger gap where the last image is scrolling and the first image started again. Trying to get the text aligned and the gap so it isn't so noticeable was the biggest pain of all this so I'm sure it will likely be for you too because you will likely be using different sized images.

2. I could have probably pared down the css so you wouldn't have to edit so much but honestly, I'm sick of messing with it. lol

3. There may be some unforeseen bugs that I don't know about since I only have 4 images in there.

Getting started:

1. I put all this in my global header. If you don't like where that puts it for you, I'm sure you can move the html part into your wrapper template so you can put it where you want. I have not tried this though but it shouldn't be an issue.

2. Go to this site: www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Do not copy the first small code in the first box. Don't worry, that is only needed if we are hosting the script elsewhere and the code creators information will be in the script we are putting in our global header in step 3. 

3. Now right below that first box you will see a purple link: crawler.js

Click on it and I always just "save as" to my desktop so I know where the file is and I can easily move to the trash bin when I'm done with it. Once you save it to your desktop, go to your desktop and right click on it and select edit. Very important to select edit and NOT open. This will open up the file with the script. Copy that and paste between script tags:

<script>

Paste the code here

</script>

This code I would advise not to touch.

4. Ignore the second box as I'm giving you my edited version so paste this below that big ole script:

<style>
/*the width needs to be set at least as wide as all the images combined*/
#scroller_wrapper{
width:900px; height:150px;
   margin:auto;background-color:black;    
}
/*this is the div around the text needed for pixel width to center/position text*/
.my_text {
   margin:auto;position:relative;
   top:-36px; width:73px;background-color:#aaaaaa;
   text-align:center;
   font-size:10px;
   }
/*the first image text needed special alignment*/
#my_image1 .my_text{
   margin-left: 7px;    
   }
/*makes the images go in a row*/
#my_image1,#my_image2,
#my_image3,#my_image4{display:inline-block;
}
/*this first image needs slightly different margins*/
#my_image1 img{
   position:relative;top:-10px;
   width:75px;
   height:125px;
   border:4px solid gray;
   padding:2px;
   margin:0px 4px 0px 0px;
}
/*all other image div id's except the first one go here*/
#my_image2 img,#my_image3 img,#my_image4 img{
    position:relative;top:-10px;
   width:75px;
   height:125px;
   border:4px solid gray;
   padding:2px;
   margin:0px 2px 0px 2px;  
}
/*your link color*/
.my_text a{
   color:#0000ff;
   }
/*this hides the current text so the new hover text can appear*/
#my_image1 a:hover span, #my_image2 a:hover span,
#my_image3 a:hover span, #my_image4 a:hover span {
display:none;
}
#my_image1 a:hover:before {content:"Lippy";color:red;}
#my_image2 a:hover:before {content:"Chinky";color:green;}
#my_image3 a:hover:before {content:"Duvort";color:purple;}
#my_image4 a:hover:before {content:"Quabbit";color:cyan;}  
   
</style>
<div id="scroller_wrapper">
<!--*adjust the marqueed div below in the jquery-->
<div class="marquee" id="mycrawler2">
    
<div id="my_image1"><img src="http://storage.proboards.com/3422154/i/HhB4hrruia2Ev0215N1i.png" />
        <div class="my_text"><a href="http://linktoprofile.com"><span>Tumbleweed</span></a></div>
</div>
   
     <div id="my_image2"><img src="http://storage.proboards.com/3422154/i/8NoFOVJixNLYjdq49k1D.jpg" />
         <div class="my_text"><a href="http://linktoprofile.com"><span>Alleyesonme</span></a></div>
    </div>

   
<div id="my_image3"><img src="http://storage.proboards.com/3422154/i/g98WueihI8rPSXveeSDl.png" />
    <div class="my_text"><a href="http://linktoprofile.com"><span>Tiffy-Bean</span></a></div>
    </div>


<div id="my_image4"><img src="http://storage.proboards.com/3422154/i/pWM6hId5Ss3et8B31SpE.png" />
<div class="my_text"><a href="http://linktoprofile.com"><span>Buffie</span></a></div>
</div>

   
</div>
   
</div>
<br /><br />
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '700px',
'height': '180px',
        'margin': 'auto'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>

I tried to label the css so you know what does what but just to touch on a few things regarding the html and css.

This is where you add your new image (blue), link (green) and text (red). Do not remove the span tags around the text as they are needed. Each new image you add must have an unique id. I gave you 4 images so your next one you add should be "my_image5"

<div id="my_image1"><img src="storage.proboards.com/3422154/i/HhB4hrruia2Ev0215N1i.png" />
<div class="my_text"><a href="linktoprofile.com"><span>Tumbleweed</span></a></div>
</div>
 

As I mentioned, the first image and text div needed special positioning for that unruly gap. I put a comment tag by two css parts that is exclusively for that first image: Here you can see I labeled them so watch for that. The gap varies a bit between browsers so an extra pain there too.

/*the first image text needed special alignment*/
#my_image1 .my_text{
margin-left: 7px;
}

Where you see classes like this......

 

#my_image1,#my_image2,
#my_image3,#my_image4{

...every time you add a new image be sure to add that unique@tiffythecodingwhiz div id so the next one would be ,#my_image5 making sure you put a comma between each one with the very last one NOT having a comma after it.

#my_image1,#my_image2,
#my_image3,#my_image4,

#my_image5{

Hopefully, the rest is rather self explanatory but if you get confused about anything, just ask.

Tiffy-Bean, Normally I'd have you post your questions in a separate thread but go ahead and post here, if alleyesonme doesn't mind, and we'll see how it goes. But since this was  Alley's thread, I'll be addressing her issues first and then get to yours asap. 

[alleyesonme]

I'll give it a go now!! Tiffy can use this thread too

[alleyesonme]

I did it in a test forum

bbriseandfall7.freeforums.net/


I need help with:

Is there anyway to have that text box background to be transparent a bit? 
Remove the gaps between images?
The text in general for player 1 is off D:
& is there any way to change the bg colour when you hover instead of the font colour?

Also this is amazing!! Thank you <3

[Tumbleweed]

Sept 23, 2015 0:03:41 GMT -8 alleyesonme said:

I did it in a test forum

bbriseandfall7.freeforums.net/


I need help with:

Is there anyway to have that text box background to be transparent a bit? 
Remove the gaps between images?
The text in general for player 1 is off D:
& is there any way to change the bg colour when you hover instead of the font colour?

Also this is amazing!! Thank you <3

1. Replace the background you have there now with the bold: (It's using rgb and you can convert your hex color to rgb here: www.javascripter.net/faq/hextorgb.htm

the .5 is the opacity. Higher is more opaque and lower is more transparent.

#scroller_wrapper{
width:900px; height:150px;
margin:auto;

background: rgba(54, 25, 25, .5);
}

2. To change the spacing adjust this id and you'll play with the margins.

#my_image1 img{

.......

margin:0px 4px 0px 0px;

And do the same with this id:

#my_image2 img,#my_image3 img,#my_image4 img{

They may have to be different because as I said in my post, getting the last image and the first image having the right gap was a bear and the text too.

3. So the text has it's own adjustment for the first image and that's here:

#my_image1 .my_text{
margin-left: 7px;
}

4. I actually remember after I posted the instructions that I forgot to include that. So find the blue and add the red below it.

.my_text {
margin:auto;position:relative;
top:-36px; width:73px;background-color:#aaaaaa;
text-align:center;
font-size:10px;
}
.my_text:hover {
background-color:red;
}

And it looks like you already edited the text color so if you don't want any color change to the text, just remove the red in each of these:

#my_image1 a:hover:before {content:"Lippy";color:red; }

[alleyesonme]

Thanks so much tumbleweed <3 Ugh trying out the margin and stuff is super annoying lol The images were going every where. I did manage to get them right next to each other but then the text for the first image moved and yea it got messy lols I think I'll stick to what I have for now but thank you so much!!