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>
Related
I'm trying out iScroll and following the documentation, but for some reason I can't get it to initialize. At least, I don't think I can. From the demos and code, I'm not exactly sure what I should expect it to look like!
I've got this code:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/iScroll/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#scroll', {
mouseWheel: true,
scrollbars: true
});
}
</script>
</head>
<body onload="loaded()">
<div id="scroll">
<div>...Lots of Lorem Ipsum text here...</div>
</div>
</body>
</html>
For the sake of tidiness, I've not included the actual text I've got in the div I want to scroll, but all I've got is lots and lots of text - enough to make the page need to scroll. The reference to the iScroll file is definitely correct, even with its mixed cases.
I added in the options (mouseWheel and scrollbars) just to try and make something happen so that I could determine whether the script was being initialized. Setting scrollbars to false doesn't seem to make any difference. Bizarrely, if I set mouseWheel to false my mousewheel works, but if I set it to true it doesn't - exactly the opposite of the documentation.
I'm clearly doing something wrong, but I can't see what - it doesn't get more basic than what I'm trying. I looked at the barebone example from the documentation, but that doesn't seem to work for me either, in that there are no scrollbars displayed anywhere. I'm getting the same behaviour in Chrome (48) and IE11.
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.
I have been looking into the matter for the last 2 hours. I am not really a coder, but just trying to make simple website work. Alright, little bit more complicated than usually, but I tryed php and js and both ways did not work for some odd reason. I would really love to get the js working. .js, .css and .html are all in the same folder, checked the names over for thousand times already. Here's some code:
HTML:
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="java.js"></script>
<div id="bg">
<img src="bg.jpg" alt="" />
<img src="bg5.jpg" alt="" />
<img src="bg9.jpg" alt="" />
<img src="bg11.jpg" alt="" />
</div>
Did not put full code here, but this code is inside the html tags and body.
css is working as wanted so will not add here.. in css position is absolute if that matters..
JS:
$('img').hide();
function test() {
$("#bg img").first().appendTo('#bg').fadeOut(5000);
$("#bg img").first().fadeIn(5000);
setTimeout(test, 7000);
}
test();
Now, if I put in css display:none then this code should start working and changing pictures. But it does not. Pictures come up right at the place behing each other when I remove the command display:none. But js just does not want to work. I tried before js too, didn't work, but this time I would like to get it work.
Thank you.
You are trying to execute jQuery code without linking jquery library.. You should include the jQuery library file before you use it, Otherwise you'll get the error $ is undefined.
Add the following above your script:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Also, add your code inside ready() handler to make sure you script runs after the elements are created as Barmar mentioned in comments.
Link the jQuery library first and make sure your code actually gets called, (e.g. inside $(document).ready()).
I'm new to JavaScript and need some help figuring out how to put things together. I need to put my JavaScript image loop html page on my jQuery menu tab page. Here is my jQuery code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About me</li>
<li>Contact us</li>
<li>Gallery</li>
</ul>
<div id="home">
<p>A short paragraph about Overcoming Obstacles.</p>
</div>
<div id="about-me">
<p>A short paragraph about me.Banner advertisement that uses a JavaScript function to change the image every few seconds using three images.</p>
</div>
<div id="contact-us">
<p>My contact details.</p>
</div>
<div id="gallery">
<p>This is my gallery.</p>
</div>
</div>
</body>
</html>
The part I need help with is the about me page. I have the image loop created with the page description and it works. What I need to do is call the About_me.html (named Brunson_About_me_rotate2.html) to the jQuery menu tab page with all its functionality. But I only know how to work with HTML, CSS, JavaScript, jQuery, because that's all I understand how to do. It can't be done with Ajax, ASP, PHP, or SPRY because I don't know how to work with them and this is enough of a headache for me right now. And it has to work with the client side, not the server side. Also, this is going into a Dreamweaver page.
I have tried to put the loop code with text into the About us section of the Tab Menu code, but that doesn't work. Alternately, I have tried:
<? include("./Brunson_About_us_rotate2.html");?>
(Because that's what the file name is) trying to call up the loop in the jQuery menu page About us, but that doesn't work either; all I get is a blank page. I'm VERY new to this whole thing and I barely know how to make this happen; it's taken me 5 days to get this much put together. I don't even know what options are available to make it work. Can someone help me figure out what to do? I just need these 2 pages to work together properly when the page is clicked. Thank you for your time.
After getting several options, thank you both for your help by the way, that did not work, I have been working the code around to see what I can do with it. I am posting the code just as it is now and almost what it should look like after it's uploaded to the web. Here's what I have so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Brunson - Home</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
<div id="home">
<p><h2>What is a Life Coach?</h2></p>
<p>A life coach is someone who is an advocate for you in reaching a higher level of understanding<br />
and being the best person you can be in whatever area of your life you decide you need improvement in.</p>
<p><h2>What does a Life Coach do?</h2></p>
<p>A Life Coach assists you in identifying those areas in your life that you would like to change.<br />
Once those areas are determined, the process of creating the life you truly can begin.</p>
</div>
<div id="about">
<script type="text/javascript">
var pictureArchive= ['image1.jpg','image2.jpg','image3.jpg'];
window.onload=function() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
o.setAttribute('alt', '');
document.body.appendChild(o);
rotate(pictureArchive.length);
}
function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementById('image').src=pictureArchive[idx++];
timerID=setTimeout('rotate('+idx+')', 4000);
}
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<p>I became a Life Coach so I could reach more people and make changes in more lives than I was
able to do when I limited myself to my Alternative Therapies Business. By choosing to take the
limits I placed on myself off, I have created abundance in my life and create more value than I
was able to do before. The school I chose to get my Life Coach Certification from was QSCA because
they have the same beliefs that I do. Living the Universal Laws, living my life with integrity,
being the best that I can be, and ascending to higher levels of awareness and consciousness allows
me to help others overcome negative behaviors and limited thinking patterns. Helping others this
way allows me to create a reality that is past the negativeness we have been living with.</p>
</div>
<div id="contact">
<p>My contact details. Form asking for name, email address, and a message. The form will have an unselected radio button array that includes a yes or no response. All fields required. Validation of all fields is a must. Email address must be present and match</p>
<p>the criteria for a legitimate e-mail address (using regular expressions). The submit button must call a validation routine; and when the user has filled in all information correctly, the page will display a thank you message and clear the form. The ehank you message can be s separate page, or it can be displayed on the same page.</p>
<p>Are you ready to make a change in your life right now? Yes No</p>
</div>
<div id="gallery">
<p>Once you make a choice to make a change, old limiting beliefs seem to just fade away.</p>
<p>As nature abhors a vacuum, unlimited beliefs seem to jump to the fore.</p>
<p>Where once there was nothing but limits, suddenly everything is possible.</p>
</div>
</div>
</body>
</html>
What I got with the code ya'll gave me was a blank about page, a page with a box that's window scrolled up and down and side to side and had an error message in it that said IE could not open webpage, and the last code gave me that code on the browser page. So I started just trying to play with the code and see what I could get to work. I almost have what I need. And yes, I do realize that some of the code is not placed correctly, but when I placed it correctly, the images didn't show up at all on any of the pages.
The only problem with the way this is, is that the images are on all the pages; they are just supposed to be on the About page. I'm going to be putting a contact form on the Contact page and 3 different images that fade out, move, and fade in on the gallery page. Then ultimately, after I get done coding this in NotePad and checking it in the browsers to make sure it works, this "page" with all this content included, will go in Dreamweaver that will have the esthetics attached, external links, a clock and then get uploaded. So, does anyone have any ideas as to what I should try next?
Your problem is, that you made the php - tag not correct.
<?php include("../Brunson_About_us_rotate2.html"); ?>
And you also must put two points to get to the parent directory.
Ajax seems a very easy solution for this.
jQuery already has it's own easy to use ajax functions.
One of them being .load() http://api.jquery.com/load/
$('#about-me').load('../Brunson_About_us_rotate2.html');
Another option would be iframe
<div id="about-me">
<iframe src="../Brunson_About_us_rotate2.html"></iframe>
</div>
http://www.w3schools.com/tags/tag_iframe.asp
I can't seem to find a javascript(jQuery or other) effect that works like I want it to. I was hoping someone can help me out.
I am working on a project that has 3 content boxes wrapped within a larger div. I am thinking of adding a "Get A Quote" button that will take the larger surrounding div and drop it when you click on the "Get A Quote" (think scooby doo(pull book out of bookcase and the wall drops)) and have it bounce when it hits like it actually has weight. Then go back up after the user has filled out the "Get A Quote" form.
I hope that makes a marginal bit of sense.
Just ask if you would like clarification or if you would like me to post a sketch of how it works.
This is an already available feature in JQuery UI. http://jqueryui.com/demos/show/.
This is how you do it
<style type="text/css">
#mydiv{
width:300px;
height:300px;
background:red;
display:none;
margin-top:30px;
}
</style>
<button>clickme</button>
<div id="mydiv"></div>
<script type="text/javascript">
$('button').click(function(){
$('#mydiv').toggle('bounce',300)
});
</script>
You can see a working example at http://jsfiddle.net/TUFaw/
I used toggle which means if you click on the button again, the effect will be revered back to hide the box. You can use many of the available effect (blind, clip, drop, explode, fold, highlight, puff, pulsate, shake, slide, size, scale)
If you never worked with jQuery before, make sure you include the required CSS and JS files.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>