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/
Related
Here's a link to the page so you can check out what's happening when I test the responsiveness: https://flightacademykickz.netlify.app/
The HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<link href="//db.onlinewebfonts.com/c/04559eae8b7926d003f9f2e036c9e076?family=Blippo" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="title-container">
<h1 class="store-title">Flight Academy Kickz</h1>
</div>
<canvas class="webgl"></canvas>
<div class="links">
<h1 class="shop-link">Shop</h1>
</div>
</div>
</body>
</html>
After a quick look at the page's code - just removing the top: 20rem from class="title-container" solved the problem. This was causing the title element overlapping and creating the whitespace at the bottom.
For vertical aligning elements better don't use fixed values on elements. Either use:
top: 50%; transform: translateX(-50%) in a relative container or flexbox to do so. That also secures responsivness.
I have a code that is supposed to make the columns collapse at the size of 991px but it keeps doing it at 767px, in otherwords I'm specifying that it should collapse when it's less than a medium device but it's only doing it when it's less than a small device, I checked my code many times and I'm confused as to what's going on since I'm following the exact code in my class, here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Starter Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Col 1</div>
<div class="col-md-4">Col 2</div>
<div class="col-md-4">Col 3</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
See it's still treating it as 4 4 4 even though the size is below 991px
And here it finally works at 767px
I need to ask, what is all of the other code. Since the problem is 100% not in the HTML. (Just saying I am just putting this as an answer because I don't have the 50 reputation needed to add a comment on other people's questions.)
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 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!
My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>