Playing with URLs and ScrollSpy

Developer
Jeff Wainwright
Size
4,377 Kb
Views
18,216
  1. Playing with URLs and ScrollSpy Previews
  2. Playing with URLs and ScrollSpy HTML Codes
  3. Playing with URLs and ScrollSpy CSS Codes
  4. Playing with URLs and ScrollSpy JS Codes

How do I make an playing with urls and scrollspy?

Here I'm just playing with url and scrollspy so that I can fire actions when each section is 'hit' on the page.. What is a playing with urls and scrollspy? How do you make a playing with urls and scrollspy? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Playing with URLs and ScrollSpy Previews
IQ Test

Playing with URLs and ScrollSpy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with URLs and ScrollSpy</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta charset="utf-8"> <title>Carousel Template &middot; Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="This is URL Manipulation"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> <link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"> </head> <body data-spy="scroll" data-target="#target" data-offset="600"> <div class="banner"> <div class="container"> <div class="text-center more-space"> <p class="note intro">To best view this demo make sure that the min-width of your screen is greater than 900px</p> <p class="intro">Below is the url on <code>.ready()</code>. Let's play with it.</p> <span class="currentUrl first"></span><br><br> <p class="intro">This code offers a <em>sample</em> of three things: </p> <div class="col-md-6 col-md-offset-3 text-left"> <hr /> <ol> <li>Firing events based on scrollspy position</li> <li>Changing the url based on scrollspy position</li> <li>Loading data based on scroll spy position</li> </ol> <hr /> <br> <p>It is an example based on a re-design that I was shown. The re-designed site loads new url's on scrollspy <em>or waypoint</em> <code>fire events</code>. I noticed that the meta data seemed to not change (bad for <em>seo</em>).</p> </div> </div> </div> </div> <div class="document"> <div class="container"> <div class="row"> <div class="col-md-3"> <div id="target" class="sidebar affix-top" role="navigation" data-spy="affix" data-offset-top="600" data-offset-bottom="10"> <ul class="sidenav nav"> <li class="active"> <a href="#section1">Section 1</a> </li> <li> <a href="#section2">Section 2 </a> </li> <li> <a href="#section3">Section 3 </a> </li> </ul> </div> </div> <div id="scrollThis" class="col-md-9"> <section id="section1"> <h2>URL Manipulation</h2> <p> This little demo is meant to test the ability to minipulate a url with BootStrap's ScrollSpy </p> <div class="text-center more-space"> <span class="currentUrl"></span> </div> <p><strong>Now for some Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <section id="section2"> <h2>Meta Data <em>should</em> change if URL Changes</h2> <p> <code>Meta Data</code> should change if the URL does for seach engine optimization. </p> <div class="text-center more-space"> <span class="currentUrl"></span><br><br> <span class="version"></span> </div> <p><strong>Now for some Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <section id="section3"> <h2>Loading data on ScrollSpy <code>fire</code> events</h2> <p> With <code>ajax</code> calls we should be able to load new data sections and list items. </p> <div class="text-center more-space"> <span class="currentUrl"></span><br><br> <span class="appendData"></span> </div> <p><strong>Now for some Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> </div> </div> </div> </div> </body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playing with URLs and ScrollSpy - Script Codes CSS Codes

body { color: #5a5a5a;
}
p, ol li { font-size:1.5em;
}
section, .nav { margin:2em auto;
}
section:last-of-type { margin-bottom:4em;
}
.affix{ top:0px;
}
.active { border-left:3px solid #000;
}
.banner { background:#E09D80; min-height:200px; padding:2em 0 3em; width:100%;
}
.intro { font-size:2em; font-weight:bold;
}
.intro, .banner p, .banner ol li { color:#333; text-shadow:0 1px 0px #ddd;
}
.more-space { margin:2em auto 2em;
}
.currentUrl, .version, .appendData { background:#fff; border:2px solid #999; border-radius:8px; display:inline-block; font-size:1em; padding:1em;
}
.currentUrl.first { font-size:1.5em;
}
.document { background:#eee; padding-bottom:3em; padding-top:2em;
}
#target li { font-family:courier; font-weight:bold; text-shadow:0 1px 1px #fff; text-transform:uppercase;
}
.document .container:first-of-type { background:#fff; border:1px solid #ccc; border-radius:8px;
}
.note { display:none; font-size:3em; margin-bottom:1em; padding-bottom:.5em; border-bottom: 1px dashed #000;
}
@media only screen
and (max-width : 960px) { #target { display:none; } .note { display:block; }
}

Playing with URLs and ScrollSpy - Script Codes JS Codes

$(document).ready(function () { // lets keep track of the url var pathname = 'http:/' + window.location.pathname; var urlholder = $('.currentUrl') urlholder.text(pathname); // do some stuff with the url var section1url = '/section1/'; var funstuff = '/fun-stuff/'; var loadstuff = '/load-stuff/'; var wutyougettin = 'This is what you get!'; var $targetList = $("#target li"); //load unique class for each list item for firing events
$targetList.addClass(function(i){return "item" + (i + 1);}); //okay, may call this a few times function SectionOneActive () { if ($('.item1').hasClass('active')) { urlholder.text(pathname + section1url); } } SectionOneActive(); var metadescript = $('meta[name="description"]').attr('content'); var version = $('.version').text(metadescript);
//ready aim ...
$('#target').on('activate.bs.scrollspy', function () { if ($('.item1').hasClass('active')) { SectionOneActive(); } if ($('.item2').hasClass('active')) { urlholder.text(pathname + funstuff); $('meta[name="description"]').attr('content', 'This is the new metadescription.'); //let's see what we have var metadescript = $('meta[name="description"]').attr('content'); $('.version').text(metadescript); } if ($('.item3').hasClass('active')) { urlholder.text(pathname + loadstuff); $('.appendData').html('Loading...'); $.ajax( { url: "", success: function(data) { $('.appendData').text(wutyougettin); } }); }
}); // standard ScrollSpy refresh $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') });
});
Playing with URLs and ScrollSpy - Script Codes
Playing with URLs and ScrollSpy - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 4,377 Kb
Views 18,216
Do you need developer help for Playing with URLs and ScrollSpy?

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!

Jeff Wainwright (yowainwright) Script Codes
Name
Quick Bootstrap ScrollSpy Demo
A Pen by Jeff Wainwright
Stickybits Demo
Meeting Schedule Widget with Angular
ScrollDir Example
Multiple Swiper Demo
Shave, a javascript plugin for truncating text
Full CSS Ribbon on 1 element
Noframe.js Example
Trucated.js jQuery Demo
Create amazing web content 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!