the toggle in my bootstrap navbar used to work but now has stopped doing so and won't show the menu when I decrease the screen size. The code I used is:
</head>
<body>
<div class="container-fluid" id="wrapper">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span><span class="icon-bar"></span></button>
<img src="images/logo.png" id="navbarlogo"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar2">
<ul class="nav navbar-nav">
<li class="active"></li>
<li></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Kontakt</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Über uns</li>
<li>Services</li>
<li class="dropdown">Kontakt<span class="caret"></span>
<ul class="dropdown-menu">
<li>Adresse</li>
<li>Impressum</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
Any ideas what's happened? Thanks!
I should start by checking that my support files are in place (css and js). navbar needs javascript in order to work properly.
Related
I have a problem with creating a menu with typoscript.
This is how the menu should look in html
<div class="dropdown-menu hidden-xs" role="menu">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<header>
Item lvl2
</header>
<ul>
<li>
Item lvl3
</li>
</ul>
</div>
</div>
</div>
</div>
And I have never worked with Typoscript.
Can you please tell me how to do it?
Below please find my article (individual blog) template for Modx. Everything works fine except for the fact that my [[*pagetitle]] value is not visible. I can select it with the mouse, but it is invisible. I am using the default sample.ArticleRowTpl. Also, find below my container template as well. Does anyone know why it wont display the [[*pagetitle]] href?
Individual article blog template:
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*pagetitle]]
<p class="post-info">
<span class="left">Posted on [[*publishedon:strtotime:date=`%b %d, %Y`]] by [[*publishedby:userinfo=`username`]]</span>
</p>
<br>
<div class="entry">
[[*content]]
</div>
<!--<hr />-->
<p>
[[*articlestags:notempty=`
<br>
<span class="tags left"> <b style="color: #000000">Tags: </b>[[+article_tags]]</span>
<br>
`]]
</p>
<div class="post-comments" id="comments">
<br>
[[+comments]]
<h3>Add a Comment</h3>
[[+comments_form]]
<br>
</div>
</div>
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
Blog container template
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*content]]
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
I figured it out. Somehow I had a class in my .css file (which I wasnt actually using) that was causing this anomaly. It took me a while to troubleshoot, but I finally figured out which one it was and removed it. It works fine now:)
I am having a problem with JSTree. I am using very basic examples but the <ins class="jstree-icon"> </ins> are floated all the way over to the right hand side of the tree area.
Here is the JS that fires it off:
$('#adminMenuArea').jstree({
"plugins" : ["html_data","ui","themes"]
});
Here is the HTML that I am using:
<div id="adminMenuArea">
<ul>
<li><a id='menu-4' href='menu-4'>About Us</a></li>
<li>
<a id='menu-6' href='menu-6'>Services</a><!-- in -->
<ul>
<li><a id='menu-7' href='menu-7'>Service 1</a></li>
<li><a id='menu-8' href='menu-8'>Service 2</a></li>
<li>
<a id='menu-9' href='menu-9'>Service 3</a><!-- in -->
<ul>
<li><a id='menu-18' href='menu-18'>Sub Services1</a></li>
<li><a id='menu-17' href='menu-17'>Sub Services 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a id='menu-13' href='menu-13'>Employment</a></li>
<li><a id='menu-14' href='menu-14'>Contact Us</a></li>
</ul>
</div>
Any help is much appreciated.
The problem was that all of the anchor tags <a> were floating left due to some other CSS in my system.
I have created phonegap app for iPhone and iPod touch, though i use to test it on iPod touch.
Problem: The images show up randomly, else it would show a question mark within the placeholder. I have tried running this app at several places like iPhone, iPod, desktop browser (with click event, not touch). Out of which on iPod and Desktop browser it seems to run fine, whereas on iPhone or iPhone Simulator I get random images to be broken.
Its an gallery for images, thus images are most important.
Any suggestions or pointers appreciated.
Below is a sample page code:
<div id="galleryRava" >
<div id="galleryRavaScroll">
<!--gallery scroll frame-->
<!-- /header -->
<div>
<div id="galleryRavalist">
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="capsicum_rava_masala"><img src="images/sankalp/rava/capsicum_rava_masala.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Capsicum Rava Masala</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="coconut_rava"><img src="images/sankalp/rava/coconut_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Coconut Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="crispy_rava"><img src="images/sankalp/rava/crispy_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Crispy rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="kanchipuram_achari_rava"><img src="images/sankalp/rava/kanchipuram_achari_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Kanchipuram achari rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="onion_rava"><img src="images/sankalp/rava/onion_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Onion Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="udupi_rava"><img src="images/sankalp/rava/udupi_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Udipi rava</span>
</a>
</div>
</div>
<div class="clear"> <br><br><br></div>
</div>
<!-- /content -->
</div><!--gallery scroll ends here-->
</div>
It's not immediately clear where you're loading the images from. Are these images stored somewhere, online? Or are you trying to access images that are already stored on the device?
And is it correct to say that sometimes the images show up, and sometimes they do not? Have you had an instance where you've had all the images appear? Or is there always at least one image missing?
I am using jQuery Tabs in an asp mvc 2 application.
Previously my code worked in all browsers(i.e the tabs were working well):
<ul class="tab-menu">
<li><a href="<%= Url.Action("GetCoreTab", "ModalPopup") %>" class="a" title="Reservation Details"><b>
<div id="home" class="menu">
</div>
</b></a></li>
<li><a href="<%= Url.Action("GetDatesAndLocationTab", "Home") %>" class="a"><b>
<div id="dates-and-location" class="menu">
</div>
</b></a></li>
</ul>
Now I changed the list code (to a new requirement). And now the tabs do not work in IE 7 and 8.(i.e the views for all the tabs appear in the first tab)
Here is the modified code:
<ul class="tab-menu">
<li><a href="#GetCoreTab" class="a"><b>
<div id="home" class="menu">
</div>
</b></a></li>
<li><a href="#GetCustomerInformationTab" class="a"><b>
<div id="customer-information" class="menu">
</div>
</b></a></li>
</ul>
<div id="GetCoreTab">
<% Html.RenderPartial("Editors/Reservation/Tabs/TabCore"); %>
</div>
<div id="GetCustomerInformationTab">
<% Html.RenderPartial("Editors/Reservation/Tabs/TabCustomerInformation"); %>
</div>
Please do not tell me to use the previous version of the code since it is not possible. I just need to make the second version working in IE7 and 8, since it works well in Chrome and Firefox.
Thanks