Internet navigation with 2 olecontrols
this is a custom navigation for a desktop application.
in the first navigator(olecontrol1),a web slider desserves a main menu with 10 web images.in each image there is a main menu (images1-10).
the slider is free and from the web site : imageslidermaker.com/v2/ism/js/.
its scrollable and with thumbnails.
can customize the 10 menu headers as your taste.
each clickable main menu fires a sub menu in a vfp grid(with customizable items)....can be a combo or listbox.
each submenu clicked fires a link in a second navigator (shell.explorer.2 class).
A cycling web image with a timer (10sec) shows cool sahara images at the form top right.
the code uses the ingenious "Beforenavigate" method to redirect the url to vfp namespace.
the second navigator is accompagned with navigation button (back,home and forward).
it can access to a custom fullscreen mode (clickable red shape).dblclick to restore the form .
the form titlebar can be visible or hidden (green shape).
can exit from the 3th shape or from form system button close.
Can type a web link in the textbox and valid to show any web page.
Note:
-for avoiding broken link library ,can download the file http://imageslidermaker.com/ism/js/ism-2.2.min.js and save it as ism/js/ism-2.2.min.js in the source folder (tweak line code also)
-can make your custom slider from the author site: imageslidermaker.com/v2/ism/js/
-can use also radio button instead thumnails (but the js file changes).
-this app is designed for a 32 pouces screen.
-majority of images are directly grabbed from the web (can customize).
-the 2 olecontrols are derived from IE11 (mandatory with emulation as meta tag in form init).
-note the CSS file is integrated directly in the form init with styles tags.
-Added a windows mediaplayer object to play any audio file or url.
-Added a clock with time&date.
-Added a desktop shortcut with custom icon for lauching the exe application.
*of course internet must be connected and some fast.
Note: olecontrols must be as IE11 emulation (see previous posts to set this in registry).here its in the meta tag in form init.
urls are simply for decorating the app can customize it.
[post 237]
Click on code to select [then copy] -click outside to deselect
*1* created on saturday 14 of october 2017
*name mandatory this code as yslider_post.prg (its used in code *2* to build an exe)
*for avoiding broken link library ,can download the file http://imageslidermaker.com/ism/js/ism-2.2.min.js and save it as ism/js/ism-2.2.min.js in the source folder
clea all
if !_vfp.startmode=0
on shutdown quit
endi
set date french
set century on
local m.myv
text to m.myv noshow
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
endtext
publi m.yrep
m.yrep=addbs(justpath(sys(16,1)))
set defa to (yrep)
publi yform
yform=newObject("yslider")
yform.show
read events
retu
*
DEFINE CLASS yslider AS form
BorderStyle = 0
Height = 651
Width = 1464
ShowWindow = 2
DoCreate = .T.
ShowTips = .T.
AutoCenter = .T.
Caption = ""
Name = "Form1"
ADD OBJECT image1 AS image WITH ;
Anchor = 256, ;
Stretch = 2, ;
Height = 130, ;
Left = 1092, ;
MousePointer = 15, ;
Top = 5, ;
Width = 372, ;
ToolTipText = "Summary help", ;
Name = "Image1"
ADD OBJECT olecontrol2 AS olecontrol WITH ;
oleclass="shell.explorer.2",;
Top = 280, ;
Left = 1, ;
Height = 427, ;
Width = 1464, ;
Anchor = 15, ;
Name = "Olecontrol2"
ADD OBJECT olecontrol1 AS olecontrol WITH ;
oleclass="shell.explorer.2",;
Top = 0, ;
Left = 0, ;
Height = 268, ;
Width = 1044, ;
Anchor = 15, ;
Name = "Olecontrol1"
ADD OBJECT grid1 AS grid WITH ;
FontBold = .T., ;
FontSize = 9, ;
Anchor = 256, ;
DeleteMark = .F., ;
GridLines = 0, ;
HeaderHeight = 18, ;
Height = 91, ;
Left = 1092, ;
MousePointer = 15, ;
RecordMark = .F., ;
RowHeight = 18, ;
ScrollBars = 2, ;
Top = 140, ;
Width = 372, ;
Name = "Grid1"
ADD OBJECT text1 AS textbox WITH ;
FontBold = .T., ;
Anchor = 256, ;
Alignment = 0, ;
Height = 24, ;
Left = 1092, ;
Top = 231, ;
Width = 368, ;
Name = "Text1"
ADD OBJECT image2 AS image WITH ;
Anchor = 256, ;
PictureVal = strconv(m.myv,14), ;
BackStyle = 0, ;
Height = 32, ;
Left = 1323-50, ;
Top = 73, ;
Visible = .F., ;
Width = 32, ;
Name = "Image2"
ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontName = "Webdings", ;
FontSize = 16, ;
Anchor = 256, ;
BackStyle = 0, ;
Caption = "7", ;
Height = 26, ;
Left = 1303+20, ;
MousePointer = 15, ;
Top = 255, ;
Width = 23, ;
ForeColor = RGB(128,0,64), ;
ToolTipText = "Back", ;
Name = "Label1"
ADD OBJECT label3 AS label WITH ;
AutoSize = .T., ;
FontName = "Webdings", ;
FontSize = 16, ;
Anchor = 256, ;
BackStyle = 0, ;
Caption = "1", ;
Height = 26, ;
Left = 1332+20, ;
MousePointer = 15, ;
Top = 255, ;
Width = 23, ;
ForeColor = RGB(128,0,64), ;
ToolTipText = "Home", ;
Name = "Label3"
ADD OBJECT label2 AS label WITH ;
AutoSize = .T., ;
FontName = "Webdings", ;
FontSize = 16, ;
Anchor = 256, ;
BackStyle = 0, ;
Caption = "8", ;
Height = 26, ;
Left = 1364+20, ;
MousePointer = 15, ;
Top = 255, ;
Width = 23, ;
ForeColor = RGB(128,0,64), ;
ToolTipText = "Forward", ;
Name = "Label2"
ADD OBJECT shape1 AS shape WITH ;
anchor=256,;
Top = 257, ;
Left = 1205+40+20, ;
Height = 13, ;
Width = 13, ;
Anchor = 256, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Fullscreen", ;
BackColor = RGB(255,0,0), ;
Name = "Shape1"
ADD OBJECT shape2 AS shape WITH ;
anchor=256,;
Top = 257, ;
Left = 1232+40+10, ;
Height = 13, ;
Width = 13, ;
Anchor = 256, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Titlebar off/on", ;
BackColor = RGB(0,255,0), ;
Name = "Shape2"
ADD OBJECT shape3 AS shape WITH ;
anchor=256,;
Top = 257, ;
Left = 1257+40, ;
Height = 13, ;
Width = 13, ;
Anchor = 256, ;
Curvature = 99, ;
MousePointer = 15, ;
ToolTipText = "Exit", ;
BackColor = RGB(255,128,0), ;
Name = "Shape3"
ADD OBJECT timer1 AS timer WITH ;
Top = 12, ;
Left = 1364+30, ;
Height = 23, ;
Width = 23, ;
Enabled = .F., ;
Interval = 10000, ;
Name = "Timer1"
ADD OBJECT yclock1 AS yclock WITH ;
left= 1364+50 ,;
top= 255+5 ,;
name="yclock1"
ADD OBJECT ywmp1 AS ywmp WITH ;
left= 1205-90+40 -60,;
top= 255-2 ,;
name="ywmp1"
PROCEDURE my
LPARAMETERS nButton, nShift, nXCoord, nYCoord
* aevent create an array laEvents
Aevents( myArray, 0)
* reference the calling object
loObject = myArray[1]
local m.xurl
m.xurl=allt(loObject.value )
wait window allt(m.xURl) at srow()/2,scol()/2 timeout 1
if ! empty(m.xURL)
thisform.image2.visible=.t.
thisform.text1.value=m.xUrl
thisform.olecontrol2.navigate(m.xURL)
endi
ENDPROC
Procedure text1.rightClick
this.value=_cliptext
endproc
PROCEDURE yreq
lparameters xobj,xpict
try
Local loRequest
m.loRequest = Createobject('MsXml2.XmlHttp')
m.loRequest.Open("GET",xpict,.F.)
m.loRequest.Send()
xobj.PictureVal=m.loRequest.ResponseBody
m.loRequest=Null
catch
endtry
ENDPROC
PROCEDURE Destroy
m.yrep=null
release m.yrep
m.WMP1=null
release m.WMP
clea events
ENDPROC
PROCEDURE Init
set safe off
local m.myvar
text to m.myvar TEXTMERGE noshow
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Your slider in a simple web page</title>
<style>
body { background-color: #000; padding: 0; margin: 0;
background-image:url('https://media.giphy.com/media/rXHKRU96pSJNe/giphy.gif') ;
}
.container { width: 900px; margin: auto; padding-top: 1em; }
.container .ism-slider { margin-left: auto; margin-right: auto; }
</style>
<style>
.ism-slider > ol,
.ism-slider > ol > li,
.ism-slider > ol > li > img {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.ism-slider {
overflow: hidden;
position: relative;
padding: 0 !important;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
-webkit-animation: ism-fadein 3s;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
@-webkit-keyframes ism-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes ism-loading {
50% {
left: 120px;
}
}
.ism-slider .ism-slides {
list-style: none;
position: absolute;
height: 100%;
top: 0;
padding: 0 !important;
margin-top: 0;
margin-bottom: 0;
z-index: 1;
}
.ism-slider li.ism-slide {
height: 100%;
overflow: hidden;
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: 0 !important;
padding: 0 !important;
background-color: #d5d5d5;
text-align: center;
}
.ism-slider .ism-img-frame {
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.ism-slider a.ism-image-link {
position: absolute;
color: inherit;
text-decoration: none;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ism-slider .ism-img {
display: block;
border: none;
position: absolute;
pointer-events: none;
}
.ism-button,
.ism-pause-button {
position: absolute;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
outline: none;
text-align: center;
z-index: 6;
cursor: pointer;
padding: 0;
background-repeat: no-repeat;
background-position: center center;
}
.ism-pause-button {
display: none;
left: 50%;
}
.ism-slider:hover .ism-pause-button {
display: block;
}
.ism-caption {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 1em;
text-shadow: none;
line-height: 1.2em;
padding: 0.25em 0.5em;
width: auto;
height: auto;
text-align: center;
visibility: hidden;
}
a.ism-image-link .ism-caption,
a.ism-caption {
text-decoration: none;
font-weight: normal;
}
a.ism-caption:hover {
text-decoration: underline;
}
.ism-caption-0 {
z-index: 3;
}
.ism-caption-1 {
z-index: 4;
}
.ism-caption-2 {
z-index: 5;
}
.ism-radios {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
font-size: 1px;
}
.ism-slider .ism-radios {
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 6;
bottom: 5px;
left: 0;
right: 0;
width: auto;
background-color: rgba(255, 255, 255, 0.0);
padding: 0 7px;
height: 0;
overflow: visible;
}
.ism-slider .ism-radios.ism-radios-as-thumbnails {
bottom: 5px;
}
.ism-radios li {
position: relative;
display: inline-block;
margin: 0 3px;
padding: 0;
}
.ism-radios input.ism-radio {
display: none;
}
.ism-radios label {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
text-decoration: none;
cursor: pointer;
}
.ism-radios-as-thumbnails label {
-webkit-background-size: 120% auto;
-moz-background-size: 120% auto;
-o-background-size: 120% auto;
background-size: 120% auto;
background-position: center center;
background-repeat: no-repeat;
border: 2px solid rgba(255, 255, 255, 0.6);
opacity: 0.8;
}
.ism-radios-as-thumbnails label:hover {
border: 2px solid #fff;
opacity: 1;
}
.ism-radios-as-thumbnails li.active label {
border: 2px solid rgba(255, 255, 255, 1.0);
opacity: 1;
}
p.ism-badge {
margin: 0 auto;
text-align: right;
font-size: 10px;
padding-top: 1px;
color: #ccc;
font-family: sans-serif;
font-weight: normal;
}
p.ism-badge a.ism-link {
color: inherit;
text-decoration: none;
margin-right: 0.25em;
}
p.ism-badge a.ism-link:hover {
color: #aaa;
text-decoration: underline;
}
.ism-zoom-in {
-webkit-animation: zoomin 0.81s linear 1;
animation: zoomin 0.81s linear 1;
}
@-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
100% {
-webkit-transform: scale(3.0);
transform: scale(3.0);
}
}
@keyframes zoomin {
0% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
100% {
-webkit-transform: scale(3.0);
transform: scale(3.0);
}
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes slidein {
0% {
-webkit-transform: translate(-1200px, 0);
transform: translate(-1200px, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes slidein {
0% {
-webkit-transform: translate(-1200px, 0);
transform: translate(-1200px, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes popin {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes popin {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.ism-zoom-pan {
-webkit-animation: zoompan 20.0s linear 1;
animation: zoompan 20.0s linear 1;
}
@-webkit-keyframes zoompan {
0% {
-webkit-transform: translate(0, 0) scale(1.0);
transform: translate(0, 0) scale(1.0);
}
50% {
-webkit-transform: translate(-5%, -5%) scale(1.3);
transform: translate(-5%, -5%) scale(1.3);
}
100% {
-webkit-transform: translate(0, 0) scale(1.0);
transform: translate(0, 0) scale(1.0);
}
}
@keyframes zoompan {
0% {
-webkit-transform: translate(0, 0) scale(1.0);
transform: translate(0, 0) scale(1.0);
}
50% {
-webkit-transform: translate(-5%, -5%) scale(1.3);
transform: translate(-5%, -5%) scale(1.3);
}
100% {
-webkit-transform: translate(0, 0) scale(1.0);
transform: translate(0, 0) scale(1.0);
}
}
.ism-zoom-rotate {
-webkit-animation: zoomrotate 20.0s linear 1;
animation: zoomrotate 20.0s linear 1;
}
@-webkit-keyframes zoomrotate {
0% {
-webkit-transform: rotate(0) scale(1.0);
transform: rotate(0) scale(1.0);
}
50% {
-webkit-transform: rotate(-5deg) scale(1.3);
transform: rotate(-5deg) scale(1.3);
}
100% {
-webkit-transform: rotate(0) scale(1.0);
transform: rotate(0) scale(1.0);
}
}
@keyframes zoomrotate {
0% {
-webkit-transform: rotate(0) scale(1.0);
transform: rotate(0) scale(1.0);
}
50% {
-webkit-transform: rotate(-5deg) scale(1.3);
transform: rotate(-5deg) scale(1.3);
}
100% {
-webkit-transform: rotate(0) scale(1.0);
transform: rotate(0) scale(1.0);
}
}
/* SLIDER */
#my-slider {
width: 100%;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#my-slider-ism-badge {
width: 100%;
}
#my-slider:before {
content: '';
display: block;
padding-top: 25%;
}
#my-slider .ism-frame {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
#my-slider .ism-button {
display: block;
border-radius: 25px;
width: 50px;
height: 50px;
background-size: 16px 16px;
top: 50%;
margin-top: -25px;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
display: block;
visibility: visible;
}
#my-slider .ism-button-prev {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEX///////////////////////////////////////////9/gMdvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAuUAAALlARv+XnsAAABUSURBVEjH7dYxCgAgEAPB8weX/39WFBtBbsFSY2sYyzXicDLq0wQDKQGQAKiJAZTEvC+IRgPBYAEyYOB1AAf4hAkTXxB5nySOGmaRw4pp5rhv34MOQwscJ7/MrxQAAAAASUVORK5CYII=);
left: 10px;
}
#my-slider .ism-button-next {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEX///////////////////////////////////////////9/gMdvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAuUAAALlARv+XnsAAABYSURBVEjH7dYxDoAwDEPR5Ab1/S8LVEgsyL8SG3XWWK/dnKpnumA0/L4lAOSJE/DEtXfEBBxxBwYFBH8IEWJbggL4RIAAPwFWC+VDqXEtYrFyNWO5v58HB4q9HAkl7KTYAAAAAElFTkSuQmCC);
right: 10px;
}
#my-slider .ism-pause-button {
width: 50px;
height: 50px;
background-size: 16px 16px;
top: 50%;
margin-top: -25px;
border-radius: 25px;
margin-left: -25px;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAc0lEQVR42u3SsQkAIAxFQeP+O38XsBKxMPfKgCQcjqHe1W6YJFeXVNXJuxd3zO4/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID0RwuEoAh40yYcSQAAAABJRU5ErkJggg==);
}
#my-slider .ism-pause-button.ism-play {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAs6AAALOgFkf1cNAAACy0lEQVR42uWbS2hUVxyHv78PLKKiFgXBiIgvBEVKwZWL4kJrF7oQCSpoAlYkuhCyq4hQ2goqSBFBsNBCoXShbgp15XsTQSGKqKj1QdTYFCVQiuDic5FcGkQhj0nm3vl/6+Ge+X3zO2fumTkXhoi6S51NVtQbapfallVAh//Toc7KLED1jbpPnZJVQMF99fPMAgqOqZ9mFqD6UP06s4CC8+r0MucZN8rX/wJ4pu5VP8nYgIHcU5dna8BAFgM31e8rvUiOoAHvt2FHZgEFf6iTs0yBD/EV0K3uVidkFAAwFTgB3FKXZBRQsBS4q+5XZ2YUUPAtcEVtzioAYBnwm/q7OimjgILNwAt1Z1YBADOAk+ptdUFGAQDRPy0equ213GBVRcBADgOX1Y1ZBQAsB86qP4/0BqqqAgq292+3W7IKAJgNnFI71XkZBRQ5VgBP1DZ1WjYBAzkOXFLXZhUAsBI4p55Qx2cUULAbeKxuyyoAYC7wi3pdnZNRQJHzs/5FslWdmk1AwUTgJ+Ciui6jAACBWcDfGQX0At8A8yPiBsCEROHPA80R0ZNtEXwKtETEmvfDZ2jAIeDHiHjxsRc0ogCBl8DGiOjIdiv8H3AQaBpM+EZrwFVgU0S8zLYd7gLaImL1UMM3QgOOAUcjomu4F6iqgH+AzRFxoRabhCrxlr6/zppqEb5qDbgGbIiI7lpvE8vOc6A9IlbVOnwVGnAS+CEinozWAGUV8BrYGhF/jvZAZZwCh4B5YxG+bA3oBNZHxPOxHLQMDegG9kfEyrEOX4YG/AociIhH9XoD9RLQC7RGxJl6168eU+Aofb/JnSnB9BvTBtwBvhzN7/SyNqAH+C4ilpUt/LAY4lnh0+pCGolBCuhVt9CIDPKhqco8WVrLRfAvYG1EPKjSB1qLRfAVcARYVLXwtZgC5+pxxL3eAq6p/47kaFrVBexRmxolzzsZ+iOF4pXTWQAAAABJRU5ErkJggg==);
}
#my-slider .ism-button:hover {
background-color: rgba(0, 0, 0, 0.6);
}
#my-slider .ism-pause-button:hover {
background-color: rgba(0, 0, 0, 0.6);
}
#my-slider .ism-radios {
display: block;
height: 32px;
text-align: center;
}
#my-slider .ism-radios label {
width: 60px;
height: 32px;
border-radius: 3px;
color: #000;
background-color: rgba(255, 255, 255, 0.5);
}
#my-slider .ism-radios li.ism-radio-0 label {
background-image: url(http://www.algerieprofonde.net/wp-content/uploads/2015/08/Sahara1.jpg);
}
#my-slider .ism-radios li.ism-radio-1 label {
background-image: url(http://media.routard.com/image/43/4/photo.1413434.w430.jpgg);
}
#my-slider .ism-radios li.ism-radio-2 label {
background-image: url(http://www.tanitvoyages.com/js/timthumb.php?src=/modules/catalogue/assets/catalogue_details/img_3599.jpg&w=455&h=285&strech=1);
}
#my-slider .ism-radios li.ism-radio-3 label {
background-image: url(https://c1.staticflickr.com/3/2865/10386924916_c61a7a8d09_b.jpg);
}
#my-slider .ism-radios li.ism-radio-4 label {
background-image: url(http://hijra-en-algerie.com/wp-content/uploads/2016/02/biskra.jpg);
}
#my-slider .ism-radios li.ism-radio-5 label {
background-image: url(http://www.salama-mag.com/salamamag/wp-content/uploads/2017/02/RUB-BALADE-1%C2%B0-une-oasis-%C3%A0-Taghit-Bechar-Algerie.jpg);
}
#my-slider .ism-radios li.ism-radio-6 label {
background-image: url(https://pbs.twimg.com/media/CdXVkg5XEAATC4Z.jpg);
}
#my-slider .ism-radios li.ism-radio-7 label {
background-image: url(https://i.pinimg.com/originals/f1/71/0d/f1710de3874037db907c132dab40c22a.jpg);
}
#my-slider .ism-radios li.ism-radio-8 label {
background-image: url(https://pbs.twimg.com/media/DDGknGWXYAAmiVf.jpg);
}
#my-slider .ism-radios li.ism-radio-9 label {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/81/El_Kantara_%28Biskra%29.jpg);
}
#my-slider .ism-radios li.active label {
background-color: rgba(255, 255, 255, 1.0);
}
#my-slider .ism-radios label:hover {
background-color: rgba(255, 255, 255, 0.8);
}
/* SLIDES */
#my-slider .ism-slide-0 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-0 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-1 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-1 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-2 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-2 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-3 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-3 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-4 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-4 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-5 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-5 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-6 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-6 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-7 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-7 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-8 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-8 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#my-slider .ism-slide-9 .ism-img-frame {
width: 100%;
}
#my-slider .ism-slide-9 .ism-img {
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* CAPTIONS */
#my-slider .ism-slide-0 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-0 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-0 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-1 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-1 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-1 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-2 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-2 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-2 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-3 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-3 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-3 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-4 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-4 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-4 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-5 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-5 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-5 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-6 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-6 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-6 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-7 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-7 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-7 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-8 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-8 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-8 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-9 .ism-caption-0.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-9 .ism-caption-1.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-9 .ism-caption-2.ism-caption-anim {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#my-slider .ism-slide-0 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-0 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-0 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-1 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-1 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-1 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-2 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-2 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-2 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-3 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-3 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-3 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-4 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-4 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-4 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-5 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-5 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-5 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-6 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-6 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-6 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-7 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-7 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-7 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-8 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-8 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-8 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-9 .ism-caption-0 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 10%;
left: 5%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-9 .ism-caption-1 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 60%;
left: 40%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
#my-slider .ism-slide-9 .ism-caption-2 {
font-size: 1.25em;
font-family: sans-serif;
position: absolute;
top: 20%;
left: 60%;
border-radius: 4px;
border: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.70);
}
</style>
<script src="http://imageslidermaker.com/ism/js/ism-2.2.min.js"></script>
</head>
<body>
<div class='container'>
<div class="ism-slider" data-radio_type="thumbnail" id="my-slider">
<ol>
<li>
<img src="http://www.algerieprofonde.net/wp-content/uploads/2015/08/Sahara1.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://1" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >1. Visual Foxpro namespace</a></div> </li>
<li>
<img src="http://media.routard.com/image/43/4/photo.1413434.w430.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://2" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >2. Newspapers and News</a></div>
</li>
<li>
<img src="http://www.tanitvoyages.com/js/timthumb.php?src=/modules/catalogue/assets/catalogue_details/img_3599.jpg&w=455&h=285&strech=1">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://3" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >3. Youtube</a></div>
</li>
<li>
<img src="https://c1.staticflickr.com/3/2865/10386924916_c61a7a8d09_b.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://4" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >4. Sports</a></div>
</li>
<li>
<img src="http://hijra-en-algerie.com/wp-content/uploads/2016/02/biskra.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://5" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >5. Programmings </a></div>
</li>
<li>
<img src="http://www.salama-mag.com/salamamag/wp-content/uploads/2017/02/RUB-BALADE-1%C2%B0-une-oasis-%C3%A0-Taghit-Bechar-Algerie.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://6" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >6. Tips and Tricks</a></div>
</li>
<li>
<img src="https://pbs.twimg.com/media/CdXVkg5XEAATC4Z.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://7" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >7. Web apps</a></div>
</li>
<li>
<img src="https://i.pinimg.com/originals/f1/71/0d/f1710de3874037db907c132dab40c22a.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://8" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >8. History</a></div>
</li>
<li>
<img src="https://pbs.twimg.com/media/DDGknGWXYAAmiVf.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://9" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration:underline;" >9. Archeology and prehistory</a></div>
</li>
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/81/El_Kantara_%28Biskra%29.jpg">
<div class="ism-caption ism-caption-0" style="font-size:2.5em;" ><a href="vfp://10" style="width:1280px;height:800px;color:lime;cursor:pointer;text-decoration: underline;" >10. Sciences </a></div>
</li>
</ol>
</div>
</div>
</body>
</html>
endtext
local m.lcdest
m.lcdest=m.yrep+"ytemp.html"
strtofile(m.myvar,m.lcdest)
this.olecontrol1.navigate(m.lcdest)
this.windowstate=2
inke(2)
thisform.timer1.enabled=.t.
thisform.olecontrol2.document.parentWindow.scrollBy(0,200) &&adjust photo to area
ENDPROC
PROCEDURE Load
*go to site: http://imageslidermaker.com/v2
close data all
*audio cursor
create cursor zcurs ( xsound c(20),xurl c(100))
Insert Into zcurs Values("Radio Orient","http://mp3lg.tdf-cdn.com/radioorient/all/radioorient.mp3")
Insert Into zcurs Values("Dzair","http://radio-dzair.net:8000/;stream.mp3")
Insert Into zcurs Values("Sahara","http://radio-dzair.net:8026/;stream.mp")
Insert Into zcurs Values("Oriental","http://radio-dzair.net:8006/;stream.mp3")
Insert Into zcurs Values("Andalous","http://radio-dzair.net:8038/;stream.mp3")
Insert Into zcurs Values("Maghreb 2","http://broadcast.infomaniak.net:80/francemaghreb-high.mp3")
Insert Into zcurs Values("Klara classic","http://mp3.streampower.be/klaracontinuo-high")
Insert Into zcurs Values("france Inter","http://audio.scdn.arkena.com/11008/franceinter-midfi128.mp3")
Insert Into zcurs Values("Radio classic","http://radioclassique.ice.infomaniak.ch/radioclassique-high.mp3")
Insert Into zcurs Values("Classic Suisse","http://www.radioswissclassic.ch/fr/live/mp3.m3u")
Insert Into zcurs Values("France musique","http://audio.scdn.arkena.com/11012/francemusique-midfi128.mp3")
Insert Into zcurs Values("France Info","http://audio.scdn.arkena.com/11006/franceinfo-midfi128.mp3")
locate
create cursor ycurs (xURL c(150))
insert into ycurs values("www.over-blog.com")
insert into ycurs values("www.msn.com")
insert into ycurs values("www.atoutfox.org")
insert into ycurs values("www.over-blog.com")
insert into ycurs values("www.over-blog.com")
locate
ENDPROC
PROCEDURE image1.Click
Local m.myvar
TEXT to m.myvar pretext 7 noshow
this is a custom navigation for a desktop application.
in the first navigator(olecontrol1),a web slider desserves a main menu with 10 web images.in each image there is a main menu (1-10).
the slider is free and from the web site : imageslidermaker.com/v2/ism/js/.
its scrollable and with thumbnails.
can customize the 10 menu headers as your taste.
each clickable main menu fires a sub menu in a vfp grid(with customizable items)....can be a combo or listbox.
each submenu clicked fires a link in a second navigator (shell.explorer.2 class).
A cycling web image with a timer (10sec) shows cool sahara images at the form top right.
the code uses the ingenious "Beforenavigate" method to redirect the url to vfp namespace.
the second navigator is accompagned with navigation button (back,home and forward).
it can acces to a custom fullscreen mode (clickable red shape).dblclick to restore the form .
the form titlebar can be visible or hidden (green shape).
can exit from the 3th shape or from form system button close.
Can type a web link in the textbox and valid to show any web page.
Note:
-for avoiding broken link library ,can download the file http://imageslidermaker.com/ism/js/ism-2.2.min.js and save it as ism/js/ism-2.2.min.js in the source folder
-can make your custom slider from the author site: imageslidermaker.com/v2/ism/js/
-can use also radio button instead thumnails (but the js file changes).
-this app is designed for a 32 pouces screen.
-majority of images are directly grabbed from the web (can customize).
-the 2 olecontrols are derived from IE11 (mandatory with emulation as meta tag in form init).
-note the CSS file is integrated directly in the form init with styles tags.
-Added a windows mediaplayer object to play any audio file or url.
-Added a clock with time&date.
-Added a desktop shortcut with custom icon for lauching the application.
*of course internet must be connected and some fast.
ENDTEXT
*messagebox(m.myvar,0+32+4096,"",6000)
Local oshell
oshell = Createobject('WScript.Shell')
oshell.Popup(m.myvar,0, 'Summary help', 0+32+4096) &&4,16,48,64...
oshell=Null
ENDPROC
PROCEDURE image1.Init
thisform.yreq(this,"https://upload.wikimedia.org/wikipedia/commons/3/34/Desert_oasis.jpg")
ENDPROC
PROCEDURE olecontrol2.DocumentComplete
*** Événement de contrôle ActiveX ***
LPARAMETERS pdisp, url
thisform.image2.visible=.f.
ENDPROC
PROCEDURE olecontrol2.Init
this.silent=.t.
this.navigate("http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg") &&m.yrep+"taghit.jpg")
ENDPROC
PROCEDURE olecontrol1.BeforeNavigate2
*** Événement de contrôle ActiveX ***
LPARAMETERS pdisp, url, flags, targetframename, postdata, headers, cancel
nodefault
thisform.image2.visible=.t.
*messagebox(url,0+32+4096,'',1000)
wait window url timeout 1
sele ycurs
zap
do case
case left(url,8)=="vfp://1/" &&visual foxpro namespace
insert into ycurs values("https://www.foxite.com/forum/")
insert into ycurs values("www.yousfi.over-blog.com")
insert into ycurs values("www.atoutfox.org")
insert into ycurs values("www.msn.com")
insert into ycurs values("www.foxite.com")
insert into ycurs values("http://www.news2news.com/vfp/index.php")
insert into ycurs values("http://www.sweetpotatosoftware.com/spsblog/")
insert into ycurs values("https://www.levelextreme.com/Default.aspx?LevelExtremeRedirect=1")
insert into ycurs values("http://weblogs.foxite.com/vfpimaging/author/vfpimaging/")
insert into ycurs values("http://stackoverflow.com/questions/tagged/foxpro")
insert into ycurs values("http://www.foxpert.com/knowlbits.htm")
insert into ycurs values("https://vfpx.github.io/")
insert into ycurs values("http://www.berezniker.com/blogs/sergey")
insert into ycurs values("http://doughennig.blogspot.com/")
insert into ycurs values("http://sandstorm36.blogspot.com/")
insert into ycurs values("https://blogs.msdn.microsoft.com/calvin_hsia/tag/visual-foxpro/")
insert into ycurs values("http://fox.wikis.com/")
insert into ycurs values("http://doughennig.com/papers/")
insert into ycurs values("http://praisachion.blogspot.ro/2015/02/api-messagebox.html")
insert into ycurs values("http://www.west-wind.com/articles.aspx")
insert into ycurs values("https://vfpx.github.io/")
insert into ycurs values("http://www.arg.kirov.ru/")
insert into ycurs values("https://www.yousfi.over-blog.com")
case left(url,8)=="vfp://2/" &&newspapers & news
insert into ycurs values("http://www.elkhabar.com/")
insert into ycurs values("http://www.huffpostmaghreb.com/algerie/")
insert into ycurs values("http://www.lematindz.net/")
insert into ycurs values("http://bfmbusiness.bfmtv.com/")
insert into ycurs values("http://www.cresus.dz/")
insert into ycurs values("www.msn.com")
insert into ycurs values("http://www.elwatan.com/")
insert into ycurs values("")
insert into ycurs values("")
case left(url,8)=="vfp://3/" &&youtube
insert into ycurs values("https://www.youtube.com/tv#/browse-sets?c=default&resume")
insert into ycurs values("https://www.youtube.com/?gl=DZ")
insert into ycurs values("")
insert into ycurs values("")
insert into ycurs values("")
case left(url,8)=="vfp://4/" &&sports
insert into ycurs values("http://www.lebuteur.com/")
insert into ycurs values("http://www.lequipe.fr/")
insert into ycurs values("http://www.sport.fr/")
insert into ycurs values("")
insert into ycurs values("")
insert into ycurs values("")
insert into ycurs values("")
case left(url,8)=="vfp://5/" &&programmings
insert into ycurs values("http://www.winprog.org/tutorial/")
insert into ycurs values("http://www.jasinskionline.com/windowsapi/ref/funca.html")
insert into ycurs values("https://www.academia.edu/people/search?")
insert into ycurs values("http://www.tomorrowssolutionsllc.com/ConferenceSessions/VFP%20Tips%20and%20Tricks.pdf")
insert into ycurs values("http://vfpimaging.blogspot.com/")
insert into ycurs values("https://msdn.microsoft.com/en-us/library/ms947595.aspx")
insert into ycurs values("")
insert into ycurs values("")
insert into ycurs values("")
case left(url,8)=="vfp://6/" &&tips é tricks
insert into ycurs values("http://imageslidermaker.com/v2")
insert into ycurs values("https://windows.gadgethacks.com/how-to/45-tips-tricks-you-need-know-master-windows-10-0163455/")
insert into ycurs values("https://www.windowscentral.com/windows-10-help")
insert into ycurs values("https://fox.wikis.com/wc.dll?Wiki~CategoryVFPTipsAndTricks")
insert into ycurs values("http://studylib.net/doc/5278155/tips-and-tricks-for-visual-foxpro---dfpug")
insert into ycurs values("http://cully.biz/2007/07/11/visual-foxpro-autocomplete-tips-and-tricks/")
insert into ycurs values("https://visualfoxpro-developers.com/")
insert into ycurs values("http://www.tomorrowssolutionsllc.com/ConferenceSessions/VFP%20Tips%20and%20Tricks.pdf")
insert into ycurs values("http://vfpimaging.blogspot.com/")
insert into ycurs values("")
insert into ycurs values("")
case left(url,9)=="vfp://7/" &&web apps
insert into ycurs values("https://translate.google.dz/?hl=fr&tab=TT")
insert into ycurs values("http://unminify.com/")
insert into ycurs values("http://www.css3generator.in/css-button.html")
insert into ycurs values("http://enjoycss.com/gallery/templates#")
insert into ycurs values("http://flamingtext.com/logo/Design-3D-Text")
insert into ycurs values("http://www.picturetopeople.org/text_generator/others/3d/realistic/3d_abstract_text_effect.html#abstract023")
insert into ycurs values("")
case left(url,8)=="vfp://8/" &&history
insert into ycurs values("https://www.algerie-ancienne.com/index.htm")
insert into ycurs values("http://www.cosmovisions.com/ChronoAlgerie.htm")
insert into ycurs values("https://fr.wikipedia.org/wiki/Hilaliens")
insert into ycurs values("https://histoireislamique.wordpress.com/2014/05/26/les-hilaliens-envahissent-la-berberie-et-traitent-avec-el-moezz-le-ziride/")
insert into ycurs values("http://www.algerie-monde.com/")
insert into ycurs values("https://www.polemia.com/histoire-de-lafrique-du-nord-de-bernard-lugan/")
insert into ycurs values("https://histoireislamique.wordpress.com/2015/01/08/lorigine-africaine-des-premiers-berberes-dafrique-du-nord/")
insert into ycurs values("https://www.youtube.com/watch?v=412mpy3dVHI")
insert into ycurs values("http://www.algerie-monde.com/histoire/")
insert into ycurs values("http://www.persee.fr/doc/ahess_0395-2649_1967_num_22_5_421605")
insert into ycurs values("http://gallica.bnf.fr/accueil/?mode=desktop")
insert into ycurs values("")
insert into ycurs values("")
case left(url,8)=="vfp://9/" && Archeology and prehistory
insert into ycurs values("https://aars.fr/index.html")
insert into ycurs values("http://www.archeophile.com/rwpays_52-algerie.htm")
insert into ycurs values("http://www.archeopourtous.org/")
insert into ycurs values("https://fr.wikipedia.org/wiki/Arch%C3%A9ologie")
insert into ycurs values("http://archeologie.culture.fr/")
insert into ycurs values("")
case left(url,9)=="vfp://10/" &&sciences
insert into ycurs values("https://www.nasa.gov/multimedia/nasatv/#public")
insert into ycurs values("https://www.nasa.gov/")
insert into ycurs values("http://www.parismatch.com/Autres/Nasa")
insert into ycurs values("https://www.sciencesetavenir.fr/tag_organisation/nasa_5263/")
insert into ycurs values("https://www.nasa.gov/multimedia/imagegallery/index.html")
insert into ycurs values("http://www.pourlascience.fr/")
insert into ycurs values("http://www.larecherche.fr/")
insert into ycurs values("http://www.futura-sciences.com/")
insert into ycurs values("http://planet-terre.ens-lyon.fr/planetterre")
insert into ycurs values("http://www.infoscience.fr/")
insert into ycurs values("http://national.udppc.asso.fr/index.php/lu-et-teste/revues-scientifiques")
insert into ycurs values("https://www.science-et-vie.com/")
insert into ycurs values("http://www.astronomie-magazine.fr/")
insert into ycurs values("https://lejournal.cnrs.fr/")
insert into ycurs values("")
otherwise
*...
endcase
locate
thisform.grid1.refresh
thisform.image2.visible=.f.
cancel=.t.
retu
ENDPROC
PROCEDURE olecontrol1.Init
this.silent=.t.
ENDPROC
PROCEDURE grid1.Init
with this
.recordsource="ycurs"
.recordsourcetype=1
.gridlines=0
.fontbold=.t.
.fontsize=8
.recordmark=.f.
.deletemark=.f.
.HeaderHeight=0
Local lnRed,lnGreen,lnBlue,t,level,x
tnlevel=0.65
lnRed =Int(255*Rand())
lnGreen = Int(255*Rand())
lnBlue = Int(255*Rand())
*lighten color
m.x='RGB('+trans( lnRed + ((255 - lnRed ) * tnLevel))+','+;
trans( lnGreen + ((255 - lnGreen) * tnLevel))+ ','+ ;
trans( lnBlue + ((255 - lnBlue ) * tnLevel) )+')'
.SetAll("DynamicBackColor","IIF(MOD(recno(), 2)=0, RGB(255,255,255) ,"+m.x +")" , "Column")
.Refresh
bindevent (.columns(1).text1,"MouseDown",thisform,"my")
endwith
ENDPROC
PROCEDURE text1.Valid
if ! empty(this.value)
thisform.olecontrol2.navigate(this.value)
endi
ENDPROC
PROCEDURE label1.Click
try
thisform.olecontrol2.goback()
catch
endtry
ENDPROC
PROCEDURE label2.Click
try
thisform.olecontrol2.goforward()
catch
endtry
ENDPROC
PROCEDURE label3.Click
thisform.olecontrol2.navigate("http://www.algerie-focus.com/wp-content/uploads/2014/12/B%C3%A9char-Taghit_20-d%C3%A9cembre-2014.jpg") &&m.yrep+"taghit.jpg")
inke(0.2)
thisform.olecontrol2.document.parentWindow.scrollBy(0,200)
ENDPROC
PROCEDURE shape1.Click
thisform.titlebar=1
with thisform.olecontrol2
.left=0
.top=0
.width=thisform.width
.height=thisform.height
.zorder(0)
wait window "DblClick on titlebar to restore" timeout 1
endwith
ENDPROC
PROCEDURE shape2.Click
thisform.titlebar=iif(thisform.titlebar=0,1,0)
ENDPROC
PROCEDURE shape3.Click
thisform.release
ENDPROC
PROCEDURE timer1.Timer
local m.myvar
set memo to 8192
text to m.myvar noshow
http://www.algerieprofonde.net/wp-content/uploads/2015/08/Sahara1.jpg
http://media.routard.com/image/43/4/photo.1413434.w430.jpg
http://www.tanitvoyages.com/js/timthumb.php?src=/modules/catalogue/assets/catalogue_details/img_3599.jpg&w=455&h=285&strech=1
http://www.pageshalal.fr/images/actualite/algerie_sahara-0.jpg
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsaw7F-SFtIgFQW2dZ2faQ0ekY_oQnD8logl4DMCfFjUoH-g0w
endtext
local m.upper,m.xpict
m.upper=memlines(m.myvar)
m.xpict=mline(m.myvar,INT(m.upper) * RAND( ) + 1)
thisform.yreq(thisform.image1,m.xpict)
ENDPROC
ENDDEFINE
*
*-- EndDefine: yslider
DEFINE CLASS yclock AS container
Anchor = 256
Width = 48
Height = 23
backstyle=0
borderWidth=0
Name = "yclock"
ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontBold = .T., ;
Anchor = 256, ;
Caption = "", ;
Height = 17, ;
Left = 0, ;
MousePointer = 15, ;
Top = 0, ;
Width = 2, ;
ForeColor = RGB(0,255,0), ;
BackColor = RGB(0,0,0), ;
Name = "Label1"
ADD OBJECT timer2 AS timer WITH ;
Top = 0, ;
Left = 25, ;
Height = 23, ;
Width = 23, ;
Interval = 30000, ;
Name = "Timer2"
PROCEDURE label1.Click
messagebox(cdow(date())+" "+ttoc(dateTime()),0+32+4096,'')
ENDPROC
PROCEDURE label1.Init
this.caption=substr(time(),1,5)
this.tooltiptext=cdow(date())+" "+ttoc(dateTime())
ENDPROC
PROCEDURE timer2.Timer
this.parent.label1.caption=substr(time(),1,5)
ENDPROC
ENDDEFINE
*
*-- EndDefine: yclock
DEFINE CLASS ywmp AS container
Anchor=256
Top = 0
Left = 24
Width = 178
Height = 25
BackStyle = 0
BorderWidth = 0
Name = "ywmp"
ADD OBJECT label1 AS label WITH ;
AutoSize = .T., ;
FontBold = .T., ;
FontName = "Webdings", ;
FontSize = 14, ;
BackStyle = 0, ;
Caption = "4", ;
Height = 26, ;
Left = 100-20, ;
MousePointer = 15, ;
Top = -1, ;
Width = 22, ;
ForeColor = RGB(0,255,0), ;
ToolTipText = "Play", ;
Name = "Label1"
ADD OBJECT label2 AS label WITH ;
AutoSize = .T., ;
FontName = "Webdings", ;
FontSize = 9, ;
BackStyle = 0, ;
Caption = "g", ;
Height = 21, ;
Left = 143-20, ;
MousePointer = 15, ;
Top = 3, ;
Width = 14, ;
ForeColor = RGB(255,0,0), ;
ToolTipText = "Stop", ;
Name = "Label2"
ADD OBJECT label3 AS label WITH ;
AutoSize = .T., ;
FontName = "Webdings", ;
FontSize = 9, ;
BackStyle = 0, ;
Caption = "n", ;
Height = 21, ;
Left = 125-20, ;
MousePointer = 15, ;
Top = 3, ;
Width = 14, ;
ForeColor = RGB(0,0,255), ;
ToolTipText = "Pause", ;
Name = "Label3"
ADD OBJECT image1 AS image WITH ;
Picture = home(1)+"graphics\icons\misc\volume01.ico", ;
Stretch = 2, ;
BackStyle = 0, ;
Height = 20, ;
Left = 160-20, ;
MousePointer = 15, ;
Top = 1, ;
Width = 20, ;
ToolTipText = "Volume", ;
Name = "Image1"
ADD OBJECT combo1 AS combobox WITH ;
FontSize = 8, ;
RowSourceType = 6, ;
RowSource = "zcurs.xsound", ;
Height = 20, ;
Left = 1, ;
Top = 3, ;
Width = 76, ;
tooltiptext="Musics,radios..",;
Name = "Combo1"
PROCEDURE Init
Publi Wmp As WindowsMediaPlayer
Wmp = Createobject("WMPlayer.OCX.7")
With Wmp
.settings.autoStart = .f.
.settings.Volume=50
.settings.setMode('loop',.T.) &&loop
.url="http://radio-dzair.net:8006/;stream.mp3"
Endwith
ENDPROC
PROCEDURE label1.Click
try
Wmp.Controls.Play
catch
endtry
ENDPROC
PROCEDURE label2.Click
try
Wmp.Controls.stop
catch
endtry
ENDPROC
PROCEDURE label3.Click
try
Wmp.Controls.Pause
catch
endtry
ENDPROC
PROCEDURE image1.Click
#Define APPCOMMAND_VOLUME_MUTE 0x80000
#Define APPCOMMAND_VOLUME_UP 0xA0000
#Define APPCOMMAND_VOLUME_DOWN 0x90000
#Define WM_APPCOMMAND 0x319
Declare Integer SendMessage In user32;
INTEGER HWnd,;
INTEGER Msg,;
INTEGER wParam,;
INTEGER Lparam
SendMessage(_vfp.HWnd, WM_APPCOMMAND, _vfp.HWnd, APPCOMMAND_VOLUME_UP)
ENDPROC
PROCEDURE combo1.Init
with this
.listindex=1
.style=2
endwith
ENDPROC
PROCEDURE combo1.Click
sele zcurs
wmp.url=allt(xurl)
wmp.controls.play()
ENDPROC
ENDDEFINE
*
*-- EndDefine: ywmp
Click on code to select [then copy] -click outside to deselect
*2*created on saturday 14 of october 2017
*save this prg as ybuildexe.prg
*it builds an executable desktop app and cleans all tools used to achieve this goal.it adds a dsktop shortcut laucher for exe application.
*the executable built is yslider_new.exe (can pin it on taskbar....)
Set Safe Off
Local m.yrep
m.yrep=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep)
*build file configuration config.fpw
Local m.myvar
TEXT to m.myvar noshow
screen=off
resource=off
safe=off
ENDTEXT
Strtofile(m.myvar, "config.fpw")
*build proj and compile to exe
Build Project yfoo From "yslider_post.prg" ,"config.fpw"
Build Exe yslider_new.Exe From yfoo
Inkey(1)
*clean traces
Dele File yfoo*.*
If File("yslider_new.exe")
Messagebox("yslider_new.exe created!",0+32+4096,"Create an exe",1000)
Endi
Try
Dele File config.fpw
Catch
Endtry
*!* *create a complet shortcut in the desktop
Local sDesk As String
Local oShell As New IWshShell_Class
Local oShortCut
oShell=Newobject("wscript.shell")
sDesk = oShell.SpecialFolders.Item("Desktop")
oShortCut = oShell.CreateShortcut(sDesk + "\" + "yslider_new.lnk")
With oShortCut
.TargetPath = m.yrep+"yslider_new.exe"
.Description = "yslider_new"
.Arguments = ""
.WorkingDirectory = m.yrep
.iconLocation=Home(1)+"graphics\icons\misc\misc15.ico" &&set or change shortcut icon here
.Save
Endwith
oShortCut = Null
oShell = Null
Set Safe On
Run/N yslider_new.Exe
Important:All Codes above are tested on VFP9SP2 & windows 10 pro and IE11 emulation.