This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code
Related
So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
I have this javascript code and I want to convert it in FBJS, but I don't know how.
<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",5000);
}
function alertMsg()
{
document.write("<p>some text</p>");
}
</script>
</head>
<body>
Click
</body>
</html>
Can someone help me?
FBJS is deprecated and it's not suggested to use it as all apps are migrating to iFrame (and FBJS is for use on FBML apps), but here's the documentation for it: http://developers.facebook.com/docs/fbjs/
Scroll down to the table to see what FBJS's replacements are for JS. If you have trouble with the cheat-sheet open then I would suggest doing some more research on the basics of Facebook programming.
I am trying to change our site to load a Header through jquery using the .load() function but to do so I need to set the Title of the page.
From another StackFlow question it was suggested to do something as simple as
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
When i do this I get the firebug error
Missing } in XML Expression for that line in the script
I am sure there is probably an easy solution but it is certainly escaping me.
I've just tested this out here, please see if you have created your html document in the same way. Code as below.
<html>
<head>
<title>Old Title</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
</script>
</body>
</html>
I found what the problem was. This script was in the middle of another script block which was causing the error.
Thanks for all the help.
I've added a flash gallery to my site and the required script is causing the background image to shift.
You can see the page here: http://www.arbitersoflight.net/media/screens.html
The script in question is the "swfobject.js". I've determined this by adding/removing the
<script type="text/javascript" src="/scripts/flashgallery/swfobject.js"></script>
line to my site (which is required to run the gallery). Obviously, due to the layout of my site, I cannot having the background being moved...so this is very annoying. Unfortunately I know next to nothing about coding so I lack the skills to find the problem myself. I would really appreciate any help you guys can give me here.
I'm not sure why this is happening, but if you add the following CSS to the following tags it will fix it:
#header { position:relative; top:15px; }
.scroll-pane { position:relative; top:-15px; }
EDIT:
Another reason this might be happening is from white-space in this script tag:
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
A possible way to fix this would be to save that code to a file and include it as:
<script type="text/javascript" src="/scripts/jscrollpane/jquery.jscrollpane.init.js"></script>
How to use jquery cookies in showing/hiding elements in a page ? I got the plugin from here
Tried some method but i am not successful. I used slideUp() and slideDown() functions to show/hide elements.
When a element is slided up a cookie should be set. when the page is refreshed, the element should be in slided up position
How to apply cookie when slided up and how to get the cookie when page is refreshed ?
I need help !
I think the following is what you're looking for. Let me know if I am mistaken. Good luck!
http://jsfiddle.net/8VCJY/8/
- EDIT -
Sorry! My cookies were getting set backwards. It does work now (new link). Again, all apologies.
- EDIT -
Actually, I don't even know if it does work. It looked like it did, but then reviewing my code, I can't see how that could be right. All in all, I'm pretty sure that the setting of the cookie at the appropriate time and whatnot will at least get you on the right path. I think my usage of the plugin is wrong, to be honest (I've never used it before), but I gave it what I could. I hope it was at least somewhat useful to you.
Would this do the trick?
<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
<style type="text/css">
#outer {height:500px;width:500px;background-color:black;position:relative;}
#slide-me {height:50px;width:50px;background-color:white;position:absolute;top:250px;left:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>
<body>
<div id="outer">
<div id="slide-me"></div>
</div>
<button type="button" id="myBtn">Slide it!</button>
<script type="text/javascript">
$slideObj = $('#slide-me');
var topOffset = $.cookie('myCookie');
if(topOffset)
$slideObj.offset({top: topOffset - $slideObj.height(), left:$slideObj.offset().left});
$('#myBtn').click(function() {
$slideObj.slideUp();
$.cookie('myCookie', $slideObj.offset().top);
});
</script>
</body>
</html>
P.S I'm using the Cookie plugin.