JavaScript Print function issue - javascript

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print
When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me?
<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; text-align:center;float:left;margin-right:20px;}
.shadow(#shadow){
-webkit-box-shadow:#shadow;
-mox-box-shadow:#shadow;
box-shadow:#shadow;
}
.label-danger{
margin-left:10px;
margin-top:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
//console.log(ev.target);
}
function drop(ev) {
ev.stopPropagation()
var EklenecekDiv=ev.target;
var data = ev.dataTransfer.getData("text");
//console.log(ev.target);
console.log($(ev.target).parent());
var divim=ev.target;
var c = divim.children;
console.log(c.lenght);
/*if(c[2]==null)
{
EklenecekDiv=$($(ev.target).parent());
EklenecekDiv.append()
var label1=document.getElementById(data);
var MyLabelAdd1=document.createElement("div");
MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
$(MyLabelAdd1).attr("name","KolonAdi");
EklenecekDiv.append(MyLabelAdd1);
divim.remove();
label1.remove();
return;
console.log(EklenecekDiv);
}
if(c[3]!=null)
{
c[3].remove();
}*/
var label=document.getElementById(data);
var MyLabelAdd=document.createElement("div");
MyLabelAdd.appendChild(document.createTextNode($(label).html()));
$(MyLabelAdd).attr("name","KolonAdi");
if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }
EklenecekDiv.appendChild(MyLabelAdd);
label.remove();
}
function tiklandi()
{
alert("Okey");
}
function Click(e){
if(SecilenItem==null)
{
alert("Lütfen Alan Seçiniz");
return;
}
var item=SecilenItem;
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
KolonDiv.style.marginLeft=Bosluk+"px";
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
};
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
var originalContents = document.body.innerHTML;
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function TabloAlanTiklandi (e){
SecilenItem=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
//e.remove();
}
function FontLi(e)
{
YaziFont=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
}
function StilDegistir(e)
{
}
function EkAlanClick(e){
if($("#EkAlan").val()==null)
{
alert("Lütfen Alan Giriniz");
return;
}
var h1=document.createElement("h1");
var item=$("#EkAlan").val();
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
$("#EkAlan").val("");
}
function BoslukEkle(e)
{
if($("#Aralik").val().lenght==0)
{
alert("Aralik Degeri Giriniz");
return;
}
Bosluk=$("#Aralik").val();
alert(Bosluk);
$("#Aralik").val("");
}
function BoyutEkle(e)
{
if($("#YaziBoyutu").val().lenght==0)
{
alert("Boyut Degeri Giriniz");
return;
}
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Calendar</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Left side column. contains the logo and sidebar -->
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<!-- Main content -->
<div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
<div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
<span class="caret"></span></button>
<ul id="Secenekler" class="dropdown-menu">
<li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
<li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
</ul>
</div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>
<div class="col-xs-1"></div>
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>
<div class="col-xs-4" ></div>
<label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
<label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
<span class="caret"></span></button>
<ul id="Fontlar" class="dropdown-menu">
<li><a onClick="FontLi(this)" href="#">Georgia</a></li>
<li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
<li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
<li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
<li><a onClick="FontLi(this)" href="#">Arial</a></li>
<li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
<li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
<li><a onClick="FontLi(this)" href="#">Impact</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
<li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
<li><a onClick="FontLi(this)" href="#">Verdana</a></li>
<li><a onClick="FontLi(this)" href="#">Courier New</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
</ul>
</div>
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>
</div>
<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>
<!-- /.content -->
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->
</body>
</html>


It's not an optimal solution but can you try replacing CiktiGetir function with this:
function CiktiGetir(e){
var htmlElement = document.querySelector("html");
var printContents = document.getElementById("Kolonlar");
// Make body invisible, append new element to HTML
document.body.style.display = "none";
htmlElement.appendChild(printContents);
window.print();
// Make body visible again, remove the added element
document.body.style.display = "initial";
htmlElement.removeChild(printContents);
}
Replacing HTML content breaks the JS events and dynamic contents.


You are replacing the body HTML
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
So you will need to reatach the events.
Try the "on" jquery method. Something like
$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });


My code was just an example. You will have to adapt it to your code.
You need to reatach the events after replace body content.
If, you dont want to to this, you can refresh the entire page.
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}

Related

How to get result from button click to display on the same page using Javascript

