Owl Carousel Not Showing On Bootstrap 5 - html

i try to use Owl Carousel version 2.3.4 with cdn, but it is not working, here is my code, the carousel didn't show up, Thankyou
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<!-- Owl Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>


You need to import jquery and owl scripts before your custom javascript code.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
crossorigin="anonymous" />
<div class="owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
<!--Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<!-- Owl Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- custom JS code after importing jquery and owl -->
<script type="text/javascript">
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
</script>

Related

Disable and Enable Text when button is pressed in HTML?

How should i disable my text Click Begin Game to start when Begin Button is pressed ? It keep displaying after begin button is pressed.
HTML CODE:
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>

I think this is what your are looking for . please check...
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
<script>
jQuery('#StartBtn').click(function(){
jQuery('.Status').hide();
})
</script>
</body>
</html>

You could add an additional line to the onclick event for the Begin Game button.
HTML
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="beginGame()">Begin Game</button>
<br><br><br>
<div class="Status" id="ClickToBeginMessage">Click Begin Game to start</div>
</div>
JS
function beginGame(){
gameStarted=true;
$("#ClickToBeginMessage").hide()
}

Bootstrap - dynamic size of items

I'm building a screen using Bootstrap and I don't know the correct way to reach the expected result.
Basically, what I need is have resizable items in the screen, when it has only one item, this item fills the entire space and when there are multiple items, resize them equally, like the images below.
The HTML that I have so far:
<body>
<div class="container-fluid nopadding">
<header class="container-fluid header">
<span>MINI RADICAL KART</span>
<section class="floating-buttons-box">
<a class="btn-floating green-gradient play"><img src="assets/imgs/play_button.png" width="12"/></a>
<a class="btn-floating black-gradient add"><img src="assets/imgs/plus_button.png" width="20"/></a>
</section>
</header>
<div class="container-fluid">
<div id="clock" class="col-md-5 timer">
<h2>Kart 01</h2>
<h1 class="time">04:32</h1>
<div class="buttons">
<img src="assets/imgs/pause_button.png" class="stop-button"/>
<img src="assets/imgs/single_play_button.png" class="play-button"/>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Countdown JavaScript -->
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
var fiveSeconds = new Date().getTime() + 5000;
$('#clock').countdown(fiveSeconds, {elapse: true})
.on('update.countdown', function(event) {
$(".time").text(event.strftime('%M:%S'));
if (event.elapsed) {
$(".time").removeClass("green");
$(".time").addClass("red");
} else {
$(".time").removeClass("red");
$(".time").addClass("green");
}
});
$('.stop-button').click(function() {
$('div#clock').countdown('pause');
});
$('.play-button').click(function() {
$('div#clock').countdown('resume');
});
</script>
</body>
Thanks.

here is what you want - u must use display: flex;

You probably want something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mb-4">
<div class="col mx-4 bg-danger">
thing
</div>
<div class="col mx-4 bg-success">
thing
</div>
</div>
<div class="row">
<div class="col mx-4 bg-secondary">
thing
</div>
</div>
</div>
As you can see, every col has the same classes, but on the second row I only have one col, that streches automatically to full size.
You can play around with this, and create what you need!

how to use ajax in framework7

I am using Framework7 to create my app. I am requesting some json data and displaying it on my page using jQuery. The problem is when I use the code in index.html it's working but when I use the code in any other page of the app it doesn't work, I see only a navbar and blank page. I am using same jQuery script in index.html and restaurant.html.
live working demo code here
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="theme-color" content="#2196f3">
<title>Tour Srilanka</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="ad.js"></script>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="css/framework7.material.min.css">
<link rel="stylesheet" href="css/framework7.material.colors.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
type: 'get',
crossDomain : true,
cache: false,
success: function(data) {
$(data.jaffna).each(function(index, value) {
console.log(value);
$( ".siteloader" ).append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px' / >"+"</div>"+
"<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+
"<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>");
});
}
});
</script>
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-cover">
<div class="view navbar-fixed">
<div class="pages">
<div data-page="panel-left" class="page">
<div class="card demo-card-header-pic page-content">
<div style="background-image:url('img/header.jpg');" valign="bottom" class="card-header color-white no-border header-font">Tour Srilanka</div>
<div class="list-block">
<ul>
<li><a href="restaurant.html" class="item-link close-panel">
<div class="item-content">
<div class="item-media"><i class="icon"><img src="img/rest.png"></i></div>
<div class="item-inner">
<div class="item-title">restaurants</div>
</div>
</div></a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Tour Srilanka</div>
<div class="right"><i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">Framework7 Kitchen Sink</div>
<div class="list-block">
<ul>
<li><a href="restaurant.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
<div class="item-inner">
<div class="item-title">Restaurant</div>
</div>
</div></a></li>
</ul>
</div>
<div class="siteloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
my restaurant.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
type: 'get',
crossDomain : true,
cache: false,
success: function(data) {
$(data.jaffna).each(function(index, value) {
console.log(value);
$( ".siteloader" ).append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px' / >"+"</div>"+
"<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+
"<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>");
});
}
});
</script>
<div data-page="restaurant" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><i class="icon icon-back"></i></div>
<div class="center">Restaurant</div>
<div class="right"><i class="icon icon-bars"></i></div>
</div>
</div>
<div class="page-content">
<div class="siteloader"></div>
</div>
</div>

