Site Mapper
How do I make an site mapper?
Simple site map web app. Started as a jQuery exercise I gave myself. . What is a site mapper? How do you make a site mapper? This script and codes were developed by Ianchouinard on 01 December 2022, Thursday.
Site Mapper Previews
Site Mapper - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Site Mapper</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,300,400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="intro"> <div id="introText"> <h1>Site Mapper</h1> </div>
</section>
<article id="preamble">
<section id="preview"> <div id="about">A very simple website planning tool for small sites.</div> <div id="show">Make a Map!</div>
</section>
<a href="http://en.wikipedia.org/wiki/Site_map" target="blank"><div class="learn">What's a Site Map?</div></a>
</article>
<section id="app">
<div class="title" contenteditable="true">Type here to add a title.</div>
<section id="appArea"> <div class="addCol">Add Page</div>
<section class="template">
<div class="item page"><div contenteditable="true" class="box sub">Here!</div><div class="delete"><p>-</p></div></div>
<section class="col new"> <div class="item"> <div contenteditable="true" class="box head">Here!</div> <div class="deleteCol"><p>-</p></div> <div class="plus"><p>+</p></div> </div>
</section>
</section>
<section class="col"> <div class="item"> <div contenteditable="true" class="box head">Here!</div> <div class="plus"><p>+</p></div> </div>
</section>
</section>
<section id="print"> <h3>Print Sitemap / Print to PDF</h3> <h4>This will only print your sitemap, not the whole website.</h4> </section>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Site Mapper - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body { font-family: 'Open Sans', sans-serif; background-color: #BFBFBF;
}
::selection { background: black; color: white;
}
::-moz-selection { background: black; color: white;
}
.transition, #show, .item .plus, .addCol, .page .delete, .col .deleteCol { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear;
}
#app { display: none; background-color: #f0f0f0;
}
#preview { height: 400px; width: 100%; position: relative; background-color: #f0f0f0; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/preview.jpg"); background-size: cover; background-attachment: fixed;
}
.learn { width: 100%; text-align: center; color: black; padding: 1em 0; text-decoration: none; background-color: #D1D1D1;
}
a { text-decoration: none;
}
#show { cursor: pointer; width: 200px; text-align: center; padding: 1em 0 1em 0; border-radius: 20px; background-color: #357fc9; color: white; margin: 8.5em auto 0 auto;
}
#show:hover { background-color: #335e88; border-radius: 0;
}
#about { background-color: #335e88; text-align: center; color: white; padding: 1em 0 1em 0; box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5);
}
#intro { width: 100%; background-color: #357fc9;
}
#introText { text-align: center; width: 100%; background-color: rgba(53, 127, 201, 0.7);
}
#intro h1 { padding: 1em 0 .8em 0; font-size: 4em; color: white; font-weight: 300;
}
.title { background-color: #335e88; width: 100%; font-family: 'rokkitt', sans-serif; color: white; text-align: center; font-size: 1.7em; padding: .5em 0 .5em 0; box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2);
}
#appArea { width: 100%; max-width: 1200px; margin: 1em auto; min-height: 400px;
}
@media screen and (max-width: 1200px) { #appArea { width: 90%; margin-left: 5%; }
}
.item { width: 100%; margin-bottom: .75em;
}
.item .box { padding: .75em; border-radius: 3px; font-size: 1.2em; text-align: center; margin-bottom: .75em;
}
.item .head { background-color: #357fc9; color: #f0f0f0; border: none;
}
.item .sub { border: 4px solid #7cadde;
}
.item .plus { background-color: #D1D1D1; width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; text-align: center; cursor: pointer;
}
.item .plus:hover { background-color: #BDBCBC;
}
.item .plus p { padding-top: 2px;
}
.col { width: 14%; margin: 1em .5em 1.25em .5em; display: inline-block; vertical-align: top;
}
@media screen and (max-width: 800px) { .col { width: 22%; }
}
@media screen and (max-width: 650px) { .col { width: 30%; }
}
@media screen and (max-width: 585px) { .col { width: 46%; margin-right: .3em; }
}
@media screen and (max-width: 420px) { .col { width: 93%; margin: 1em 0 1.25em 5%; }
}
.inline { display: inline-block !important;
}
.addCol { text-align: center; width: 100px; margin: 0 auto 1em auto; padding: .5em; border-radius: 2px; background-color: #D1D1D1; cursor: pointer; font-size: .8em;
}
.addCol:hover { background-color: #BDBCBC;
}
.page { display: none; position: relative;
}
.page .delete { position: absolute; top: 10px; left: .7em; background-color: #D1D1D1; width: 15px; height: 15px; border-radius: 50%; text-align: center; cursor: pointer;
}
.page .delete:hover { background-color: #BDBCBC;
}
.page .delete p { margin-top: -2px;
}
.new { display: none;
}
#print { background-color: #e8e8e8; width: 100%; cursor: pointer;
}
#print h3 { text-align: center; width: 210px; background-color: #357fc9; margin: 0 auto 0 auto; padding: .5em 0 .5em 0; color: white; font-size: .9em;
}
#print h3:hover { background-color: #335e88;
}
#print h4 { width: 100%; padding: .5em 0 .5em 0; text-align: center; background-color: #d6d5d5;
}
.col .item { position: relative;
}
.col .deleteCol { position: absolute; top: 7px; left: .5em; background-color: #335e88; color: #f0f0f0; width: 15px; height: 15px; border-radius: 50%; text-align: center; cursor: pointer;
}
.col .deleteCol:hover { background-color: #BDBCBC;
}
.col .deleteCol p { margin-top: -2px;
}
@media print { * { -webkit-print-color-adjust: exact; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } @page { margin: 0.5cm; } body { background-image: none; } #intro { display: none; } #print { display: none; opacity: 0; } #footer { display: none; } .plus { display: none; } .delete { display: none; } .title { box-shadow: none; border-bottom: 1px solid black; } #app { background-color: none; } .addCol { display: none; }
}
Site Mapper - Script Codes JS Codes
$(document).ready(function(){ //hide intro, show app $('#show').on('click', function(){ $('#preamble').hide(); $('#app').fadeIn(); }); //clone item template, append to current column $(document).on('click', '.plus', function (){ var col = $(this).parent().parent(); var cloneMe = $('.template').find('.page'); $(cloneMe).clone() .appendTo(col) .fadeIn(); }); //remove deleted item function removeItem () { $(this).parent().remove(); }; $(document).on('click', '.delete', function(){ $(this).parent().fadeOut(); setTiemout(removeItem, 500); }); //remove deleted column function removeCol () { $(this).parent().parent().remove(); }; $(document).on('click', '.deleteCol', function(){ $(this).parent().parent().fadeOut(); $(this).parent().parent().removeClass('inline'); setTiemout(removeCol, 500); }); //clone col template, append to app $('.addCol').on('click', function(){ var cloneCol = $('.template').find('.new'); $(cloneCol).clone() .appendTo('#appArea') .fadeIn() .addClass('inline'); }); //print $('h3').on('click', function(){ window.print(); return false; });
});
| Developer | Ianchouinard |
| Username | ianchouinard |
| Uploaded | December 01, 2022 |
| Rating | 4.5 |
| Size | 5,427 Kb |
| Views | 12,144 |
Do you need developer help for Site Mapper?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Ianchouinard (ianchouinard) Script Codes
| Name | Size |
| Background expand on hover transition | 2,666 Kb |
| 3d wordpress login | 4,265 Kb |
| Paint with Canvas and p5. Works on touchscreen. | 3,029 Kb |
| Css3 3D atom figure | 3,179 Kb |
| Image upload preview using FileReader | 3,576 Kb |
| Simple Counter | 2,375 Kb |
| Smartwatch OS | 7,265 Kb |
| Angular Mock Fantasy Football App | 7,960 Kb |
| Ajax load button animation | 3,155 Kb |
| Background transition progress bar | 4,243 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
| LeMandinque | Aadesida | 9,046 Kb |
| Kudos Please | TimPietrusky | 6,624 Kb |
| Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
| A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
| Full page table inside the grid | Twikito | 1,864 Kb |
| Hoi hoi | JohnTheCat | 7,248 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
| Flower expansion | Sreucherand | 3,425 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!