Javascript not wanting to work? - javascript

For some odd reason this image slider does not want to work can anyone point out the problem i have a feeling it is with including the javascript also the does not want to work also so i went with :
<link rel="stylesheet" type="text/css" href="includes/css/slider.css"></link>
<link rel="javascript" type="text/javascript" href="includes/js/slider.js"></link>
<link type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></link>
or is this the correct way either way it dont seem to work?
<link rel="stylesheet" type="text/css" href="includes/css/slider.css"></link>
<script rel="javascript" type="text/javascript" href="includes/js/slider.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></script>
Edit full code:
<div class="mask">
<ul class="imgHolder">
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" />
</li>
<li>
<img width="270" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" />
</li>
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" />
</li>
<li>
<img width="270" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" />
</li>
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" />
</li>
</ul>
</div>
<ul class="thumbHolder">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="control Bleft">Prev</span>
<span class="control Bright">Right</span>

Give this a try:
<link rel="stylesheet" type="text/css" href="/includes/css/slider.css"></link>
<script type="text/javascript" src="/includes/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/includes/js/slider.js"></script>
Notice that I have removed the rel tag, and I have added leading slashes at the beginning of each path, so that it always loads from the root.

Make sure you include the jQuery script before all dependent scripts, i.e. all scripts that use jQuery.
--
Also, link tags are self closing and script tags are used for js files not link tags.

Link tag is used to pointing and adding css files inside page where as script tag is used to add client side script into code example vbscript and javascript etc.
One more thing you need to include jQuery before any of other jQuery plugin which are depended on jQuery.
Example
<link rel="stylesheet" type="text/css" href="includes/css/slider.css" />
<script type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></script>
<script rel="javascript" type="text/javascript" href="includes/js/slider.js"></script>

Related

Lightbox Not Working Onto (Any)Browser

I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>

javascript isn't working on html

I am new to both html and javascript
I copied the these codes from codecademy, but they are not working well. I hope someone can explain to me why isn't the javascript working in my html. Thank you so much!
index.html
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
</head>
<body>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li>About</li>
<li>Blog</li>
<li>Help</li>
<li>Contact</li>
</ul>
</div>
<!-- Main body -->
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
</div>
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
app.js
var main=function(){
$('.icon-menu').click(function(){
$('.menu').animate({left:'0px'},200);
$('body').animate({left:'285px'},200);
});
$('.icon-close').click(function(){
$('.menu').animate({left:'-285px'},200);
$('body').animate({left:'0px'},200);
});
};
$(document).ready(main);
Change
<script src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
The code you have there in app.js is written using jQuery.
Even though you need jQuery, the $, i your app.js you have included your script tag for including jQuery after app.js.
Therefore when your app.js loads, you still do not have jQuery so your script fails.
The solution is to include jQuery first and then including your app.js.

jQuery Cycle2 transition plugin doesn't working

I have a issue with this plug in of jquery cycle2.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Usare jQuery Cycle2 (2) | Sintesi-design.it</title>
<link rel="stylesheet" type="text/css" href="css/fonts/font.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>
<body>
<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=5
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-pager="#pager"
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev><< Prev </a>
<a href=# id=next> Next >> </a>
</div>
<div class="cycle-pager" id=pager></div>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.cycle2.js"></script>
<script src="jquery.cycle2.carousel.js"></script>
</body>
</html>
I downloded the code of the plug in like say the documentation.
The others effects works, only this with transition not, someone know why?
Thanks
<div class="cycle-slideshow"
http://jsfiddle.net/ska2hjr0/
According to documentation:
cycle-slideshow is a special classname which tells Cycle2 to
auto-initialize the slideshow when the page is loaded.
http://jquery.malsup.com/cycle2/demo/basic.php
Another method, add jquery code to page: $( '.slideshow' ).cycle();
But auto initialization is even better.

How to use slicebox

