I have a function that o'clock open and ( should) close a series of div.
Let's say its' an accordion.
<div class="cat_table_header" onclick="show_hide_table(this);">
The problem is that the first div of this accordion starts always visible, and I would like that this starts closed.
Also if I click it, doesn't close, but if I click another div it closes and open the clicked div.
Any suggestion?
This is the javascript:
jQuery(document).ready(function() {
jQuery(".cat_table_container").hide();
jQuery(".cat_table_container:first").show();
});
function show_hide_table (table) {
table = jQuery(table).parent().find(".cat_table_container");
if (jQuery(table).is(":visible")) {
if (jQuery(table).parents(".cat_container").attr("class") != "cat_container cat_container_parent") {
if (jQuery(".cat_container_parent .cat_table_container").length > 0)
jQuery(table).hide();
}
}
else {
jQuery(".cat_table_container").hide();
jQuery(".cat_container_parent .cat_table_container").show();
jQuery(table).show();
}
}
'
Many thanks
Related
I am able to style the drop-down icon for the select box. However, I want to toggle the icon depending if the dropdown is visible or not.
when dropdown is not visible, show icon1
when user clicks on dropdown, show icon2
when user closes the dropdown, show again icon1.
What I did is to use the :focus on select to manipulate the icon.
The problem is with the last step. When user clicks anywhere on the screen - or press ESC for example - to close the dropdown, the focus is still on the select tag, and the style is not changed back. Only until user clicks one more time, the focus is removed and everything is back to normal.
Is there way to force focus removal when dropdown is closed?
This is examined in Chrome.
https://codepen.io/igorspasic/pen/GQqKqy
p.s. javascript is welcome, of course.
You can include jQuery library and add the following jQuery code in <script> tag.
$(document).ready( function() {
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#x").blur();
}
});
$("#x").change( function() {
$("#x").blur();
});
});
You should be able to set it to blur with JavaScript. Here I've just used a change and mouseout event to remove the focus:
var select = document.querySelector('#x');
function blurSelect() {
select.blur();
}
document.onkeyup = function(e){
if (e.keyCode === 27) {
blurSelect()
}
};
select.onmouseout = function() {
blurSelect()
};
select {
color: white;
background-color: blue;
font-size: 20px;
}
select:focus {
background-color: red;
}
<select id="x">
<option>One</option>
<option>Two</option>
</select>
<br><br><br>
Q: How to remove focus on select when dropdown is closed and turn back to blue?
Hope this helps.
When modal is shown I add a class with overflow: hodden to body tag. So content behind the modal is not scrolling. Everything is good.
BUT
If the original page is big enough to have a scrollbar, then I can see ugly shift of the page to the right, when I open the modal. I find out the reason of such behavior. Overflow: hidden causes scrollbar to dissapear, so that's why it is ~10px shift to the right.
My question is how to fix this. In fact, I need to apply overflow:hidden but still have scrollbar shown.
(function() {
let _scrollPosition;
function preventScroll(e) {
e.preventDefault();
window.scroll(..._scrollPosition);
}
function lock() {
_scrollPosition = [window.pageXOffset, window.pageYOffset];
$(window).on('scroll touchmove', preventScroll);
}
function unlock() {
$(window).off('scroll touchmove', preventScroll);
}
return {
lock,
unlock
};
})();
You can just lock the scrolling position as soon as you open the modal with this code.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I'm trying to show a div when an image is clicked and then hide it after a given number of seconds. I've found two separate code samples that match my needs but I don't have the knowledge to put them together.
the code which makes content disappear after x seconds:
<script>
window.setTimeout(function() {
$('#fadeout').hide(2000);
}, 4000);
</script>
The code which makes the div appear on imageclick:
<SCRIPT>
function fade(div_id, button) {
if(button.value == 'FadeOut') {
$('#'+div_id).fadeOut('slow');
button.value = 'FadeIn';
}
else {
$('#'+div_id).fadeIn('slow');
button.value = 'FadeOut';
}
}
$('#sometext').fadeOut(2);
</script>
Maybe this could help:
$('#fadeout').hide(); // hide div
$('img').live('click', function(e){
e.preventDefault(); //cancel default action of click
$('#fadeout').show().delay(5000).fadeOut(1000); //show div on img click then hide after 5 seconds
});
here's a working sample: http://jsfiddle.net/7X767/3/
Instead of using 'slow', you can use time value in milliseconds.
I'm making my own lightbox and I have problem after closing the lightbox and turning it on again.
Here is the simple function code
(function($) {
$.fn.lghtbx = function() {
var lghtbxLink = $(this);
lghtbxLink.click(function() {
$('body').append("<div id=\"ZoomGallery\"></div>");
$('#ZoomGallery').css({'width': '100%','height': '100%', 'position': 'absolute', 'left': '0px', 'top': '0px', 'backgroundColor':'#000'});
$('#ZoomGallery').live('click',function() {
$('#ZoomGallery').remove();
})
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37://left
alert('left!');
break;
}
})
})
}
})(jQuery);
I'm calling that function like this
$(document).ready(function() {
$('.lightbox').lghtbx();
});
And this is the simple html
<a class="lightbox" href="#">a</a>
When I click on the link and press left arrow on the keyboard alert appears. That's how it's supposed to work. But when I close the lightbox by clicking on the black div and when I open it again by clicking on the link then the problem pops out. Every time I click the left arrow I'm getting alert two times. If I close and open lightbox again and press the left arrow I will get alert three times... and so on.
Can you help me to solve this problem?
first remove the old event
$(document).unbind("keydown").keydown(function(event) {
That's becuase you are binding the event more then once. You should unbind the event when you close the lightbox:
$('#ZoomGallery').live('click',function() {
$('#ZoomGallery').remove();
$(document).unbind("keydown");
})
fiddle here: http://jsfiddle.net/ASS4D/