Cylcle2 no cycle-pager shows up - javascript

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php
my HTML:
<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">
<img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>
<div class="cycle-pager"></div>
My CSS:
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
top: 10px;*
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #999999;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
.cycle-pager{
width: 500px;
height: 30px;
margin-top: 517px;
}
and my JavaScript:
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();

This problem causes doctype Use <!doctype html>

try this javascript
<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
window.onload = function(){ //main
$.getScript("/js/cycle2.js", null); //Handles the slideshow
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);
}
})();
</script>

Try this:
JSFiddle Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
</head>
<body>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000">
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
</body>
</html>

Try adding "height:40px;" to the .cycle-pager class.

Related

HTML layout on mobile devices not working properly

I need to know how to correct this layout on my 404 page of my website. It works fine on a desktop but the layout of the actual page (not the header) gets messed up on mobile. The code is below.
THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
HTML CODE
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
<div id="content">
<html>
<title>404 Not Found</title>
<img src="/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249"/>
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</html>
</div>
</div>
CSS
<style>
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
</style>
AND THE LINK TO THE SITE IS WWW.ROGERSARTWORK.CO.UK/404
IMAGE FOR #sbgib
It looks like the only issue is the scaling of the images. This can be fixed by adding CSS rules to make them full width for mobile and then adding one or more media queries to set the images to their full sizes at certain screen sizes. For example:
#content {
padding-top: 40px;
}
h1 {
font-size: 45pt;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
#content {
padding-top: 50px;
}
p {
font-size: 25pt;
font-family: Verdana;
text-align: center;
}
body {
text-align: center;
background: #eeeeee;
}
html {
background: #eeeeee;
}
#content>title+img,
.image1 {
width: 100%;
height: auto;
}
#media screen and (min-width: 500px) {
#content>title+img {
width: auto;
max-width: 100%;
}
.image1 {
width: auto;
max-width: 100%;
}
}
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<script>
$(function() {
$("#header").load("nav.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
<div id="content">
<title>404 Not Found</title>
<img src="https://www.rogersartwork.co.uk/images/logo.png" alt="Roger's Artwork Logo" width="320" height="272" />
<p></p>
<img class="image1" src="https://www.rogersartwork.co.uk/images/404.png" alt="Error 404 Image" width="832" height="249" />
<p>The page you were looking for does not exist. Please return to our homepage.</p>
<script type="text/javascript">
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</div>
</div>
</html>
Remove the width and height attributes from your image tags. What you should do instead is style them with css. For example, you can add and id to them and target that with css, or you can also do an inline style, like so:
Using inline styling:
<img src="/images/logo.png" alt="Roger's Artwork Logo" style="max-width: 20rem" />

Javascript Affecting Image Position

I have an image and a line of text on top of a blue box, all fading in with JavaScript. If I don't use any JS, I can center the image without any problems. But as soon as the JS is used, the image does not center anymore. However, the line of text does. Why does this happen?
Here are the code samples:
$("#box").velocity("fadeIn", {
duration: 5500
});
$("#txt").velocity("fadeIn", {
duration: 10500
});
$("#pic").velocity("fadeIn", {
duration: 10500
});
#box {
width: 100%;
height: 1000px;
background-color: lightblue;
}
p {
text-align: center;
}
img {
width: 40%;
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cultura.css">
</head>
<body>
<div id="box">
<img id="pic" src="pic.jpg">
<p id="txt"> a line of text </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="cultura.js"></script>
</body>
</html>
Velocity is setting your element's CSS display property to inline. Explicitly specify the fadeIn should set the display to block on your #img element:
$("#box").velocity("fadeIn", {
duration: 5500
});
$("#txt").velocity("fadeIn", {
duration: 10500
});
$("#pic").velocity("fadeIn", {
duration: 10500,
display: "block"
});
#box {
width: 100%;
height: 1000px;
background-color: lightblue;
}
p {
text-align: center;
}
img {
width: 40%;
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cultura.css">
</head>
<body>
<div id="box">
<img id="pic" src="pic.jpg">
<p id="txt"> a line of text </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="cultura.js"></script>
</body>
</html>

JS/CSS Slide effect works in fiddle, not in html

My first problem was about the fiddle not working. Now it works, but if I copy it into my brackets file it doesn't work anymore. I did include the link that I placed in the external resource.
Here's the fiddle: https://jsfiddle.net/wtbdxx2b/6/
And the html;
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="site3.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="site3.js"></script>
</head>
<body>
<button class="trigger">
click
</button>
<div class="content">
hello
</div>
</body>
</html>
the css;
.content {
position: absolute;
width: 100%;
height: 10%;
bottom: 0;
left: 0;
background-color: #000;
color: #FFF;
transition: all 1s;
}
.content.open {
height: 90%;
}
and the javascript;
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
Put
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
Inside
$(document).ready(function(){
$(".trigger").click(function() {
$(".content").toggleClass("open");
});
});

Behavior change when declaring style in-line vs class

I'm simply trying to display a grid of boxes with each box having information about a dog breed. My problem is this: There appears to be a difference in behavior when I declare a style in-line vs the same style in a class. I'm confused why there is a difference, when there shouldn't be any as far as I know.
Here is the code behaving properly: http://imgur.com/a/z2b5c
This occurs with the code below. The code to note are the dogDisplay class declared in style, and the div of class dogDisplay in the body. The div has an in-line style="position:absolute".
<!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">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
HOWEVER. When moving style="position:absolute" into the dogDisplay class, this is the new behavior: http://imgur.com/a/sv3Oh
<!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">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
Why is there a difference? Thank you!
In your first example, this line:
$("#container").append("<div class='dogDisplay'></div>");
Conflicts with the starting layout:
<div class="dogDisplay" style="position:absolute">
Meaning only the initial .dogDisplay will have the absolute positioning. In the second example, all of them will have the absolute positioning.

I can't get this background appear in a div

Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners

Categories