Just starting out? Need help? Post your questions and find answers here.
ebelouet
 
Posts: 10
Joined: Mon Apr 08, 2019 9:46 am

LoadScript() and bootstrap

by ebelouet Fri Nov 29, 2019 4:41 pm

Hi,

I search a example with bootstrapp and spider basic.

Sincerely
Eric
User avatar
Danilo
 
Posts: 49
Joined: Wed Feb 26, 2014 7:11 am

Re: LoadScript() and bootstrap

by Danilo Fri Nov 29, 2019 7:37 pm

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)
cya,
...Danilo
ebelouet
 
Posts: 10
Joined: Mon Apr 08, 2019 9:46 am

Re: LoadScript() and bootstrap

by ebelouet Sat Dec 07, 2019 5:01 pm

hi
Thank you very much, it's work fine.
eric
User avatar
Danilo
 
Posts: 49
Joined: Wed Feb 26, 2014 7:11 am

Re: LoadScript() and bootstrap

by Danilo Fri Jan 03, 2020 6:15 pm

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)
cya,
...Danilo
ebelouet
 
Posts: 10
Joined: Mon Apr 08, 2019 9:46 am

Re: LoadScript() and bootstrap

by ebelouet Fri Feb 21, 2020 10:28 am

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
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 3 guests