i solved it myself.
I moved the code from restaurant.html and pasted inside my-app.js
my restaurant.html
<div data-page="restaurant" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><i class="icon icon-back"></i>
</div>
<div class="center">Restaurant</div>
<div class="right"><i class="icon icon-bars"></i>
</div>
</div>
</div>
<div class="page-content">
<div class="siteloader"></div>
</div>
</div>
my-app.js
// Init App
var myApp = new Framework7({
modalTitle: 'Framework7',
// Enable Material theme
material: true,
});
// Expose Internal DOM library
var $$ = Dom7;
// Add main view
var mainView = myApp.addView('.view-main', {
});
// page specific js for restaurant.html
//'restaurant' is the name that i used in data-page="restaurant"
myApp.onPageInit('restaurant', function (page) {
$.ajax({
url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
type: 'get',
crossDomain : true,
cache: false,
success: function(data) {
$(data.jaffna).each(function(index, value) {
console.log(value);
$( ".media-list" ).append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px' / >"+"</div>"+
"<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+
"<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>");
});
}
});
});

HTML page not rendering

Having problem with one of my development work that from time to time the page is rendering as text. Look at the http header and I cannot see anything wrong. Can someone give me a helping eye.
Thanks
0000
HTTP/1.1 200 OK
Date: Fri, 09 Dec 2016 13:15:49 GMT
Content-Length: 5621
Content-Type: text/html; charset=ISO-8859-1
Content-Language: en
X-Powered-By: Servlet/2.5 JSP/2.1
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>RunDetails</title>
<script type="text/javascript" src="/environment/resources/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/environment/resources/dev/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-animate.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="/environment/resources/js/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script type="text/javascript" src="/environment/resources/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/tooltip.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.tpl.js"></script>
<script type="text/javascript" src="/environment/resources/js/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/css/em.css" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap-theme.min.css" />
<!-- jQuery/Bootstrap JS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="envmon-header">
<div class="row">
<div class="col-md-1" id="logo">
<img src="/environment/resources/dev/img/flight.jpg">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6" id="headertitle">
<!-- <h1>Environment Monitoring</h1> -->
<h1>Environment Monitoring</h1>
</div>
</div>
<ul class="nav nav-pills">
<li><h2>Run A REPORT</h2></li>
<li class="dropdown" >
<h2 class="dropdown-toggle" data-toggle="dropdown">CONFIGURATION <b class="caret"></b></h2>
<ul class="dropdown-menu1" role="menu">
<li>Component Search</li>
<li>Component Group Search</li>
<li>Time Period Search</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="envmon-body" >
<div id="angularTestPage" class="theme-showcase row" ng-controller="RunDetailsPageController">
<!-- Error container. This should be populate with right error message on execution. -->
<div ng-cloak class="row">
<div ng-cloak class="alert-danger" ng-repeat="error in headerErrors">
{{error.message}}
</div>
<div ng-cloak class="alert-warning" ng-repeat="warning in headerWarnings">
{{warning.message}}
</div>
<div ng-cloak class="alert-info" ng-repeat="info in headerInfos">
{{info.message}}
</div>
<div ng-cloak class="global-error alert alert-success header-errors" ng-repeat="success in headerSuccesses">
{{success.message}}
</div>
</div>
<!-- vvvvvvvvvvvvvvvvvvvvvvv Actual Content Start Here vvvvvvvvvvvvvvvvvvvvvvv -->
<div id="content-title" class="row">
<div class="col-md-6 pageTitle align-left">Test Run Details</div>
<div class="col-md-6" >
<input type="submit" ng-click="exportButtonClicked()" id="btnExport" class="styled-button pull-right" value="EXPORT" />
</div>
</div>
<div id="run-detailsid" class="row">
<div id="" name="" class="row table-header-row" >
<div class="col-md-1">Component</div>
<div class="col-md-1">Status</div>
<div class="col-md-4">Test Name</div>
<div class="col-md-2">Service</div>
<div class="col-md-2">Operation</div>
<div class="col-md-2">Created Date</div>
</div>
<div id="" name="" class="row table-detail-row-wrap" ng-repeat="runDetail in runDetails">
<div class="col-md-1 table-cell centered">{{runDetail.componentName}}</div>
<div class="col-md-1 table-cell centered">
<div ng-show="runDetail.testLogId != ''">
<a href="" ng-click="runSelectedTestId(runDetail.testLogId);">
<img ng-src="{{runDetail.status == 2 ? redCircleImageLocation : greenCircleImageLocation}}" border="0" >
</a>
</div>
</div>
<div class="col-md-4 ">{{runDetail.testName}}</div>
<div class="col-md-2 ">{{runDetail.service}}</div>
<div class="col-md-2 ">{{runDetail.operation}}</div>
<div class="col-md-2 ">{{runDetail.createdDate}}</div>
</div>
</div>
<div> </div>
<div class="col-md-12 centered">runId = {{runDetails[0].runId}} </div>
</div>
<script type="text/javascript" src="/environment/resources/js/controllers/rundetails.js"></script>
</div>
<div id="envmon-footer">
<div class="row">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>

