Syntax Highlighter Around A Div Element - javascript

I am using the syntax highlighter plugin and I want to always have it applied to a specific div area. The div's content will change based on a on-click hyperlink. How can I enclose the syntax highlighter script tag around the "mydiv" element at all times?
<script>
function viewCode() {
$('#mydiv').load('euler/_48.py');
}
</script>
View Code
<div id="mydiv">
my div's initial content
</div>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
//always apply this script to mydiv
]]></script>

With syntaxHighlighter, you cannot highlight arbitrary elements on the page, so we will stick to the script method instead.
First, give the script and anchor tag an id, like
Show Code
<script type="syntaxhighlighter" class="brush: js" id="highlighted"></script>
Then, use this to load the contents when the user clicks on the link
$('#show_code').click(function(){
$.get('euler/_48.py', function(data){
$('#highlighted').html('<![CDATA[' + data + ']]>');
SyntaxHighligher.highlight();
});
});
Remember that the usual method to use syntexhighlighter.js would not work here because the SyntaxHighlighter.all() function only binds the highlight() function to the onload event, so you will have to call that function yourself every time the page updates, by adding a call to the SyntaxHighligher.highlight() function everytime you update the page.
Alternatively, I'd usually recommend the pre method. Its almost the same as above, but we use the pre element instead and use the text() jQuery function to get the escaping done correctly. Using the pre element:
<pre class="brush: js" id="highlighted"></pre>
With this piece of Javascript
$.get('euler/_48.py', function(data){
$('#highlighted').text(data);
SyntaxHighligher.highlight();
});

I think you can call HighlightAll method
Example:
dp.SyntaxHighlighter.HighlightAll('code');
Sultan

Related

Inject script inside ajax loaded div

I'm using Jquery in my site and I have a div with content loaded by ajax, like an iFrame. With my code I can access the content and even change the class and values, but I can't insert a script to be executed.
There is the code:
<script>
$("#loginsb").click(function () {
$('#curso')
.contents()
.find('#script').jQuery("<script>").prop("tagName")
.attr('src', load.js);
});
</script>
My ajax loaded div is curso and inside this div I have another div script where I placed the the script line - without the src. Is the only way I knew to use more than one script in my page and find just one of them.
Inside Curso div
<div id="script">
<script></script>
</div>
Any idea to attribute this src inside my div script? Thanks!
You miss some basics in understanding Javascript and jQuery.
First thing: you can only have one element with id="script" and in your example you have one script element inside it.
So you can target that script element inside the script id element using jQuery:
$('#script script')
Then adjust the source of the script:
$('#script script').attr('src', 'load.js');
(Note the quotation marks around load.js. this is a string literal not a variable or constant.)

jquery html() changes not visible after calling another function

A function used to insert bbcodes into a textfield breaks a jquery click function that makes use of the html() method.
If the jq click function gets called after the tag function, changes made by html() won't display on the view page. In Firebug I can see that changes are applied they just won't get rendered.
jquery function that breaks:
$('.ev').on("click", function(){
$(this).val() ?
$('#replytext').load("/quote.php",{ "id" : $(this).val() }) :
$('#replytext').html('');
});
the tag function that breaks the jquery function is here.
Any hints/suggestions?
Think like that: Click the quotebutton -> click the tag button. Now if you click the quote or no-quote button again the content should change to quote or empty but it remains like:
quote[tag][/tag].
Firebug shows the reseted content.
Something freezed. If I load a quote and insert a tag and load the quote again to reset the tags and try to use the insert tag function again the insert tag function still inserts tags but this time the newly inserted tags have no effect on the html displayed in Firebug. The insert function breaks the viewed textarea (if the jquery function is called after the tag function) and after breaking it it uses the "death textarea" but without changing the html viewed in Firebug.
Link to a HTML pasty:
index.html
Edit: .val() works but .load() doesn't.
To change what's in a textarea, try using val() instead of html():
$('.ev').on("click", function(){
$(this).val() ?
$('#replytext').load("/quote.php",{ "id" : $(this).val() }) :
$('#replytext').val('');
});

Clicking a div changes another div's content

I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?
You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>
Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.
Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples
do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/

Change Text using jQuery

I have a script that is pulling in news from Yahoo on a certain subject. It renders the title of the news feed like this:
<div class="header-title">subject - Yahoo! News Search Results</div>
I would like to change this to read differently. Since this is inserted via JS I thought I could change this with jQuery.
I attempted this:
$('.header-title').text('Subject News');
that did not work, I then attempted this:
$('.header-title').empty();
$('.header-title').text('Subject News');
that also did not work.
Both of the above methods look as if they had no effect on the text.
I am not sure what to do to remove the old text and replace with my text.
Note: All of my code is inside jQuery's Document Ready IE:
$(function(){
//Code Here
});
Don't forget to put your code in DOM ready:
$(function() {
$(".header-title").text("Subject News");
});
Otherwise the code should work fine.
This solution assumes you have no access to the other script that creates the feed widget
WIthout knowing more about other script it sounds like it is asynchronous, and creates the title elements also. You could have a timed interval loop that checks for the element to exist and once it exists do the update:
function changeYahooTitle(){
var $yhooTitle=$('.header-title');
if($yhooTitle.length){
$yhooTitle.text('My New Title');
}else{
/* doesn't exist so check again in 1/10th second, will loop recursively until found*/
setTimeout(changeYahooTitle, 100);
}
}
Then on page load:
$(function(){
changeYahooTitle()
})
If you do have access to the other script it can be modified to accommodate your needs, or you can still use this solution
Try using html() instead of empty() and text()
$(document).ready(function(){
$(".header-title").html("Subject News");
});
What's probably happening:
First you're setting the text: $('.header-title').text('Subject News');
THEN ... after the data finishes the load of the Yahoo or whatever content your text gets replaced actually with the new fetched data
Change the text inside the load callback (after data is loaded) and it will work.
It doesn't work because you call the function before the element is created. If you put your function inside <script> tag after the <div> element it should work

Let a user copy the source code... of an element with jquery

I can understand basic javascript and jquery but I'm having a hard time understanding how to allow a user to see the source code of an element for example.
If I have an element on a webpage like this
`<p>Hi I'm an element</p>`
every body knows it will be displayed as this
Hi I'm an element
but I want a user to see this in its source code form
`<p>Hi I'm an element</p>`
How on earth is this done??
The basic idea is to get the HTML of an element, then show it somewhere as plain-text. We can use .html() to get the HTML and then .text() to output the same HTML as plain-text:
//on the click of a link
​$('a')​.on('click', function () {
//append a container with the plain-text HTML of an element
$('body').append($('<div />').text($('form').html()));
});​​
Here is the demo: http://jsfiddle.net/YbJfs/
Note that this does not get the actual <form> tag, but you could place the form in a container, select the container, and then use the .html() if that container and you'll have the <form> tag as well.
Also, if you want to add the HTML to a form input or text-area, you can use .val() rather than .text().
Here is a demo: http://jsfiddle.net/YbJfs/1/
You can use...
element.outerHTML;
...though it isn't technically the "source code". It's the HTML rendered by the browser, which may have some differences.
Also, you need a shim for Firefox 10 and lower.
function outerHTML(el) {
return el.outerHMTL || document.createElement('div')
.appendChild(el.cloneNode(true))
.parentNode
.innerHTML;
}
to grab the html of an element either use native javascripts innerHTML, or if you want to use jQuery use html() method. Examples ...
javascript:
var html = document.getElementById('myOb').innerHTML;
jQuery:
var html = $('#myOb').html();

Categories