Javascript function not working. Script positioning issue? - javascript

I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});

What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.

Related

Javascript doesn't work for an image slider (help)?

I'm quite new to this all, and I just need to have an image slider/transition full width for the top of my page..
only problem is; I've never used or did anything with javascript code writing.
I've been looking for about 5 hours now and tried every thing possible but I just can't make anything work.
Most of the time it's just images stacking up under each other or next to each other.
I'm using dreamweaver CC because I have a deadline for the website on thursday and it's easier.
As you may have read I'm completely useless when it comes to javascript..
Also, I'm quite confused about jquery.. (Yes, I've looked everywhere but I can't understand anything of it, no mather what I do.. it doesn't work)
Please help?
<html>
<head>
<title>Slider</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
setInterval(function()
{
var activeimg = $('#slider').find('img:visible:first');
(activeimg.next('img:hidden').parent().attr("id") == 'slider') ?
activeimg.next('img:hidden').toggle("slow") :
$('#slider').find('img:hidden:first').show("slow");
activeimg.toggle("slow");
}, 3000);
});
</script>
</head>
<body>
<div id="slider">
<img src="img/1.png">
<img src="img/2.png" style="display:none;">
<img src="img/3.png" style="display:none;">
</div>
</body>
</html>

Is my jQuery .load bloacked by the CMS?

I am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.
My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.
P.S: When pasting the entries directly into the page it works as expected.
Edit: full working code
<p>
<mt:setvarblock name="html_head" append="1">
<script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</mt:setvarblock>
<mt:include name="include/header.tmpl">
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
<!--$("#divTestArea1").load("../gallery/output_en.txt");-->
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
<script type="text/javascript" charset="utf-8">// <![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
// ]]></script>
</mt:include>
</p>
Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>

How to scroll to the bottom of the page when at the bottom of the page (with a div)

I am trying to create a simple chat widget that will automatically load data from a different file, and stay at the bottom of the page unless the user has scrolled up at all. So far I have the loading working but the scrolling has not worked yet. I have tried several different answers on SO as well as many other places, non of them have worked. Also, I am relatively new to JavaScript.
Here is the code i am using, any help would be greatly appreciated!
<!DOCTYPE html>
<html>
<head>
<title>BennerBot v0.7 ~ Chat</title><link rel="stylesheet" type="text/css" href="resource/layout.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(function (){
$('#load').load('output.html?_=' +Math.random()).fadeIn("slow");
$("#load").attr({ scrollTop: $("#load").attr("scrollHeight") });
}, 1000);
</script>
</head>
<body>
<div id="load" style="overflow:auto"> </div>
</body>
</html>
Here is an example of the file that i am using:
<center><h1>Welcome to BennerBot</h1>Version 0.7</center>
<img src=./resource/OutputLogo.png>08:48 <span style='color:#ff0000'>BennerBot</span>: Sucessfully Connected to Twitch<br>
<img src=./resource/OutputLogo.png>08:48 <span style='color:#ff0000'>BennerBot</span>: Sucessfully Connected to Hitbox<br>
<img src=./resource/OutputLogo.png>08:56 <span style='color:#ff0000'>BennerBot</span>: all the infromations<br>
Look at this fiddle. This may answer your problem
$('html,body').animate({
scrollTop : $('.last').offset().top
},3000);
All you have to do is add scrolling action at documents ready function.

How to load this JavaScript when page Loaded

I'm a newbie to programming and I want to ask something about Javascript.
How to make this script is displayed when the page is loaded?
I want to make "1 people online" with this jQuery pop up.
$(document).ready(function() {
$.sticky('1 user seen this hotel!');
});
Can you all tell me how to use it and how to modify it?
I get this function from http://www.jqueryrain.com/?uOBwr_rL
Please help me.
Thanks, gbu
Sample HTML Page
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="sticky.min.js"></script>
<link rel="stylesheet" href="sticky.min.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$.sticky('The page has loaded!');
});
</script>
</body>
</html>
Please make sure you save this html content as HTML page in the same directory as your sticky.min.js & sticky.min.css files.
If you don't need the sticky functionality (i.e. if it's okay for a user to close the window), you can use an alert:
$(document).ready(function() {
alert('1 user seen this hotel!');
});
Or the jquery dialog: http://jqueryui.com/dialog/

Open lightbox when page loads

I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!

Categories

Resources