javascript - image slider doesnt allow the dropdown of navbar in mobile view -


i have conflict of events happening in code. have menu bar created using nav bar. there image slider namely caroussel. image sliding, when minimize window menu bar not drop down without caroussel. have code below. 

<!doctype html> <html lang="en"> <head>   <title>bootstrap example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">   <link rel="stylesheet" href="css/style1.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>   <style>    </style>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  </head> <body> <div class="navbar navbar-default navbar-static-top" role="navigation">     <div class="container">         <div class="navbar-header">             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                 <span class="sr-only">toggle navigation</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                </button>              <a class="navbar-brand" href="http://www.ab.com/">welcome</a>          enter code here         <div class="navbar-collapse collapse">             <ul class="nav navbar-nav navbar-right">                 <li class="active"><a href="http://www.ab.com/currentstudents">current students</a></li>                 <li class="active"><a href="http://www.ab.com/facultyandstaff">faculty & staff</a></li>                 <li class="active"><a href="http://www.ab.com/welcome/visiting/families1/">parents & families</a></li>                 <li class="active"><a href="http://www.ab.com/alumni">alumni</a></li>                 <li class="active"><a href="http://www.ab.com/welcome/visiting">visitors</a></li>                 <li class="active"><a href="http://www.ab.com/academics/health-sciences-programs/clinics/"> clinics</a></li>                 <li class="active"><a href="http://www.ab.com/give/">support us</a></li>             </ul>          </div>          <div id="mycarousel" class="carousel slide" data-interval="3000" data-ride="carousel">              <ol class="carousel-indicators">                 <li data-target="#mycarousel" data-slide-to="0" class="active"></li>                 <li data-target="#mycarousel" data-slide-to="1"></li>                 <li data-target="#mycarousel" data-slide-to="2"></li>             </ol>                 <div class="carousel-inner">                 <div class="active item">                     <img class ="frontimage" src="images/4yearplan_700.jpg" alt="mainpage">                     <div class="carousel-caption">                         <p>this first slide</p>                     </div>                 </div>                 <div class="item">                     <img class ="frontimage" src="images/alumni.jpg" alt="alumni">                     <div class="carousel-caption">                         <p>this second slide</p>                     </div>                 </div>                 <div class="item">                     <img class ="frontimage" src="images/better_air_photo3.jpg" alt="main">                 <div class="carousel-caption">                   <p>this third slide</p>                 </div>             </div>         </div>         <a class="carousel-control left" href="#mycarousel" data-slide="prev">             <span class="glyphicon glyphicon-chevron-left"></span>         </a>         <a class="carousel-control right" href="#mycarousel" data-slide="next">             <span class="glyphicon glyphicon-chevron-right"></span>         </a>     </div>     <div class="jumbotron">              <h1>my first bootstrap page</h1>             <p>resize responsive page see effect!</p>          </div> <div class="row">             <div class="col-sm-4">                 <h3>column 1</h3>                  <p>this column 1</p>             </div>             <div class="col-sm-4">                 <h3>column 2</h3>                 <p>this column 2</p>             </div>             <div class="col-sm-4">                 <h3>column 3</h3>                         <p>this column 3</p>             </div>         </div>      </div>     </div>  </body> </html>

move #mycarousel (also move, .jumbotron , .row while you're @ it) outside of .navbar-header element.


Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more