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.
Related
So, I'm messing with a photo gallery lightbox effect. It's very simple and jerry-rigged but for some reason the other images won't disappear when I click on the one I want to enlarge even though the function I made should set everything that isn't the clicked on image hidden. It works the first time but every subsequent time, no matter which of the two images I click on, the other remains there.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lightbox Effect</title>
<link rel="stylesheet" href="Style.css">
<script src="Java.js"></script>
</head>
<body>
<div class="lightbox">
<main>
<div class="X" onclick="goBack()">X</div>
<img class="woods1" onclick="bigPic1()" src="Images/Woods1.jpg">
<img class="woods2" onclick="bigPic2()" src="Images/Woods2.jpg">
<img src="Images/Woods5.jpg">
<img src="Images/Woods6.jpg">
</div>
</main>
</body>
</html>
CSS:
main div{
width:50px;
height:50px;
border:1px solid white;
position:fixed;
right:1px;
visibility:hidden;
}
main a{
text-decoration:none !important;
font-size:450%;
position:relative;
top:-20px;
left:2px;
color:white;
}
main img{
margin:20px 0px 0px 50px;
max-width:20%;
height:auto;
display:inline-block;
border:1px solid #ddd;
border-radius:4px;
padding:5px;
overflow:hidden;
}
Javascript:
var pics=document.getElementsByClassName('woods1')
var light=document.getElementsByClassName('lightbox')
var body=document.getElementsByTagName('body')
var close=document.getElementsByClassName('X')
var pics2=document.getElementsByClassName('woods2')
function bigPic1(){
light[0].style.visibility="hidden";
body[0].style.background="black";
pics[0].style.visibility="visible";
close[0].style.visibility="visible";
pics[0].style.transform="scale(2.5)";
}
function bigPic2(){
light[0].style.visibility="hidden";
body[0].style.background="black";
pics2[0].style.visibility="visible";
close[0].style.visibility="visible";
pics2[0].style.transform="scale(2.5)";
}
function goBack(){
light[0].style.visibility="visible";
body[0].style.background="none";
close[0].style.visibility="hidden";
pics[0].style.transform="scale(1)";
pics2[0].style.transform="scale(1)";
}
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>
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>
I have a button within my code that should change the text 'hello' to 'Goodbye' but it doesn't work. What mistake have I made? My code is correctly indented in my coding program.
Here is my code:
<!doctype html>
<html>
<head>
<title>chat</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" />
<style type="text/css">
body {
margin:0px;
}
#topBar {
background-color:#33ccff;
width:100%;
height:100px;
z-index:1;
margin:0px;
padding:0px;
position:fixed;
}
'#logo' is the ID of the div that holds the text that I want to change and '#loginbutton' is the button that I want to use.
#logo {
width:15%;
height:60px;
float:left;
background-color:white;
margin-left:20px;
margin-top:20px;
}
#login {
width:10%;
height:60px;
float:right;
margin-right:20px;
margin-top:20px;
border-radius:8px;
}
#loginbutton { --this is the button that I want to change the text with
background-color: #lightgrey;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 30px;
cursor: pointer;
width:100%;
height:60px;
border-radius:10px;
font-family:Impact;
line-height:60px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#loginbutton:hover {
background-color: black;
color: white;
box-shadow: 2px 2px 2px rgba(0,0,0,0.24), 2px 2px 2px 2px rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<div id="topBar">
Here is the button and the div with the text:
<div id="login">
<button id="loginbutton">LOG IN</button> <!--This is the button-->
</div>
<div id="logo">hello</div> <!--This is the text I am trying to change-->
</div>
Here is my JavaScript code that I was using:
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
</body>
</html>
you need to specify () for the function which is missing in this case.
<script type="text/javscript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
I recommend using an event listener instead, to add your click handler
<script type="text/javscript">
document.getElementById("loginbutton").addEventListener('click', function(e) {
document.getElementById("logo").innerHTML = "Goodbye";
});
</script>
Update
Your existing code has a syntax error making it not work properly, where it is missing the parenthesis () after the word function and should look like this
document.getElementById("loginbutton").onclick=function() {
It should be
<script type="text/javscript">
document.getElementById("loginbutton").onclick = function() {
document.getElementById("logo").innerHTML = "Goodbye"; }
//further code
</script>
The spelling text/javscript is not correct. Correct the spelling and then add () after the function word.
See the corrected code snippet below:
<script type="text/JavaScript">
document.getElementById("loginbutton").onclick=function() {
document.getElementById("logo").innerHTML="Goodbye";
}
</script>
I'm looking to have a slide(down) toggle but would like the panel to line up neatly along the left edge of the button. I don't want to hard code margin, position, px, etc but want the slide down panel to always be "in relation" to (and relative) the (left bottom of) button.
What am I missing?
<!doctype html>
<head>
<script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<style type="text/css">
.slideToggleBox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
position:fixed;
left:-10.5px;
top:2.3%;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="clear">
<button id=slideToggle>slideToggle()</button>
<br/>
<div class="slideToggleBox">
slideToggle()
</div>
</div>
<script type="text/javascript">
$("#slideToggle").click(function () {
$('.slideToggleBox').slideToggle();
});
</script>
</body>
</html>
Try this code. Added a demo here
HTML
<div class="wrapper">
<button class=slideToggle>slideToggle()</button>
<div class="slideToggleBox">slideToggle()</div>
</div>
<div class="wrapper">
<button class=slideToggle>slideToggle()</button>
<div class="slideToggleBox">slideToggle()</div>
</div>
CSS
.wrapper{
float:left;
width:200px;
}
.slideToggleBox {
float:left;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
margin-top: -1px;
margin-left:1px;
}
JS
$(".slideToggle").click(function () {
$(this).next().slideToggle();
});