I am no expert on programing with jQuery but I have a little bit knowledge about the language, the thing is that I want one div to be visible and the other one hidden, as soon as you click the other div it should slide down and the first one should be hidden.
The bug is that if you press one div atm is messes up.
$(document).ready(function () {
$('#link').click(function () {
if ($('.todo-post').is(":hidden")) {
$('#date-visible').slideUp("slow");
$('#date-hidden').slideDown("slow");
$('#tick-hidden').slideDown("slow");
$('.todo-post').slideDown("slow");
} else {
$('.todo-post').slideUp("slow");
$('#date-hidden').slideUp("slow");
$('#tick-hidden').slideUp("slow");
$('#date-visible').slideDown("slow");
}
});
});
That's the code I'm using at the moment, It works for one div there is text everywhere if I add another div, it gets messy. I believe that the code can be re-made so it works properly but sadly I do not know how and I have been searching the web for a while now.
LINK TO MY WEBSITE
You can do this with less code
$(document).ready(function () {
$('#link').on('click', function () {
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
});
Basically what is happening is that our elements have position absolute so if you add this css it will work:
div.todo-avatar-date-hidden {
position: static;
}
div.todo-tick {
position: static;
}
div.todo-post {
position: static;
}
Also you need to put it relatively near the bottom of your css or it will be overridden by the previous code so I advise to go to each element in the css that I have shown and removing the line that makes the element absolute
Edit
$('#link').click(function () {
if($('#date-visible').is(':hidden')) {
if(!($('#date-visible-2').is(':hidden'))) {
$('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
}
}
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
$('#link-2').on('click', function () {
if($('#date-visible-2').is(':hidden')) {
if(!($('#date-visible').is(':hidden'))) {
$('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
}
}
$('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
});
IDs should be unique, no two elements can have the same id in a same page. You are using same id like "date-visible" in your HTML page. Change them and then code accordingly.
Related
I'm implementing slide div for creating theme color. It works fine but when I click the outside it's not closing that div and I tried a lot but not working my code so help me out for this..and I research many resources from the internet I got, but don't know how to implement this. here is my code
function clickedThemebtn() {
var ele = document.getElementsByClassName("theme-colors")[0];
if (ele.classList.contains("shown")) {
ele.classList.remove("shown");
} else {
ele.classList.add("shown");
}
}
Here is my fiddle you can Check Here
Please check this fiddle out.
My approach here was to add an fixed positioned div which will occupy the entire screen and it will handle clicking outside.
HTML Outline
<div class='toggleclickoutside' onClick="handleOutsideClick()"></div>
<div id="toggleshown" class="theme-colors">...</div>
JS handler for outside click
function handleOutsideClick() {
var ele = document.getElementsByClassName("theme-colors")[0];
if (ele.classList.contains("shown")) {
ele.classList.remove("shown");
}
}
Css for new div
.toggleclickoutside{
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
}
You can attach an event listener to the document, that it triggers the close event. Keep in mind that the following will hide the menu when you click anywhere inside the menu. You need further checks to prevent it.
function clickedThemebtn(e) {
var ele = document.getElementsByClassName("theme-colors")[0];
// If the click is outside of the button, remove the class
if (e.target.id === "slideBtn") {
if (ele.classList.contains("shown")) {
ele.classList.remove("shown");
} else {
ele.classList.add("shown");
}
return;
}
// all other cases: outside the button
ele.classList.remove("shown");
}
document.addEventListener('click', clickedThemebtn);
Updated fiddle
Here's a jQuery solution since the fiddle had jQuery fiddle
You'd have to listen for the click event on the document object, then check if the click was within the theme selector before closing it.
document.addEventListener('click', handleDocumentClick);
function handleDocumentClick(event) {
const themeSelector = getThemeSelector();
if (!themeSelector.contains(event.target)) {
hideThemeSelector();
}
}
function getThemeSelector() {
return document.getElementsByClassName("theme-colors")[0];
}
function hideThemeSelector() {
const themeSelector = getThemeSelector();
themeSelector.classList.remove("shown");
}
function showThemeSelector() {
const themeSelector = getThemeSelector();
themeSelector.classList.add("shown");
}
Note that I added a few handy functions for convenience sake.
I updated your fiddle and now it looks like this: https://jsfiddle.net/0nqzpyko/
Sorry if this is a really noobish question but I have just made a form with sections that are toggle-able. Each section has a '.header' which on click will perform a slideToggle on the section div.
I would like to add a triangle either pointing down or sideways to let people know it is toggle-able. (i.e ▶ or ▼).
I have the triangle in a span with the class '.arrowTog'
I was able to get partial success with
$('.header').on('click', function() {
if ($('.arrowTog').text().contains('▼')){
$('.arrowTog').text('▶');
}else{
$('.arrowTog').text('▼');
}
});
When I clicked on one all of the triangles swapped so I tried this (which causes none of them to rotate at all):
$('.header').on('click', function() {
if ($(this).prev('.arrowTog').text().contains('▼')){
$(this).prev('.arrowTog').text('▶');
}else{
$(this).prev('.arrowTog').text('▼');
}
});
This is a sample of the HTML
<div class="header" style="cursor: pointer;">
<span class="arrowTog">▶ </span>
<b>Merchant</b>
</div>
<div class="searchContent" style="display:none;">
Any ideas what I am doing wrong?
Thanks!
In your first version, the problem is you're finding every .arrowTog in the page. You can use the fact that within the click handler, this is bound to the element that was clicked, and then just search within that using find:
$('.header').on('click', function() {
var arrow = $(this).find('.arrowTog');
if (arrow.text().contains('▼')){
arrow.text('▶');
} else {
arrow.text('▼');
}
});
You're using a class. You probably have a number of elements with the same class in it, so jQuery is matching all of them and doing this transformation to all of them.
Use a context (All .arrowTog RIGHT INSIDE THIS NODE):
$('.header').on('click', function(evt) {
if ($('.arrowTog', evt.target).text().contains('▼')){
$('.arrowTog', evt.target).text('▶');
}else{
$('.arrowTog', evt.target).text('▼');
}
});
Why not use CSS?
.arrowTog:before {
content: '▶';
}
.arrowTog.open:before {
content: '▼';
}
And then
$('.header').on('click', function() {
$(this).toggleClass('open');
});
I have a JSFiddle that displays a series of boxes. If one of the boxes is clicked, it expands to cover the other boxes, then displays text. When the now expanded box is clicked, it retracts to its original width and height. This javascript works flawlessly in Firefox, Chrome, and Safari. However, in Internet Explorer (v10), the box expands but fails to retract. Any Insight on why this may be?
JSFiddle: http://jsfiddle.net/QBdDE/
Javascript:
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
$('.overlay-text').hide();
}
else {
$(this).css('z-index', 400) ;
setTimeout(function(){$('.overlay-text').show();},1000);
}
$(this).toggleClass('clicked') ;
});
What's Going On
Problem:
pointer-events support was added in IE11. IE10 is ignoring this, and because your overlay is on top, the mouse is interacting with it. We can get around this though!
Solution:
We need to remove dependency on that CSS rule. To do this, we need to do two things:
1.) We need to make the hover color stays applied even if the :hover effect isn't happening. We can add another selector to our CSS so that the .clicked class will cause the colors.
2.) We need to address what happens when .overlay_text is clicked, and use that to trigger the shrinking animation.
Code
1.) Hover Effect
We need to add in another select to every place :hover is used:
Old CSS:
.first_box:hover {
...background color rule ...
}
New CSS:
.first_box:hover, .first_box.clicked {
...background color rule ...
}
Duplicate the above for all 4 box rules.
2.) .overlay-text Trigger
We need to cause a click on .overlay-text to trigger the shrinking.
Old JS:
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
$('.overlay-text').hide();
}
else {
$(this).css('z-index', 400) ;
setTimeout(function(){$('.overlay-text').show();},1000);
}
$(this).toggleClass('clicked') ;
});
New JS:
We have to add a new selector to the .on() code, then we have to add .clicked to both the selected square, add the overlaying section. Finally we have to remove .clicked from both. We can't use .toggleClass() because we are adding to $(this) and removing from all divs.
$('div, .overlay-text').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
$('.overlay-text').hide();
$('div').removeClass('clicked');
$('.overlay-text').removeClass('clicked');
}
else {
$(this).css('z-index', 400) ;
setTimeout(function(){$('.overlay-text').show();},1000);
$(this).addClass('clicked');
$('.overlay-text').addClass('clicked');
}
});
Summary
I've tested in IE10 and it works.
Working Example:
Extra
If I may say, the CSS structure you are using could be improved and your animations will look a lot better. Chrome and IE both flicker during the animation of the two left blocks.
This is because their width AND position is being animated. If you position them from right:0, only their width will animate and it'll look a lot smoother.
I've created a Fiddle for you to address the above. I used absolute positioning. The CSS ends up being shorter, but mainly the animation doesn't flicker. Take a look:
Working Example:
Extra 2
As per comments from OP, we are going to prevent users from double clicking. Since all animations take 1 second, we will disable clicking from triggering anything for 1 second after each click.
It's actually pretty simple to do. In the Extra 1 above, we cleaned up the JS, and it became this:
$('div, .overlay-text').on('click', function (e) {
if ($(this).hasClass('clicked')) {
$('.overlay-text').hide();
$('div').removeClass('clicked');
$('.overlay-text').removeClass('clicked');
}
else {
setTimeout(function(){$('.overlay-text').show();},1000);
$(this).addClass('clicked');
$('.overlay-text').addClass('clicked');
}
});
We just need to add a global variable that starts true. When once the click happens, set it to false immediately, and after 1 second, set it to true. Then we just check to see if it's true, and don't do anything at all if it's false:
var notdouble = 1;
$('div, .overlay-text').on('click', function (e) {
if (notdouble) {
if ($(this).hasClass('clicked')) {
$('.overlay-text').hide();
$('div').removeClass('clicked');
$('.overlay-text').removeClass('clicked');
}
else {
setTimeout(function(){$('.overlay-text').show();},1000);
$(this).addClass('clicked');
$('.overlay-text').addClass('clicked');
}
notdouble=0;
setTimeout(function(){notdouble=1;},1000);
}
});
Working Example:
Note, this builds from the new structure in the Fiddle version 13, so it won't work exactly with the fixed version of the original structure. The concept can be adapted though.
Not working in IE 9 as the div click event never fires. I think it's covered by the section with class="overlay-text". But I've got a workaround by handling the click event of the section and triggering the div click event
$('section').on('click', function (e) {
$('.overlay-text').hide();
$( "div" ).addClass('clicked') ;
$( "div" ).trigger( "click" );
});
This code is working successfully on the project that I am working on. The problem with this is that the elements that this code affects are positioned absolutely. When .field-name-field-pin-point it clicked the element .group dealer is hidden, but the .field-name-field-pin-point moves off of the page. Ideally, I would like the visibility to be set at none upon page load, but it would probably be easier to do that part in CSS. Here is what I am currently using:
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').toggle();
});
});
There will be more nodes that will be positioned differently so the full class name I provided is necessary. The markup (generally speaking) is as follows:
<div class="node-202">
<div class="group-dealer">...</div>
<div class="field-name-field-pin-point">...</div>
</div>
I am basically creating points on a map that when clicked, bring up a small window with more information about that location.
Here is a reference to my last post if you are looking for more information: Toggle Class Visibility by Clicking on another Class
I suggest your best approach is to add a css rule and just toggle a class on the elements
CSS
.group-dealer.hidden{ visibility:hidden}
JS
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})
Just toggle the visibility then
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
return vis == 'hidden' ? 'visible' : 'hidden';
});
});
});
Try:
$('.node-202 .field-name-field-pin-point').click(function () {
if ($(this).siblings().css('visibility') == 'visible') {
$(this).siblings().css('visibility', 'hidden');
} else {
$(this).siblings().css('visibility', 'visible');
}
});
DEMO here.
Hello I am using the below code...
<script type="text/javascript">
$(function() {
$('#show_advertisement').click(function() {
$('#gallery_logos').fadeOut('slow');
$('#gallery_illustrations').fadeOut('slow');
$('#gallery_webdesign').fadeOut('slow');
$('#gallery_advertisments').fadeIn('slow');
});
$('#show_logo').click(function() {
$('#gallery_advertisments').fadeOut('slow');
$('#gallery_illustrations').fadeOut('slow');
$('#gallery_webdesign').fadeOut('slow');
$('#gallery_logos').fadeIn('slow');
});
$('#show_illustration').click(function() {
$('#gallery_advertisments').fadeOut('slow');
$('#gallery_webdesign').fadeOut('slow');
$('#gallery_logos').fadeOut('slow');
$('#gallery_illustrations').fadeIn('slow');
});
$('#show_web').click(function() {
$('#gallery_advertisments').fadeOut('slow');
$('#gallery_illustrations').fadeOut('slow');
$('#gallery_logos').fadeOut('slow');
$('#gallery_webdesign').fadeIn('slow');
});
$('#show_advertisement').trigger('click');
});
</script>
Basically I am showing multiple lightbox galleries contained in four divs that are stacked on top of each other and are all shown/hidden when you click on four links on the page. The problem I am having is that when the page loads I get a brief view of all the content on the four divs that then fades to the show_advertisement div. While it's only a minor problem I feel that it makes the page look unprofessional.
I have no experience with Javascript or jQuery but I am trying to learn, if you could help me out I would really appreciate it. Thanks!
You can use:
$('#gallery_logos, #gallery_illustrations, #gallery_webdesign').hide();
$('#gallery_advertisments').show();
instead of $('#show_advertisement').trigger('click');
To make sure all is hidden (but #gallery_advertisments) when your page loads, set this to your CSS:
#gallery_logos,
#gallery_illustrations,
#gallery_webdesign {
display: none;
}
#gallery_advertisments {
display: block;
}
And simplify your javascript:
<script type="text/javascript">
$(function() {
$('#show_advertisement').click(function() {
$('#gallery_logos, #gallery_illustrations, #gallery_webdesign').fadeOut('slow');
$('#gallery_advertisments').fadeIn('slow');
});
$('#show_logo').click(function() {
$('#gallery_advertisments, #gallery_illustrations, #gallery_webdesign').fadeOut('slow');
$('#gallery_logos').fadeIn('slow');
});
$('#show_illustration').click(function() {
$('#gallery_advertisments, #gallery_webdesign, #gallery_logos').fadeOut('slow');
$('#gallery_illustrations').fadeIn('slow');
});
$('#show_web').click(function() {
$('#gallery_advertisments, #gallery_illustrations, #gallery_logos').fadeOut('slow');
$('#gallery_webdesign').fadeIn('slow');
});
});
</script>