JAVASCRIPT steps to setting up utterscroll? - javascript

i have been trying to set up utterscroll and i cant seem to be able to
there is no clear instruction,
i put both files provide in order and i call the event but nothing
https://github.com/debiki/utterscroll
i cant even get it to work on a jsfiddle
<script src='jquery-scrollable.js'></script>
<script src='debiki-utterscroll.js'></script>
if (!Modernizr.touch) // if not a smartphone
debiki.Utterscroll.enable({
scrollstoppers: '.CodeMirror, .ui-resizable-handle' });

Now I've added an example HTML file that shows how you can enable Utterscroll on your page:
http://rawgit.com/debiki/utterscroll/master/utterscroll-example.html
(Linked from https://github.com/debiki/utterscroll)
What that page does, is it places this before </body>:
<script src='https://rawgithub.com/debiki/utterscroll/master/debiki-utterscroll.js'></script>
</body>
and this in the <head>:
<script type="text/javascript">
jQuery(function($) {
if (!Modernizr.touch) { // if not a smartphone
debiki.Utterscroll.enable();
}
});
</script>

Related

How to rewrite javascript to force it to load despite Ajax?

I have the following javascript code, the problem is that the Squarespace site i'm working on requires Ajax-loading. Therefore, this code only works if you refresh the page once loaded. More on this issue here https://forum.squarespace.com/topic/87058-why-doesnt-my-javascript-code-work-until-i-refresh-the-page/
I'd be grateful for any pointers on how to rewrite this so that it loads despite the Ajax. It works wonderfully when I disable Ajax but unfortunately I need for that to be turned on for the rest of the site to look good.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> $(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function()
{$(this).nextUntil("h3").slideToggle();}); }); </script>
This is a common issue, and there are several common ways that developers approach the solution.
In your case, inserted via sitewide code injection:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
window.Squarespace.onInitialize(Y, function() {
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function() {
$(this).nextUntil("h3").slideToggle();
});
});
</script>

jQuery(...).iris is not a function

I am trying to implement color picker provided here http://automattic.github.io/Iris/
Here is my libraries that i am including.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
and this is how i am implementing this code
$(document).ready(function() {
jQuery('#color-picker').iris();
});
this is how i have my input field
<input type="text" id='color-picker' value="#bada55" />
but i don't why i get this error
TypeError: jQuery(...).iris is not a function
jQuery('#color-picker').iris();
Seem like the path to your iris script is wrong which caused the browser cannot load the file. So you can check again to see if the path js/iris.min.js is correct.
You can check to see whether your file is loaded or not by going to network tab of either Firebug or Chrome developer tools. If it cannot load the URL which you've provided than you'll receive a 404 error not found in this tab.
Or you can also try to replace:
<script src="js/iris.min.js"></script>
with direct link from Github:
<script src="https://github.com/Automattic/Iris/blob/master/dist/iris.min.js"></script>
The last note is that you just need to include jQuery once, you can choose either version 1.10.2 or 1.8.3 which you know that version will compatible with your jQuery code.
I think this should be something wrong with the iris script here, try to use this version directly from their home page:
<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
Fiddle Demo
Is your code placed in a way that would let it run before jQuery, jQueryUI and Iris is loaded? Make sure you place your own script file after the rest.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
<script>
$(document).ready(function() {
jQuery('#color-picker').iris();
});
</script>
You need to have link to jQuery and jQuery UI instead of adding jQuery twice.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
Then call iris on page load and it will work. Here is a link to working fiddle http://jsfiddle.net/WLru3/
PS: I have directly copy pasted code of iris in js code block, please use library link in your code instead.
Remove a line that includes jQuery 1.8.3 library
Make sure the path to iris.min.js is correct

Sometimes jQuery plugin is not loaded

I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });

I can't get the jQuery datepicker to show on my page after loading with AJAX

My main page is index.php. I'm loading a section of the page with AJAX and I would like to also load a datepicker in the same section I got all relevant JS:
<script type="text/javascript" src="javascripts/jquery/jquery.js"></script>
<script type="text/javascript" src="javascripts/datepicker/jquery.datePicker.js"></script>
<script type="text/javascript" src="javascripts/datepicker/date.js"></script>
I hope i'm not missing anything, the CSS is copied into my main css file.
and here's how the ajax looks like, at least the callback part:
xmlhttp12.onreadystatechange=function() {
if (xmlhttp12.readyState == 4) {
if(document.getElementById("corpcrm").innerHTML=raspuns[0]){
$(function()
{
$('#datepicker')
.datePicker({inline:true})
});
Now i know there aren't any problems with the the rest of the code as i've been using the very same thing for a while now, somehow I can't get the jQuery part right.
i tried adding a div directly to index.html and adding
<script type="text/javascript">
$(document).ready(function(){
$("#test").datepicker();
});
</script>
in the head. Firebug finds an error related to it that says
$('#test').datepicker() is not a function
The problem is now solved. I wasn't loading jquery-ui properly, was missing a > at the end of a script, thanks for the help guys.

Can't execute javascript inside ajax loaded div

I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.
With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:
<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
$("#vtabs5").jVertTabs({
equalHeights: true
});
// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.
I appreciate any input.
Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back
Thanks for your reply. I solved it with the suggestion from this post, in case someone finds it useful :)

Categories

Resources