I am trying to get slicebox to work in a test page. From the documentation, it seems I needed to use the slicebox css file and have a jquery script linked up along with slicebox.js. From there, I thought it was as simple as calling the function in the script as in "$('#sb-slider').slicebox(); But the pictures do not even show up.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slicebox Test</title>
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
</head>
<body>
<ul id="sb-slider" class="sb-slider">
<li>
<img src="images/1.jpg" alt="image1"/>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
</li>
<li>
<img src="images/3.jpg" alt="image1"/>
</li>
<li>
<img src="images/4.jpg" alt="image1"/>
</li>
<li>
<img src="images/5.jpg" alt="image1"/>
</li>
<li>
<img src="images/6.jpg" alt="image1"/>
</li>
<li>
<img src="images/7.jpg" alt="image1"/>
</li>
</ul>
<div>
Next
Previous
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$("#sb-slider").slicebox();
</script>
</body>
</html>
Do you have the css and the js in this folders?
css/slicebox.css
js/jquery.slicebox.js
Maybe that is the problem. You have to download and put that in that folder
I think you need to also link the included modernizer script in there.
<script type="text/javascript" src="/scripts/modernizr.custom.46884.js"></script>
I have it working but not in all browsers/platforms.
You do need to add a ready function.
$(document).ready(function() {
$("#sb-slider").slicebox();
});

PhoneGap jQuery mobile multiple html files css not working

I have implemented a Phone Gap application using jQuery Mobile and java script for iPhone and android.
My app is almost completed.
Till now I used single index.html file for all the pages.
Now I need to use different html files for different pages.
So I have created multiple external html files for different pages, linked the references and added them in to www folder.
in that the i have a list view its css not visable
Main Page:- See page2 and page3 ref in index.html file
<div data-role="content">
<ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view">
<li data-role='list-divider' ><big>Lis view</big></li>
<li><a href='#page1' id='Page1' data-panel='main'>Page1 Information</a></li>
<li><a href='page2.html' rel="external" id='pagetwoid' data-panel='main'>Go to Page 2</a></li>
<li><a href='page3.html' rel="external" id='pagethreeid' data-panel='main'>Go to Page 3</a></li> </ul>
</div>
Page2:-
<!DOCTYPE html>
<html>
<head>
<title>Multiple htmls</title>
<meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!--
<link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="inc/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="inc/jquery.mobile.grids.collapsible.css" />
<link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" />
-->
<link rel="stylesheet" href="inc/jquery.alerts.css" />
<link rel="stylesheet" href="inc/jquery.mobile.datebox.css" />
<script charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
<script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="inc/jquery.alerts.js"></script>
<script type="text/javascript" src="inc/iscroll-wrapper.js"></script>
<script type="text/javascript" src="inc/iscroll-lite.js"></script>
<script type="text/javascript">
alert('js Loadfed');
</script>
<style>
alert();
alert('css loaded');
</style>
</head>
<body>
<!--============= Page2 ===============--->
<div data-role="page" id="siteContacts" data-theme="e" >
<div data-role="header">
<h1>Page 2 </h1>
<a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" >Edit</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a">
<li data-role="list-divider"> <!--list Header --->
<div class="ui-grid-c"> <!--Section Headers Grid--->
<div class="ui-block-a" ><big> aaaa</big> </div>
<div class="ui-block-b" ><big> bbbb</big> </div>
<div class="ui-block-c" ><big> ccc</big> </div>
<div class="ui-block-d" ><big> e-sss</big> </div>
</div>
</li>
</ul>
</div>
</body>
</html>
Maybe I'm reading your code wrong, but it looks like the links to the jquery mobile stylesheets are commented out. You definitely need to have them defined in the HTML to get the styles applied.
Are you loading them someplace else that it not apparent from the code you posted?
PhoneGap requires you to manually set/allow aspects of your app in your "config.xml" file in the root directory.
The solution you are looking for, I believe, is this line:
<access origin="http://code.jquery.com" subdomains="true" />
You are allowing access to the external resource of "http://code.jquery.com" and allowing all of its subdomains. This means that you have just unlocked jquery mobile, which is what you are going for, as seen by your script tags:
<script type="text/javascript" src="inc/jquery-1.7.1.js"></script>
<script type="text/javascript" src="inc/jquery.mobile.splitview.js"></script>
These "src" attributes are now seen as "subdomains" of http://code.jquery.com, which you have just successfully allowed!

Categories