I'm trying to pull the link from an rss feed using the jQuery-rss script (https://github.com/sdepold/jquery-rss) to insert it into an 'a' element href.
I know that this can be done by doing
$("#rss-link").attr(href, "http://rss.cnn.com/rss/cnn_topstories.rss"
but that would only embed the rss feed link rather than the link to the rss item.
Here is my script:
jQuery(function(link) {
$("#rss-link").rss("http://rss.cnn.com/rss/cnn_topstories.rss", {
entryTemplate: '{url}',
limit: '1'
})
});
What is the correct way to do this?
I'm not very experienced with jQuery so anything helps.
Thanks!
The jQuery plugin you are using automatically creates elements or you. So you do not need to manually set the link on the a tags. You probably want to specify the template with the correct tokens in the options while calling the plugin.
<body>
<div id="rss-feed"></div>
<script>
var rssUrl="http://rss.cnn.com/rss/cnn_topstories.rss";
$('#rss-feed').rss(rssUrl, {
entryTemplate: '{title}'
})
</script>
</body>
You can see a more elaborate template on the library's Demo Page. You can refer to the Readme.md of the library and look under Templating for more information on the template structure and available tokens.
Related
I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.
I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;
Please could someone advise on how to get this working.
getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]
Example:
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;
More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName
I want to change all external links on my blog (blogspot here, that's why I'm looking for jQuery code) without changing the posting of my blog because I need a lot of work if I do that.
For example, my website is example.com.
I want to change all external links to
http://example.com/p/go.html?url=http://externallink.com
without need for any changes on my blog post. I don't have any idea to start with.
SOLVED: https://gist.github.com/2342509 Thanks everyone :D I just need to change it a bit.
In jQuery you can try:
// DOM ready
$(function(){
$('a[target="_blank"]').prop('href', 'http://example.com/p/go.html?url=http://externallink.com');
});
Ofcourse this will only work if you have set the target="_blank" property/attribute in HTML and if you want all links to open the same url. This idea derives from the fact you want to have external links open automatically in a different tab/window.
If this is not the required functionality, you can use a custom data- attribute in a similar way. Only difference is you will need to loop each link, and get the data from it.
// DOM ready
$(function(){
$('a[data-href]').each(function(){
var anc = $(this),
href = anc.prop('href'),
dataHref = anc.data('href');
anc.prop('href', href + '?url=' + dataHref);
});
});
HTML example:
external link
And now you will probably need to add more information if that is still not what you want.
Going off of #Tim Vermaelan's answer, you could try this, which will check for every link that doesn't start with your website's URL without relying on it being target="_blank":
$('a:not([href^="http://yoursite.com"])').prop('href', 'http://example.com/p/go.html?url=http://externallink.com');
I have this script generated by wordpress plugin:
<script type='text/javascript'>
if (typeof(jQuery)=="function") {
(function($) {
$.fn.fitVids=function(){}})(jQuery)
};
jwplayer('jwplayer-0').setup({
"aspectratio":null,
"width":604,
"height":410,
"skin":"beelden",
"primary":"html5",
"advertising":{
"client":"vast",
"tag":"http://vasttag"
},
"sharing":{},
"image":"http://i1.ytimg.com/vi/image/0.jpg",
"file":"http://www.youtube.com/watch?v=hgfakjhs"
});
</script>
I simply want add this line:
,"position":"post"
after:
"http://vasttag"
I can't edit the plugin, so is there a way to do it with javascript?
Sorry for my bad english.
Please help me!
Thanks!
Edit: This is the plugin file that generates the player:
link
if anyone knows how to add that parameter I would be very grateful :)
Edit 2:
I solved adding that parameter directly in the database, in wp-option table at jwp6_player_config_2 option name. If you know better solution let me know, thanks.
Due to what the script does (it creates a new jwPlayer as soon as the script is encountered) and the fact that there seems to be no method in the jwPlayer API to edit a players settings, it is impossible to change your script as you want.
The only solution is to edit the script at its source.
I dont think you can do that using javascript.We generally use javascript to do changes in DOM and not in javascript itself.You can do one thing that you create.
<script>
if(typeof(jQuery)=="function")
{
(function($){$.fn.fitVids=function(){}})(jQuery)};
jwplayer('jwplayer-0').setup({"aspectratio":null,"width":604,"height":410,"skin":"beelden","primary":"html5","advertising":{"client":"vast",,"position":"post","tag":"http://vasttag"},"sharing":{},"image":"http://i1.ytimg.com/vi/image/0.jpg","file":"http://www.youtube.com/watch?v=hgfakjhs"});
</script>
and append it somewhere in DOM using javascript or jquery.
More better solution: Just edit the script added by plugin.It is the best approach.
One thing you can always do is use our JavaScript API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
To make the VAST tag play after the video is complete. Just put this script block after the shortcode on your post:
<script>
jwplayer().onComplete(function(){jwplayer().playAd('your_ad_tag');});
</script>
I'm pretty new to web design but since some months I'm trying to learn some basic knowledge to work with html, css, JavaScript an so on. I've followed and tried to understand all the basic tutorials found on w3cschool and other introducting sites, with no particular problem with structure in html nor styling with css, but now I'm facing JavaScript and here's the question, but let me explain first what I'm trying to achieve.
On the site I'm triyng to conceive I've created a side panel which must contain some titles and short descriptions of articles taken from another site, with another domain.
Due to my very poor experience and to the informations found on the web, I thought that jQuery could help me in this task, in particular with its load() method. So, after saving a copy in .txt format of the source page where the titles are, I wrote a very simple code in my document's head:
$(document).ready(function() {
$("#myDiv1 p").load("copyOfSite.txt .list a:eq(0)");
$("#myDiv2 p").load("copyOfSite.txt .list a:eq(1)");
$("#myDiv3 p").load("copyOfSite.txt .list a:eq(2)");
});
This was working fine, except for the fact that the titles I am calling are relative links to articles with another domain, so they don't work in my site.
I've tried to specify a function in the second part of the load method but I couldn't find a way to prepend the domain of the other site to the href attribute I've loaded. I've only achieved to specify an url or to remove the loaded url with something like
$(document).ready(function() {
$("#myDiv1 p").load("copyOfSite.txt .list a:eq(0)",function(data){
$(this).find("[href]").attr('href','http://www.articlesdomain.com')}
)};
or
$(document).ready(function() {
$("#myDiv1 p").load("copyOfSite.txt .list a:eq(0)",function(data){
$(this).find("[href]").removeAttr('href')}
)};
but in both cases I cannot manage to call the href attribute of my loaded title and append to the articles domain. So I'm wondering if there's a way to achieve it or if my approach to the task is completely wrong.
Thanks in advance
You need to prepend the protocol and hostname to the already existing relative href's, right now you're replacing the entire href with the new url.
Use a function to get each href, and just prepend the hostname to what's already there :
$("#myDiv1 p").load("copyOfSite.txt .list a:eq(0)",function(data){
$(this).find("[href]").attr('href', function(_,href) {
return 'http://www.articlesdomain.com' + href;
});
)};
note that the relative hrefs should start with /, otherwise you'll have to add that to the end of the prepended url as well
$(function () {
$('a.something').click(function (e) {
e.preventDefault();
});
I have Joomla 1.5
I have found a plugin for form styling, the "jqtransform"
I have an article that imports a 'myform.php' page that connects to an external database
I try to embed the jquery plugin (the jqtransform) to stylize the form that resides in myform.php. The steps i make are:
add link for the css in the header of joomla's index.php
add the link for the jquery plugin inside joomla's index.php (or inside myform.php)
add the class jqtransform in form tag of the myform.php (rquired by the plugin)
at the end of the myform.php (or the joomla's index.php) i add the javascript snippet inside the script tags:
$(function() {
//find all form with class jqtransform and apply the plugin
console.log("foo");
$("form.jqtransform").jqTransform(); });
(needed for the plugin)
The problem is that the plugin doesn't work.
I debug the javascript inside the browser and put bookmark in front of $(function(){}); and in front of $("form.jqtransform").jqTransform(); });
The first bookmark works ok (the browser halts).
The second bookmark doesn't do anything. That means the browser doesn't get inside the function.
The console log doesn't show anything.
Anyone has any idea??
The issue is JQuery Conflict.
You should use var jq = jQuery.noConflict();
Just above the script and use jq instead of $ symbol.
like:
jq = jQuery.noConflict();
jq(function(){});
jq("form.jqtransform").jqTransform(); });
something like that.
Also you can add script from myform.php don't need to edit index.php for this kind of use.
Like a page required some js and css don't load it in the index.php
It will load everytime so speed will reduce.
For a component or module or specific page you can use joomla's default document factory.
Like:
$document = &JFactory::getDocument();
$document->addScript('your script file full path');
$document->addStylesheet('your style sheet full path ');
Hope this will help you friend..
This method requires no editing to the template files.
Simply use a Custom HTML Module and Publish it in position
<script type="text/javascript">jQuery.noConflict();</script>
<script>
jQuery(document).ready(function() {
jQuery("form.jqtransform").jqTransform();
});
</script>