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");
});
});
Related
I am new to javascript, I tried to change the color of an element (circle) when clicking on a button but it doesn't work for me and i don't know what to do, here is the script:
I have 2 files(html and css):
html file:
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
CSS file:
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
It works great, it's exactly the code you attached
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
if(cir.style.backgroundColor == "yellow")
cir.style.backgroundColor = "#ccb22e";
else
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
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>
I'm using slider plugin: owlcarousel2. The problem that i want the text to be on the picture not in next slide. I want also the div tag to group elements, not to be ignored.
<html>
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
<head>
<style>
*{margin:0;padding:0;overflow:hidden}
img{
width:100vw;
height:100vh;
}
p{
background-color:black;
opacity:0.7;
z-index:9999
}
</style>
<div class="owl-carousel">
<div>
<img src='img.jpeg' alt='Hi!'></a>
<p class='text'>hi</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items:1,
center:true
})
});
</script>
</html>
Your javascript is fine, but there are some other mistakes that prevent it from working. I'll walk you through it. First, close your <head> and wrap the carousel in <body> tags. Remove the rogue </a> after the slide image and the unnecessary </div> located just before the script at the bottom.
To get the text on top of the image you can set an absolute position on the paragraph element and a relative position on it's parent.
Here's what your code should look like after these adjustments:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
items: 1,
center: true
});
});
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.slide {
position: relative;
}
img {
width: 100vw;
height: 100vh;
background: #f00;
}
p {
background-color: black;
opacity: 0.7;
position: absolute;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div class="slide">
<img src='img.jpeg' alt='Hi!'>
<p class='text'>hi</p>
</div>
</div>
</body>
</html>
I have written a code for image drag and resizing with jquery.
i can drag the image but i am unable to do image resizing .PLease help me what mistake i have did in resizing.
I have written my code below.
$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$("#action").resizable({
handlers: "all",
ghost: true
});
});
#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themses/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<div id="limits">
<div id="action">
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img.jpg" class="image">
</div>
</div>
remove s from themses in jquery-ui.css link
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically resize image</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$("#action").draggable({
cursor: "move",
containment: "parent"
});
$(".image").resizable({
handlers: "all",
ghost: true
});
});
</script>
<style>
#action {
background-color: #aaa;
height: 200px;
width: 200px;
}
#limits {
background-color: lavender;
height: 300px;
width: 300px;
}
.image {
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="limits">
<div id="action" style="display:inline-block"><img src="http://www.w3schools.com/images/w3schools_green.jpg" class="image"/></div>
</div>
</body>
</html>
Instead of taking div ID take image ID.
HTML
<div id="limits">
<div id="action"><img id="idDragImage" src="/home/cp/Desktop/jquery/index.jpeg" class="image"></div>
</div>
Take the element with id. following way
JS
$(document).ready(function() {
$("#idDragImage").draggable({cursor:"move",containment:"parent"});
$("#idDragImage").resizable({handlers: "all",ghost:true});
});
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.