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!
Related
I'm trying to function this code
But when I use it on my Angular app, I found some errors, and it seems to be jQuery
var element=$('.cds'); //the problem is right here (angular.element('.cds') is the same)
console.log(element.html()); //prints undefined,
// so, no animation
How can I fix it? Any ways to use jQuery edge?
index.html
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bundle.js"></script>
As the code is in bundle.js, created with browserify, should I call jQuery too? Like var jQuery=require('jquery');? or something. Thanks for your help
Try this line in your code, after definition of done(). It will not work.
console.log($('.cds').html());
Now click the javascript button and select 'OnDomReady'
Now it works. You cannot use jQuery until domReady event.
EDIT
This is the most classic method for jQuery
$( document ).ready(function() {
/* The DOM is now loaded and can be manipulated*/
});
Try using angular's built-in jqLite first before anything ...
$scope.el = angular.element('.cds').html();
console.log($scope.el)
Or if you want to user pure jquery then try searching the parent for your element an store this in a variable :
var el = $('.container-class').find('.cds');
console.log(el.html());
Hope this helps
I have an easy tabs page,with three different pages(TAB1,TAB2,TAB3).
Tab.php
Tab1|Tab2|Tab3
//Tab1 has an slider plugin(with Jquery UI)
//Tab2 has an autocomplete for select list
The conflict come from because two function wants to use jquery variable.
Two pages contains jquery plugins but with only jquery version(jquery-1.11.1.min.js)
The tabs only works properly(elements showing,jquery methods correctly running) when only one tabs is enabled(just commenting the link).
I use the jquery no conlict to try to solve this problem(before that there was conflict between the main tab page and the invidual page):
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var s = $.noConflict();
</script>
So on the sub page(tab1) i use like:
s(document).ready(function(){.....}
I also try to define a second shortcut(first i try to use the same 's' there too) :
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var j = $.noConflict();
var s = $.noConflict();
</script>
to use this at the Tab2 page.It was not a solution for me.Diseable Tab1 and using 'j' also works good.
One more importent thing is the firts downloaded page shown correctly each time,so i know the conflict is becuse of the jquery variable(overwrite it or something like this).
I try to find a solution by my self but i couldn't.Please help me
Update1:
As i note before i made a lot of research before that:
Jquery tabs conflicting with revolution slider
This question is very similar for my problem,but the difference i have more tabs,more conflict so i thought if i use more shortcut it will solve the issue.
Update2:
It is more interfering between the plugins than conflict.
using
var s = $.noConflict(true);
totally throw awey the full page,even the tabs does not want to work
First the tab.php load,it is using the jquery global variable,
than if i click on Tab1 it is also wants to use the global variable,
After if i click on Tab2 also need jquery variable
So bumm the interfering is ready
Update3:
After a lot of research,i found the problem is not with the noconflict.
The Tab2(upload.php) page is correctly rendered when i full reload the page.
s(document).ready(function(s) {//without the ready it does not rendered even after F5
s("#modell").select2(); });
I believe that you are trying to load jQuery with a different variable name. I would suggest that you use:
$.noConflict();
jQuery( document ).ready(function( blah ) {
//You can now use blah as the jquery method (e.g. blah("#button").click();)
});
I've made an example here: http://jsfiddle.net/me66st8w/. You can find out more about this in the official documentation here: http://api.jquery.com/jquery.noconflict/.
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 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.
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.