I am having great difficulty finding out why my MVC Bootstrap Menus don't work on a page with the TinyMCE HTML editor (I'm using ASP.Net MVC, the TinyMCE plugin, but just showing the generated HTML below).
What I'm looking for, is some way of finding conflicts between TinyMCE and the script to make the drop down menus work in Twitter Boostrap.
It should show:
... when I hover over Properties, however, when I have the TinyMCE editor on the page, the hover drop down does not work:
My generated HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Edit</title>
<link href="/content/css?v=MUk2LfSuGyP1dibrYRROgQuE_irzerGsrA5KYasVO_U1" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="Flexible Group Booking System">Flexible Group Booking System</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Properties <b class='caret'></b></a>
<ul class="dropdown-menu">
<li>Property List</li>
</ul>
</li>
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Room Types <b class='caret'></b></a>
<ul class="dropdown-menu">
<li>Room Type List</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<form action="/email/Edit" method="post">
<input name="__RequestVerificationToken" type="hidden" value="mFXxdzlDHBlUyPia3kwCvb1" /><fieldset>
<div class="editor-label">
<label for="EmailBody">EmailBody</label>
</div>
<div class="editor-field">
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
$(function () {
$('#EmailBody').tinymce({
// Location of TinyMCE script
script_url: '/Scripts/tinymce/tiny_mce.js',
theme: "advanced",
height: "300",
width: "790",
verify_html: false
});
});
})();
</script>
<textarea length="1418" cols="20" data-val="true" data-val-required="The EmailBody field is required." id="EmailBody" name="EmailBody" rows="2">
</textarea>
</div>
<p class="form-actions">
<input type="submit" value="Save" class="btn btn-primary" />
</p>
</fieldset>
</form>
</body>
</html>
There are no javascript errors showing in either IE or Chrome.
How else can I troubleshoot where the conflict is, and try to resolve it?
Thank you,
Mark
It looks like a possible conflict between 2 different versions of jQuery at the same time:
<script src="/Scripts/jquery-1.9.1.js"></script>
and TinyMCE's custom jquery library:
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
Try this solution to load TinyMCE BEFORE jQuery:
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
tinyMCE.init({ mode : "none"});
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('textarea.tinymce').tinymce({
theme : "simple",
script_url : 'tiny_mce/tiny_mce.js',
});
});
</script>
Related
I deployed website using Django. I used external js code for grid (I want site to be user-friendly for all screens). When running just html using same js code or running it on my computer through manage.py it works fine. But when I actually deployed website grid become unclickable from small screens and you cannot see menu.
I couldn't find anything in Google. I am not sure if I have to use load static because I use external script, but tell me if I am wrong
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- DOCUMENTATION NAVBAR -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- Inside of a Container -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- This is the actual code that create the "hamburger icon" -->
<!-- The data-target grabs ids to put into the icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- Code for the hamburger icon-->
<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" style="color:white;"
href="{% url 'wpb:index' %}">
Mycroft Conspiracy Project</a>
</div>
<!-- Anything inside of collapse navbar-collapse goes into the "hamburger" -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">О проекте <span class="sr-only">(current)</span></li>
<li class="active">Политика<span class="sr-only">(current)</span></li>
<li class="active">Психология<span class="sr-only">(current)</span></li>
</ul>
<!-- SEARCH BAR -->
<form action="{% url 'wpb:search' %}" method="get" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Поиск">
</div>
<button type="submit" class="btn btn-default" name="search">Поиск</button>
</form>
<!-- Stuff on the Right -->
<ul class="nav navbar-nav navbar-right">
<li>Обратная связь</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- OTHER STUFF ON THE PAGE -->
<!-- Need to have JQuery and Javascript for DropDown Actions to work -->
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<br />
<br />
<br />
<body style=" height: 800px;
position: relative;">
{% block body_block %}
{# Anything outside of this will be inherited if you use extend.#}
{% endblock %}
</body>
</div>
</br>
<div style="font-family:Palatino Linotype;position: sticky; position: -webkit-sticky;left:0;bottom:0;width:100%; top: 100%; height: 12rem;background-color:#2e2c27; border:1px dotted #003333; padding:.8em; ">
<h4 style="color:white;font-weight: bold;">Mycroft Conspiracy Project</h4>
<span style="font-size:12pt; font-family: 'Cambria','times new roman','garamond',serif; color:white;">Достоверность информации</span></br>
<p style="font-size:10pt; line-height:10pt; font-family: 'Cambria','times roman',serif; color: white;">Проект является любительским и не носит информационный характер. Хотя автор указывает в каждой статье степень своего личного отношения к
описываемым версиям или данным, здесь отсутствуют намерения представить статьи как источники, на которые стоит ссылаться. При копировании материалов с сайта ссылка
обязательна.</p>
<span style="padding-top:10px; font-weight:bold; color:#CC0000; font-size:10pt; font-family: 'Calibri',Arial,sans-serif; "></span></br></br>
</div>
</body>
</html>
Found it. Problem was that link to js code was starting with http. Browser was blocking it as mixed content. Needed just to change it to https.
I am learning angularJS and i am using the book, "Learning Web Development with Bootstrap and AngularJs" and i am trying to create a ng-click functionality to a button. but nothing happens when i click it. this is my controller.js...
function AppCtrl($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
this is my view...
<html ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<title>Contacts Manager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contacts Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="active">Browse</li>
<li>Add Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
</nav>
<div class="col-sm-8">
<button ng-click="clickHandler()">Click Me</button>
</div>
</body>
</html>
what am i doing wrong???
You need to create a module, and make the controller on the module. You then need to tell angular to bootstrap the module as the root of the application (using ng-app directive). I would reccomend taking another look at the exaple you are following.
Here's a short snippet setting up a button with a click-handler:
angular.module('myApp', [])
.controller('AppCtrl', function($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="clickHandler()">Click Me</button>
</div>
Inject $window, and call it. You have not dome that
I have a simple web page which works correctly in the Safari emulator and in OSX Safari, however it reloads the site on completion of a form. I am running the latest version of iOS (9.2 13C75). The page is written in html5/css3 and uses Javascript and bootstrap css. jQuery is used to dynamically load pages into a specified div. The basic web logic is:
load primary html page
onload, jquery get content page
select action (iosTest) from nav bar
jQuery get to load form
press complete, clears page, displays text ... or
press cancel, clears page, jquery get cancel message
Step 5 works, then Safari reloads original URL
Step 6 never appears to work, Safari just reloads the original URL
My question to all is "is this a known bug and are there workarounds ... or am I doing something really dumb by dynamically loading forms?"
Primary HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ios Mobile Safari Test</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/ios_test.css" rel="stylesheet">
</head>
<body onload="initialSetup('html/ios_about.html','body_cell')">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topNav">
<div class="container" id="navbar">
<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" id="welcome" onClick="goHome('html/ios_about.html','body_cell')">ios Mobile Safari Test</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="iostest"><a onClick="goiosTest('html/ios_dialog.html', 'body_cell')">iosTest</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="noBorder" id="SD_Main">
<div class="container" id="leftNav"></div>
<div class="container" id="body_cell"></div> <!-- /container -->
</div>
<div class="container" id="test" width="100%"></div>
<div class="container" id="debug" width="100%"></div>
<script src="js/jQuery/jquery-1.11.3.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/iosTest.js"></script>
</body>
</html>
JavaScript (iosTest.js)
var body_cell = "#body_cell";
function goHome(pageToLoad, target)
{initialSetup(pageToLoad, target);}
function initialSetup (pageToLoad, target)
{
$.when($.get(pageToLoad) ).done(function (xml_stream)
{ $("#"+target).empty();$("#"+target).append(xml_stream);});
}
function goiosTest(pageToLoad, target)
{
$.when($.get(pageToLoad) ).done(function (xml_stream)
{ $("#"+target).empty();$("#"+target).append(xml_stream);});
}
function ios_postDialog(comment, o_name, c_name, Create)
{
$(body_cell).empty();
$(body_cell).append("<h2>dialog completed</h2>");
}
function ios_cancelDialog()
{
$.when($.get("html/ios_alt.html") ).done(function (xml_stream)
{ $(body_cell).empty();$(body_cell).append(xml_stream);});
}
Form
<div class = "container" id="SD_dialogBox">
<h2>SSample Dialog Box.</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="c_name" class="col-sm-2 control-label" >Client Name:</label>
<div class="col-sm-8">
<select id="c_name"></select>
</div>
</div>
<div class="form-group">
<label for="o_name" class="col-sm-2 control-label" >Opportunity Name:</label>
<div class="col-sm-8">
<select id="o_name" ></select>
</div>
</div>
<div class="form-group">
<label for="comment" class="col-sm-2 control-label">Comments on Opportunity - anything that is relevant to you.</label>
<div class="col-sm-8">
<textarea class="form-control" id="comment" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button class="button-wide" id="submit" onClick="ios_postDialog('comment', 'o_name', 'c_name', 'Create')">Save this Information</button>
<button class="button-wide" id="cancel" onClick="ios_cancelDialog()">Cancel</button>
</div>
</div>
</form>
</div>
Thanks for the feedback. Turns out to be an error in supporting code. Buried deep beneath, a JS function was being called which did not exist. iOS safari didn't like that and reloaded the site when that error occurred.
I am trying to use the metro UI css library but I can't figure out why my navbar css is not working.
Here's my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>Main</li>
<li>File Open</li>
<li class="divider"></li>
<li>Print...</li>
<li class="divider"></li>
<li>Exit</li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Buy Now</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
The UI is not appearing properly for the nav-bar although I've loaded the required files.What is causing the problem ?
I've copied the navbar code from here.
Change:
<nav class="navigation-bar dark fixed">
To:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
As stated in the documentation:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.
The issue with Metro Bootstrap UI CSS aka http://metroui.org.ua/ is this:
You load the theme to localhost, or mabe into a MCV framework, and the dropdown doesnt work! Right?
Okay so look for this line in the html file
<script src="js/load-metro.js"></script>
This is where the problem is.
You can open this file and see the contents - its best to use a full url to include the JS files. I myself removed this line from my files:
<script src="js/load-metro.js"></script>
And I replaced it with the contents:
<script type="text/javascript">
$(function(){
if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro/metro-loader.js').appendTo($('head'));
} else {
$("<script/>").attr('src', '<?=base_url('adminstyle')?>/js/metro.min.js').appendTo($('head'));
}
})
</script>
now you will notice I use base_url() - this is for my case only. Replace that with your full url and walla the dropdown should be working.
I've researched this problem and I still cannot get it to work, when I click the form it closes because of boostrap-dropdown.js. However, I am following this guide to create a login dropbdown on my navbar using bootstrap: Guide, and they have included JS to stop the form from closing, but it is not working for me.
Here is my code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand"><img name="" src="bglogo.png" alt=""></a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="drop down">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form action="Checklogin.php" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
and my Javascript that I am inserting in before the close body tag:
<!-- Placed at the end of the document so the pages load faster -->
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
Thanks!
Edit: The more I think about it, the more I realize it HAS to be a Javscript issue, because the form and the navbar are fine, but when I "click" the dropdown it closes.
You are referencing the wrong container in your js, .dropdown, its supposed to be .dropdown-menu; try this:
JS
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
Quick tip: you can minimize the number of js calls in your page by using the bootstrap.js pack of scripts instead of loading them one by one.