I have a javascript which displays images from style and css.
<script type="text/javascript">
$(function () {
$("div[style]").click(function() {
$("#full-wrap-new").css("background-image", $(this).css("background-image"));
});
});
</script>
<div id="colors">
<div style="background-image:url(/images/style/whatcan.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/art/art.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/beauty/beauty.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/careers/career.jpg); width:200px; height:150px; float: left; margin:4px"></div>
</div>
I would like to change the script to use img rather than css how do i change this following line of script.
$("#full-wrap-new").css("background-image", $(this).css("background-image"));
This is what i have so far but i have no idea how to change it to img
<script type="text/javascript">
$(function () {
$("div.ri").click(function() {
$("#full-wrap-new").css("background-image", $(this).css("background-image"));
});
});
</script>
<div id="colors">
<div class="ri"><img src="/images/style/whatcan.jpg"/></div>
<div class="ri"><img src="/images/art/art.jpg"/></div>
<div class="ri"><img src="/images/beauty/beauty.jpg"/></div>
<div class="ri"><img src="/images/careers/career.jpg"/></div>
</div>
<div id="full-wrap-new"></div>
I think you trying to do this:
$(function () {
$("div.ri").click(function() {
$("#full-wrap-new").html($(this).find("img").clone());
});
});
Try it in this fiddle (change the sources so you can see something)
Related
in the example below there is a gold div named she
in reality this is an image with same properties
clicking on button I need the she to be revealed gradually and not moving with the bottom side of parent
just like story - it is fixed and revealed gradually by parent's sliding.
$('button').on('click', function(){
$('#swtop').slideToggle();
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{height:34px;}
.story{text-align:center;}
.she{
position:absolute;
left:25px; bottom:0; width:5%;
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
Consider an extra wrapper:
$('button').on('click', function() {
$('#swtop').slideToggle();
});
.swtop {
display: none;
background: lightblue;
}
.swtop > div {
position: relative; /* we move this to the extra wrapper */
}
.space {
height: 34px;
}
.story {
text-align: center;
}
.she {
position: absolute;
left: 25px;
bottom: 0;
width: 5%;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
</div>
And it is another way to make it beautiful.
let sts = false;
$('button').on('click', function(){
sts = !sts;
if (sts){
$('#swtop').slideToggle();
setTimeout(function(){
$('.she').fadeToggle();
}, 300);
}else{
$('.she').fadeToggle();
setTimeout(function(){
$('#swtop').slideToggle();
}, 300);
}
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{
height:34px;
}
.story{
text-align:center;
}
.she{
position:absolute;
left:25px;
bottom:0;
width:5%;
background:gold;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
In the below code, I want to hide the scrollbar of the first block (div1) without using overflow property in all the browsers.
Any suggestions would be helpful.
Fiddle:
http://jsfiddle.net/mvn1ngby/12/
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
div.outer {
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div {
height:3000px;
}
#div1 div {
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>
It is a hack but works.
The idea is to pull the area of the scroll-bar outside of the view port.
The "pull" size suppose to be with the width of the scroll bar, usually the wider one (on Windows)
$('#div1').scroll(function() {
$('#div2').scrollTop($('#div1').scrollTop());
});
$('#div2').scroll(function() {
$('#div1').scrollTop($('#div2').scrollTop());
});
div.outer {
display: inline-block;
overflow: hidden;
border: 1px solid black;
}
#div1>div,
#div2>div {
height: 3000px;
}
.scrollable {
width: 150px;
height: 320px;
overflow-y: auto;
}
#div1 {
margin-right: -25px;
padding-right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="scrollable" id="div1">
<div></div>
</div>
</div>
<div class="outer">
<div class="scrollable" id="div2">
<div></div>
</div>
</div>
Try to add a new container div with css:
.container { width: 100%;}
And inside put the div1, div2
Am trying to scroll my webpage to a div which would get visible once I click on a label, it doesn't work.
jsfiddle :
Demo.html
http://jsfiddle.net/sathish_panduga/8w8gughf/
I followed a tutorial to animate HTML, Body but it doesn't work somehow. Below is the script and demo html.
<script src="http://localhost/app/static/jquery-1.10.2.min.js"></script>
<style type="text/css">
.addDiv{
font-size: 20px;
display:block;
margin-top:40%;
border:solid;
width:16%;
border-color:#808080;
}
.addDiv + input{
display:none;
}
.addDiv + input + *{
display:none;
}
.addDiv+ input:checked + *{
display:block;
}
.inner {
border: 1px solid green;
width: 100%;
height: 600px;
}
.inner1 {
position:relative;
width:50%;
height:500px;
float:left;
background:#808080;
background-color:#808080;
overflow:hidden;
}
.inner2 {
position:relative;
width:50%;
height:500px;
float:left;
background:green;
background-color:green;
overflow:hidden;
}
</style>
<body>
<script type="text/javascript">
$("#button").click(function () {
$('html, body').animate({
scrollTop: $("#moredetails1").offset().top
}, 2000);
});
</script>
<label class="addDiv" for="_1" id="button">Add more details?</label>
<input id="_1" type="checkbox">
<div class="inner" style="margin-top:20px;" id="moredetails1">
<div class="inner1">
<section>
Enter Name:<input type="text" /><br /><br />
</section>
</div>
<div class="inner2">
<section>
Enter Name:<input type="text" /><br /><br />
</section>
</div>
</div>
what am I missing in above jquery?
I've edited yout css and script
jsfiddle : https://jsfiddle.net/ArtyukhAlex/63wy2g0r/1/
To make your script capture div's top offset you need it to be visible at the moment when animate function executing, so the best solution is to show and hide it with script instead of css.
I have used following code from http://w3schools.com. But in this I can use only once. I want to use it more than one times because I want to create FAQ panel in HTML
but it is from ID and I can use it only once.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
demo
script:
$(function(){
$('a.toggle').click(function(){
$('.myContent').stop().slideToggle(500);
return false;
});
});
HTML
CLICK
<div>
<div class="myContent" style="background-color: #99CCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
<div class="myContent" style="background-color: #CCCCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
</div>
change the id to class and then use class selectors in css and jQuery
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
CSS
.panel, .flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel {
padding:50px;
display:none;
}
then
$(document).ready(function () {
$(".flip").click(function () {
$(this).next('.panel').slideToggle("slow");
});
});
Demo: Fiddle
I have a script that toggles the visibility of a div, inside of the div is content loaded with the masonry plugin. The issue I'm having is that the masonry div (and as a result the two wrapper divs) doesn't expand in height as the masonry content is loaded - it squishes the masonry items together.
here's my code:
<html>
<head>
<title>view?</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<style type="text/css">
#step_wrapper{
width:960px;
margin:0px auto;
/*float:left;*/
}
.step_num{
float:left;
width:50px;
background-color:#0099ff;
}
.step{
float:left;
width:910px;
background-color:#ff0000;
padding-bottom:20px;
margin-bottom:20px;
}
.step h2{
padding:0px;
margin:0px;
}
.media{
background-color:#59A20E;
width:100%;
text-align:center;
cursor:hand;
float:left;
}
#content-step-1{
}
.content{
float:left;
min-width:785px;
margin-left:40px;
background-color:#0066ff;
padding-left:15px;
display:none;
}
.item {
width: 165px;
float: left;
padding:5px;
background-color:#FF0;
margin-top:10px;
}
</style>
<script>
$(function(){
<!-- masonry plugin -->
var $container = $('#content-step-1');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 165
});
});
$($container).masonry({
// options
itemSelector : '.item',
columnWidth : 165,
gutterWidth : 35
});
<!-- masonry plugin -->
<!-- needs to be auto generated -->
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
});
<!-- needs to be auto generated -->
});
</script>
</head>
<body>
<div id="step_wrapper">
<div class="step_num">1)</div>
<div class="step">
<h2>STEP ONE SON</h2>
<p>Description here bro</p>
<div id="step-1" class="media">expand</div>
<div id="content-step-1" class="content">
<div class="item">asjdlajskdla</div>
<div class="item"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" width='165' /></div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
</div>
</div>
</div>
</body>
</html>
any help would be greatly appreciated, thank you!
I had faced smiler problem few day ago. what you need to do here, when you click to open hidden div than you have to reload masonry view. By using below.
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
$container.masonry('reload');
});