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');
});
Related
Say I have 2 divs, positioned side by side (with some intermediate elements between them): A (left) and B(right). When hovering over B, I wish to have another div(C) appear over the left one (A).
I know how to toggle the display none/block properties but I don't know how to write the condition so the div C can appear on another div, not the one that we're hovering over.
Can this be done?
<div className="A">
<h2>About me</h2>
</div>
<div className="B">
<div>
<Link className="link1-to-project" to="/project1">
<h2>Project 1</h2>
<div className="C"></div>
</div>
codeply demo here
Html
<div id="a">
Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>
css
#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}
Javascript
document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}
function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}
UPDATE:
https://jsfiddle.net/mq5bza81/1/
https://jsfiddle.net/mq5bza81/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.wrapper {
position: relative;
}
.b:hover+.c {
display: block;
}
.c {
display: none;
position: absolute;
top: 0;
}
</style>
<div class="wrapper">
<div class="a">AAA</div>
<div class="b">BBB</div>
<div class="c">CCC</div>
</div>
</body>
</html>
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 am using a jQuery plugin called Sticky Floating Box to have a div that floats but is contained within the other div. It appears to work however it doesn't stay within the containing div. I have looked over the scripts demo page but cannot figure out what I am doing wrong.
Here is the JS Initialize Code:
$(function() {
jQuery('.addthis').stickyfloat('update',{ duration:0});
});
Here is a jsFiddle showing the issue.
HTML and CSS Below:
<div class="header"> HEADER </div>
<div class="container">
<div class="addthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_email"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>
<!-- AddThis Button END -->
</div>
<p>ICONS SHOULD STAY <BR> WITHIN THIS GRAY BOX<p>
</div>
<div class="footer"> SHOULD NOT GO BELOW THIS LINE</div>
.header{
width:400px;
background: #F00;
height:100px;
margin:0 auto;
}
.container{
position:relative;
height:400px;
width:400px;
margin:0 auto;
background: #999;
}
.footer{
height:700px;
width:400px;
background: #F0F;
margin:0 auto;
}
.addthis{
position:absolute;
top:0;
left:-50px;
}
I had to do three things to get the jsFiddle to work properly:
stickyfloat function needs to be called after the page is ready (and remove the 'update' part).
jQuery(document).ready(function() {
jQuery('.addthis').stickyfloat({ duration:0});
});
Add the following css rule:
.addthis_floating_style
{
position:inherit !important;
}
Give the .addthis div an explicit height and width:
.addthis
{
position:absolute;
top:0;
left:-50px;
width :36px;
height:222px;
}
I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>