PDA

View Full Version : Resolved Double slideshow in a table or frames website



pierruel
12-28-2015, 11:27 PM
I'm very interested by the following slideshow: http://www.javascriptkit.com/script/script2/incrementslide.shtml. My project is to have music staves (in .jpg format) appearing on the screen as follows:
one to three staves on the upper half of the screen (upper cell of a table or upper frame of a two-frames system, or another solution) and the same number of (the following) staves in the lower part. Then, when the 1 to 3 upper staves (let's say staves # 1 to 3) have been dispayed for a certain duration (to adjust by experience) and when I begin to play the 1 to 3 staves in the lower part (let's say the staves # 4 to 6), the upper staves are replaced by the staves (let's says staves # 7 to 9) which follow the ones I'm reading in the lower part, and so on.
I know that there are some similar systems on sale (or even free) on the web but almost all are designed for an (expensive)iPad (I've a Windows PC and there are Windows tablets at much reasonable prices, with less functionalities indeed but mine doesn't need to be much sophisticated, it needs only to display music and to be able to enlarge it (because of my low vision)
my question is: how could I adapt the above mentioned app knowing that I can code a bit of HTML but nothing at all in Javascript.
Thank you very much in advance for the necessary patch.
Kind regards
Pierre

Beverleyh
12-29-2015, 08:49 AM
I'm not sure how that slideshow fits in but it's very old. You'd be better off using a more modern, robust script like this http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

As for the layout, again we can't really comment or make suggestion on something we can't see. You would need to give us something to look at (HTML, CSS) to base our assessments on.

If you're asking how to approach the project build, here are some tips;

- use a div-based layout - preferably new HTML5 elements like, nav, header, aside, article, etc. - rather than frames or tables. If you don't know what HTML5 elements you can work with, hit Google.

- apps and websites are different things so make sure you know which one you want to create from the start. Assuming you mean a device-agnostic website, it's usually easier to build from a "mobile first" approach, so there's your next topic to research.

- building for a multitude of devices means that you should also have a solid understanding of "media queries", so look into those and how you can use them to manipulate layout.

- later you can tackle the JavaScript layer, but it might interest you to know that there are native media (<audio> and <video>) elements in HTML5 so you might not need it as much as you think. It depends what you want to do though.

In any case, we can't really advise you further until you give us *your code* so feel free to post back at various stages of your project with your code so far and we can make further suggestions.

Good luck with your project.

pierruel
12-29-2015, 09:58 AM
Many thanks to you, Beverleyh, for your exhaustive answer. If my quoted slideshow is old, my knowledge in HTML are even much older and in Javascript near zero (and my command of English not very much better !). What I understand is that I have a lot of research before I can make a good use of your advices, except perhaps the tips. I'll be learning. Since it will take some time until I'll have something to give you to look at, I prefer not wait more before telling you Happy New Year !
Sincerely yours
Pierre




I'm not sure how that slideshow fits in but it's very old. You'd be better off using a more modern, robust script like this http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

As for the layout, again we can't really comment or make suggestion on something we can't see. You would need to give us something to look at (HTML, CSS) to base our assessments on.

If you're asking how to approach the project build, here are some tips;

- use a div-based layout - preferably new HTML5 elements like, nav, header, aside, article, etc. - rather than frames or tables. If you don't know what HTML5 elements you can work with, hit Google.

- apps and websites are different things so make sure you know which one you want to create from the start. Assuming you mean a device-agnostic website, it's usually easier to build from a "mobile first" approach, so there's your next topic to research.

- building for a multitude of devices means that you should also have a solid understanding of "media queries", so look into those and how you can use them to manipulate layout.

- later you can tackle the JavaScript layer, but it might interest you to know that there are native media (<audio> and <video>) elements in HTML5 so you might not need it as much as you think. It depends what you want to do though.

In any case, we can't really advise you further until you give us *your code* so feel free to post back at various stages of your project with your code so far and we can make further suggestions.

Good luck with your project.

pierruel
12-29-2015, 10:34 AM
Hello again,
I'm sorry but there is a foremost question. My choice of a website structure comes from my ( rather elementary) knowledge of HTML (I would have to upgrade to ver. 5). My project must fit into a windows operated tablet without connection to the web. From that point of view it's not a website. A wanted to use HTML to create a "framework" where I could insert a ready-to-use Javascript code. If it's not possible, I must abandon the idea of building my "thing" by myself and continue browsing the Internet until I find a convenient et unexpensive application.
As far as the fadeinslideshow.htm is concerned, it's functionalities are too sophisticated or not adapted (the fadind for instance) for my project.
Hence the foremost question is: shall I persist on the "do-it-myself" path (I'm too old to learn new developing languages) or not. Probably it's not a question to be asked on a Javascript forum !
Thank you anyhow.
Best regards
Pierre

pierruel
12-29-2015, 11:10 AM
In addition to my last post concerning "Double slideshow on a website", here is my "vintage" code:


<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 28.12.2015 -->
<head>
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[1] = new Image()
slideimages[1].src = "image1.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image2.jpg"
slideimages[3] = new Image() // create new instance of image object
slideimages[3].src = "image3.jpg"
slideimages[4] = new Image()
slideimages[4].src = "image4.jpg"
slideimages[5] = new Image()
slideimages[5].src = "image5.jpg"
slideimages[6] = new Image()
slideimages[6].src ="image6.jpg"
slideimages[7] = new Image()
slideimages[7].src = "image7.jpg"
slideimages[8] = new Image()
slideimages[8].src = "image8.jpg"
slideimages[9] = new Image()
slideimages[9].src = "image9.jpg"
slideimages[10] = new Image()
slideimages[10].src = "image10.jpg"
</script>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
</head>
<body>

<!--<img src="images_up/image1.jpg" border="0" width="1599" height="807" alt="" /> -->

<frameset rows="50%,*">
<frame name="cadre_sup" bordercolor="#050000">
<img src="image1.jpg" id="slide" width=900 height=300 />

<script type="text/javascript">

//variable that will increment through the images
var step_up =0

function slideit_up(){
//if browser does not sdownport the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step_up].src
if (step_up<4)
step_up++
else
step_up=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit_up()",2500)
}


</script>
<!---------------------------------------->
<frame name="cadre_inf" bordercolor="#050000">
<img src="image6.jpg" id="slide" width=900 height=300 />

<script type="text/javascript">

//variable that will increment through the images
var step_down=0

function slideit_down(){
//if browser does not sdownport the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step_down].src
if (step_down<6)
step_down++
else
step_down=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit_down()",2500)
}

slideit_down()

</script>
<noframes>


</body>
</noframes>
</frameset>
</html>



I don't dare to upload 10 pictures. The first of each series (up and down) is charged correctly but they don't change as a slideshow.
Is there a fuiture for this kind of project?
MAny thanks
Regards
Pierre

Beverleyh
12-29-2015, 05:15 PM
My project must fit into a windows operated tablet without connection to the web. From that point of view it's not a websiteAs long as you can connect to the website once, you can still create an HTML5 website that you can use offline later with AppCache. Here's some info on that http://www.sitepoint.com/creating-offline-html5-apps-with-appcache/ basically, you include a manifest in the HTML that lists all the resources that must be downloaded and made available offline, so that the website continues to work without internet connectivity after the initial load.

Yes, you can create your HTML5 framework. Yes, you can include JavaScript and other resources that work as part of/in conjunction with your offline app/site. Yes, you can continue to do it yourself without any fancy software - you just need a web server/hosting space, a bit of HTML5/JavaScript know-how, and time to put it together.

As for your vintage slideshow code, it's a little outdated and the framesets are likely to cause issues in a modern environment. It looks like it's just incrementing through an image array and applying a slide effect? (Can't check as I'm on iPad) A more modern approach would be to include all the images (or placeholder divs) first off on the HTML, initially hide them with CSS, but then sequentially add a class that reveals them using modern CSS3 transition effects. As luck would have it, I have a few freebie scripts and blog posts that might help point you in the right direction;

- simple sweep-in scroller (demo shows multiple instances in one page - images can replace text) http://fofwebdesign.co.uk/template/_testing/sweep-in-news-scroller.php
And the blog post to support it http://www.dynamicdrive.com/forums/entry.php?321-Simple-Sweep-in-News-Scroller-(CSS3-JS)

- auto-play any content slider with controls and swipe support http://fofwebdesign.co.uk/freebies-for-websites/css/slider-rwd-auto-touch-js-swipe.htm
Blogs to support this script (and earlier versions); http://www.dynamicdrive.com/forums/entry.php?317-Add-Swipe-Support-to-your-website-(RWD-CSS3-Any-Content-Slider-demo) and http://www.dynamicdrive.com/forums/entry.php?296-RWD-CSS3-Any-Content-Slider-(JS-auto-play)

- cross-fade slideshow http://fofwebdesign.co.uk/template/_testing/cross-fade-slideshow-js.htm
And it's supporting blog http://www.dynamicdrive.com/forums/entry.php?315-RWD-Cross-Fade-Slideshow-with-Retina-Images

Hope that helps and good luck with your project

pierruel
12-29-2015, 05:39 PM
Dear Beverleyh,
I seem as if I've met a good fairy in this end of year 2015 :)
Many thanks. I'll be busy these days.
Fine end-of-the-year celebrations.
Pierre

Beverleyh
12-29-2015, 05:43 PM
LOL. I don't mind being a fairy as long as I have sparkly wings and a magic wand to summon-up Matthew McConaughey ;)

pierruel
12-30-2015, 10:23 AM
LOL. I don't mind being a fairy as long as I have sparkly wings and a magic wand to summon-up Matthew McConaughey ;)
Good morning ahyhow,
I've done two tests (with that old vintage code), the one (maliseuse2..xhtml = my [music]reader ver 2) where 5 country images appear in turn very well; the other (maliseuse2_rev..xhtml = the same but revised) where the images appear in a 2 cells (1 column) table but don't change.
(the double dot in the filenames are just typing errors).
I did already test with a table reusing twice the same scripts as they are, but without success; this time I used 2 series of scripts where variables and some other elements are ditinguished by adding "up" respectively "down" at the end. But of course since my knowledge in Javascript are neighbouring zero, I probably modified terms which are reserved words of Javascript and/or forgot to modify some others. I'm sorry to show you such an heavy coding but I hadn't time enough to improve until now!
If you think that the "table" solution is a bad one causing the failure of my project, I'll study the way of using <div> elements I never used for images. I join 2 tiny images (10% of their real size) in order that to have more complete files5769.
Thank you again for your advices.
HAve a nice day
Best regards
Pierre

maliseuse2..xhtml :

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 28.12.2015 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>
</head>

<body>
<a href="javascript:gotoshow()"><img src="image1_9x3_10.jpg" name="slide" border=0 width=900 height=300></a>




<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg")
slideshowlinks("D:\2_M_E_S__P_R_O_J_E_T_S\Musique sur tablette\view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

</body>
</html>


maliseuse2_rev..xhtml

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 28.12.2015 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimagesup=new Array()
var slidelinksup=new Array()
function slideshowimagesup(){
for (i=0;i<slideshowimagesup.arguments.length;i++){
slideimagesup[i]=new Image()
slideimagesup[i].src=slideshowimagesup.arguments[i]
}
}

function slideshowlinksup(){
for (i=0;i<slideshowlinksup.arguments.length;i++)
slidelinksup[i]=slideshowlinksup.arguments[i]
}

function gotoshowup(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinksup[whichlink])
else
winslide.location=slidelinksup[whichlink]
winslide.focus()
}

var slideimagesdown=new Array()
var slidelinksdown=new Array()
function slideshowimagesdown(){
for (i=0;i<slideshowimagesup.arguments.length;i++){
slideimagesdown[i]=new Image()
slideimagesdown[i].src=slideshowimagesdown.arguments[i]
}
}

function slideshowlinksdown(){
for (i=0;i<slideshowlinksdown.arguments.length;i++)
slidelinksdown[i]=slideshowlinksdown.arguments[i]
}

function gotoshowdown(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinksdown[whichlink])
else
winslide.location=slidelinksdown[whichlink]
winslide.focus()
}
//-->
</script>
</head>

<body>
<table border=0 summary="">
<tr>
<td><a href="javascript:gotoshowup()"><img src="image1_9x3.jpg" name="slideup" border=0 width=900 height=300></a>




<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimagesup("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg")
slideshowlinksup("D:\2_M_E_S__P_R_O_J_E_T_S\Musique sur tablette\view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeedup=2000

var whichlinkup=0
var whichimageup=0
function slideitup(){
if (!document.images)
return
document.images.slide.src=slideimagesup[whichimageup].src
whichlinkup=whichimageup
if (whichimageup<slideimagesup.length-1)
whichimageup++
else
whichimageup=0
setTimeout("slideitup()",slideshowspeedup)
}
slideitup()

//-->
</script></td>
</tr>
<tr>
<td><a href="javascript:gotoshowdown()"><img src="image1_9x3.jpg" name="slidedown" border=0 width=900 height=300></a>




<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimagesdown("image1down.jpg","image2down.jpg","image3down.jpg","image4down.jpg","image5down.jpg")
slideshowlinksdown("D:\2_M_E_S__P_R_O_J_E_T_S\Musique sur tablette\view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeeddown=2000

var whichlinkdown=0
var whichimagedown=0
function slideitdown(){
if (!document.images)
return
document.images.slide.src=slideimagesdown[whichimagedown].src
whichlinkdown=whichimagedown
if (whichimagedown<slideimagesdown.length-1)
whichimageudown++
else
whichimagedown=0
setTimeout("slideitdown()",slideshowspeeddown)
}
slideitdown()
</script></td>
</tr>

</table>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

</body>
</html>

pierruel
12-30-2015, 10:26 AM
P.S. I adore your description of me: Junior coders" as I'm almost 82 years old ;o)
Regards
P.

pierruel
01-05-2016, 07:16 AM
Good morning and happy new year,
Since my last post I've some attemps to use a more modern code (the one you gave me a link to).
It needs some comments.
- My music staves musn't fade into each other and I set the fade duration to 1 ms (with 0 I think nothing works)
- I was beyond my weak abilities to use calls to web stocked files nor the "manifest" feature.
- consequently I pasted all external code into the page, which gives huge pages, especially with the double
"music mill" where I pasted the very long .js script twice !
- I'm hesitating to paste my tests here because of their weight but you need it you said.
- the first one with a single slideshow in the upper middle of the screen works very well (in Firefox at least), the double one doesn't and I didn't find out why.
Here's the stuff:

single slideshow
[CODE]<!DOCTYPE html>

Huh, when I sent taht with the webpages incorporated, I got an error message: my text is about 6 times too long !
I'll try to correct it myself.
Best regards
Pierre

Beverleyh
01-05-2016, 08:58 AM
I've some attemps to use a more modern code (the one you gave me a link to).Which code have you used?


My music staves musn't fade into each other and I set the fade duration to 1 ms (with 0 I think nothing works)OK, but if the images do not fade in to each other, how should they fade? Into a solid colour? Or would it be easier if they didn't fade at all?


consequently I pasted all external code into the page, which gives huge pages, especially with the double "music mill" where I pasted the very long .js script twice !I'm not sure I follow because you said you've used some of the code I linked to, but I don't recall any of it being particularly long. The Simple Sweep-In News Scroller script (http://fofwebdesign.co.uk/template/_testing/sweep-in-news-scroller.php) was even turned into a function so that it could be used multiple times very easily and concisely. I've a feeling you currently aren't seeing the wood for the trees, so here's a more basic demo; this time without any transition effects: https://jsbin.com/qavakiwume/1/edit?html,css,js,output


I'm hesitating to paste my tests here because of their weight but you need it you saidNo need - a link to a live page will be fine. If you don't yet have your own web space, you can use one of the following free services;

- http://jsbin.com/ (used in the demo above - my personal preference)
- https://jsfiddle.net/
- http://codepen.io/pen/

If you post a link, somebody will be able to take a look. We only really need the pertinent code so just the HTML, CSS and JS that you're having problems with. Unfortunately, lots of code will put people off so my advice it to try to keep it lean - maybe break down the web pages into smaller chunks.

Alternatively, if there is a lot of code to work through, and you need dedicated assistance on the project as a whole, you can hire somebody via the General Paid Work Requests Forum: http://www.dynamicdrive.com/forums/forumdisplay.php?30-General-Paid-Work-Requests

pierruel
01-05-2016, 02:28 PM
Good afternoon Beverleys,
Many thanks. You are right about woods and trees. The more complicated, tricky, misty and inefficient a solution is, the more I'm attracted !


Which code have you used?

the ones at this URL:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm


OK, but if the images do not fade in to each other, how should they fade? Into a solid colour? Or would it be easier if they didn't fade at all?

They need no fading at all, all right !


I'm not sure I follow because you said you've used some of the code I linked to, but I don't recall any of it being particularly long.
it's the file fadeslideshow.js


The Simple Sweep-In News Scroller script (http://fofwebdesign.co.uk/template/_testing/sweep-in-news-scroller.php) was even turned into a function so that it could be used multiple times very easily and concisely. I've a feeling you currently aren't seeing the wood for the trees, so here's a more basic demo; this time without any transition effects: https://jsbin.com/qavakiwume/1/edit?html,css,js,output


About simple solutions, last example: in order to quote your words I introduce first the
tags and then I copy/paste your text inbetween !!

As I wrote this morning, the code I arranged for one single slideshow works and before I rebuild the whole music-mill from scratch with new codes I'll change mine. The problem is not about the text files, but about the images. I did build my test with the flute sonata by Prokofieff, i.e. 16 (heavy) pictures.- I'll reduce their weight and make my demo with only 2 or 3. And then you'll see if I can have two slideshows running simultaneously on my screen.
The idea is that there is two 2-staves pictures, each in one <div>, on the screen and when I finish playing the first two staves and continue with the third one, the above half of the screen changes for the next 2 staves. In that music one staff takes about 8 seconds to be played.

As far as coding is concerned this post isn't very interesting but I wouldn't let yours too long unanswered.


No need - a link to a live page will be fine. If you don't yet have your own web space, you can use one of the following free services;

- http://jsbin.com/ (used in the demo above - my personal preference)
- https://jsfiddle.net/
- http://codepen.io/pen/

If you post a link, somebody will be able to take a look. We only really need the pertinent code so just the HTML, CSS and JS that you're having problems with. Unfortunately, lots of code will put people off so my advice it to try to keep it lean - maybe break down the web pages into smaller chunks.

Alternatively, if there is a lot of code to work through, and you need dedicated assistance on the project as a whole, you can hire somebody via the General Paid Work Requests Forum: http://www.dynamicdrive.com/forums/forumdisplay.php?30-General-Paid-Work-Requests
Thank you for the suggestions, I'll be even more busy than before.
With Junior's regards
Pierre

pierruel
01-05-2016, 03:30 PM
Good afternoon Beverleys,
I wasn't able to register at any of the repositories you mentioned because of my poor vision.
Nowadays webmasters think that it's modern to display light grey writing on a very light grey background but it's unreadable for me. And the contrast options of Windows screen settings happen, on websites, to display black writing on a black background :mad:
Since I can't use a bin, I'll be sending my garbage in three different dustbags.
Here the first one with two images:
5779
5780

<!DOCTYPE html>
<html manifest="moncache.manifest">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>moulin_a_musique</title>
<meta content="author" name="Pierre">
<!-- Script à mettre dans le HEAD -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#show_proko94 .gallerylayer img{ /* make all images inside show_proko94 scale to 100% of slideshow width */
width: 100%;
height: auto;
}
</style> </head>
<body>
<div id="show_proko94"> </div>
<div id="show_proko94toggler" =""="" style="width:50%; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://www.dynamicdrive.com/dynamicindex14/left.png"

style="border-width:0"></a> <span class="status" style="margin:0 50px; font-weight:bold"></span>
<a href="#" class="next"><img src="http://www.dynamicdrive.com/dynamicindex14/right.png"

style="border-width:0"></a> </div>
<script>
/* Ultimate Fade-in slideshow (v2.6)
* Last updated: May 24th, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
//June 22nd, 14' (v2.6): 1) Slideshow now responsive, supporting percentage values in the dimensions[w, h] option. 2) Swipe to navigate added on both desktop and mobile devices.
//June 22nd, 14' (v2.6.1): Enabled vertical swiping inside slideshow to scroll page

var fadeSlideShow_descpanel={
controls: [['x.png', 8, 8], ['restore.png', 14, 15.5], ['loading.gif', 54, 55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(settingarg){
this.setting=settingarg
settingarg=null
var setting=this.setting
setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
setting.isflexible = /\%/.test(setting.dimensions[0]) || /\%/.test(setting.dimensions[1]) // test if one of slideshow dimension sides is a percentage value
setting.oninit=setting.oninit || function(){}
setting.onslide=setting.onslide || function(){}
if (setting.displaymode.randomize) //randomly shuffle order of images?
setting.imagearray.sort(function() {return 0.5 - Math.random()})
var preloadimages=[] //preload images
setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
for (var i=0; i<setting.imagearray.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=setting.imagearray[i][0]
if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
setting.longestdesc=setting.imagearray[i][3]
}
var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
var slideshow=this
jQuery(document).ready(function($){ //fire on DOM ready
var setting=slideshow.setting
var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
setting.dimensions = [ // get dimensions of slideshow in pixels
setting.$wrapperdiv.outerWidth(),
setting.$wrapperdiv.outerHeight()
]
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
.appendTo(setting.$wrapperdiv)
var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
.appendTo(setting.$wrapperdiv)
var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
fadeSlideShow.routines.adddescpanel($, setting)
if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
setting.$descinner.click(function(e){ //asign click behavior to "close" icon
if (e.target.className=="close"){
slideshow.showhidedescpanel('hide')
}
})
setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
slideshow.showhidedescpanel('show')
$(this).css({visibility:'hidden'})
})
}
else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
}
}
setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})



Pardon for losing my temper.
2/3 will follow.
Afternoon's regards
Pierre

pierruel
01-05-2016, 03:34 PM
Hello again,
Again two pictures and one second third of the page:

if (setting.$wrapperdiv.swipe){ // if swipe enabled (swipe function exists)
var swipeOptions={ // swipe object variables
triggerOnTouchEnd : true,
triggerOnTouchLeave : true,
threshold: 75,
allowPageScroll: 'vertical',
excludedElements:[]
}

swipeOptions.swipeStatus = function(event, phase, direction, distance){
var evtparent = event.target.parentNode // check parent element of target image
if (phase == 'start' && evtparent.tagName == 'A'){ // cancel A action when finger makes contact with element
evtparent.onclick = function(){
return false
}
}
if (phase == 'cancel' && evtparent.tagName == 'A'){ // if swipe action canceled (so no proper swipe), enable A action
evtparent.onclick = function(){
return true
}
}
if (phase == 'end'){
var navkeyword = /(right)/i.test(direction)? 'prev' : 'next'
if ( /(left)|(right)/i.test(direction) )
slideshow.navigate(navkeyword)
}
}

setting.$wrapperdiv.swipe(swipeOptions)
} // end setting.$wrapperdiv.swipe check

if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
$loadingimg.hide()
slideshow.paginateinit($)
$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
}
setting.oninit.call(slideshow) //trigger oninit() event

$(window).bind('resize', function(){ // when window is resized, reposition description panel and images
var slideshowdimensions = [
setting.$wrapperdiv.outerWidth(),
setting.$wrapperdiv.outerHeight()
]
if (slideshowdimensions[0] == setting.dimensions[0] && slideshowdimensions[1] == setting.dimensions[1]){ // if no change in image dimensions, just exit
return
}

setting.dimensions = slideshowdimensions // refresh image dimensions data
if (setting.$descpanel && setting.$descpanel.length == 1){ // if description panel enabled for slideshow
setting.$descpanel
.find('div')
.css({width:setting.$descpanel.width()-8})
.eq(2) // reference hidden description panel (used to calculate height of longest message
.css({height:'auto', background:'blue'}).html(setting.closebutton + setting.longestdesc).end() // populate hidden DIV with longest message
setting.panelheight = setting.$descpanel.find('div').eq(2).outerHeight() // then get height of that DIV
setting.$descpanel.css({height: setting.panelheight}) // reset main description panel height
if (!setting.$restorebutton || (setting.$restorebutton && setting.$restorebutton.css('visibility') == 'hidden')){ // if panel doesn't contain restore button (meaning it should always be repositioned onresize), or there is restore button and it's currenty hidden (meaning panel is currently not minimized)
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
}
}
var $slideimage=setting.$gallerylayers.eq(setting.fglayer).find('img').eq(setting.curimage)
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
})
$(window).bind('unload', function(){ //clean up and persist
if (slideshow.setting.persist) //remember last shown image's index
fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
jQuery.each(slideshow.setting, function(k){
if (slideshow.setting[k] instanceof Array){
for (var i=0; i<slideshow.setting[k].length; i++){
if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
slideshow.setting[k][i].innerHTML=null
slideshow.setting[k][i]=null
}
}
})
slideshow=slideshow.setting=null
})
})
}

fadeSlideShow.prototype={

navigate:function(keyword){
var setting=this.setting
clearTimeout(setting.playtimer)
if (setting.displaymode.type=="auto"){ //in auto mode
setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
setting.displaymode.wraparound=true //set wraparound option to true
}
if (!isNaN(parseInt(keyword))){ //go to specific slide?
this.showslide(parseInt(keyword))
}
else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
this.showslide(keyword.toLowerCase())
}
},

showslide:function(keyword){
var slideshow=this
var setting=slideshow.setting
if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
return
}
var totalimages=setting.imagearray.length
var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
slideshow.showhidedescpanel('hide', 0) //and hide it immediately
}
setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
clearTimeout(setting.playtimer)
try{
setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
}catch(e){

5781
5782

Second delivery done !
Best regards
Pierre

pierruel
01-05-2016, 03:43 PM
I'ts me again,
With the end of the stuff.

alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
}
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
slideshow.showhidedescpanel('show')
setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
}
setting.currentstep+=1
if (setting.displaymode.type=="auto"){
if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
}
}) //end callback function
setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
setting.fglayer=setting.bglayer
setting.bglayer=(setting.bglayer==0)? 1 : 0
setting.curimage=imgindex
if (setting.$descpanel){
setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
if (setting.imagearray[imgindex][3]) //if this slide contains a description
setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
}
if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
this.paginatecontrol()
}
if (setting.$status) //if status container defined
setting.$status.html(setting.curimage+1 + "/" + totalimages)
},

showhidedescpanel:function(state, animateduration){
var setting=this.setting
var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
if (setting.descreveal=="always" && state=="hide")
setting.$restorebutton.css({visibility:'visible'}) //show restore button
})
},

paginateinit:function($){
var slideshow=this
var setting=this.setting
if (setting.togglerid){ //if toggler div defined
setting.$togglerdiv=$("#"+setting.togglerid)
setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
var $target=$(this)
slideshow.navigate($target.data('action'))
e.preventDefault()
})
setting.$status=setting.$togglerdiv.find('.status')
}
},

paginatecontrol:function(){
var setting=this.setting
setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
}
}


}

fadeSlideShow.routines={

getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},

getFullHTML:function(imagearray){
var preloadhtml=''
for (var i=0; i<imagearray.length; i++)
preloadhtml+=this.getSlideHTML(imagearray[i])
return preloadhtml
},

adddescpanel:function($, setting){
setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('<div class="descpanelbg"></div><div class="descpanelfg"></div><div class="descpanelhidden"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.eq(2).css({visibility: 'hidden', zIndex: -1}).html(setting.closebutton + setting.longestdesc).end() //"descpanelhidden" hidden div to re-get height of panel after populating it with text
.appendTo(setting.$descpanel)
setting.$descinner=setting.$descpanel.find('div.descpanelfg')
setting.panelheight=setting.$descinner.outerHeight()
setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
if (setting.descreveal=="always"){ //create restore button
setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
.appendTo(setting.$wrapperdiv)


}
},


getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
}


/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script> <script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "show_proko94", //ID of blank DIV on page to house Slideshow
dimensions: [800, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [

["../img_proko/prok94_1.jpg"],
["../img_proko/prok94_2.jpg"],
["../img_proko//prok94_3.jpg"],
["../img_proko/prok94_4.jpg"]
//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:8500, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})
</script>
</body>
</html>


I'm sure there is a lot of lines that could be deleted but I'm not able to choose which ones.
If you're tired of my heaps of posts I'll examine hiring a paying collaboration. Don't hesitate to tell me, and don't forget that there is a second, even more monumental, project in preparation.
Very thankfully
Pierre

Beverleyh
01-05-2016, 04:11 PM
To be honest, I'm having a hard time understanding what you ultimately want to achieve and until I fully understand that, I cannot give any further advice.

Ignoring everything suggested so far, is this the desired behaviour (slides on the right)? https://jsbin.com/ruherinepu/1/edit?html,css,js,output

pierruel
01-05-2016, 08:56 PM
Godd evening Beverleys,
When I read this

To be honest, I'm having a hard time understanding what you ultimately want to achieve]
I am really ashamed and very sorry :-(

and until I fully understand that, I cannot give any further advice.
I understand very well, and you gave me already so many ! Surely I didn't yet explain clearly.


Ignoring everything suggested so far,
Do you mean that I ignored what you suggested since you answered my first demand ? The problem is my own difficulty to cope with such a new matter like javascript and a little advanced use of HTML.

is this the desired behaviour (slides on the right)? https://jsbin.com/ruherinepu/1/edit?html,css,js,output
That demo is rather similar, but much more simple.
I think the better way to explain is to send you sort of fake screenshots of what should appear on the screen.
5783
5784
5785

The aim of all that is as follows: I'm an amateur musician (and do not wish to stop) but my vision is no more good enough and I need a mean to enlarge the notes with a strong contrast and scrolling through musical works without using my hands.
I tried the classic way on enlarging sheetmusic on a photocopier but you must cut A3 pages in two (entire A3 sheets will easily fall from the music stand) and you must turn pages twice as often as usually, and of course frequently when you can't have one hand free to do it.
There are some commercial applications on the web and I saw professional musicians reading the notes on a tablet but the remaining problem is the enlargement.
The biggest problem is about the behaviour and at that point I'll probably have to find a remunerated collaborator. Anyhow I would have agreed to pay for an existing application if adequate, but I didn't find yet.
I can fix the difference of duration at the beginning (see screenshots 1 and 2) by making a first img of the title and then by putting always 2 pictures with two staves together; it will make the alternation more simple, but
1. There are never exactly the same number of bars (measures) on one screen, so the duration of each configuration must be different. I must make a non-automatic slideshow and add a command system with a USB or WiFi or bluetooth pedal (A flute player needs both hands to make music).
2. When working on a piece of music, in collective rehearsal or practicing alone, its necessary to have a command that drives the slideshow quickly backward to a certain place.
3. To benefit from the dimensions of a great tablet (small ones give no enlargement advantage) the size of the <div> must be in percentage (which I can fix by myself).
As I told you, I would understand very well if you prefer not beeing more involved in such a mad project and please feel free to tell me. I think you gave me already links to a section with people helping againt money. I haven't a lot of, but lets know the price first.
Anyhow I thank you for your help and encouragement.
Grateful regards
Pierre

Beverleyh
01-05-2016, 09:29 PM
Unfortunately I am only a volunteer here - you see, I am already employed full-time as a website technician by local government, and occasionally freelance around work on personal projects (such as Fast Edit linked in my signature), while also volunteering for a charitable organisation, plus family life on top, so I am unable to commit to anything else. I can only offer sporadic help here when free time permits. The Christmas break from my day-job has allowed me to visit here more often in the last two weeks, but now that work has started again, my time here will become more limited. I'm sorry I cannot offer an ongoing commitment but wish you good luck with your project.

pierruel
01-05-2016, 11:03 PM
Thank you for devoting you all these days instead of enjoying your free time !
I acted as a volunteer too, one entire year a gorgeous part-time for a political party and I'm happy to have achieved the job that was assigned to me and to have taken one step back.
So I understand your decision very well and will visit the (section of) the website you have mentioned.
I wish you full success and reward in your various activities.
Best regards
Pierre

styxlawyer
01-06-2016, 09:57 AM
Pierre,

I think you are making this much more complicated than it needs to be. I have combined all your images into a single image. Then I made a simple page with about 20 lines of JavaScript which works fine. It's very basic but gives you the idea. Just copy the HTML and image files to your own computer and you can try it out. It runs very fast for testing but you can easily see where to change the speed and step size.

See here (http://johnfromarran.org.uk/ddStuff/musicScroller/).

Have fun.

pierruel
01-06-2016, 10:41 AM
styxlawyer,
Thank you for revitalising this thread. I got the code by doing "Look at the source code of the page" and a copy-paste but I don't khow how to get the image you composed.
You are right when you think that I use to make things complicated but playing music is perhaps not as simple as you think.
When I play that piece of music (or another one), while I'm "blowing" the notes of one bar, my eyes are already reading the notes of one or two of the folllowing bars. If one view of the piece disappear suddenly to give place to the following, I seem to be falling in a hole because I don't know what I have to "blow" after the last bar of the first imge.
But it is even more complicated. I needed more than one full A4 page to explain to your colleagues of the paid help forum and you've probably not enough time to read such a long theory.
Thank you anyhow for the proposal and in advance for the mage; perhaps is it possible to adapt your project to my real needs.
Best regards
Pierre

styxlawyer
01-06-2016, 12:53 PM
Open the page, right click on the image and choose "Save image as". It needs to be in the same directory as the HTML file.

This is a very basic demo, but could easily be improved by adding simple control of the speed and step size.

Ripsaw
01-10-2016, 06:24 PM
Unfortunately I am only a volunteer here - you see, I am already employed full-time as a website technician by local government, and occasionally freelance around work on personal projects (such as Fast Edit linked in my signature), while also volunteering for a charitable organisation, plus family life on top, so I am unable to commit to anything else. I can only offer sporadic help here when free time permits. The Christmas break from my day-job has allowed me to visit here more often in the last two weeks, but now that work has started again, my time here will become more limited. I'm sorry I cannot offer an ongoing commitment but wish you good luck with your project.I have to thank you too Beverlyh. I had no idea that you are a volunteer; You have been so giving of your time and expertise. Your generosity is rare and I feel very blessed to have been helped by you in spite of your busy schedule. I'm also very thankful for your assistance and have continued to find indirect help from several of your recent discussions, this being (another) one of them. :D

Beverleyh
01-10-2016, 07:50 PM
No problem. I help because I enjoy being part of this community and I also enjoy my work. This website helped inspire me to make a career move in to web development so I'm just trying to give back :)

pierruel
01-11-2016, 06:26 PM
Hi Ripsaw,
I didn't know that you were interested in this thread. I read your last post and regret that my English is so poor. May I make mine your thanking words towards Beverleys, I would like beeing able to write like that myself.
Je vous suis très reconnaissant de votre assistance et de votre patience, Beverleys, et forme des voeux sincères pour le succès de votre carrière.
Pierre

pierruel
01-21-2016, 07:02 AM
Good morning Beverleys,
I would like to mark this thread as solved but I don't see the link or button to do it. Can you tell me. Thank you
Best regards
Pierre

Beverleyh
01-21-2016, 08:06 AM
To mark your thread as Resolved, go to the first post within your thread > "Edit" > "Go Advanced" > select "Resolved" against "No Prefix" > "Save".

pierruel
01-21-2016, 01:02 PM
I'm absolutely sorry but on and around the first post of this thread I don't see any "Edit" button or menu's item, perhaps because of my poor vision. I clicked on the "Go Advanced" link below this Quick Reply frame but I got to an Advanced Search page. May I ask you to mark this thread Resolved" yourself ? It's not regular but I'm not able to do it myself.
Thank you
Pierre

Beverleyh
01-21-2016, 01:13 PM
I've marked the thread as Resolved on your behalf.

pierruel
01-25-2016, 09:27 AM
Thank you very much Beverleyh
Best wishes
Pierre