bootstrap-wysihtml5 doesn't work inside jquery steps

When I put my textarea which I want to be the wysihtml5-editor i get the following error message:
Uncaught TypeError: Cannot read property 'document' of null at wysihtml5-0.3.0.js:5460
Here's the html-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<title>TTZ - Fragebogen erstellen</title>
<!--Core CSS -->
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery.steps.css?1">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- Html5 Editor -->
<link href="js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="css/questionForm.css" rel="stylesheet">
</head>
<body>
<section class="panel">
<header class="panel-heading">
Fragebogen Erstellen
</header>
<div class="panel-body">
<div id="wizard">
<!-- Step 1 start -->
<h2>Eigentschaften</h2>
<section>
<form class="form-horizontal" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="col-lg-2 control-label">Titel</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Beschreibung</label>
<div class="col-lg-10">
<textarea class="htmlEdit form-control" cols="60" rows="8"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Bild zum Fragebogen:</label>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" />
</span>
<i class="fa fa-trash"></i> Remove
</div>
</div>
</div>
</div>
</form>
</section>
<!-- Step 1 end -->
<!-- Step 2 start -->
<h2>Fragen hinzufügen</h2>
<section>
Some content here
</section>
<!-- Step 2 end -->
<!-- Step 3 start -->
<h2>Abschlusstext konfigurieren</h2>
<section>
Some content here
</section>
<!-- Step 3 endt -->
<h2>Abschluss</h2>
<section>
Some content here
</section>
</div>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
</section>
<!--Core js-->
<script src="js/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"> </script>
<script src="js/jquery.scrollTo.min.js"></script>>
<script src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery-steps/jquery.steps.js"></script>
<!-- HTML5 Editor -->
<script src="js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script src="js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<!-- Our main JS file -->
<script src="js/mini-upload-form/assets/js/script.js"></script>
<script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js"> </script>
<script type="text/javascript" src="js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<script type="text/javascript">
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "fade"
});
$('.htmlEdit').wysihtml5();
});
</script>
</body>
</html>
When i move my textarea out of my jquery steps div it works perfectly fine... But I need to have a wysihtml5 inside of my steps. Any ideas?
Edit: Here's the code which seems to have a problem:
// Create the basic dom tree including proper DOCTYPE and charset
iframeDocument.open("text/html", "replace");
iframeDocument.write(sandboxHtml);
iframeDocument.close();
this.getWindow = function() { return iframe.contentWindow; };
this.getDocument = function() { console.log(iframe); return iframe.contentWindow.document; };
I already watched at the iframe at that point and it's null. I just don't know why and I am just not capable to understand the whole 10000 lines of code ;)