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.
Related
I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.
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>
I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/
I have some troubles with JQuery and JQuery mobile.
When i click on the links in my page, i have this error :
Uncaught Error: cannot call methods on page prior to initialization; attempted to call method 'bindRemove'
I have tried to change the position of the link rel and scripts, but it breaks my design...
Someone have an idea ?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accueil</title>
<!-- CSS -->
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- CSS splashscreen -->
<link rel="stylesheet" type="text/css" href="css/wemind/splashscreen.css" />
<link rel="stylesheet" type="text/css" href="css/wemind/styles_wemind.css" />
<!-- JS -->
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Scripts splashscreen -->
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script_splashscreen.js"></script>
</head>
<body>
<div id="promoIMG" />
<div data-role="page" id="main-page">
<div id="actionbar-main"><img src="img/ic_launcher.png" /></div>
<p class="text-accueil">Qui êtes-vous ?</p>
<div id="student-link"><img src="img/ic_student.png" /></div>
<p class="wemind-font">Student</p>
<div id="horiz-sep-main"><img src="img/ic_sep.png" /></div>
<div id="parent-link"><img src="img/ic_teacher.png" /></div>
<p class="wemind-font">Teacher</p>
</div>
Thank you in advance
Something in your js/ scripts is trying to act on a Mobile widget before it's initialized. Find whatever function is using bindRemove as a parameter and call it without any arguments first to initialize its widget before you call bindRemove.
I tried this :
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
window.location = $(this).attr("href");
});
});
</script>
i put this in the
but when i logout, i'm redirected to this page and the problem appear again...
I should be able to click a link without problem, it's very odd with a code that simple !
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!