I'm heaving a problem and can't seem to find the/an answer. I use sliderjs from sliderjs.com to, obviously, create a slider panel. The script works great with hard coded html ( elements are rendered in a niceslideing panel).
Now I want to insert those ul, li elements dynamically with javascript. The problem is dat the sliderjs isn't formating the newly inserted code right. What am I doing wrong and what should I do to correct this. Any help is appreciated. The sliding panel only works on phone device.....
If I hardcode this than it works
<div id='slider' class='swipe' style='width:150px'>
<ul>
<li style='display:block'><div>1</div></li>
<li style='display:none'><div>2</div></li>
<li style='display:none'><div>3</div></li>
<li style='display:none'><div>4</div></li>
<li style='display:none'><div>5</div></li>
</ul>
</div>
This is my full code with the javascript that isn't working
<html>
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" />
<style type="text/css">
html{background-color:transparent;height:100%;width:100%;}
body{background-color:transparent;font-size:11pt;font-family:helvetica;}
img{border:0px;} </style>
<link rel="stylesheet" href="BTA_Blog_Leather_colors/brown/BTA_Blog_Leather_brown.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(".date").text() === "--")
$(".datecontainer").hide();
if($('.thevideo iframe').attr('src') === ""){
console.log('11');
$(".videocontainer").hide();
}
var names = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg,http://www.deerns.nl/gfx/image.phtml?image=/images/_images_2012_website/employees/Nederland/Martijn%20Timmer_DIE2082.jpg&width=50&height=50&type=crop,http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg";
var namesArray = names.split(",");
var item, items = [];
for (var i = 0; i < namesArray.length; i++) {
item = {};
item.name = namesArray[i];
items.push(item);
}
var main = $("<ul>");
var str = "<li style='display:block;'><div><img src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg' /></div></li>";
for (var i = 0; i < items.length; i++) {
str += "<li style='display:none;'><div><img src='" + items[i].name + "' /></div></li></ul>";
}
main.html(str);
$('#slider').append(main);
});
</script>
</head>
<body>
<div id="container">
<div class="navbar">
<div class="titlebox">
<div class="title">Gaat Europa het redden met de Euro? en met weet ik wat nog allemaal</div>
</div><!-- end titlebox -->
</div><!-- end navbar -->
<div id="body">
<div class="header">
<div class="theimage">
<div class="imagecontainer">
<div class="image"><!-- <img src="http://www.celfoon.nl/bt-addons/testimage130x130.png" /> -->
<div class="datecontainer">
<div class="monthcontainer">
<div class="dmonth">[[DATEMONTH]]
</div> <!-- en monthcontainer -->
<div class="daycontainer">
<div class="dday">[[DATEDAY]]
</div><!-- end daycontainer -->
<div class="yearcontainer">
<div class="dyear">[[DATEYEAR]]
</div> <!-- end yearcontainer -->
</div>
</div>
</div>
</div><!-- end datecontainer -->
</div>
</div>
</div><!--end theimage -->
</div><!-- end header -->
<div class="content">
<div class="introtextcontainer">
<div class="introtext">
<div id='slider' class='swipe'>
</div>
<a href='#' onclick='slider.prev();return false;'>prev</a>
<a href='#' onclick='slider.next();return false;'>next</a>
<br><br>
</div>
</div>
<div class="fulltextcontainer">
<div class="fulltext">
[[FULLTEXT]]
</div><!--end fulltext-->
</div><!--end fulltextcontainer-->
<div class="videocontainer">
<div class="thevideo">
<iframe allowfullscreen="" frameborder="0" height="174" src="[[YOUTUBE]]" width="280"></iframe>
</div><!-- end videocontainer -->
</div><!-- end thevideo -->
</div><!-- end content -->
</div><!-- end body -->
<div id="footer">
<div class="footertextcontainer">
<div class="footertext">[[FOOTERTEXT]]
</div>
</div>
</div>
</div><!-- end container -->
<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider = new Swipe(document.getElementById('slider'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
</body>
</html>
Related
I'm working on an inserting form that inserts a product to a [ products draft ] so I have two tables
one called ( Drafts ) and the other is ( items ) each item in the last table (items) have a draft id.
When inserting a new Draft it supposes that the client who is adding the draft have entered the number of the products in the draft so when he entered the number of the products the application well call a number of forms to insert each one of them ( the determined number of products ) so I used jquery to insert the product forms inside a bootstrap 4 carousel as a ( carousel-item ) using (append) and within each form, there is a navbar ( shows which form is this ) like this ( 1 / 50 ) and my question is which element (DOM) I have to append my code to I tried this:- and nothing happens
Code Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(event){ // **** PS: I Think the problem is with the carousel-item status ( $actives )
var formscount = $('#count').val();
if (formscount > 0) {
for (i=0; i < formscount; i++) {
$('#demo').append($('<div class="carousel-item '+<?=$actives;?>+'"><center><nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"><a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+'</a></nav></center></div>'));
event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<form action="#" method="post">
<input name="count" id="count" type="number" class="form-control" placeholder="عدد النماذج">
<button onclick="myFunction(event)">إضافة النماذج</button>
</form>
<div id="demo" class="carousel slide" data-ride="carousel" style="height:50vh;">
<!-- Indicators -->
<ul class="carousel-indicators" style="background-color: black; color:black;">
<?
$i = 0;
foreach($result as $row){
$actives = '';
if($i == 0){
$actives ='active';
}
?>
<li data-target="#demo" data-slide-to="<?= $i; ?>" class="<?= $actives; ?>"></li>
<? $i++ ; }?>
</ul>
<!-- The slideshow -->
<div class="carousel-inner canner">
<div class="carousel-item"><img src="<?= $row['imageurl']?>" Height=75% alt="inner"></div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
Update:- a new problem pops up is when I append a new ( carouesl-items ) nothing happens it just showing one active items even the indicator is a one
updated the snippet to see the code
When you run this in the console it says that current(i) is not defined, so if you remove it and leave just second occurrence of i instead you'll get this result:
I am currently learning D3, following a tutorial.
I have an error "d3.timeParse is not a function" on the first line in the main.js file. Also when I remove the variables parseTime and formatTime, I get the error ".then(function(data) is not a function"
Any help would be appreciated, thank you.
Here is the main.js file -
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%d/%m/%Y");
d3.json("data/calls.json").then(function(data){
data.map(function(d){
d.call_revenue = +d.call_revenue
d.units_sold = +d.units_sold
d.call_duration = +d.call_duration
d.date = parseTime(d.date)
return d
})
allCalls = data;
calls = data;
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
donut = new DonutChart("#company-size")
revenueBar = new BarChart("#revenue", "call_revenue", "Average call revenue (USD)")
durationBar = new BarChart("#call-duration", "call_duration", "Average call duration (seconds)")
unitBar = new BarChart("#units-sold", "units_sold", "Units sold per call")
stackedArea = new StackedAreaChart("#stacked-area")
timeline = new Timeline("#timeline")
$("#var-select").on("change", function(){
stackedArea.wrangleData();
})
})
function brushed() {
var selection = d3.event.selection || timeline.x.range();
var newValues = selection.map(timeline.x.invert)
changeDates(newValues)
}
function changeDates(values) {
calls = allCalls.filter(function(d){
return ((d.date > values[0]) && (d.date < values[1]))
})
nestedCalls = d3.nest()
.key(function(d){
return d.category;
})
.entries(calls)
$("#dateLabel1").text(formatTime(values[0]))
$("#dateLabel2").text(formatTime(values[1]))
donut.wrangleData();
revenueBar.wrangleData();
unitBar.wrangleData();
durationBar.wrangleData();
stackedArea.wrangleData();
}
This is the index.html file -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Corporate Dashboard</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"><img id="logo" src=""></a>
</div>
</nav>
<div class="container">
<div class="row">
<div id="left-charts" class="col-sm-12 col-md-8">
<div class="row">
<div class="col-md-4">
<label>Dates: <span id="dateLabel1">01/01/2017</span> - <span id="dateLabel2">10/12/2017</span></label>
</div>
</div>
<div class="row">
<div class="col-md-4">
<select id="var-select" class="form-control">
<option selected value="call_revenue">Revenue (USD)</option>
<option value="call_duration">Call Time (seconds)</option>
<option value="units_sold">Units Sold</option>
</select>
</div>
</div>
<div id="stacked-area"></div>
<div id="timeline"></div>
</div>
<div id="right-charts" class="col-md-4 col-sm-12">
<div class="row">
<div class="col-sm-6 col-md-12" id="company-size"></div>
<div class="col-sm-6 col-md-12" id="units-sold"></div>
<div class="col-sm-6 col-md-12" id="revenue"></div>
<div class="col-sm-6 col-md-12" id="call-duration"></div>
</div>
</div>
</div>
</div>
<!-- External JS Libraries -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/js/d3.min.js"></script>
<script type="text/javascript" src="static/js/crossfilter.min.js"></script>
<script type="text/javascript" src="static/js/dc.min.js"></script>
<script type="text/javascript" src="static/js/queue.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="static/js/barChart.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>
</body>
</html
You should probably include the d3 library. Add this to the beginning.
<script src="https://d3js.org/d3.v5.js"></script>
Here is the whole documentation to the library, check it out: https://github.com/d3/d3/wiki
This is my first time asking or doing this type of question
So I created this page http://lamp.cse.fau.edu/~mcuervo5/p4/
and it does your basic to do app list thing for adding and deleting stuff.
Apparently the only thing missing is to save the data on the current page. I heard that there a code that can save the current page to a local storage that has everything already in it, so when I re-open the link, instead of having nothing in the "complete and incomplete" list, it should look like this
thanks, it the only part I have left to do & I dont know if it implemented in HTMl or Jquery. I do not know how to do it.
and if you want to see the code here instead of "inspect" from the page with the link above, here it is. for html and Jquery
$(document).ready(function() {
// $('#list').innerhtml = localStorage.getItem("List");
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
'<input/ style="display: none" class="new-value">' +
"<button type='button' class='delete'>Delete</button>" +
"<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#incomplete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#complete-tasks').append(li);
});
$('#complete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#complete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#incomplete-tasks').append(li);
});
// var save()
//{
// localStorage.setItem("List", $("#list").innerhtml());
// }
});
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">To Do List</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1> The Reminder Friend App </h1>
<p>this is my to do list app. type in the list you want to add & store in the list
</p>
<form>
<!-- textbox -->
<input type="text" id="textbox">
<!--add button -->
<input type="button" id="Sumbit_Button" value="Add">
</form>
</header>
<hr>
<div id='lists'>
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Incomplete</h3>
<ul id="incomplete-tasks">
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Complete</h3>
<ul id="complete-tasks">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Mauricio Cuervo 2017</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<script src="p4.js"></script>
</html>
Hello you can do something like this:
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
var list = [];
list.push(textbox_Value);
localStorage.setItem("listdata", list);
// do not manage using `append` whole html. Manage through list and display as you want
});
on page load call:
var stored = localStorage.getItem("listdata");
Now here you can manage array of items and iterate on complete & incomplete list.
So whenever any action of edit, delete, add occurs you have to just manage the localstorage instance on each call. and based on that just iterate list whereever you want.
Hi Im trying to get my code to work for checking if the html is right in the textarea. If it is right it will open another page with what was in the textarea already as a website (this part works I checked before creating the if else). I only want that to happen if the code in the textarea is the same as what I put in my value in javascript (this dosent work). Heres my whole html for that page.
<!DOCTYPE html>
<html>
<head>
<title>Lesson 1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
<script type="text/javascript">
function ShowResult()
{
var check = x ;
var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
if (check === html) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Learn Lesson 1 HTML Syntax</div>
<div class="panel-body">
</div>
</div>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
</div>
<div class="container">
<textarea style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;" onblur="x=this.value">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote>
</textarea>
<div class="col-md-12">
<br />
<a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Try it out</a>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
<hr>
<br/>
<p>Copyleft ;-) Maksim Tonyushkin 2015</p>
</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>
</body>
</html>
The part that doesn't work is:
<script type="text/javascript">
function ShowResult()
{
var check = x ;
var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
if (check === html) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
The value x is given on the textarea onblur="x=this.value".
Any help?
Textareas have no value attribute. You need to use innerHTML
I solved my problem by like dis (the reason it wasn't working was because of the spacing):
<!DOCTYPE html>
<html>
<head>
<title>Lesson 0</title>
<link rel="icon" type="image/png" href="favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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>
<script type="text/javascript">
function ShowResult()
{
var x = document.getElementById("html").value
var z = document.getElementById("answer").value
if (x === z) {
my_window = window.open("about:blank", "mywindow1");
my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 0 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will show up when you are right. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
}
}
</script>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Learn Lesson 0 Geting started</div>
<div class="panel-body">
The first lesson will be a tutorial on how to use this website. This part of the webpage is the part that teaches about code and gives you examples. Below is what you will need to do to complete this lesson. The gray box is your code editor. Inside it you will write your code for the lesson. Good luck on your first lesson (click answers if you need help).
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Steps</li>
<li class="">Answer</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">1.</h4>
<p class="list-group-item-text">Click on the code editor and between the <code><h1></code> and <code></h1></code> tags write <kbd>Advertisement</kbd></p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">2.</h4>
<p class="list-group-item-text">Click Submit on the bottom of the page</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="profile">
<textarea id="answer" style="font-size:15px; resize: none; height: 400px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #F9F9F9; color: #6F6F6F;">
<h1>Advertisement</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
</div>
</div>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
</div>
<div class="container">
<textarea id="html" style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
<p>This is in a qoute</p>
<small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
<div class="col-md-12">
<br />
<a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Submit</a>
<!-- Ad starts here-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-9273905782779277"
data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ends here -->
<hr>
<br/>
<p>Copyleft ;-) Maksim Tonyushkin 2015</p>
</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>
</body>
</html>
I have a dynamic listview which the id and text are dynamic from server.
For simplicity, let's say something like this:
<ul id="productslist" data-role="listview" data-inset="true">
<li data-role="list-divider">Products</li>
<li id="123">#copper 1</li>
<li id="124">#copper 2</li>
</ul>
I need the get the list id and product name. (I don't know the id value since it'll be dynamic)
Any suggestions?
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pageinit","#test1",function(){
});
$(document).on("pagebeforeshow","#test1",function(){
//dynamic list with
});
function check(){
var href = $(this).attr('href');
var id = $(this).parent().attr('id');
alert('href :'+id+' ,value:'+id);
};
</script>
</head>
<body>
<div data-role="page" id="test1">
<div data-role="header">
<h1 style="white-space: normal;margin-left:60px;" id="headertitle"></h1>
<a href='menu.html' class='ui-btn-right' data-icon='home' data-theme="a" >Home</a>
</div><!-- /header -->
<div data-role="content">
<h4>List #</h4>
<ul id="productslist" data-role="listview" data-inset="true">
<li data-role="list-divider">Products</li>
<li id="123">#copper 1</li>
<li id="124">#copper 2</li>
<li id="125"><input type="button" value="#copper 3" onclick="check();"></li>
</ul>
<input type="button" onclick="openProduct('data');" value="Click"/>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Use .on()
$('#productslist').on('click','a',function(e){
e.preventDefault();//stop default behavior of anchor tag
var href = $(this).text();
var id = $(this).parent().attr('id'); //get parent li id
});
Fiddle Demo
onclick="check(this);"
Put this code in head or at the end of the page
function check(el) {
var txt = $(el).text();
var id = $(el).closest('li').attr('id');
alert('id : ' + id + ' , value: ' + txt);
};