LoadScript() and bootstrap

[ebelouet]

Hi,

I search a example with bootstrapp and spider basic.

Sincerely
Eric

[Danilo]

Small example:

Code: Select all

Procedure FloatingWin(id.s, x, y, width, height, backgroundColor.s="#ffffff", content.s="")
    Protected s.s = "<div id='"+id+"' style='position: absolute; left: "+x+"px; top:"+y+"px; width:"+width+"px; height:"+height+"px; background-color:"+backgroundColor+";'>"+content+"</div>"
    !$("body").append(v_s);
EndProcedure

Procedure BootstrapMain(URL$, Success)
    If Success
        ; https://getbootstrap.com/docs/4.4/components/alerts/
        FloatingWin("alert1",10,10,800,50,"#ffff00",
                    "<div class='alert alert-danger' role='alert'>"+
                    "A simple danger alert With <a href='#' class='alert-link'>an example link</a>. Give it a click If you like.</div>")
       
        ; https://getbootstrap.com/docs/4.4/components/navs/
        FloatingWin("popup1",50,90,710,50,"#000000",
                    "<nav class='nav'>"+
                    "<a class='nav-link active' href='#'>Active</a>"+
                    "<a href='https://www.spiderbasic.com' class='nav-link' href='#'>SpiderBasic</a>"+
                    "<a href='http://forums.spiderbasic.com/' class='nav-link' href='#'>SB Forum</a>"+
                    "<a href='https://www.purebasic.com' class='nav-link' href='#'>PureBasic</a>"+
                    "<a href='https://www.purebasic.fr/english/index.php' class='nav-link' href='#'>PB Forum</a>"+
                    "<a class='nav-link' href='#'>Link</a>"+
                    "<a class='nav-link disabled' href='#' tabindex='-1' aria-disabled='true'>Disabled</a>"+
                    "</nav>")
       
    Else
        Debug "Error while loading: "+URL$
    EndIf
EndProcedure

Procedure LoadBootstrapCSS(URL$, Success)
    If Success
        LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", @BootstrapMain())
    Else
        Debug "Error while loading: "+URL$
    EndIf
EndProcedure

LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)


[ebelouet]

hi
Thank you very much, it's work fine.
eric

[Danilo]

Another example:

Code: Select all

;
; SB template for:
;
; 'JavaScript DOM Crash Course' by Traversy Media (https://www.traversymedia.com)
;
; YouTube: https://www.youtube.com/playlist?list=PLillGF-RfqbYE6Ik_EuXA2iZFcE082B3s
;
Procedure AppendBody(content.s)
    !$("body").append(v_content);
EndProcedure

Procedure Main()
    AppendBody( ""+
                "<header id='main-header' class='bg-success text-white p-4 mb-3'>"+
                "  <div class='container'>"+
                "    <h1 id='header-title'>Item Lister <span style='display:none'>123</span></h1>"+
                "  </div>"+
                "</header>"+
                "<div class='container'>"+
                "  <div id='main' class='card card-body'>"+
                "  <h4 class='title'>Add Items</h4>"+
                "    <form class='form-inline mb-3'>"+
                "       <input type='text' class='form-control mr-2'>"+
                "       <input type='submit' class='btn btn-dark' value='Submit'>"+
                "    </form>"+
                "    <h4 class='title'>Items</h4>"+
                "    <ul id='items' class='List-group'>"+
                "        <li class='list-group-item'>Item 1</li>"+
                "        <li class='list-group-item'>Item 2</li>"+
                "        <li class='list-group-item'>Item 3</li>"+
                "        <li class='list-group-item'>Item 4</li>"+
                "    </ul>"+
                "  </div>"+
                "</div>")
   
    ! console.dir(document);
    ! console.log(document.domain);
    ! console.log(document.URL);
    !
    ! var odd = document.querySelectorAll('li:nth-child(odd)');
    ! var even= document.querySelectorAll('li:nth-child(even)');
    !
    ! for(var i = 0; i < odd.length; i++){
    !   odd[i].style.backgroundColor = '#f4f4f4';
    !   even[i].style.backgroundColor = '#ccc';
    ! }
EndProcedure

Procedure BootstrapMain(URL$, Success)
    If Success : Main() : Else : Debug "Error while loading: "+URL$ : EndIf
EndProcedure

Procedure LoadBootstrapCSS(URL$, Success)
    If Success
        LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", @BootstrapMain())
    Else
        Debug "Error while loading: "+URL$
    EndIf
EndProcedure

LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)

[ebelouet]

HI,

Thank you for another example but I search to watch html page in same windows that menu not in another windows, could you help me to make this ?

Thank by advance
Eric

[ebelouet]

HI,

WHy on this example, when you click en menu1 we have nothing ?
Thank by advance
Eric

Code: Select all

Procedure FloatingWin(id.s, x, y, width, height, backgroundColor.s="#ffffff", content.s="")
    Protected s.s = "<div id='"+id+"' style='position: absolute; left: "+x+"px; top:"+y+"px; width:"+width+"px; height:"+height+"px; background-color:"+backgroundColor+";'>"+content+"</div>"
    !$("body").append(v_s);
EndProcedure

Procedure BootstrapMain(URL$, Success)
    If Success
       
       
        ; https://getbootstrap.com/docs/4.4/components/navs/
        FloatingWin("popup1",50,90,710,50,"#000000",
                    "<div class='container'>"+
                    "<ul class='nav nav-pills' role='tablist'>"+
                    " <li class='nav-item'>"+
                    "<a class='nav-link active' Data-toggle='pill' href='#home'>Home</a>"+
                    "</li><li class='nav-item'>"+
                    "<a class='nav-link' Data-toggle='pill' href='#menu1'>Menu 1</a></li>"+
                    "<li class='nav-item'>"+
                    " <a class='nav-link' Data-toggle='pill' href='#menu2'>Menu 2</a>"+
                    " </li></ul>"+
                    "<div class='tab-content'>"+
                    "<div id='home' class='container tab-pane active'><br><h3>Info</h3>"+
                    "<p>Test menu info eric.</p></div>"+
                   " <div id='menu1' class='container tab-pane fade'><br>"+
                  " <h3>Menu 1</h3><p>menu 1.</p></div></div>")
                     
   
     
     
   
     
   
     
   
   
     
   
       
       
    Else
        Debug "Error while loading: "+URL$
    EndIf
EndProcedure

Procedure LoadBootstrapCSS(URL$, Success)
    If Success
        LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js", @BootstrapMain())
    Else
        Debug "Error while loading: "+URL$
    EndIf
EndProcedure

LoadScript("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css", @LoadBootstrapCSS(),#PB_Script_CSS)