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)";
}
Related
I have a container which has a fixed width of 200px and the rest of the width is margin equally on both sides.
I have applied margin-bottom on this container but it will occupy only the 200px width since that is the width of the container box.
How can i make the border-bottom occupy the entire screen width.
code:
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
border-bottom:1px solid red
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
FIDDLE
Implementing as two class will be the best choice.
.sch-container{
border-bottom:1px solid red;
}
.content{
max-width:200px;
margin:0 auto;
text-align:center;
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
This is not a straight forward solution to your problem, more of an alternative.
You could use <hr /> tag instead of border-bottom on .sch-container.
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
}
hr{
height: 1px;
border: 0;
border-top: 1px solid;
}
.red{
border-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Some Title</title>
</head>
<body>
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
<hr class="red"/>
</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>
Right now my navigation tabs are only clickable. I did it by using "anchor() tag". But as soon as I click it, it doesn't show the corresponding paragraph (which I already stored in my HTML file). Basically I haven't added any functionality to happen something after clicking the tab. And I don't know how to do that and which one is better (comparing with jquery and javascript).
This is my code:
.PHP file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.14.custom.css">
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<header id="top_header" >
<h1>Welcome to my world!</h1>
</header>
<!--This div wrapps all the tabs and corresponding section/paragraphs-->
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li>HOME</li>
<li>WHO I'M</li>
<li>GALLERY</li>
<li>MY DIARY</li>
<li>FATAH'S BLOG</li>
<li>CONTACT ME</li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding
text and paragraph will be added here-->
<div id="all_contents">
<div id="home_contents">
<p> It's home.</p>
</div>
<div id="who_im_contents">
<p> It's who I'm.</p>
</div>
<div id="gallery_contents">
<p> It's Gallery.</p>
</div>
<div id="diary_contents">
<p> It's diary.</p>
</div>
<div id="blog_contents">
<p> It's my blog.</p>
</div>
<div id="contact_contents">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
</body>
</html>
.CSS file:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{
background:white;
color:black;
border:3px solid red;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
#the_footer{
text-align:center;
padding:20px;
border-top: 2px solid red;
}
your values in href and id of divs are different ,that is the problem ,please match div id to navigations
ex:
Home
<div id="home_contents">
<p> It's home.</p>
</div>
What you are actually setting up is an in-page nav bar. If you change the links to match the actual ids then when you click the link the browser will scroll to the associated div.
In other words you need to either remove _contents from all your anchors or add _contents to all the links in top_menu, in order to have anything happen.
You can check below code it will work for you
$('ul > li > a').click(function () {
$('#all_contents >div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
Please see Demo
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.
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();
});