Twitter Bootstrap tabs not working in IE8 - javascript

I'm trying to get tabs working in IE8, using code directly off the examples page for Twitter Bootstrap, but they just aren't behaving the same way as they do on the example page.
Specifically, the inactive tabs always remain visible.
Code below:
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="messages">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
I've tried initiating the tabs both through using data-toggle tags and also using the suggested .tab() method but no difference... the inactive tabs are always visible!
JSfiddle link here (but jsfiddle doesn't work in IE8 anyway): http://jsfiddle.net/4gNpt/
SOLVED! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.

Solved! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.

Related

Load content of external header on other page

I've only started working on my website and I've already run into a little hiccup, for some reason a script that I use doesn't work anymore and I can't find any fixes, there's nothing in the chrome console or any useful error information.
I was hoping you guys could help me out.
I'm simply trying to load a piece of a different HTML page onto my Index page.
Usually I run this script, and it should take the #nav div from the header.html and put it into the header below the script.
Index.html:
<!--added scripts-->
<script src="jquery/jquery-3.2.0.min.js"></script>
<!-- Css -->
<link rel="stylesheet" type="text/css" href="Sjvklusbedrijf.css">
<!--script-->
<script>
$(document).ready(function() {
$("#header").load("header.html #nav");
alert("test");
});
</script>
</head>
<body>
<header id="header">
</header>
requested script:
<div id="#nav">
<div class="logodiv"></div>
<ul>
<li>Home</li>
<li>Foto's</li>
<li>Garantie</li>
<li>Contact</li>
</ul>
I'm using jquery and have loaded it thusly: <script src="jquery/jquery-3.2.0.min.js"></script> and if I put an alert in the doc.ready script it pops up but it doesn't load the required data
I'm running on localhost but that shouldn't be a problem for jquery
Thanks for the help!
It did not work the first time because <div id="#nav"> should be <div id="nav">.
okay somehow it decided to work but I don't really get why.
I changed some things:
index:
<script>
$(document).ready(function() {
$("#header").load("header.html nav");
});
</script>
</head>
<body>
<!--header-->
<header id="header" class="header">
</header>
required script:
<nav>
<img src="fotos/test" alt="logo"/>
<ul>
<li>Home</li>
<li>Foto's</li>
<li>Garantie</li>
<li>Contact</li>
</ul>

Foundation navigation top-bar not working with thymeleaf

I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.
So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.
I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.
My HTML file looks like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/foundation.min.css}" />
</head>
<body>
<nav class="top-bar" role="navigation" data-topbar="true">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><span th:text="#{menu.administration}"></span>
<ul class="dropdown">
<li class="has-dropdown"><span th:text="#{menu.administration.material}"></span>
<ul class="dropdown">
<li><span th:text="#{menu.administration.ontology}"></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<div>
<div class="large-12 columns">
<h2 th:text="#{material.search.title}"></h2>
</div>
</div>
<script th:href="#{/js/vendor/jquery.js}"></script>
<script th:href="#{/js/foundation.min.js}"></script>
<script th:href="#{/js/foundation/foundation.topbar.js}"></script>
<script th:href="#{/js/vendor/modernizr.js}"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
</body>
</html>
I'm sure my resources are being properly imported.
Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.
Am I doing something wrong?
Thank you so much for any help guys!
The problem was located in the property I was using to import my JS files.
As seen in my code, the import looks like this:
<script th:href="#{/js/foundation.min.js}"></script>
But to import a script file the href property is wrong, it must be src so the correct format is:
<script th:src="#{/js/foundation.min.js}"></script>
I know it was a silly mistake but I hope it helps someone else.
The fact that an error was never shown while compiling nor while generating the page worries me a little.
your th:text="#{menu.administration} is not working
the structure should be
<h1 th:text="${header.title}">title</h1>
<small th:text="${header.subtitle}">Subtitle</small>
you can't leave the empty and expect a value
please take a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

Twitter Bootstrap navbar not working in PLAY framework

I have a main.scala.html which has header,navbar and footbar as follows-
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<ul class="nav nav-justified" id="myTab">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout" data-toggle="tab">#Messages("views.main.logout")</li>
</ul>
<div id="showData">
#content
</div>
</div>
</head>
<body>
</body>
</html>
The page content should be displayed as in the tags.
However on clicking the tabs the page contents are not getting displayed.
Note the page contents were getting displayed earlier on clicking on the tabs but after adding data-toggle="tab" to the list elements it stopped displaying.
Check your html code:
...
<head>
<ul class="nav nav-justified" id="myTab">
There is a end head and start div tag missing.
Preview source code generated by Play in the browser and use built-in browser inspector for HTML error (also you can just try to validate it with W3C Validator
If your view looks exactly as you showed as - it can not produce valid HTML document

Strange behavior in jQuery Mobile nested list views

I'm experimenting with nesting listviews in jQuery Mobile. In the code below I have three list elements all of which contain a '.sub-list' element with 'display:none'. The prescence of the '.sub-list' elemnt cause two odd behaviors.
The precence of the 'sub-list' elements causes '#main-list' to be css formatted, i.e. the list elements have a gradient on the color and when you mouse over it changes color as well.
The precence of the '.sub-list' elements cause the '.main-list-element' list elements to link to a new page with the '.main-list-element' text at the top of the page. Can anyone tell me why this is happening and how to prevent it?
Please note I have experimented with jQuery Mobile collapsable content and have ruled out using it.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
</head>
<body>
<div data-role="page" id="date-page" class="type-interior" style="width:100%">
<ul id='mainlist' data-role="listview" class='list-element'>
<li class='main-list-element'>test 1<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 2<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 3<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
<script>
$('.list-element').click(function(){
alert("hi");
});
</script>
</body>
</html>
Update:
Here is an official demo of creating a Nested Listview in jQuery Mobile 1.4.
This is called Nested Listview which is deprecated as of latest stable version (1.3) and will be removed in version (1.4).

jsfiddle code working but when in demo page is not

I am testing this fiddle written by #Ilan Biala
It adds a submenu in a menu using jquery 1.9.0, onDomReady and Normalized css as you can see on the jsfiddle.
For instance the html is:
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3</li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li>Documents</li>
<br>
<li>Messages</li>
<br>
<li>Sign Out</li>
</ul>
</ul>
</nav>
the result is:
But there is an issue, I am adding the code to a server I have access, and Added the lines:
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
to emulate those in jsfiddle. The html is:
<!doctype html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3</li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li>Documents</li>
<br>
<li>Messages</li>
<br>
<li>Sign Out</li>
</ul>
</ul>
</nav>
</body>
</html>
So, as you can see the submenu is not working, what could be causing the glitch?
I am suspecting different issues:
Maybe the onDomReady property that wraps the code so it will run in onDomReady window event, if so How do I indicate that on code :
$(document).ready(function() {
//ADD ALL THE JS CODE IN menu.js
});
The Normalized css, but that is suposed to make a reset....
Theres is an issue in the jquery 1.9.0, maybe the order the using js are placed...
What do you think?
yes you are right;
onDomReadycode is:
$(document).ready(function(){
//your code
})
as if you change the event in jsfiddle to body wrap it would not work.
See the same fiddle here modified to work with what you want: JS Fiddle Link
Its the exact same fiddle that you posted, just onDomReady set to "no wrap (head)" and JavaScript code wrapped in ready function. This makes it work with the HTML you have posted.
// jQuery(document).ready(function($) {
jQuery(function($) {
....
// your code
});
So, as an answer, when you have jQuery loaded in head tag of your html document, you need to use .ready() API of jQuery and wrap all your code for any DOM manipulation in the ready function

Categories

Resources