Okay, I love this Flip Clock!! Awesome!
The problem I'm having is that the timer is not lined up right. I took a screen shot, here it is:
http://s22.postimg.org/9v19oa0oh/flip_Counter_Not_Working.jpg
Can you tell me what I did wrong?
This is on a wordpress site, but I added the code to the head instead of just in the main content html... like this:
<head profile="http://gmpg.org/xfn/11">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/compiled/flipclock.js"></script>
<link rel='stylesheet' href='/js/compiled/flipclock.css' type='text/css' media='all' />
</head>
Obviously there was a lot more stuff in the head, I just copied those between the head tags...
and then in the HTML I put the other code:
<div class="clock"></div>
<script>var clock = $('.clock').FlipClock("[php] echo time() - $_StartingTime;[/php]");</script>
The clock appears as you can see in the screenshot, but it is not lined up.
Can you tell me what I did wrong?
btw, here is the HTML that the php page outputs:
<div class="clock"></div>
<p><script language="JavaScript">
var clock = $('.clock').FlipClock("6447");</script></p>
So the php does put the time right, but even if I remove the "" around the starting time, because their sample does not have any quote marks at all, it still does this. I added the "" marks to see if it fixed it, but it did not.
I hope someone knows what I did wrong. I've been working on this for like 9 hours now. I'm about to give up and just make it use text instead of this nice interface.
Thanks in advance if you can help me. :)
-Richard
I think the problem is in the SomoSocial theme's CSS... when I remove that code from a test page I created out of the source code of my page, then the page looked terrible because the theme look and feel went away, but then the Flipclock looked normal.
So I guess I have to find the conflict and rename them or something.
Related
I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});
So, I'm trying to make an html5 website, and I'm trying to make a popup, "error" message using javascript, but I'm currently using html. and so when I tried
alert("nope wrong >:D")
and it didn't work. it was inside of a script tag but it still didn't work and so I'm not sure if I'm just meant to use html for that. the question overall is, do I have to use something like
<!DOCTYPE html>
like when youre making an html website or just like
<!-- container -->
or what I need help. thx in advance for any help I get :)
<!DOCTYPE html> & <!-- container --> have nothing to do with javascript notifacations. You are correct about the <script></script> part. You just need to put it in a function:
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
and then to call that function, use a button:
<button onclick="myAlert()">Click Me</button>
or call it on the body so when the page loads you get notified:
<body onload="myAlert">
EDIT: Here is a runnable code snippet
<button onclick="myAlert()">Click Me</button>
<script>
function myAlert() {
alert("nope wrong >:D");
}
</script>
also, good luck!
I'm working on putting together a portfolio site. It's coming along nicely, but I've hit a real shag.
I'm using one page, and have made four divs thus far to break up my work. I'll have graphic design pieces coming in from one side or the other as the user scrolls.
Now, I found WOW.js which is supposed to do precisely what I want it to, ie. make a graphic of mine show up only when the user scrolls down to it. BUT for the life of me, I cannot get it to work, and it's supposed to be so simple, doge style. Such amaze!
The graphic in question is a heart, and animate.css has a great 'pulse' bit of CSS I want to use. WOW.js is supposed to be fabulously with animate.css. But I'm completely lost. My JS skills are still very basic, so please be patient.
As the WOW.js docs state, I've linked to it with:
<link rel="stylesheet" href="css/animate.css">
(my CSS folder is named public, but I can't see that making a difference...?)
This goes at the bottom of my index page:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
I added the CSS class to an HTML element like so:
<div class="wow"> Content to Reveal Here </div >
Then you're supposed to add the animate.css style to the element:
<div class="wow pulse"> Content to Reveal Here </div >
But I'm missing something, because nothing is working. I've googled this and I'm not the only person who's had issues with WOW.js, but I've tried everything, and now I turn to you.
Under the customize settings on the docs, it suggests advanced settings:
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();
I'm thinking since this isn't SO AMAZE at all, there's gotta be another way for me to do this, but still be able to use a CSS animation.
LAST question: how do I make the pulse animation continue? It pulses a few times, then stops, but I want it to continue over and over. Suggestions?
Just put this code in your index:
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>
no need to call for
<script src="wow.js"></script>
couple things are happening here:
</div > is not a proper closing for an html tag.
if WOW is not defined then you most likely didn't include wow.js - make sure you have the right file (see what is inside) and the correct path. When you get stuck - Get rid of ALL console errors and make a minimum, bare bone solution that should work - it is less confusing and easier to find what is causing troubles.
as for repeating pulse animation - just don't. In the old days there were those <blink> and <marquee> tags and they are gone for a reason - you shouldn't use it. Same goes for Comic Sans unless your site is about doge.
now, the following example worked for me:
<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
new WOW().init();
</script>
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>
<div class="wow bounceInUp">
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>
<div class="wow pulse">
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>
</body>
</html>
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
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.