I have a slideToggle which is giving me an accordion-style function. This all works fine except for the first click which shows the content div briefly but then slides it closed straight away. Clicking again slides open correctly and all subsequent clicks function correctly.
Here's the Jquery script I'm using:
$(".tm-section-label").click(function() {
$(this).parent().addClass('active').find('.tm-extra-product-options-container').slideToggle('fast,easing');
});~
$(".tm-section-label").click(function() {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
Here's the CSS I'm using :
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
How can I make the initial click just slide the div open without having to click twice?
https://dotnetfiddle.net/hpJDeF
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prodTabs div.cpf_hide_element {
display: none;
margin-bottom: 0;
}
.prodTabs.active > div.tm-extra-product-options-container {
visibility: visible;
height: auto;
opacity: 1;
}
.prodTabs.active div.cpf_hide_element {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
$(document).ready(function () {
$(".tm-section-label").click(function () {
$(this).parent().addClass('active');
var q = $(this).parent().find('.tm-extra-product-options-container');
if (q.hasClass('cpf_hide_element')) {
q.removeClass('cpf_hide_element');
}
else {
q.slideToggle('fast,easing');
q.removeClass('cpf_hide_element');
}
});
$(".tm-section-label").click(function () {
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
});
});
</script>
</head>
<body>
<div class="prodTabs" id="parent">
<div class="tm-extra-product-options-container cpf_hide_element" id="theContent">The content..</div>
<div class="tm-section-label">Click Me</div>
</div>
</body>
</html>
Related
I am having some serious trouble understanding Fancybox. I suppose my initial question is that I am using Fancybox 3 and assume that it has all features of previous versions?
What I am trying to achieve is simply change the caption position to inside rather than the default. I have tried so many different JS options to get a titleposition: 'inside' and it changes absolutely nothing...
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
</body>
<footer>
<section class="socialmedia">
<a class="sm" href="images/snapcode.png" data-fancybox data-caption="Snapchat"><img src="images/snapchat.png"></a>
</footer>
</html>
I am using the defaults
Of course, it is too late but maybe help someone.
Explanation: copy the caption and put it in the .fancybox-content element. And to the original set display: none. Position the caption bottom of picture using transform: translateY(100%). When initializing the slide, the fancybox box takes the height of the hidden title and sets the padding-bottom to the .fancybox-slide element. Thus, the title will not overlap the image or go beyond window borders.
JS (jquery):
$('[data-fancybox="gallery"]').fancybox({
beforeShow: function() {
$('.caption--image').remove();
},
afterShow: function() {
var caption = $(".fancybox-caption"),
innerCaption = caption.clone().addClass('caption--image');
$(".fancybox-slide--current .fancybox-content").append(innerCaption);
caption.not('.caption--image').addClass('caption--bottom');
}
});
CSS:
.fancybox-caption.caption--image {
width: 100%;
bottom: 0;
padding: 10px;
color: #fff;
transform: translateY(100%);
}
.fancybox-inner > .fancybox-caption {
display: none;
}
My solution:
CSS:
.fancybox-caption {
display: block;
margin-right: auto;
margin-left: auto;
padding: 0;
bottom: 13px;
text-align: right;
}
.fancybox-caption:before {
background: 0 0;
}
.fancybox-caption:after {
border-bottom: 0;
}
.fancybox-caption.none {
display: none;
}
.fancybox-caption>span {
background-color: #343434;
color: #B6B6B6;
display: inline-block;
padding: 5px 15px;
}
Jquery:
$('[data-fancybox="images"]').fancybox({
idleTime: false,
infobar: false,
beforeShow: function() {
$(".fancybox-caption").addClass('none');
},
afterShow: function() {
$(".fancybox-caption").wrapInner("<span/>");
var imageWidth = $(".fancybox-slide--current .fancybox-content").width();
$(".fancybox-caption").css("width", imageWidth);
setTimeout($(".fancybox-caption").removeClass('none'), 200);
}
});
This maybe can help you.
$('[data-fancybox]').fancybox({
protect: true,
afterShow: function() {
var imageWidth = $(".fancybox-slide--current .fancybox-image-wrap").width();
$(".fancybox-caption").css("width", imageWidth);
}
});
I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});
This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe
Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}
I am building a simple Grocery List App and I am having issues trying to remove a place holder div element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grocery List App</title>
<link type="text/css" href="style/form.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="left_side">
<div id="to_buy">To Buy:</div>
</div>
<div id="right_side">
<div id="in_cart">In Cart:</div>
</div>
</div>
<input type="text" id="item_body" placeholder="Type Item to Add">
<script src="scripts/jquery-1.11.2.min.js"></script>
<script src="scripts/grocery.js"></script>
<script src="scripts/jquery-ui/jquery-ui.js"></script>
</body>
</html>
JS
$(function () {
var rmv = false;
$('#item_body').keydown(function(e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable( {
axis: "x"
});
$(".draggable_item").dblclick(function() {
this.remove();
$('#in_cart > div:first').remove();
});
});
});
CSS
#to_buy {
float:left;
width: 50%;
height: 100%;
color: #00E5EE;
}
#in_cart {
float: left;
width: 49%;
height: 100%;
color: #00E5EE;
}
#container {
width:100%;
height: 100%;
}
#left_side {
height: 100%;
width: 50%;
float:left;
background: #5D5851;
}
#right_side {
height: 100%;
width: 50%;
float: left;
background: #6D5D4D;
}
#item_body {
float:left;
clear:both;
color: #326B62;
}
body {
background: #B1ADA5;
}
.draggable_item {
color: #FFF;
}
.holder {
height: 20px;
}
So the screen is split vertically between "to_buy" and "in_cart." When I add an item to "to_buy" I also add a "dummy" div to "in_cart" so that the two sides remain even. However, when I double click to remove an item, when
$('#in_cart > div:first').remove();
gets called, first one div is removed, then on the next double click two, then four etc etc. Apparently, it is getting called multiple times or something else wonky is going wrong.
This is because you bind event handlers for double click event on every Enter key press so they multiply on every item addition. Just move dblclick registration outside:
var rmv = false;
$('#item_body').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#item_body').val();
$("#to_buy").append('<div class="draggable_item">' + add + '</div>');
$("#in_cart").append('<div class="holder"></div>');
}
$(".draggable_item").draggable({
axis: "x"
});
});
$("#left_side").on("dblclick", ".draggable_item", function () {
this.remove();
$('#in_cart > div:first').remove();
});
Also note, that it makes sense to delegate double click event to the parent container #left_side so you don't have to worry about presence of elements at the time of event registration.
Here is a demo: http://jsfiddle.net/hx11gkcj/
i have two divs that contain separate content. the first div's content is displayed when the user loads the page, and the second div's content is hidden. when the user clicks on the second div, the first div's content disappears, and the second div's content is now visible. but if the user clicks on either div when it is visible, the div's content disappears. i am not skilled in javascript and found most of the code i am using online and would like to know how to make it so that when the div's content is visible the it doesn't disappear when clicking on it.
<!doctype html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("#div1_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div2_text").next().slideUp(300);
} else {
$(this).next().hide(300);
}
if ($(this).next().is(":visible")) {
}
});
$("#div2_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div1_text").next().slideUp(300);
} else {
$(this).next().hide(300);
}
if ($(this).next().is(":visible")) {
}
});
});
</script>
<style>
html {
background: #34495e;
}
#div1 {
background: rgba(255, 255, 255, 0.70);
width: 100%;
height: auto;
}
#div2 {
background: rgba(255, 255, 255, 0.70);
width: 100%;
height: auto;
margin-top: 20px;
}
.text {
text-align: center;
cursor: default;
}
.content {
background: #e74c3c;
height: 50px;
}
#div2_content {
display: none;
}
</style>
</head>
<body>
<div id="div1">
<div id="div1_text" class="text">
blah
</div>
<div id="div1_content" class="content">
</div>
</div>
<div id="div2">
<div id="div2_text" class="text">
blah blah
</div>
<div id="div2_content" class="content">
</div>
</div>
</body>
</html>
Just remove else statement like this :
$(document).ready(function() {
$("#div1_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div2_text").next().slideUp(300);
}
});
$("#div2_text").click(function() {
if ($(this).next().is(":hidden")) {
$(this).next().slideDown(300);
$("#div1_text").next().slideUp(300);
}
});
});
Here is a demo : http://jsfiddle.net/4G8NM/
So I'm trying to use hashes to animate from page to page. The first page that loads (home) fades in and out perfectly, but the page I'm trying to get to, test (look at hash stuff), won't animate/load at all. Why is this?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>Jack Cook</title>
<style>
#navbar ul {
list-style-type: none;
display: block;
text-align: center;
}
#navbar ul li {
display: inline-block;
}
#navbar img {
width: 64px;
height: 64px;
padding: 0 10px 0 10px;
}
#navbar a img:hover {
opacity: 0.4;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
pages = {
"home": ["Home", "This is my homepage!", "<p>Homepage</p>"],
"test": ["Test", "This is a testing page", "<p>Testing</p>"]
};
page = window.location.hash != "" ? window.location.hash.substr(3) : "home";
update(page);
$(document).on("click", "a", function() {
if ($(this).attr("href").substr(0, 4) != "http") {
event.preventDefault();
window.location.hash = "!/" + $(this).attr("href");
}
});
$(window).on("hashchange", function () {
$("body").fadeOut(1000, function () {
update(window.location.hash);
});
});
});
function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page][2]);
$("body").fadeIn(2000);
}
</script>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
<li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li>
</ul>
</div>
<div id="content"></div>
</body>
</html>
window.location.hash will be '#!/test'
Try this:
var page = window.location.hash.replace('#!/', '');
update(page);
Looks like you need to alter page passed into update to take out the extra characters. When utilizing square bracket notation, the property you are trying to reference must be exactly the string that defines it. As it stands currently, you are trying to get a property called ["#!/"] and it doesn't exist.
function update(page) {
$("body").css("display", "none");
$("#content").html(pages[page.replace("#!/", "")][1]);
$("body").fadeIn(2000);
}
jsFiddle example