We Keep Coding

Modal error document.ready ok href

I need to include a warning before the user enters my website and wanted to use a modal window when the document is ready.
Here is the javascript:
$(document).ready(function(){
jQuery.noConflict();
$("#openModal").modal('show');
});
the HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
<p>blah blah</p>
I agree
</div>
</div>
The modal window opens OK when I click the link so I'm happy with the CSS. I get the following error messages when I try to open it through document ready:
Uncaught TypeError: $ is not a function
and when I remove the jQuery.noConflict(); line I get the following error message:
Uncaught TypeError: $(...).modal is not a function
I've tried a couple of versions of JQuery and best I can tell that is the latest which I downloaded and installed. The rest of the heavily laden JQuery and Javascript works OK.
As I said in my previous question, I'm a hobbyist and my free advertisement free website is to be used as a sailing navigation aid.
Many thanks in advance,
Simon

jQuery.noConflict();
noConflict rolls back the $ variable to what ever it's previous value was. What this means is if another library was using the $ variable as it's identifier, no conflict restores this association. As a side effect though, $ is no longer jQuery. If you didn't intend for this to be the case, remove that line. Otherwise, you will either need to start referring to jQuery in your code after that point, or put use the jQuery ready to pass in jQuery as $ as it will for you
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){ //<-- ready() will pass in jQuery as the first argument, so you can accept it as '$' and then just code like normal
$("#openModal").modal('show');
});
</script>
Or
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#openModal").modal('show');
});
</script>
Or
<script type="text/javascript">
var jQ = jQuery.noConflict();
jQ(document).ready(function(){
jQ("#openModal").modal('show');
});
</script>

Blogger: Uncaught ReferenceError $ is not defined

I am following the tutorial here: http://tympanus.net/codrops/2013/04/30/text-opening-sequence-with-css-animations/
I'm trying to add this to a Blogger XML template. The script doesn't work, I keep getting an error in my Chrome Console saying it's not defined, but as far as I can tell it is. Here is what I'm using:
<div class="intro-container">
<div class="os-phrases" id="os-phrases">
<h2>Hello...</h2>
<h2>I'm Draven Xarcell Vestatt</h2>
<h2>I Provide</h2>
<h2>Organzied Creative Services</h2>
<h2>Through</h2>
<h2>Xarcell Studios</h2>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();
});
</script>
My jQuery call is at the end of the document:
<!-- Let's add jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
and the javascript file lettering.js is included within my XML template file(meaning no external js). I have tried linking directly to the file in the tutorial webpage, but gives the same results.
BTW, I have the script working in a blank html document, but it doesn't work in a Blogger template. I even got it working in jsFiddle just fine: http://jsfiddle.net/BULLr/

jQuery should be included before it is used - so it should be added before your script

Problems Adding Syntax Highlighter To Blogger

I'm trying to add Syntax Highlighter to my new blog at blogger. For some reason I keep getting these errors:
Uncaught ReferenceError: SyntaxHighlighter is not defined Uncaught
ReferenceError: XRegExp is not defined shCore.js:123 Uncaught
TypeError: Cannot read property 'config' of undefined
Here is my code:
<script src='https://xarpixels.googlecode.com/files/shAutoloader.js'/>
<script src='https://xarpixels.googlecode.com/files/shCore.js'/>
<script type="text/javascript">
$(document).ready(function(){
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
'js https://xarpixels.googlecode.com/files/shBrushJScript.js',
'php https://xarpixels.googlecode.com/files/shBrushPhp.js',
'sass https://xarpixels.googlecode.com/files/shBrushSass.js',
'sql https://xarpixels.googlecode.com/files/shBrushSql.js',
'xml https://xarpixels.googlecode.com/files/shBrushXml.js',
'css https://xarpixels.googlecode.com/files/shBrushCss.js'
);
SyntaxHighlighter.all();
});
</script>
To me, everything looks correct?
EDIT: I noticed that when I change the path to any of the files in the demo, the script breaks and doesn't work. This isn't making any sense at all...

I followed this method here: http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
It may not be using the autoloader(as I want to prevent http requests), but it gives me a working example to work from and perhaps I can get the autoloader working.
Thanks.

Easy alternatives using highlight js will be very easy and has many very interesting views
for demo see here from the official website
<!– Syntax highlighter –>
<link href=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css’ rel=‘stylesheet’/>
<script src=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js’/>
<script>hljs.initHighlightingOnLoad();</script>
<!– end Syntax highlighter –>

Uncaught ReferenceError $ is not defined

I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.

First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});​
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>

Try removing the language attribute..sometimes work for me. It's obsolete now .. i think

You need to include jquery before you can use it.

Twitter Bootstrap + Mootools + JQuery.NoConflict() problems while trying to use popover

I have mootools and Twitter Bootstrap (which uses JQuery for their Javascript capabilities) working nearly "well" using JQuery.NoConflict() inside the bootstrap-dropdown.js .
Well, now I'm trying to use bootstrap-popover.js and it's not working as smoothly as bootstrap-dropdown.js. Well I guess that it's a compatibility mode issue that I cannot understand pretty well.
I have this javascript with error:
<script type="text/javascript">
$(function () {
$('td[rel=popover]')
.popover({
offset: 10,
live: true
})
.click(function(e) {
e.preventDefault()
})
})
</script>
And the error is:
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
EDIT:
I've successfully used popover before (but not with mootools) and i tried to repeat the same way and codes. Just before this javascript code with error, i'm linking the files like this (which are successfully loading):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../js/html5.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-alerts.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-popover.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
I know that it should be better between <head></head> but it should work as well inside <body> And it is working for other bootstrap-alerts.js and dropdown.
Also, I'm calling the popover this way in a <table>:
<thead>
<tr>
<th>Título</th>
<th>Data</th>
<th>Horário</th>
<th rel="popover" data-original-title="A title" data-content="And here's some amazing content. It's very engaging. right?">Ticket Associado <img src="../img/alert-icon.gif"></th>
<th>Entrar no Chat</th>
</tr>
</thead>
And mootools are being called after twitter-Bootstrap/JQuery.
Any help? Thank you so much in advance!

erm. seems as if there's an issue with the twitter popover code, more likely than anything.
Property '$' of object [object DOMWindow] is not a function - sounds as if the $ is not what you think it is. I thought the point of noConflict was to revert to using jQuery() and not $ - the code that you post is not exactly doing that.
conversely - mootools, if loaded AFTER jquery and if of version 1.2.3 or higher, will NOT take over the $ declaration and fallback to document.id instead.
when do you get the exception, runtime or when you interact with a popover element? do console.log(window.$) and see what has declared it, it sounds like it's a primitive object property and not a function.
do you run any specific mootools stuff that requires use of $? need more data than what you have provided.
one thing you may want to look at is the MooTools port of BootStrap here: http://dev.clientcide.com/?version=MooTools%20Bootstrap - still a work in progress but it has the important stuff.