I have implemented Flexslider2 both locally and on a jsfiddle. Each uses the exact same code. However when view my page locally on (Firefox, Chrome and IE9) the Flexslide only resizes the images width.
The jsfiddle, http://jsfiddle.net/T64Gp/3/, produces the desired outcome where the image's aspect ratio is maintained
My local code (HTML) is as follows. There are no styles outside of the flexslider.css and no additional javascript outside of jQuery and flexslider.js.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="flexslider.css">
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" alt="1" title="1">
</li>
<li>
<img src="2.jpg" alt="2" title="2">
</li>
<li>
<img src="3.jpg" alt="3" title="3">
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="flexslider.js"></script>
<script>
$('.flexslider').flexslider({});
</script>
</body>
</html>
Any insight on why this might be happening would be appreciated.
Two suggestions you could try:
Your code above and the jsFiddle are using different versions of jQuery. The flexslider example page uses jQuery 1.9.1 so maybe it's best to stick with this for now
The most likely cause though is that you should initialise flexslider with
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
This will ensure that the page content is loaded before flexslider initialises.
Good luck!
Related
So I am developing my first responsive full width image slider in JQuery.
I've been working with JQuery before but never image sliders so I am not sure if its my code that is corrupt or if its the cycle2 that is playing a game with me.
So the issue I am having is that when I open my webpage to see the slider itself its not showing the pictures. I am leaning against the idea of the cycle2 file being outdated or something but I cant know for sure unless someone who uses it alot can confirm it.
To me my code looks perfect, I cant find any issues since it is such a short code.
Here is what my issue looks like http://imgur.com/3QUUbpc
And here is the source code for my file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.js"></script>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.cycle2.min.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\Untitled.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp2.png">
</div>
</body>
</html>
Try this code out:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
</body>
</html>
https://jsfiddle.net/1qjgwz31/
I have a set of "li". On clicking each of those "li", I'd like to load a "div" with contents from a html page. I've read some answers on stackoverflow & tried them but they aren't helping me get this working.
Here's the code am trying now
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('dst.html');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('incf.html');
//alert("Thanks for visiting!");
});
});
</script>
</head>
<body>
<header class="site-header-wrap">
<div class="site-header">
<h1>MY TOOL</h1>
</div>
</header>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>HOME</span></a></li>
<li><a id="page1" href="#"><span>OPTION 1</span></a></li>
<li><a id="page2" href="#"><span>OPTION 2</span></a></li>
<li><a id="page3" href="#"><span>OPTION 3</span></a></li>
</ul>
</div>
<div id="result"></div>
</body>
<html>
The code in dst.html is
<html lang=''>
<body>
<p> In page 1(dst page) </p>
</body>
<html>
Could I request help please spot what I'm doing wrong here?
Your code seems to be working for the most part for me the only thing i changed in your code is $('#dblock').load('dst.html'); to $('#result').load('dst.html'); since there is no div with the id #dblock
also make sure your file structure is setup properly and the html files are there with what you have setup now you should have three html files in the same folder
I am trying to implement the parallax effect in the website WRT the following link
https://github.com/richardshepherd/Parallax-Scrolling
however
in the website one image(parkview) screen short added, I need to keep stationary so that I can add menu and sub menu in that ,currently its moving like other image .
I tried setting it as a background but the whole background changes.
How can I make it fix??
This is the working code
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML and CSS">
<meta name="author" content="Richard Shepherd, Smashing Magazine">
<!-- Mmmmm, Google Web Fonts. That's a paddlin'. -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="log">
<img src="images/logo.png">
</div>
<div id="main" role="main">
<!-- Section #1 / Intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
<p>Words and pictures by Richard Shepherd / Twitter: #richardshepherd / Web: richardshepherd.com</p>
<p>GitHub: Fork it here!</p>
</article>
</section>
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
You can add position: fixed to it or make another element with background and background-attachment: fixed.
I'm building an app in html/css/javascript and using phonegap to build.
So, I first wanted to have to simple page to page navigation. I tryed this:
index:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Result: when I click on the button the test.html page loads very slow and the data-transition="slide" seems to be ignored.
I found an article about dynamic page loading: https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en
Which I really don't get. Aren't the HTML files stored locally? So why do a XMLHtppRequest?
My question is: How do I get a good page transition (fast and with effects)?
You should remove rel="external" from your <a> link.
The attribute rel="external" disables the Ajax navigation, skipping the transition effect, and refreshes your page test.html.
Try your code after removing it.
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
<a data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Let me know about your results.
Try this solution by Piotr Walczyszyn. Highly recommended for anyone using Jquery mobile and Phonegap together.
I'm trying to get lightbox to run on my gallery. Jquery works since I tested it by having an alert() in the documet.ready() function. But besides that lightbox doesn't seem to work. Or at least I only the links work normally. Here's my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="ROBOTS" content="ALL" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href="/fuelcms/assets/css/klang.css?c=943916400" media="all" rel="stylesheet"/>
<base href="http://localhost/fuelcms/index.php" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/lightbox/prototype.js"></script>
<script type="text/javascript" src="assets/js/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="assets/js/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="assets/css/lightbox.css" type="text/css" media="screen" />
</head>
<body class="gallery index">
<!--<div class="header"><ul>
<li class="first">Repertoire</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Agenda</li>
<li>Gallerie</li>
<li class="last">Links</li>
</ul>
</div>-->
<ul>
<li class="first">Repertoire</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Agenda</li>
<li>Gallerie</li>
<li class="last">Links</li>
</ul>
<div class="fullpage">
<div class="colmask">
<div class="col3">
<div class="pagination">‹ First < 7 8<strong>9</strong></div><br><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Gong.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Gong_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Fatamorganaschatten.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Fatamorganaschatten_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Bumentopf2.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Bumentopf2_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopfdynamik.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopfdynamik_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopf.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopf_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blument1.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blument1_thumb.jpg" alt=""/></a></div></div></div><div class="footer" />
</body>
</html>
I've also tried with the script tag in the head tag but no difference, please help.
greez almightybob
you are coding in XHTML (using self-closing tags) but not declaring the XHTML doctype. check this question in SO
<link>,<meta> and <base> are self-closing by itself, however, <script> should always be closed by a </script> for safety measures, regardless if external or internal. my IDE (Aptana Studio 3) does it that way (knowing it has built-in validation, it must be "best-practice" in my opinion)
although not sure but i think you can omit the # when selecting the lightbox using the latest jQuery: $('a[rel*=lightbox]').lightBox()
how long ago was 1.4? try a more recent jQuery version!
I've had this problem before and solved it by putting the following right before the ending body tag:
<script>
$.noConflict();
</script>
Maybe that will help you out.
Note: this worked for me using the most recent jQuery (1.7.1) hosted on Google's CDN, and with Lightbox 2.05 located here. Are you using a different Lightbox implementation? If not, you are definitely holding on to very old versions of both jQuery and Lightbox.