I'm trying to replicate this useless website: http://endless.horse, but the jScript documentation does not do a great job of explaining how to implement it.
Basically, I need a block of text "Body" to be at the top, then for a block of text "Legs" to appear infinitely (as placeholders) (see website).
I've tried adding what the website says: http://jscroll.com, but it only says "[element].jscroll()" and that's it. I've also tried copying the code from the website, but that also doesn't work.
Here is the code I'm using:
DIV that should scroll:
<div class="jscroll">
<pre>
<h1>Body</h1>
</pre>
</div>
rest.html:
<pre>
Legs
</pre>
Code was taken from the website
javascript/jquery/jscroll:
$(function() {
$('.jscroll').jscroll({
autoTrigger: true,
padding: 2000px,
nextSelector: "rest.html"
});
});
I thought I would get a scrolling webpage with "Body" and "Legs", but I got just "Body" instead.
Assuming that you have included the right js and you run your script when the document is ready, the following code works for you:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/jscroll#2.4.1/dist/jquery.jscroll.min.js"></script>
<div class="jscroll">
<pre>
<h1>Body</h1>
</pre>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$(function() {
$('.jscroll').jscroll({
autoTrigger: true,
padding: 2000,
nextSelector: "a:last"
});
});
});
</script>
Basically, you need to change your nextSelector to be more specific and you must put a real jquery selector. 'a:last' always selects the last a tag that is available. Also, you need to change 2000px to 2000. this code worked for me. Don't forget to include more characters to your rest.html output.
Related
How do I update content loaded with Jquery .load() with javascript?
I'm using two placeholders on every page: one with the navigation bar, and one with the main skeleton of the content, like this:
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>
The nav bar and content are both in seperate files and are loaded into the pages with an external javascript file like this:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
So far, it all works nicely. Now, I'm trying to alter the content separately for each page (with JS)
Part of content.html is for example
<h2 id="subheader1">Title</h2>
I'm trying to change the #subheader1 content in the javascript file like so:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
but that doesn't work (this is aimed at all pages, but it still doesn't work). Probably because it's only seeing the placeholder DIV in index.html and not it's content?
I tried placing the subheader1 div in the index.html to test, and then it did work, but that would take away the efficiency of the placeholder.
Is there any way to do this (or another way to be more efficient with pages with the same (DIV) layout but different text?)
Thanks!
The load method is not synchronous, so
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
is executed before the html is loaded in the page.
The doc suggest using a callback function.
it is executed after post-processing and HTML insertion has been performed
I had success using this in my js file:
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});
with <h2 id="insideNav">Original Nav Bar</h2> in my nav.html.
I have been using Cluetip for 8 years. Was asked to spiff up the tips and realized it was abandonded 5 years ago. Tooltipster looks like its actively maintained and feature complete.
I have included the css and js files, no error on loading.
My html is generated by an xslt process but the html looks OK
<span class="handShift" data-tooltip-content="#ad1e88"> ⇉ </span>
<div class="tooltip_templates" style="display:none"><span class="tip" id="ad1e88"><span class="clueTitle">Handshift:</span><span class="clueNote">unknown</span></span></div>
<span class="handShift" data-tooltip-content="#ad1e92"> ⇉ </span>
<div class="tooltip_templates" style="display:none"><span class="tip" id="ad1e92"><span class="clueTitle">Handshift:</span><span class="clueNote">Mary Baker Eddy</span></span></div>
my js init call is
$('span.handShift').tooltipster({
animation: 'fade',
delay: 200,
trigger: 'click',
debug:true
});
Once the page loads the two span.handShift elements have "tooltipstered" added to the class attribute.
I'm using the data-tooltip-content to specify what html is in the tip but I tried using the title attribute with the same results.
When I click on the text in the span.handShift the element identified with the data-tooltip-content attribute disapears from the DOM, no tip is displayed, no error in the console. The element never returns,that I can see. Obviously something is going on as the span is removed from the DOM, but its not what is expected?
I'm using jquery 2.1.4
I've tested, your code works.
cf my jsfiddle http://jsfiddle.net/xpvt214o/405260/
Don't forget to include the main JS :
<script type="text/javascript"
src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
I'm building a photo archive website for a photographer and on top of each page there is a search bar. It's pretty useful, since you only have to click on the text inside (which says: "Search the archive...") so you can enter your search phrases.
Website: bit.ly/1RB1VCv (direct link to the - now - hidden page)
Since I added a slider to the home page (javascript), the search bar seem to be partially messed up (I now have to delete the text instead of just clicking on it).
I tried to determine which part was causing trouble by deleting certain parts of the slider code I put between the body-tags in the index file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function() {
$('#slides').slidesjs({
width: 1000,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
Not sure if it is any helpful, but this would be the part from the header file in regards to the search bar:
<div id="searchBar">
{* Header Search Box Area *}
{if $config.settings.search}
<form action="{linkto page="search.php"}" method="get" id="searchFormTest">
<input type="hidden" name="clearSearch" value="true">
<div class="headerSearchBox"><input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}"></div>
{if $currentGallery.gallery_id}<div class="headerSearchBox headerSearchBoxCG"><input type="checkbox" name="galleries" id="searchCurrentGallery" value="{$currentGallery.gallery_id}" checked="checked"> <label for="searchCurrentGallery">{$lang.curGalleryOnly}</label></p></div>{/if}
<div class="eyeGlass"></div>
<div class="headerSearchBox headerSearchBoxOption">{$lang.advancedSearch}</div>
</form>
{/if}
Is this an obvious mistake I'm making? Is it something that can be resolved real simple? I tried to look on both Stackoverflow and Google if I could find similar problems, but that didn't help me much.
I like to hear your thoughts and if you need any other code.
Thank you!
The code is a bit of mess but I think the problem is you're putting a JQuery down in the middle and it's ruining your public.min.js, cause it tries to add a function to JQuery (the clicktoggle). So this listener is not being called:
$('.searchInputBox').click(function(){ $(this).val(''); } );
Basically, try to put this jquery tag BEFORE the script tag that calls your public.min.js
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
If this doesn't work, there's another problem somewhere, but as a workaround could just put the listener after all the code (create a script tag in the end of your file, it's going to work)
This might sound like a silly question, and I tend to use:
$(document).ready(function() { });
But basic question.
Let's say I have a list of elements like this:
<body>
<p>Paragraph</p>
<div>Div</div>
<div id="HelloWorld">Hello, World</div>
<script>
var hw = $('#HelloWorld');
$(document).ready(function() {
// hw is available for me here
});
</script>
<p>Another paragraph</p>
</body>
It seems the div is available, and I don't run into errors, but is there anything technically wrong with this? Not talking perfectly organized code, but just curious about the technical question at hand.
So I suppose the question is:
Is a DOM element considered complete and available as soon as the browser reads it, regardless if the rest of the elements have loaded yet?
It seems the div is available, and I don't run into errors, but is there anything technically wrong with this?
No. As long as the script isn't run until after the element exists, you can access it. A script in a script tag that's after the markup for the element it refers to will consistently, cross-browser, be able to access that element.
Always works:
<div id="foo">...</div>
<script>
$("#foo")...
</script>
Never works:
<script>
$("#foo")...
</script>
<div id="foo">...</div>
Works only because jQuery delays executing the ready callback:
<script>
$(document).ready(function() {
$("#foo")...
});
</script>
<div id="foo">...</div>
This is one of the reasons for the common recommendation to put script tags at the end of the document, just before the closing </body> tag. That way, they have access to all of the elements defined above them. (And they don't delay the initial presentation of the page, which is usually, though not always, what you want...)
MVC 3 and fancybox 2.
Should be straight forward but somehow I have made a mess of things.
First since I am using this only on one page (cshtml) I add the scripts via:
Html.AddScriptParts(#Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"));
Html.AddCssFileParts(#Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.css?v=2.1.5"));
When I look in the debugger I see jquery.fancybox.pzck.js loaded. When I inspect the element I do not see the jquery.fancybox.css styles applied...(css is default so maybe there aren't any to apply?)
My onready is:
$(function ()
{
$(".fancybox").fancybox();
});
and my link is:
<div id="ThreadLink">
<a id="ForumFrameLink" href="https://www.google.com" class="fancybox">asdf</a>
</div>
It is acting as though my onready is not attaching...in other words it just follows the link to Google.
What am I missing?
TIA
In the JSFiddle link you provided: http://jsfiddle.net/ramjet/54kag/
Use the following JS:
$(document).ready(function() {
$("#ThreadLink a").fancybox({
type: "iframe"
});
});
And then your HTML simply becomes:
<div id="ThreadLink">
<a id="ForumFrameLink" href="http://www.foxnews.com">asdf</a>
</div>
It seems that type: "iframe" needed to be set. After glancing over the documentation, it looks like you can also just set the class of the a to iframe instead to get the same functionality.
"Corrected" fiddle for your viewing pleasure: http://jsfiddle.net/54kag/1/