Automatic change image up to down on time

Automatic change image up to down on time - javascript

I need this code without clicking function. I need it with normal slideshow against time.
I mean image will change after 5 sec automatically.
var gallery = $('.content'),
height = gallery.height();
$('.arrow').on('click', function(){
var up = $(this).is('.up_arrow');
if (up) {
gallery.animate({'scrollTop': '-=' + height});
} else {
gallery.animate({'scrollTop': '+=' + height});
}
});
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow up_arrow">UP</div>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
<div class="arrow down_arrow">DOWN</div>

Like this?
var gallery = $('.content'),
height = gallery.height(),
scrollHeight = gallery[0].scrollHeight,
y = 0;
$(function() {
setInterval(function() {
y += height;
if( y >= scrollHeight ) {
y = 0;
}
gallery.animate({'scrollTop': y });
}, 2000);
});
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>

View this example. Run with plunker
// Add your javascript here
$(function(){
var gallery = $('.content'),
height = gallery.height();
setInterval(function(){
gallery.animate({'scrollTop': '+=' + height},1000,function(){
gallery.animate({'scrollTop':0},0);
gallery.append($('.content img:first'));
});
}, 5000);
});
/* Put your css in here */
h1 {
color: red;
}
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
</body>
</html>

Related

My CodePlayer is not working on my Blogger post

