I want to add filmstrip to my page that scrolls images without using a plugin. So I found nice javascript online (http://jsfiddle.net/benknowles/TUwqn/2/) that does exactly what I want to do. Here is the script:
jQuery(document).ready(function($) {
$('#filmstrip').filmstrip({
interval : 3000
});
});
Here is what I have done so far. I uploaded the javascript to my server and added in my footer in WordPress. Then I copied the HTML as from the example on http://jsfiddle.net/benknowles/TUwqn/2/ and just replaced with location of my images. Added the css as from the example but I just can't get it to display correctly.
Am I missing something?
As j08691 alluded to, you need to include this file in your html before the code block:
jQuery(document).ready(function($) {
$('#filmstrip').filmstrip({
interval: 3000
});
});
Which gives you access to the filmstrip function
Related
I am using a social login plugin to connect with my site. It works fine, but I want to remove its mark, like Powered By AJAY.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".ajay iframe").contents().find("#branding").attr("style","display:none");
});
</script>
I try to display none with its class and id but it does not work because all part come with frame.
Try to delay jquery css override with 2s delay, to see if this applies the modifications well or not. To change delay time, modify 2000 (2s) to whatever you want (1000 = 1second, 9000 = 9s, etc.)
You want to wait since when the page has finished loading, so put that code inside your $(document).ready(...); script.
jQuery(document).ready(function(){
setTimeout(function(){
jQuery(".ajay iframe").contents().find("#branding").attr("style","display:none");
;}, 2000);
})
UPDATE: jquery 1.4.0 introduced the .delay method. Check it out.
I dont know if you want it to modify a wordpress or a handmade webpage, anyway i did it some times using CSS, let me search for the classes i applied and i'll edit the answer. I need to know which social iframe are you loading.. facebook maybe? twitter? the solution is not the same sometimes due to the code charged by the iframe.
i let here an example and a code snippet:
jQuery(document).ready(function(){
$(document.body).append("it's gonna be legen-... wait for it");
setTimeout(function(){
alert("-dary!!")
;}, 4000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Oh and... if you could update the question with the code you want to modify after loading will be fine to build a proper css
You need to wait until iframe is loaded, also iframe need to be in the same domain as your page:
jQuery(document).ready(function() {
jQuery(".ajay iframe").load(function() {
jQuery(this).contents().find("#branding").
attr("style","display:none");
});
});
I'm trying to use a script called Socialite in my Wordpress site to make social share buttons appear only after the user has moved his/her mouse AND the document already loaded.
I can't get it to work together. My current script, that does work, is:
jQuery(document).one("mousemove", function() {
var social_container = jQuery('.social_buttons');
Socialite.load(social_container);
});
But how do I connect the document load part?
Thanks
Have you tried to put your code into
jQuery(document).ready(function(){/* your code goes here*/});
?
For starters you have a small typo in the first line
jQuery(document).one("mousemove", function() {
You're calling .one("mous...
It should be .on("mous...
Next considerations is that the document ready statement below will happen before images etc have loaded
$(document).ready(function(){
// your code goes here.....
});
using a window load statement like below waits until everything i.e.images have loaded in full
$(window).load(function(){
// code here.....
});
I'm not sure what would suit your needs best as I have no experience with Socialite but hopefully this will give you the answers you need.
I am currently writing some Javascript code that adds some tags across text in an HTML file after the page loads. I use the
window.onload
method for achieving this.
However, I am facing an issue in pages like google plus, where you get more content as you scroll down. Is there a way of calling my JS function when such a page adds more content?
Thanks
Akshay
There are several ways how to get this working. You can either use jquery like this:
$('#mydiv').bind("DOMSubtreeModified",function(){
// your code goes here
alert('changed');
});
Note that this is not supported in IE8( and below).
Or you can run loop and continuously fire the desired code:
var interval = setInterval(function() {
// your code goes here
}, 1000);
Fiddle: http://jsfiddle.net/8RF5r/5/
I'm currently working on an userscript for a forum, however, it doesn't seem to work.
The forum has two themes, I want to replace the userbars (located in /groupimages/) from the new theme with the ones from the old theme.
I'm currently trying this:
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
/modern_pl/ is the directory of the new theme, /blackreign/ of the old one.
An example URL of an image is /images/modern_pl/groupimages/english/strange.gif
It does select some pictures, but not all. It looks like it suddenly stops, without giving out any error message in Chromes JS-Console.
Lets say the strange.gif is there 3 times on the page, it only replaces it once. Some other pictures (that should be selected because the source contains /groupimages/) are completely ignored, so I doubt that this is happening because one picture is there more than once.
Any ideas?
To me the snippet looks good.
Did you place it inside a Document ready function? If not, the problem could be that the pictures just aren't yet loaded when the script runs.
Try this:
$(function(){
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
});
UPDATE
Its hard to help when the code you present works.. but lets assume there is content loaded by ajax after the page loaded completely.
You could do this.. which is not nice at all.. but assuming you don't have further access to the code on the website, try this:
setTimeout(function(){
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
},1000);
This waits a second for other scripts to be loaded before running your code.
Something like that ?
var img = $( 'img' );
img.attr( 'src', img.attr( 'src' ).replace( "\/groupimages\/", "\/modern_pl\/") );
I'm trying to bring some images from a Tumblr account and to show them using a slider. To bring the images I modified and used a script called tubmlrBadge (http://robertnyman.com/2008/09/19/tumblrbadge-a-tumblr-badge-script/), and to show the images I am using this slider > http://www.meadmiracle.com/SlidingGallery.aspx
If I check using Firebug I can see that the photos are shown okay, but I can't see them in with the slider. I can't figure out what's the problem, I suppose that a problem appears because the slider script must work with content generated by the tubmlr script. I tried placing the slider script after the tumblr one the slider still doesn't works.
You can see a demo of the this at http://www.mctest2.com.ar. If anyone has an idea please help me I tried everything!!
Thanks!
If the script you use to fetch the images was the image-fetcher itself (not a script that calls another script to get a JSON with the image data) you would have used $.getScript with a callback method.
However, your script can't use it, because no matter if the script file is loaded, it will also call another one, that might take longer to be loaded.
I think the only possibility you have is to set an "timer" in your page and wait until the gallery is loaded:
function setSlider() {
var jqelement = $('.gallery img');
if(jqelement.length>0) {
jqelement.slidingGallery();
} else {
setTimeout(setSlider, 200);
}
}
setSlider();
Working example:
http://jsfiddle.net/marcosfromero/5dSgd/