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()).
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">
The below Jquery does not run within my browser even though the syntax is correct( checked via online syntax checker) and the functions do run (tested with pure JS). Why is it that so?
I apologize in advance if the answer to this question is rather simple but after 15min of googling I could not arrive at an answer.
JAVASCRIPT:
document.getElementById('overlay').addEventListener('click', function( {
closeLightBox()
});
function closeLightBox() {
$("#overlay").fadeOut(1000);
}
function lightbox(x) {
}
HTML
<!DOCTYPE html>
<html>
<head>
<title> Lightbox </title>
<link rel="stylesheet" type="text/css" href="lightboxcss.css">
</head>
<body>
<div id = "overlay"> </div>
<img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">
<br><br><br><br>
<p> RANDOM TEXT STUFF </p><br><br>
<p> 328ueekfuuirgh40t43h8hohro8ht </p>
<script src="lightboxjs.js"> </script>
</body>
</html>
I assume that javascript code is located in your .js file "lightboxjs.js". Did you include the jQuery library anywhere?
If you don't, start by adding this line <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> before including your custom javascript file.
$(document).ready(function(){
//page is ready
$("#overlay").on("click",function(){
this.fadeOut(1000);
});
});
You cannot add an eventlistener if the dom isnt loaded. Also dont forget to include jquery before executing the upper script
...
Where are you calling the jquery lib? You need to load the jquery just above lightboxjs.js and may as well use jquery syntax to listen to the #overlay click event.
I am loading .html content with jquery .load() but the javascript and css is not applied to the one.html/two.html after it is loaded by the .load() function.
Example below:
<head>
<style> styles1 </style>
<link href="stylesheets/style2.css" rel="stylesheet">
<script src="script1.js">
<script>
$(document).ready(function(){
$("button.os").click(function(){
fillmein = $(this).attr("target");
fillmeinfile = $(this).attr("target")+'.html';
$("."+fillmein).load("/contentfolder/"+fillmeinfile);
});
});
...
other scripts
...
</script>
</head>
<body>
<p>the css and any js is applied to this block</p>
<button class="os" target="one">replace</button>
<div class="one">I will be replaced by one.html</div>
<button class="os" target="two">replace</button>
<div class="two">I will be replaced by two.html</div>
</body>
I understand that the one.html/two.html is loaded after the styles and javascript is loaded by the browser but how I get the styles and javascript that is in the <head> to apply to the newly loaded one.html/two.html?
I new to jQuery so let me know how I clarify if needed. thanks!
EDITED
Thanks for providing answers everyone! Updated the code example to clarify what I meant.
copying the <style> and <script> into the one.html and two.html works but if I load the javascript twice it could conflict. for example, having logic that searches $(document), and functions that collapse and expand a section can be called multiple times. Is it possible to have the js and css that was loaded in the main page work on the newly loaded .html files or is there any clean and DRY way to do this?
As suggested by Arun P Johny in his comment
You simply put your CSS inline on the target document and it will be automatically loaded along with the content.
You can write
$('button').on('click','Classname',function(){
//write your structure here
})
This will work for all tags with 'Classname',which are already present or dyanamically added later on.
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'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>