This is my blog - http://quickeasycoder.blogspot.com/2018/07/code-player.html
It is not working as same as it was working in my browser. Every section up there in the blog come and merge upon each other.
This is working perfectly in my Google Chrome but it's not the case when I have uploaded it to my Blogger post. I think code is perfect but the thing may be in the layout of the blog. What should be done now?
<html>
<head>
<title>jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
padding:0;
margin:0;
}
#header {
width:100%;
background-color: #EEEEEE;
padding:5px;
height: 30px;
}
#logo {
float:left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width:233px;
margin: 0 auto;
}
.toggleButton {
float:left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%;
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.highlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float:left;
width: 50%;
border-left: none;
}
iframe {
border:none;
}
.hidden {
display: none;
}
#intro{margin:10px;
font-weight:bold;
font-size: 20px;
}
</style>
</head>
<body>
<p id="intro"> Learn HTML| CSS| JAVASCRIPT without any text-editor by using Code-Player <br>
Built using HTML| CSS| JAVASCRIPT| jQuery</p>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel"> <p id="paragraph">Hello World!</p></textarea>
<textarea id="cssPanel" class="panel hidden"> p { color: green; }</textarea>
<textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph").innerHTML = "Hello Rob!";</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript">
function updateOutput() {
$("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
}
$(".toggleButton").hover(function() {
$(this).addClass("highlightedButton");
}, function() {
$(this).removeClass("highlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("highlightedButton");
var panelId = $(this).attr("id") + "Panel";
$("#" + panelId).toggleClass("hidden");
var numberOfActivePanels = 4 - $('.hidden').length;
$(".panel").width(($(window).width() / numberOfActivePanels) - 10);
})
$(".panel").height($(window).height() - $("#header").height() - 15);
$(".panel").width(($(window).width() / 2) - 10);
updateOutput();
$("textarea").on('change keyup paste', function() {
updateOutput();
});
</script>
</body>
</html>

Since a lot of blog platforms prohibit embedding code sometimes you are able to accomplish the task by using an <iframe> similar to what is here
<iframe height='265' scrolling='no' title='BPaNNq' src='//codepen.io/happymacarts/embed/BPaNNq/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/happymacarts/pen/BPaNNq/'>BPaNNq</a> by Joseph L. Bradfield (<a href='https://codepen.io/happymacarts'>#happymacarts</a>) on <a href='https://codepen.io'>CodePen</a>.
or something like this one i found (looks familiar)
<iframe height='265' scrolling='no' title='Code player' src='//codepen.io/akashdevgan/embed/JGbGOQ/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/akashdevgan/pen/JGbGOQ/'>Code player</a> by Akash Devgan (<a href='https://codepen.io/akashdevgan'>#akashdevgan</a>) on <a href='https://codepen.io'>CodePen</a>.
I don't think that it works to embed in the snippet here but this might work on your blogger site try it out

As I couldn't debug yours, wrote my own version of codeplayer.
You may need to refer these. Make HTML elements as contenteditable, CSS Custom Variables
$(document).ready(function(){
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
$(".codetype").click(function(){
$(this).hasClass("active") ? $(this).removeClass("active") : $(this).addClass("active");
$(".codecontent").eq($(this).index()).toggle();
$(".body").get(0).style.setProperty("--contentwidth", 100/$(".active").length+"%");
});
});
.container
{
width:100%;
height:400px;
max-height:400px;
border:1px solid black;
}
.header
{
position:relative;
width:100%;
height:50px;
background: red;
box-sizing: border-box;
text-align:center;
color:white;
}
.codetype
{
border:1px solid black;
width:100px;
height:40px;
margin:0 auto;
display:inline-block;
}
.codetype > span
{
text-align:center;
line-height:40px;
}
.codetype:first-child
{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.codetype:last-child
{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
.body
{
height:100%;
display:inline-block;
width:100%;
}
.codecontent
{
height:100%;
width:var(--contentwidth);
background:yellow;
border:1px solid black;
float:left;
box-sizing:border-box;
}
.active
{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div id="" class="codetype active"><span>HTML</span></div>
<div id="" class="codetype active"><span>CSS</span></div>
<div id="" class="codetype active"><span>JS</span></div>
<div id="" class="codetype active"><span>Output</span></div>
</div>
<div class="body">
<div id="" class="codecontent" contenteditable=true>HTML</div>
<div id="" class="codecontent" contenteditable=true>CSS</div>
<div id="" class="codecontent" contenteditable=true>JS</div>
<div id="" class="codecontent">Output</div>
</div>
</div>

how to move a picture randomly in javascript

how can I move the ball randomly when I click the mouse with addEventListener
I tried this code but the picture didn't move . what is wrong with this code?
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="work.js"></script>
<link type="text/css" rel="stylesheet" href="work.css">
</head>
<body>
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="SoccerBall.png" width="40" alt="Ball" class="moveBall">
</div>
</body>
</html>
javascript code
var ball = document.querySelector('.moveBall');
function bbb(){
var ball = document.querySelector('.moveBall');
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
this is my css code:
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
position:absolute;
top: 0px;
left: 0px;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;

add style position:absolute to the ball
(function() {
function bbb(){
var ball = document.querySelector('.moveBall');
console.log(ball);
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
document.querySelector('#frame').addEventListener('click',bbb);
})();
#frame{
border:solid thick red;
border-width:3px;
padding-left:9px;
padding-top:6px;
padding-bottom:6px;
margin:2px;
width:1220px;
height:1000px;
float:right;
background-color:green;
}
.moveBall {
width:40px;
height:40px;
position:absolute;
top: 0px;
left: 0px;
border-radius:50%;
border:1px solid red;
}
#net1{
background-color: lightgray;
width: 400px;
padding: 40px;
margin: auto;
}
#net2{
background-color: lightgray;
width: 400px;
padding:40px;
margin:auto;
margin-top:840px;
}
<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="http://via.placeholder.com/350x150" width="40" alt="Ball" class="moveBall">
</div>

jquery image slider fadeIn not working

I am building an Image slider from this tutorial. youtube.com
I cannot get the first image to fadeIn
I have reviewed the code several times but cannot see where i went wrong.
Here is my code
HTML
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="Images/Image1.jpg">
<img id="2" src="Images/Image2.jpg">
<img id="3" src="Images/Image3.png">
<img id="4" src="Images/Image4.png">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
CSS
.wrapper{
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
Javascript
var sliderInt=1;
var sliderNext=2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
count = $("#slider > img").size();
loop= setInterval(function(){
if(sliderNext > count) {
sliderNext=1;
sliderInt=1;
}
$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}

In your code you added }}; insted of });
var sliderInt=1;
var sliderNext=2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
count = $("#slider > img").length;
loop= setInterval(function(){
if(sliderNext > count) {
sliderNext=1;
sliderInt=1;
}
$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
.wrapper{
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="http://placehold.it/600x400g/ff0000">
<img id="2" src="http://placehold.it/600x400g/00ff00">
<img id="3" src="http://placehold.it/600x400g/0000ff">
<img id="4" src="http://placehold.it/600x400g/000000">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>

Here is the working snippet. Is it what are you searching for?
var sliderInt=1,
sliderNext=2;
$(document).ready(function() {
$("#slider > img#1").fadeIn(300);
})
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="Images/Image1.jpg">
<img id="2" src="Images/Image2.jpg">
<img id="3" src="Images/Image3.png">
<img id="4" src="Images/Image4.png">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>

Div tag dynamic issues

I had one centre box, but when its width or height changes, its header, footer, left-sidebar, and right-sidebar should all change accordingly.
The center box should always be in the middle of the page even if its width or height changes.
Here is my code:
<html lang="en">
<head>
<script src="jquery-1.10.1.min.js"></script>
<script>
var modified_width, modified_height;
function set_width_height(width,height){
var width_factor=width/1024;
var height_factor=height/768;
var scale_factor=(width_factor>height_factor)?width_factor: height_factor;
modified_width=width*scale_factor;
modified_height=height*scale_factor;
return {width:modified_width, height:modified_height};
}
$(document).ready(function(){
set_width_height(800,480)
/* var width2 = 1024 - modified_width;
var height2 = 768 - modified_height;*/
$("#id6").css({'width':modified_width, 'height':modified_height});
/*
$("#id6").css("width",modified_width);
$("#id6").css("height",modified_height);*/
// alert(modified_width)
width1 = (1024 - modified_width)/2;
height1 = (768 - modified_height)/2;
$("#id2").css("width",width1);
$("#id4").css("width",width1);
$("#id3").css("height",height1);
$("#id5").css("height",height1);
})
</script>
<style>
.inc {
position:absolute;
border:1px solid white;
}
#id1{
width:1024px;
height:768px;
}
#id2{
left:0;
top:0;
bottom:0;
width:20%;
height:100%;
background:red;
}
#id3{
top:0;
left:20%;
width:60%;
height:15%;
background:pink;
}
#id4{
right:0;
top:0;
bottom:0;
width:20%;
background:green;
}
#id5{
bottom:0;
left:20%;
height:15%;
width:60%;
background:yellow;
}
#id6{
top:25%;
left:25%;
width:60%;
height:70%;
background:black;
}
</style>
</head>
<body>
<div id="id1" class="mainc">
<div id="id2" class="inc" >
B
</div>
<div id="id3" class="inc" >
D
</div>
<div id="id4" class="inc">
C
</div>
<div id="id5" class="inc">
E
</div>
<div id="id6" class="inc">
F
</div>
</div>
</body>
</html>
Here is a fiddle

Jquery.switchclass is not loading properly

2 part question.
So I want to be able to click the square at the middle which should slide the top left box to the right horizontally, and the top right box will slide to the bottom vertically, etc.
Duration being 2 seconds for the slide.
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
in Fiddle animation is running. Does NOT run in chrome or firefox. Am I using the correct cdn?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cie Studios | Solution</title>
<!--Stylesheet-->
<link rel="stylesheet" href="ciestyle.css">
</head>
<body>
<section id="main">
<div id="container">
<div class="horizontal" id="box1">1</div>
<div class="vertical" id="box2">2</div>
<div class="vertical" id="box3">3</div>
<div class="horizontal" id="box4">4</div>
</div>
<label>Fig 1.2</label>
</section>
<!--Google JQuery Lib -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--Javascript -->
<script src="ciescript.js"></script>
</body>
</html
CSS
* {
margin:0px auto;
}
#main {
height:100%;
width:100%;
margin-top:20%;
text-align:center;
}
#container {
display:block;
border:1px solid #000;
background-color:#333333;
height:151px;
width:151px;
}
.horizontal {
width:100px;
height:50px;
}
.vertical {
width:50px;
height:100px;
}
.newHorizontal {
width:100px!important;
height:50px!important;
float:left!important;
border:0px!important;
}
.newVertical {
width:50px!important;
height:100px!important;
float:right!important;
border:0px!important;
}
#box1, #box3 {
float:left;
}
#box2, #box4 {
float:right;
}
#box1 {
background-color:#ffffff;
border-bottom:1px solid #000;
}
#box2 {
background-color:#cccccc;
border-left:1px solid #000000;
}
#box3 {
background-color:#999999;
border-right:1px solid #000000;
}
#box4 {
background-color:#666666;
border-top:1px solid #000000;
}
JQUERY
$(document).ready(function(){
$("#container").click(function(){
$("#box1, #box3").switchClass("horizontal", "newVertical", 1000);
$("#box2, #box4").switchClass("vertical", "newHorizontal", 1000);
});
});
http://jsfiddle.net/pcdqz/1/

JqueryUI has a dependency on Jquery.
Add <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> or a similar cdn link prior to loading JqueryUI.

Develop Reference

JavaScript is the programming language of the Web.

Automatic change image up to down on time - javascript

Related

My CodePlayer is not working on my Blogger post

how to move a picture randomly in javascript

jquery image slider fadeIn not working

Div tag dynamic issues

Jquery.switchclass is not loading properly

Categories

Resources