I am trying to animate $("#somediv").slideDown("slow"); and $("#somediv").slideUp("slow"); But when it slideUp() and you make the screen bigger, it keeps hidden.
Example:
function toggle() {
$("#somediv").slideUp("2000");
}
/* Desktop */
#media only screen and (min-width: 1px) {
#somediv {
display: block;
/* More styling */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TOGGLE
<div id="somediv">Div</div>
I've searched on the internet but couldn't find a solution.
Is this possible?
Thanks for helping!
SOLVED For the people with the same problem:
function toggle() {
if($("#somediv").css('display') == "none") {
$("#somediv").slideDown("2000");
}else {
$("#somediv").slideUp("2000");
}
}
$(window).on("resize",function(){
if (window.matchMedia('(min-width: 800px)').matches) {
$("#somediv").show();
}else {
$("#somediv").hide();
}
});
You can't animate display. You need to animate something like the height being zero or the width being zero or transform: scale(0.0001) or something like that.
SOLVED
For the people with the same problem:
function toggle() {
if($("#somediv").css('display') == "none") {
$("#somediv").slideDown("2000");
}else {
$("#somediv").slideUp("2000");
}
}
$(window).on("resize",function(){
if (window.matchMedia('(min-width: 800px)').matches) {
$("#somediv").show();
}else {
$("#somediv").hide();
}
});
Use this:
$("#somediv").slideToggle("2000");
instead of your toggle function and you don't need anything additional.
function toggle() {
$("#somediv").slideToggle("2000");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TOGGLE
<div id="somediv">Div</div>
Related
I have made this jQuery script. Its purpose is to add a class to <body> when body is scrolled a certain amount. However nothing happens on scroll. DOM console doesnt show any error messages. I am a complete Javascript-newbie, so I would not be surprised if the problem is a simple markup mistake.
Any help is appreciated.
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33){
$(document.body).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$(document.body).addClass('fix');
} else {
$(document.body).removeClass('fix');
}
});
};
});
body{
height:200vh;
background-color:blue;
}
.fix{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you want to listen to scroll event on window
Try
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33) {
$(window).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$('body').addClass('fix');
} else {
$('body').removeClass('fix');
}
});
};
});
I have a menu that hides/shows child elements with mouseenter & mouseleave, but the child elements appear when the page loads.
I'd like it so the elements don't appear when the page loads but only on mouseenter & mouseleave.
How would I accomplish this with my code below?
$('.side-nav>li.has-flyout', this).on('mouseenter mouseleave', function(e) {
if (e.type == 'mouseenter') {
$('.side-nav').find('.flyout').hide();
$(this).children('.flyout').show();
}
if (e.type == 'mouseleave') {
var flyout = $(this).children('.flyout'),
inputs = flyout.find('input'),
hasFocus = function(inputs) {
var focus;
if (inputs.length > 0) {
inputs.each(function() {
if ($(this).is(":focus")) {
focus = true;
}
});
return focus;
}
return false;
};
if (!hasFocus(inputs)) {
$(this).children('.flyout').hide();
}
}
});
Doing just $('.side-nav>li.has-flyout').hide(); obviously hides the whole nav item. FWIW I'm using Foundation 5's framework.
Ideal: all your initial styles (like display: none) which is what .hide() does should be written in your stylesheet.
/* css */
.side-nav > li.has-flyout .flyout {
display: none;
}
Less ideal:
// JavaScript
$('.side-nav>li.has-flyout').children('.flyout').hide();
Through CSS, if your sub element list has class e.g. .sub-menu
then just add css
.sub-menu { display: none; }
Couldn't find a solution that actually worked, but I want that on a click, a div shows.
Now this works when I load the page, but then after that first click, I have to click twice every time for the div to show.
Any ideas?
$(document).ready(function () {
setMenu();
});
function setMenu()
{
var headerExtIsOpen = false;
$('#headerExt').hide();
$('#header').click(function () {
if (!headerExtIsOpen) {
$('#headerExt').show();
headerExtIsOpen = true;
} else {
$('#headerExt').hide();
headerExtIsOpen = false;
}
});
}
There is no need to remember the state, just use toggle()
$(function () {
setMenu();
});
function setMenu()
{
$('#headerExt').hide();
$('#header').on("click", function (e) {
e.preventDefault();
$('#headerExt').toggle();
});
}
You said you want to toggle other things.
Best thing would be to toggle a class to change the color
$('#header').on("click", function (e) {
e.preventDefault();
$(this).toggleClass("open");
$('#headerExt').toggle();
});
another way is to check the state
$('#header').on("click", function (e) {
e.preventDefault();
var child = $('#headerExt').toggle();
var isOpen = child.is(":visibile");
$(this).css("background-color" : isOpen ? "red" : "blue" );
});
if the layout is something like
<div class="portlet">
<h2>Header</h2>
<div>
<p>Content</p>
</div>
</div>
You can have CSS like this
.portlet h2 { background-color: yellow; }
.portlet > div { display: none; }
.portlet.open h2 { background-color: green; }
.portlet.open > div { display: block; }
And the JavaScript
$(".portlet h2 a").on("click", function() {
$(this).closest(".portlet").toggleClass("open");
});
And there is layouts where it would be possible to have zero JavaScript involved.
Turns out I had some script hidden in my .js file that closes the menu again when the user clicks elsewhere, that I forgot about.
function resetMenu(e) {
var container = $('#headerExt');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#header').css("background-color", "inherit");
container.hide();
headerExtIsOpen = false;
}
}
I forgot to set the headerExtIsOpen back to false again after closing it in this function (code above shows the fix). Now it works fine :)
I tried this but it isn't working:
$('cbxShowNotifications').click(function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
});
EDIT -
Fixed a few things but I'm still unable to show the DIV AFTER I hide it:
$('#cbxShowNotifications').on('click', (function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
}));
change ($(this).checked) to ($(this).is(':checked'))
You have some syntax issues, and you should monitor the change event on checkboxes:
$('#cbxShowNotifications').on('change', function () {
var tview = $('#treeview');
if ($(this).prop('checked')) {
tview.show();
} else {
tview.hide();
}
});
NOTE: You can set the initial state by the trigger of the change event:
$('#cbxShowNotifications').trigger('change');
You can do it like this:
$('#treeview').on({
'change': function(){
if ($('div').css('display') == 'block') {
$('div').hide();
} else {
$('div').show();
}
}
})
jsfiddle: http://jsfiddle.net/PWAwz/
is this what you're searching? I wrote the codes below you can check they are working in example too. http://jsfiddle.net/jquerybyexample/xe7aL/
$(document).ready(function(){
$('.checkbox1').change(function(){
$('.tview').toggle('fast');
});
});
I know your question is related to jQuery, but if the purpose is purely presentational, perhaps you can consider a CSS way to accomplish the same thing:
#treeview {
display: none
}
#cbxShowNotifications:checked ~ #treeview {
display: block
}
You can take a look at an example here: http://jsfiddle.net/BZQX4/5/
I have the below jquery statement
$(this).('span.section1').css('background','url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent');
How do I write a if else statement for the css condition. What I mean is if the background image is accordion_closed_left.png then <do this> or else <do this>.
just to be precise <do this> are blocks of statement.
Thanks for your time.
I'd recommend to use a css class instead and then call jQuery's .hasClass() method on it:
css:
.closed {
background: url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent;
}
js:
var $target = $(this).find('span.section1');
if( $target.hasClass( 'closed' ) ) {
$target.removeClass( 'closed' );
}
else {
$target.addClass( 'closed' );
}
How to write this in jQuery with 'guides' as a class name....
<script type="text/javascript" >
function guideMenu()
{
if (document.getElementById('guides').style.display == "none") {
document.getElementById('guides').style.display = "block";
}
else {
document.getElementById('guides').style.display = "none";
}
}
</script>
To naively answer your question:
if ($(this).('span.section1').css('background').match('|/accordion_closed_left\.png"|')) {
}
else {
}
However I support jAndy's answer, .hasClass() is the way to go!