How to move div horizontally - javascript

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

How to increase height of div from top not from bottom?

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>

How do I prevent the bottom of the section above from leaking into the top of the next one (fullPage.js)

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>

How to make a gallery

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/#

Javascript Prototype-Carousel

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/

jQuery Galleria - Error: $("ul.gallery_demo").galleria is not a function

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)

Categories

Resources