I am trying to make a tool that will allow users to create their own html pages. For this i am allowing users to click on different items like button and drag and drop them on required locations. But for some reason the drag and drop is not working. The code attached is only for the button(the other attributes are still to be implemented). The css files are also attached.
`
<title>HTML5 Editor</title>
<link href="html editor/business-casual/css/bootstrap.css" rel="stylesheet">
<link href="html editor/business-casual/css/business-casual.css" rel="stylesheet">
<script type='text/javascript'>
var i = 1;
var bufferCanvas = new Array();
var ButtonArray = [];
ButtonArray.push({
type : "submit",
name: [],
value:[]
});
console.log(ButtonArray);
<!-- Create Button when user clicks on button-->
function createButton(ev)
{
var canvas=document.getElementById("myCanvas")
var button = document.createElement("input");
div=document.createElement('div');
button.type="submit";
button.style.position='absolute';
button.name="Button"+i;
button.value = "Button"+i;
div.appendChild(button);
div.draggable=true;
div.ondragstart="drag(event)";
div.id="draggable";
div.class="draggable ui-widget-content";
var l=i-1;
ButtonArray[l].name.push(div.id);
ButtonArray[l].value.push(button.value);
canvas.appendChild(div);
i++;
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function allowDrop(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drag(ev)
{
ev.stopPropagation();
ev.preventDefault();
}
function drop(ev)
{
ev.stopPropagation();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();}
</script>
<style type="text/css">
<!--
.style1 {font-size: 18px}
-->
</style>
</head>
<body>
<div class="brand">HTML5 EDITOR</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-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="../business-casual/index.html">Business Casual</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Create</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12" id="menu">
<ul>
<li>Add
<ul>
<li><a name ="textBox" onClick="createTextBox()">Text</a></li>
<li>Image</li>
<li>Audio</li>
<li>Video</li>
<li>Shapes </li>
<li>Lines</li>
<li><a name="button" onClick="createButton()">Buttons</a><li>
<li>Menus<li>
</li>
</ul>
</li>
</ul>
<ul><li><a name="SaveButton" onClick="saveTextAsFile()">Save</a></li></ul>
</div>
</div>
</div>
</div>
<div class="ui-widget-header" id ="myCanvas" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div><!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
</div>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>`
you can use this greate example http://www.w3schools.com/html/html5_draganddrop.asp
Related
Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.
I'm using this plugin here of videojs.
I can not make an append after selecting video.
The following code:
$('#chooseFile').click(function(event) {
event.preventDefault();
// prevents our button from submitting or doing anything else
$('#fileInput').trigger('click');
// passes on the click event to our hidden choose file input (or rather,
// it triggers a new click event, whatevs)
});
$("#fileInput").on("change", function() {
var files = this.files;
var anyWindow = window.URL || window.webkitURL;
var objectUrl = anyWindow.createObjectURL(files[0]);
var add = "<video id=\"my-video\" class=\"video-js vjs-default-skin vjs-big-play-centered vjs-16-9\" controls preload=\"auto\" data-setup=\"{}\">\
<source id=\"src_video\" type='video/mp4'>\
<p class=\"vjs-no-js\">\
To view this video please enable JavaScript, and consider upgrading to a web browser that\
supports HTML5 video\
</p>\
</video>";
$("#video").append(add);
$("#src_video").attr('src', objectUrl);
window.URL.revokeObjectURL(files[0]);
});
#fileInput {
display:none;
}
#fileName {
display: none;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://vjs.zencdn.net/5.19.1/video-js.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/5.19.1/video.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<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="#">ButtStyle</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>File Selection Button Styling</h1>
<form>
<input type="file" id="fileInput">
<button id="chooseFile" class="btn"><i class="icon-file"></i> Choose File</button>
<button type="submit" class="btn btn-primary"><i class="icon-upload icon-white"></i> Upload It!</button>
</form>
</div> <!-- /container -->
<div id="video"></div>
If you prefer jsfiddle: Here
I can not make an append after selecting video. I do not want to show browser default. I want to show videojs here.
Any Solution ?
Hey I am trying to add a class and an attribute to my nav elements and for some reason my code jumps to the else statement. Appreciate any help what so ever.
This is my Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- Content Filter -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleC.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="pageone">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#"><img id="logo" src="images/Logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WORK</li>
<li>ABOUT ME</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="jumbotron">
<h1>Hy, I’m Robert and I am a webdesigner based in Aarhus.</h1>
</div>
</div>
</div>
<div id="2" class="pagetwo">
<div class="container-fluid">
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1">Constructing Architecture</li>
<li class="filter" data-filter=".color-2">Photography</li>
<li class="filter" data-filter=".color-2">Multimedia Design</li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
</div>
</div>
<div class="pagethree">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center about-txt"><a id="3" href="#">About Me</a></h2>
<img src="images/Profile-image.png" class="img-responsive img-rounded center-block" alt="My Face :)">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-center about">To tell you a little more about me, I have decided to make this short
personal description. I love doing many things: design, photography, architecture, coffee
and all of these traits represent me. I thrive in a social environment, loving the interaction between
co-workers and clients. People say I’m funny and this makes working with me an ease.</p>
</div>
</div>
</div>
</div>
<div class="pagefour">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h2>Feel free to contact me at <span>info#freirobert.com</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>You can also find me on social media on the links below</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="fa fa-behance-square fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p class="text-center">©Robert Frei 2016</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Resource Content Filter -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/add.js"></script>
</body>
</html>
The css to the item required
.pagetwo {
background-color: white;
background-size: cover;
}
.darkNav {
background-color: black !important;
}
And my JS which does not work....
$(function () {
var header = $('.navbar-default .navbar-toggle .icon-bar');
var logo = $('#logo');
var hieghtThreshold = $(".pagetwo").offset().top;
var hieghtThreshold_end = $(".pagetwo").offset().top + $(".pagetwo").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end ) {
console.log("WORKS!!!!!");
//logo.attr("src","/images/Logo-black.png");
//header.addClass("darkNav");
} else {
alert("IT BROKE!");
//logo.attr("src","/images/Logo.png");
//header.removeClass("darkNav");
}
});
})
This will execute every time when the window is scrolled. Go to the magic threshold and see that the WORKS!!!!! comment comes in the console. Replacing alert() with console.log() will throw nice light on it.
The $(window).scroll() fires continuously while scrolling the page. So since you have used alert() it keeps firing every time you scroll, and shows you BROKE!.
I am trying to use ajax so the page does not automatically refresh, however for some reason i cant seem to get it to work. I was going for this effect, using this Link
You can see how it slides in etc, without reloading, however i cant seem to get the site to work at all to even reload. When i click the link , nothing comes up.
I am trying to get it to work with login and register page. When i click on the links , nothing happens.
Thanks again for the help.
<div class="navbar navbar-default" 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>
<div class = "logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="Mainbody">
<div class="linetop">
<div class="linebottom">
<h3>JULY 19th, 2016</h3>
<!-- <h1><span>J</span>UST <span>J</span>UICE</h1> -->
<h1>INTO THE NEW YOU</h1>
<h2>THE APPLICATION TO A HEALTHIER LIFESTYLE</h2>
<div class="bottop">
<div class="botbottom"></div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="navbar-text pull-left">
<div class="logo1">
<img src="Image/Logo.png" class="img-responsive"/>
<p>© 2016 by JJ. CopyRight Ali Issa</p>
</div>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-instagram fa-2x"></i>
</div>
</div>
</div>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href='"+newHash+"']").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Edit:
With new code added , now all it does is refresh like normal and not fade in , fade out
My page, containing a bootstrap navbaar, shows a togglebutton for the menulinks when viewed in smal window. Hiiting this buttons shows the dropdown containing the menuitems but after pressing the togglebutton again it won't close...
Anyone know why?
<html>
<head>
<title>Loket BWL Rapportage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="bwl.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="imgLogo" src="Images/arnhemlogo.png" alt="arnhem" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
testlink 1
</li>
<li>
testlink 2
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<table class="table table-bordered">
<tr>
<td class = "header">Onderwerp</td>
<td class = "header">Gegevens</td>
</tr>
<xsl:apply-templates/>
</table>
<!--<br/>
<div style="font-size:12px"><b>Meta-informatie</b></div>-->
</div>
</body>
<script language="JavaScript" src="https://code.jquery.com/jquery.js" />
<script language="JavaScript" src="../Scripts/bootstrap.js" />
</html>
Changing the .js references to:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
did the trick.