I am trying to the div box with image move left to right,
I tried another script: http://jsfiddle.net/bala2024/MzHmN/
Here is the html code
<!DOCTYPE html>
<html>
<head></head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px">
<img src="sceen.jpg">
</div>
</div>
</body>
</html>
CSS
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});
You will need to apply width to main container. Please replace it with below line and check in your browser.
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">
use margin for outer space and padding for inner space
try this
<!DOCTYPE html>
<html>
<head>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
</div>
</div>
</body>
</html>
Click the following link to watch live demo... Click Here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
</script>
</head>
<body>
<div style="position:relative">
<div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>
CSS:
div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
#-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
fiddle: http://jsfiddle.net/apRMU/17/
Related
I am trying to increase height of div on button click. I am facing an issue my div is increase from bottom (default behaviour). But I want my div bottom with remain contain. It show from top.
In my example I have two div yellow and white. On button click, I am increasing the height of white box. But it is increase from down direction. I need it grows from top.
Here is my code:
https://codesandbox.io/s/still-lake-lw07u?file=/index.html
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
document.querySelector(".content").style.height = "300px";
}
</script>
</body>
Unclear of final design, but you might try this:
function abc() {
const sel = document.querySelector(".content");
sel.style.height = "300px";
sel.style.position = 'absolute';
sel.style.bottom = '0px';
}
You can use the transform: scaleY(val) and transform-origin: bottom to resize and from where your element.
.abc {
width: 80%;
margin: auto;
display: grid;
grid-template-columns: repeat(10, [col-start] 1fr);
grid-template-rows: repeat(8, [row-start] 1fr);
padding-top: 3.4em;
padding-bottom: 3.4em;
}
.img {
grid-column: col-start / span 8;
grid-row: row-start / span 6;
background-size: cover;
max-width: 1074px;
max-height: 200px;
background-color: #ee0;
}
.content {
grid-column: col-start 6 / span 6;
grid-row: row-start 2 / span 6;
background: #fff;
min-height: 100px;
border: 1px solid blue;
padding: 3em;
}
.bigger {
transform: scaleY(2);
transform-origin:bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
</style>
</head>
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
document.querySelector(".content").classList.add('bigger');
}
</script>
</body>
</html>
Another version:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<!-- From: https://stackoverflow.com/questions/69050335/how-to-increase-height-of-div-from-top-not-from-bottom/69050592#69050592 -->
<style>
.content { background-color: pink; width: 10em; }
.asterisk { height: 300px; }
</style>
</head><body>
<div class="parent">
<div class="abc">
<div class="img">Image</div>
<div class="content">Content</div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
const sel = document.querySelector(".content");
var div = document.createElement('div');
// div.innerHTML = '*';
div.className = 'asterisk';
sel.parentNode.insertBefore(div, sel);
}
</script>
</body></html>
I've had this issue many times, where the scroll is off from the sections and it creates an effect where the top of a section is actually the bottom of one previous. I have an image in a section with position: absolute on it, is that the problem?
Link
Edit: Code
Codepen
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3: false
});
});
</script>
<style>
#intro {
backgroundSize: 100% 10% !important;
color: white;
}
img {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section" id="intro">
<img src="https://aos.iacpublishinglabs.com/question/aq/1400px-788px/many-lumens-100-watt-incandescent-light-bulb-give-off_2c6301bc5ccd144.jpg?domain=cx.aos.ask.com"></img>
<h1>Tungsten: It'l light up your day!</h1>
</div>
<div class="section" id="gallery">
<div class="slide">
</div>
<div class="slide">asdfasdf
</div>
<div class="slide">asdfasdfasdf
</div>
</div>
</div>
</body>
</html>
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I found this code at ( http://code.google.com/p/prototype-carousel/ ) but somehow I can't manage him to work. Can someone help me please? The image load fine but the buttons simple does nothing. Thanks in advance.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<style type="text/css">
#carousel-wrapper {
width: 980px;
height: 580px;
overflow: hidden;
}
#carousel-content {
width: 2500px;
}
#carousel-content .slide {
float: left;
width: 980px;
height: 580px;
}
</style>
</head>
<body>
<div id="carousel-wrapper">
<div class="controls">
Next
Previous
</div>
<div id="carousel-content">
<div class="slide">
<img src="sample1.jpg" />
</div>
<div class="slide">
<img src="sample2.jpg" />
</div>
<div class="slide">
<img src="sample3.jpg" />
</div>
</div>
<script type="text/javascript">
new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control'),
{ wheel:false, circular:true, auto:false, effect:scroll, frequency:5, duration:1, });
</script>
</div>
</body>
</html>
You need to include the CSS
#carousel-wrapper {
width: 500px;
height: 500px;
overflow: hidden;
}
#carousel-content {
width: 2500px;
}
#carousel-content .slide {
float: left;
width: 500px;
height: 500px;
}
You should probably also move the controls and <script> contents outside of the wrapper.
Here's a working example:
http://jsfiddle.net/eyweA/1/
I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,
Error: $("ul.gallery_demo").galleria is not a function
The code is working for me separately. Here's the code.
Code:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/galleria.css" rel="stylesheet" type="text/css" media="screen">
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo');
$('ul.gallery_demo').galleria({
history : true,
clickNext : true,
insert : '#main_image',
onImage : function(image,caption,thumb) {
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
)
}
});
});
</script>
<style type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0; }
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
/*a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}*/
a{color:#FFFFFF;text-decoration:none;outline:none;}
a:hover{color:#CCCCCC;}
.caption{color:#FFFFFF; font-weight:bold; width:700px; height:30px; float:left; padding-top:8px; clear:both; }
.demo{margin-top:2em; }
.gallery_demo{width:720px; float:left; padding-left:5px; }
/*.gallery_demo li{width:100px;height:100px;border:3px double #111; float:left;}*/
.gallery_demo li{width:100px;height:100px;border:3px double #eaeaea; float:left;}
.gallery_demo li div{left:0px;}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif; }
#main_image{height:480px;width:700px; float:left; }
#main_image img{ border:5px solid #666666; width:700px; height:438px; }
/*#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#FFFFFF;}
.info{text-align:left;width:500px;margin:0px auto;border-top:1px dotted #221;}
.info p{margin-top:1.6em;}
</style>
</head>
<body>
<br>
<div style="float: left; padding-left: 40px; width: 720px;">
<div>
<p id="nav" align="center">« previous | next »</p>
</div>
<div class="demo">
<div id="main_image" align="center"></div>
<div style="width: 700px; float: left;">
<ul class="gallery_demo_unstyled gallery_demo galleria">
<li class="active"><img rel="images/image1.jpg" class="thumb selected" style="width: auto; height: 100px; margin-left: -17px; opacity: 1; display: inline;" src="images/image1.jpg" alt="SEAT COMFORTS" title="SEAT COMFORTS"></li>
<li class=""><img rel="images/image2.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image2.jpg" alt="BUS INNER VIEW" title="BUS INNER VIEW"></li>
<li class=""><img rel="gallery/image3.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image3.jpg" alt="Bus full View" title="Bus full View"></li>
<li class=""><img rel="images/image4.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image4.jpg" alt="BEGINNING" title="BEGINNING OF TIME"></li>
<li class=""><img rel="gallery/image5.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image5.jpg" alt="ECO" title="ECO AWARENESS"></li>
</ul>
</div>
</div>
<br><br>
</div>
<!--content_inner div ends here-->
<!--- body -->
</body>
</html>
When I tried to integrate it in a page it is not working which also consists of the following code.
Code:
<script type="text/javascript" src="gallery/jquery.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="gallery/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="show.js"></script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 400, duration: 700, easing: "easeOutQuad"});
});
</script>
<![endif]-->
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 475, duration: 600, easing: 'easeOutQuad'});
});
</script>
I have tried using noconflict() function and used jQuery instead of $ but no use.
Could anyone be able to solve this pls.
Regards,
Rekha
Looks like you've commented out the <script> element that should be bring in jQuery, this:
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
should be this:
<script type="text/javascript" src="js/jquery.min.js"></script>
You need jQuery loaded before jquery.galleria.js or it won't work.
Your second example includes jquery.js but not jquery.galleria.js so try adding this to the second one:
<script type="text/javascript" src="js/jquery.galleria.js"></script>
You'll have to adjust the src path to point to your jquery.galleria.js of course.
Have you included the plugin? I think you're missing that... It's not jQuery's core functionality.
this is it I think:
http://galleria.aino.se/
instead of $('ul.gallery_demo').galleria, try using jQuery('ul.gallery_demo').galleria.
If this works, it means that $ variable has been overridden by someone else. Try finding that out or put your document.ready function a closure:
(function($){
(document).ready(function(){
// your code here
});
})(jQuery)