I recently downloaded jQuery Socialist. For some reason I cannot get it working and confused as to why? Is there more to the setup I am missing here?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src='../jquery.socialist.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#content').socialist({
networks: [
{name:'facebook',id:'linkhere'},
{name:'pinterest',id:'linkhere'},
{name:'twitter',id:'linkhere'}
],
isotope:false,
random:false,
fields:['source','heading','text','date','image','followers','likes']
});
});
</script>
I just get a loading symbol?
relevant HTML
<div id="content"></div>
See here - http://jsfiddle.net/im4aLL/23U4J/
its running well and working. If you are getting only loading symbol that means plugin is working fine and plugin is unable to load your data. Did you forget to change -
id:'linkhere'
The reason for not loading is not because of incorrect id, its because you have included facebook, twitter, linkedin etc. for each one of it we should have a api key and should be registered there first then only it will be accessible.
only the rss feed will run fine because we have to give the total url of the feed.
So please get ur ids from the sites below
Linked in : marketing.linkedin.com/company-pages
Youtube : gdata.youtube.com/demo/index.html#Response
FeedsBurner (whole url need to be placed to reach your feed): feeds.feedburner.com/good/lbvp
Facebook : graph.facebook.com/ or developers.facebook.com
When you run the example above remove all of the media except twitter (with a valid id) and then reload. You will notice that it loads correctly. After that add one by one the media entries and see if it still loads. One media entry causes the entire plugin to fail. I suspect you used an incorrect ID or we have a bug here.
I tried this locally and it runs fine.
Related
I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance
I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.
I'm relatively new to jQuery so apologies if the answer is obvious.
I have a shopping cart using simpleCart js, when adding an item to the cart in FF and Chrome everything runs smoothly but IE(9) doesn't seem to manage it.
http://www.peaknature.co.uk/cart/
The main piece of script is:
UPDATED
$(document).ready(function() {
$(".simpleCart_shelfItem").hover(function(event) {
$(this).find('.tooltip').stop(true,true).show();
});
$(".simpleCart_shelfItem").mouseleave(function(event) {
$(this).find('.tooltip').stop(true,true).fadeOut(500);
});
//Cart info (all items in cart)
$(".cartInfo").toggle(function(){
$("#cartPopover").show();
$(".cartInfo").addClass('open');
}, function(){
$("#cartPopover").hide();
$(".cartInfo").removeClass('open');
});
$(".shelf .simpleCart_shelfItem:eq(0)").css('left', '20px');
$(".shelf .simpleCart_shelfItem:eq(1)").css('left', '250px');
$(".shelf .simpleCart_shelfItem:eq(2)").css('left', '480px');
$(".shelf .simpleCart_shelfItem:eq(3)").css('left', '710px');
$(".shelf .simpleCart_shelfItem:eq(4)").css('left', '20px').css('top', '170px');
});
I know IE can be funny with selectors etc but I'm not sure what's wrong.
Any help is much appreciated.
Chris
I believe what is happening is the simplecart logic is running before its ready, add this round all your code (and remove the script tags).
$(document).ready(function() {
//All your code here.
});
This will sure everything is loaded before attempting to use it.
UPDATE
After looking at ie9 console it shows the following error
SEC7112: Script from https://raw.github.com/
wojodesign/simplecart-js/master/simpleCart.js was blocked due to mime type mismatch
This is likely due to the fact that raw.github provides a raw text file to your without telling you it is a js file.
Try setting the type="text/javascript" on the <script></script> tags to rectify
On a side note I am unsure if you are infact the owner of wojodesigns or not however it could be better to use a local version (local to your server) to ensure it not changed without you knowing (even more important if it anything to do with ecommerce).
Hope this helps
I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.
Using Fancybox to play youtube videos in a modal box.
My Problem is that I keep getting "The requested content cannot be loaded. Please try again later."
The modal box is popping up so I know the script is running, it might be a problem with my API call... here is my call:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.fancybox").fancybox({
'hideOnContentClick': true
});
/* This is a non-obtrustive method for youtube videos*/
$("a[rel=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360,
});
});
</script>
Do you have any <a>s with both class="fancybox" and rel="fancyvideo"? If you do then you'll be binding Fancybox to those elements twice and Fancybox might not like that. Try taking out this one:
$("a.fancybox").fancybox({
'hideOnContentClick': true
});
And see what happens with just the second one in place.
UPDATE: Strange. The demo (http://chadly.net/demos/video-lightbox.html) is producing different HTML than your page, the demo builds an <object data=...> but yours builds a <object><embed src="youtube-url"> thing. You're saying:
type: 'swf'
in your Fancybox binding, that's where the <object><embed>...</embed></object> stuff comes from. However, the href points at a plain old YouTube video viewing HTML page and that href ends up as the src attribute for the <embed>. The URL for embedding a YouTube video isn't the same as the video's HTML page and that's probably the source of your problem.
Try replacing the href that looks like this:
http://www.youtube.com/watch?v=QmVvgSfdmJQ
with one like this:
http://www.youtube.com/embed/QmVvgSfdmJQ
The first is the plain HTML page for YouTube, the second is the embeddable SWF.
UPDATE 2: The example you're working from is for Fancybox 1.0.0 but you're using 1.3.4, 1.0.0 has some special checks for YouTube that aren't present in later versions:
//...
} else if (url.match(/youtube\.com\/watch/i)) {
//...
That's from 1.0.0 and the code after that else if rewrites the HTML page URL (e.g. http://www.youtube.com/watch?v=QmVvgSfdmJQ) to the older embeddable SWF URL (e.g. http://www.youtube.com/v/QmVvgSfdmJQ). This version problem also explains why the demo was producing different HTML than your's.
So, you have some version problems on top of everything else.
Check if you have included the jquery.fancybox-media.js
<script type="text/javascript" src="jquery.fancybox-media.js?v=1.0.0"></script>
Looks like your code might be slightly off
<script type="text/javascript">
$(document).ready(function() {
$("a[#rel*=fancyvideo]").fancybox({
overlayShow: true,
frameWidth:640,
frameHeight:360
});
});
</script>
http://chadly.net/post/2009/01/29/Lightbox-for-YouTube-Videos.aspx
use this sample don't forget href
<a class="fancybox" href="your path for image or other">
<img src="imagepath">
</a>
I'm using ContentFlow (http://www.jacksasylum.eu/ContentFlow/index.php) to create an image carousel on my page. The images are loaded via a jQuery AJAX-call. This works fine. The ContentFlow is included with this code:
<script language="JavaScript" type="text/javascript" src="contentflow.js" ></script>
Now I want to apply the default 'white' addOn upon creation of the ContentFlow. The CF is created in my document.ready()-codeblock. According to the documentation this should be done like (I believe):
$(document).ready(function () {
...
var ajax_cf = new ContentFlow('ajax_cf', {useAddOns : 'white' });
});
The ContentFlow is created just fine, the AddOn/theme however, is not applied. When using a non-AJAX approach the theme is applied correctly, so I know for sure the theme works, has no syntax errors, etc.
Any clues?
You need to manually add the addon script into the page.
For example, to include the slideshow addon use:
<script type="text/javascript" src="content_flow/contentflow.js" load="slideshow"></script>
<script type="text/javascript" src="content_flow/ContentFlowAddOn_slideshow.js"></script>
Then the Ajax config. worked for me
Trying to find the answer to something else about ContentFlow, I may have stumbled upon a solution to your issue: http://www.jeremyckahn.com/blog/?p=61
This post basically suggests not to set your ContentFlow configurations in $(document).ready
Additionally, my experience from Oliver Kohll's answer is that you DO need to specify the AddOn you want in the 'load' attribute for inclusion of contentflow.js as above...but you should NOT need to also specify the AddOn.js
Hope this helps!