So i have a div which when i click expands, and i want that its paragraph show when it expands, i tried this in jquery
$(document).ready(function(){
$('div').on('click', function () {
if ($(this).height() < 450){
$(this).$('p').show();
$(this).addClass('expanded');
}
else {
$(this).removeClass('expanded');
$(this).$('p').hide();
}
});
});
am i doing something wrong getting its paragraph?
sorry for bad english
$(document).ready(function(){
$('div').on('click', function () {
if ($(this).height() < 450){
$(this > 'p').show(); //change made here, assuming p is inside this element
$(this).addClass('expanded');
}
else {
$(this).removeClass('expanded');
$(this > 'p').hide(); //change made here, assuming p is inside this element
}
});
});
It worked with Satpal's code:
$(this).find('p') instead of $(this).$('p')
Related
I have this short jQuery code to make the picture disappear when the window is resized. For some reason, after it disappears, it doesn't appear again.
Here is the code:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").css("display","none");
} else if($(window).width() >= 700){
$("#side-pic").css("display","show");
}
});
});
Also if by any chance you know if there is a way to make picture move under a certain div in my code, I'll be glad to hear it! Thank you guys in advance!
There is no display property such as display: show. Try using $("#side-pic").css("display","block"); instead.
Another Alternative would be hide/show:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
}
else if($(window).width() >= 700) {
$("#side-pic").show();
}
});
});
That's because the "show" is not a valid display value. https://developer.mozilla.org/en-US/docs/Web/CSS/display
Also, why the else if, isn't an else good enough?
Or rather a reusable CSS class and jQuery's toggleClass() Method:
jQuery( $ => {
$(window).on('resize', function() {
$("#side-pic").toggleClass("is-hidden", $(this).width() < 700);
});
});
.is-hidden {display: none;}
<div id="side-pic">SIDE PIC</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
You can also write a code Like following
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
} else if($(window).width() >= 700){
$("#side-pic").show();
}
});
});
I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.
$( document ).ready(function() {
$(function(){
$(".slide-in").addClass("active");
console.log($(".slide-in"));
});
});
I think the solution could be some kind of toggle system, but i can't figure out how to?
Thank you!
Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.className=='slide-in') {
$(".slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.className=='button'){
$(".slide-in").addClass("active");
isOpened = true;
}
});
Better is to use IDs. So your code would be:
<div id="slide-in"></div>
<div id="button"></div>
and the javascript:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
}
});
You'll also need to change the CSS from classes to IDs
Try this.
var someDiv = document.getElementById('yourDiv');
someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
//do something
}
how to make div click-able?
https://jsfiddle.net/zer00ne/jne1rasb/
$(document).ready(function() {
$('.button').on('click dblclick', function(e) {
$('.slide-in').toggleClass('active');
e.stopPropagation();
});
$(document).on('click', function() {
$(".slide-in").removeClass("active");
});
});
I think this should do the trick.
Edit:
$( document ).ready(function() {
$(".button").on("click",function(){
if($(".slide-in").hasClass("active")){
$(".slide-in").removeClass("active");
}else{
$(".slide-in").addClass("active");
}
});
});
I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?
Heres my code:
<script>
// function that hides text on click
(function($) {
$('#start').click(function() {
$('.lead').hide());
});
});
// my original function that stopped working after i added new one
(function($) {
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
</script>
I think the problem is in the closing tag of the function you're adding.
Try like this:
(function ($){
$('#start').click(function(){
$('.lead').hide();
});
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {
$(document).ready(function(){
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
$(".masthead").css("background-color","inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
At least, closing bracket is wrong here. $('.lead').hide());
Tip: always check developer console first. Have fun coding.
Edit : Note that you have an extra closing bracket in the first function $('.lead').hide());.
You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();
<script>
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$('#start').click(function() {
$('.lead').hide();
});
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if ($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
</script>
To further clarify this problem, here's the current situation: http://jsfiddle.net/Laqqw/1/
I need to hide the bottom element, when ANY of the navs are opened. And when all the navs are closed, the bottom element would show up again.
toggle() doesn't work, because it sometimes ends up not showing the bottom element when all the navs are closed.
I tried using if else with no sensible results. Am I missing something here?
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("footer").hide(300);
} else {
$("footer").show(300);
}
});
});
});
Try this,
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300, function(){
if($("p:visible").length == 0)
$("footer").show(300);
else
$("footer").hide(300);
});
});
});
Check jsfiddle
try like this:
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("#footer").hide(300);
} else {
$("#footer").show(300);
}
});
});
});
I want to be able to hide list items that have less than 3 characters, how do I do this? What is wrong with my code below?
I am a JavaScript/jQuery newbie.
jQuery().ready(function () {
if (jQuery('ol li').length < 3) {
jQuery(this).hide();
};
});
Your code is saying
if (jQuery('ol li').length < 3) { //If I have less than 3 li elements
jQuery(this).hide(); //hide the window object
};
What you want to use is filter
$('ol li').filter( function(){ return $(this).text().length<3; } ).hide();
EDIT - Based on your comment in my post: If it is a span tag that could have other data around it:
$('ol li span').filter( function(){ return $(this).text().length<3; } ).parent().hide()
Fiddle running the span example
You'll need to filter out the elements that have a content of less than 3 characters, and hide those :
$(function() {
$('ol li').filter(function() {
return $(this).text().length < 3 ;
}).hide();
});
$('ul li').each(function() {
if ($(this).text().length < 3)
$(this).hide();
});
Demo
Try this:
$('ol li').filter(function(){ return $(this).text().length < 3; }).hide();
Another alternative could be this:
(Because you are evaluating elements not value characters in your question code snippet)
if($('ol li').length < 3){ $(this).hide(); };
I think you need to get the .html() of your DOM element and then do .length on that.