I am writing a page that has the code for a function in a pre tag, a button below the raw code that will run the code. I am having trouble with displaying the result of the button on the same page. I know document.write() is probably the culprit but I'm unsure what to change it to. Thanks you for your time.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <title>Stack Overflow Question</title>
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Q3</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Question 3 Start -->
<div role="tabpanel" class="tab-pane tab-pane active" id="q3">
<div class="row">
<div class="col-md-12">
</div>
<div class="col-md-12">
<!-- button -->
<button id="q3-button" class="btn btn-default" type="button">Question Three Solution</button>
</div>
<div class="col-md-12">
<!-- result -->
<div id="q3-result"></div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//Q 3
function start(){
var start = parseInt(prompt("How long would you like the side to be?"));
if (isNaN(start)) {
alert("That's not a number, please retry.");
var start = prompt("Please re-enter a number.");
}
var str = " " + "<br>";
for (var i=1; i<=start; i++){
for(var j=1; j<=8; j++){
if((i+j)%2==0){
document.write("#");
}
else{
document.write(" ");
}
}
document.write(str);
}
$("#q3-result").html(start);
}
$("#q3-button").on("click", function(){
start();
});
//ends document ready function
});
</script>
</div>
</body>
</html>

Resolving external resources in html head

In the code below, index.html page is not getting styled in the browser as per the css and js it links to in the head of index.html. There is also a script tag before the closing body tag. I tried removing the ".." and playing around with the path for no avail.
index.html siblings are folders:
css, js and jquery.mobile-1.4.5
Contents of css folder:
index.css
Content of js folder:
index.js
jquery-1.11.3
Contents of jquery.mobile-1.4.5 folder:
Will the links in the head tag resolve correctly? if not, please suggest. Thanks
$("header .ui-btn-left").on("tap", drawerToggle);
$(".contentDiv nav").on("swipeleft", drawerClose);
$("ul").children("li").on("tap", navItemHandler);
$(document).on("pagebeforeshow", middleButtonGone);
function drawerToggle() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({
"left" : -width
});
} else {
$("nav").css({
"left" : 0
});
}
}
function drawerClose() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({
"left" : -width
});
}
}
function drawerOpen() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left != 0) {
$("nav").css({
"left" : 0
});
}
}
function middleButtonToggle() {
if ($("footer ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
} else {
$("#extra").show();
$("footer ul").removeClass('ui-grid-a').addClass('ui-grid-b').find("li").last().removeClass('ui-block-b').addClass("ui-block-c");
}
}
function middleButtonGone() {
if ($("footer ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
}
}
function navItemHandler() {
var selected_index = $(this).index();
drawerClose();
}
nav {
width: 80%;
position: fixed;
background-color: white;
left: 0;
top: 2em;
transition:left 0.3s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="../css/index.css" />
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<header data-role="header" data-position="fixed">
<a class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
<h1>Activity label</h1>
<a class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-gear">Info</a>
</header>
<div data-role="content" class="contentDiv">
<form method="post" action="demoform.asp">
<input type="text" name="fname" id="fname">
</form>
<nav>
<ul data-role="listview" data-inset="true">
<li>
<img src="css/images/image.png" alt="France" class="ui-li-icon ui-corner-none">France
</li>
<li>
<img src="css/images/image.png" alt="Germany" class="ui-li-icon">Germany
</li>
<li>
<img src="css/images/image.png" alt="Great Britain" class="ui-li-icon">Great Britain
</li>
<li>
<img src="css/images/image.png" alt="Finland" class="ui-li-icon">Finland
</li>
<li>
<img src="css/images/image.png" alt="United States" class="ui-li-icon ui-corner-none">United States
</li>
</ul>
</nav><!-- /side navigation -->
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<button type="submit" data-theme="c">
NO
</button>
</li>
<li id="extra">
<button type="submit" data-theme="c">
EXTRA
</button>
</li>
<li>
<button type="submit" data-theme="c">
YES
</button>
</li>
</ul>
</div>
</footer><!-- footer -->
<script src="../js/index.js"></script>
</body>
</html>
index.css

Your paths are wrong
If index.html is a sibling to the resource folders, then the paths to the folders should not be "../some path", it should be "some path".
Change to the following in head:
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="css/index.css" />
Change to the following at the end of the body:
<script src="js/index.js"></script>
It might be good to understand relative path's, specifically in regards to a parent directory.

(Bootstrap) - Changing dropdown button text to reflect item clicked removes caret

I am using the dropdown from bootstrap and i would like the button to have its text change depending on which of it's two dropdown items i click. The text changes according to the item clicked but the caret is gone after the first change and so forth. I want to keep the caret in the button!
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span></button>
<ul class="dropdown-menu" value="Fast">
<li onclick="dropdown(this.innerHTML);">Fast</li>
<li onclick="dropdown(this.innerHTML);">Accurate</li>
</ul>
</div>
<script>
function dropdown(val){
var y = document.getElementsByClassName('btn btn-default dropdown-toggle');
var aNode = y[0].innerHTML=val;
}
</script>

With your current code, appending the caret icon code will help you retain it after changing the drop down value.
function dropdown(val) {
var y = document.getElementsByClassName('btn btn-default dropdown-toggle');
var aNode = y[0].innerHTML = val + ' <span class="caret"></span>'; // Append
}
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span>
</button>
<ul class="dropdown-menu" value="Fast">
<li onclick="dropdown(this.innerHTML);">Fast</li>
<li onclick="dropdown(this.innerHTML);">Accurate</li>
</ul>

.innerHTML will get you the entire content, including the inner span that you are using for the caret.
What you need is the textContent of the firstchild of your dropdown, which is actually a textNode.
Example Snippet:
var dropdown = document.getElementsByClassName('dropdown-toggle')[0],
options = document.getElementsByClassName('dropdown-menu')[0]
;
options.addEventListener("click", function(e) {
if (e.target.tagName === 'A') {
dropdown.firstChild.textContent = e.target.textContent + ' ';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown">
<button id="dropdownBtn" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Fast <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Fast</li>
<li>Accurate</li>
</ul>
</div>

This is happening because you're replacing the html with the value - the caret span is inside the button (so part of the html of the button), so also getting replaced.
As you're using bootstrap, which uses jquery, use jquery to make this easy:
function dropdown(val) {
$(".btn.dropdown-toggle").text(val)
}

You can save the caret inside a variable and add it back when you change the value.
As you are using bootstrap, you already have jQuery loaded in the page so let's do it this way:
Fiddle
$myDropdown = $('#MyDropdown');
$myDropdown.find("li").click(function(){
$caret = ' <span class="caret"></span>';
$val = $(this).html();
$(".btn.dropdown-toggle").html($val+$caret)
});
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span></button>
<ul id="MyDropdown" class="dropdown-menu" value="Fast">
<li>Fast</li>
<li>Accurate</li>
</ul>
</div>

Use innerText in the dropdown function instead of innerHTML
<li onclick="dropdown(this.innerText);">Fast</li>
Change the content of the function to replace the textContent of the firstChild which holds the value of the button.
var aNode = y[0].firstChild.textContent = val;
function dropdown(val) {
var y = document.getElementsByClassName('btn btn-default dropdown-toggle');
var aNode = y[0].firstChild.textContent = val;
}
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span>
</button>
<ul class="dropdown-menu" value="Fast">
<li onclick="dropdown(this.innerText);">Fast</li>
<li onclick="dropdown(this.innerText);">Accurate</li>
</ul>

This is the one and only permanent solution for bootstrap 3.This will work for all dropdown.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" value="Fast">Fast
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Fast</li>
<li>Accurate</li>
</ul>
</div>
<script>
$(document).on('click','.dropdown-menu li',function(){
$(this).parent().parent().find('.dropdown-toggle').html($(this).html() + ' <span class="fa fa-caret-down"></span>');
});
</script>

You can try:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

How to fix my jQuery animation?

I'm trying to animate a .col-md-3 to slide from the left side of the screen after pressing a button and make it come back (aka side menu).
First part of the animation works perfect, but -$lefty.outerWidht():0 drags all the content at its right too much.
Here's the code:
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
Here's my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth():
0
});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here's if's properties
if ($lefty.offset().left== 0) {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}

Your should use offset().left instead of outerWidth(). If you move the div to the left, the div gets an offset - and you need to move the div back based on this offset.
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
});
See the updated code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here is the fiddle: https://jsfiddle.net/aaqtw3do/

Getting "is not defined" loading a function from external javascript

I have two files: index.php and local.js.
This is index.php:
<!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.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<!-- FontAwesome: font-set designed for Bootstrap -->
<link href="css/font-awesome.css" rel="stylesheet">
<title>Befair-Timetracker</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/time.css" rel="stylesheet">
<!-- Template HTML to build up a new row on the table -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
//include("dbconn.php");
?>
<div class="navbar navbar-inverse navbar-fixed-top navbar-time" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle navbarbtn" 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" href="#">Timetracker</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Tracking</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control input-sm">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control input-sm">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron jumbotime">
<div class="container">
<h1 class="time">Timetracker management</h1>
<p class="timepar">Nella tabella sottostante verranno inserite la varie attività, classificabili in base al proprio CH e agli utenti che le svolgono.</p>
<!--<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>-->
</div>
</div>
<div class="container">
<h3 class="time">Risultati attesi</h3>
<hr>
<div class="selection"> <!-- inserire well nella classe per ottenere riquadro blu -->
<span class="titolosel">Centro di costo</span>
<select class="form-control selecttime">
</select>
</div>
<hr>
<!-- Table containing the info about CH, users and RA -->
<table id ="timetable" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Users</th>
<th>Activities</th>
<th>Timer</th>
</tr>
</thead>
<tbody class="ra hide">
</tbody>
</table>
<footer>
© BeFair 2013 - Website developed by Riccardo Pancotti
<div class="pull-right">
<!--<img src="images/beFair.jpg" alt="beFair-logo" class="img-rounded imglogo">-->
</div>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/local.js"></script>
<script type="text/javascript" charset="utf-8">
//**ANIMATED DIV/TABLE/TIMER**
function showact(ID){
$(".tr-act"+ID).animate({"height": "toggle"}, { duration: 300 });
//$(".hide").animate({"display":"toggle"}, { duration: 300 });
}
</script>
<script type="text/javascript" charset="utf-8">
//**LOADING JSON**
$(document).ready(function()
{
starttimer(2);
$.getJSON('js/test2.json', function(json) {
$.each(json.ch,function(key,val)
{
var chname=("<option value="+val.name+">"+val.name+"</option>");
$(".selecttime").append(chname);
});
});
});
</script>
<script type="text/javascript" charset="utf-8">
//$(document).ready(startimer(4));
//**CENTRO DI COSTO SELECTION**
$('.selecttime').change(function()
{
var pippo = "";
console.clear();
//setValue();
var pippo = $('.selecttime').val();
var chtable=("<tbody class=\"ra\"><tr>");
$.ajaxSetup( { "async": false } ); //Chiamata asincrona al server per il JSON
$.getJSON('js/test3.json', pippo,function(json) {
for (var i = 0, len = json.ch.length; i < len; i++) {
var namera = json.ch[i].name;
console.log(namera);
if (pippo === namera)
{
console.log("RA " +json.ch[i].ra_list.length);
for (var k = 0, lungh = json.ch[i].ra_list.length; k < lungh; k++)
{
//CICLO PER AGGIUNGERE NUOVE RA
var print = json.ch[i].ra_list[k];
chtable +=("<td>"+print.id+"</td>");
chtable +=("<td>"+print.name+"</td>");
chtable +=("<td>"+print.users+"</td>");
//***VECCHIA RIGA, MOSTRA TIMER***
//chtable +="<td><i class=\"fa fa-plus-square\"></i></td>";
//********************************
chtable +="<td class=\"timertd\"><i class=\"fa fa-plus-square\">+</i></td>";
chtable +="<td></td>";
console.log("Attività " + print.activities.length);
tract = "";
list_act = "";
count = 0;
for (var j = 0, lungh_in = json.ch[i].ra_list[k].activities.length; j < lungh_in; j++)
{
//CICLO PER AGGIUNGERE NUOVE ATTIVITA'
list_act += ("<tr style=\"display:none\" class=\"tr-act"+k+"\">");
list_act += "<td></td><td></td><td></td>";
list_act += "<td>";
list_act += print.activities[j].name;
list_act += "</td>";
list_act += "<td>" + "setValue()" + "</td>";
list_act += ("</tr>");
count++;
}
chtable += list_act;
chtable += "</tr>";
$(".ra").replaceWith(chtable);
}
}
}
});
});
</script>
</body>
</html>
And this is local.js:
var starttimer = function(idt)
{
alert(idt);
};
I'm trying to call this function here (it's part of the index.html):
<script type="text/javascript" charset="utf-8">
//**LOADING JSON**
$(document).ready(function()
{
starttimer(2);
$.getJSON('js/test2.json', function(json) {
$.each(json.ch,function(key,val)
{
var chname=("<option value="+val.name+">"+val.name+"</option>");
$(".selecttime").append(chname);
});
});
});
</script>
but it keeps telling me "function is not defined".
What's the problem?
Probably it's something about the scope but i don't know what.

Solved, i was refering to the wrong file.

Categories

Resources