I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong.
<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>
CSS:
#first {
width:500px;
height:500px;
margin:0 auto;
background-color:#ccc;
}
#second {
width:500px;
height:500px;
margin:0 auto;
background-color:black;
display:none;
}
and I wrote as Jquery
$(document).ready(function() {
$('.change').click(function() {
$('#first').hide();
$('#second').show();
});
});
I was thinking about an if else statement however I am not sure if can handle that yet.
You can use toggle method of jQuery. Make your second div hidden on initialisation...
$(document).ready(function() {
$('.change').click(function() {
$('#first, #second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>
working example: https://jsfiddle.net/tanaydin/kjyq0eow/3/
documentation: http://api.jquery.com/toggle/
edited after: #Darren Sweeney's comment, much better with this selector.
First thing, you won't see emptys divs.
Example - 1
$(document).ready(function() {
$('.change').click(function() {
$('#first').toggle();
$('#second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>
Example - 2
You can check if a element is visible with that:
$(document).ready(function() {
$('.change').click(function() {
if($('#first').is(":visible")){
$('#first').hide();
$('#second').show();
}else{
$('#first').show();
$('#second').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>
Related
I have one div placed over the other and I want it to disappear if the text inside it is longer than 3 characters. I have tried to do this with the code below but it doesn't seem to work. Any advice would be much appreciated.
$(document).ready(function() {
if ($(#top).text().length > 3) {
$(this).addClass('hide')
$(this) removeClass('show');
}
});
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTml:
<div id="bottom" class="hide" Style="background-color: green; width:398px; height:196px;">
<div id="top" class="show" Style="background-color: blue; width:398px; height:196px;">
<!-- PHP REQUEST THAT GIVES LATEST UPDATE GOES HERE. If text string is longer than 2 characters I want this to hide. -->textmorethan3characters
</div>
</div>
There are syntax errors in your code.
$(#top) needed to be replaced by $("#top") (see the quotes around).
There was a missing . before removeClass function.
Correcting the above, the major problem with your code was wrong use of $(this). You thought that it would point to #top, but it didn't.
Correcting all of these, below is a working example:
$(document).ready(function() {
if ($("#top").text().length > 3) {
$("#top").removeClass('show').addClass('hide');
}
});
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTml:
<div id="bottom" class="hide" Style="background-color: green; width:398px; height:196px;">
<div id="top" class="show" Style="background-color: blue; width:398px; height:196px;">
<!-- PHP REQUEST THAT GIVES LATEST UPDATE GOES HERE. If text string is longer than 2 characters I want this to hide. -->textmorethan3characters
</div>
</div>
$(document).ready(function() {
if ($("#top").text().length > 3)
$("#top").fadeOut(2000);
else
$("#top").fadeIn(2000);
});
#top,#bottom{
width:398px;
height:196px;
color:#fff;
}
#top{background-color: blue;}
#bottom{background-color: green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bottom">
<div id="top">sdadsdsad</div>
</div>
$(document).ready(function(){
$("#summary").click(function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div class="clicked">111</div>
<div class="clicked">222</div>
</div>
How to not set beckoned-color to red when html page load.Only change it to red when click on its div?
Remove class="clicked" from your divs?
$(document).ready(function(){
$("#summary").click(function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div>111</div>
<div>222</div>
</div>
You have already added the .clicked to the divs when your page is loading, while you want to toggle the class by clicking on the div. Try the below code:
$(function(){
$(document).on('click', '#summary', function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div class="someclass">111</div>
<div class="someclass">222</div>
</div>
Just remove the inline class clicked from the div tags
HTML CODE:
<div id="summary">
<div >111</div>
<div >222</div>
</div>
Live demo # JSFiddle:http://jsfiddle.net/dreamweiver/qjrahp6t/
Remove class clicked from the HTML. It will become red only after the click.
<div id="summary">
<div class="">111</div>
<div class="">222</div>
</div>
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
I have these 5 div's and I want them to fill the parent div on mouse hover I have these codes but they do not push the previous div (the div above) anywhere.
this is the HTML code:
<div id="photo">
<div id="no1">
</div>
<div id="no2">
</div>
<div id="no3">
</div>
<div id="no4">
</div>
<div id="no5">
</div>
and this is the CSS:
div#photo{
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100,100,100,0.5);
border-radius:20px;
overflow:hidden;}
div#no1{
background-color:#FF00FF;}
div#no2{
background-color:#FF0;}
div#no3{
background-color:#00F;}
div#no4{
background-color:#0F0;}
div#no5{
background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5{
width:970px;
height:61px;
transition:all 2s;}
div#no1:hover, div#no2:hover, div#no3:hover, div#no4:hover, div#no5:hover{
height:305px;}
Try this
I have used simple logic, Just applied height:0 to other div except the hovered div.
This is how to implement Eugen's solution.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div#photo {
margin:10px 0;
padding:5px;
width:980px;
height:300px;
background-color:rgba(100, 100, 100, 0.5);
border-radius:20px;
overflow:hidden;
}
div#no1 {background-color:#FF00FF;}
div#no2 {background-color:#FF0;}
div#no3 {background-color:#00F;}
div#no4 {background-color:#0F0;}
div#no5 {background-color:#F00;}
div#no1, div#no2, div#no3, div#no4, div#no5 {
width:970px;
height:61px;
transition:all 2s;
}
.exp {height:305px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".exp").mouseenter(function () {
$(".exp").not(this).stop();
$(this).prevAll().animate({
height: "0px"
}, 2000, function () {
// Animation complete.
});
$(this).animate({
height: "305px"
}, 2000, function () {
// Animation complete.
});
});
$(".exp").mouseleave(function () {
$(".exp").not(this).stop();
$(".exp").animate({
height: "61px"
}, 200, function () {
// Animation complete.
});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="photo">
<div id="no1" class="exp"> </div>
<div id="no2" class="exp"> </div>
<div id="no3" class="exp"> </div>
<div id="no4" class="exp"> </div>
<div id="no5" class="exp"> </div>
</div>
</body>
</html>
you can use jquery .mouseenter & .mouseleave events to do your job.
here i made an example
Give every #noX id the same class, doesn't matter which name. For instance: .hoverPic.
$( document ).ready(function() {
$('.hoverPic').each(function(){ /*pick each element */
$(this).hover(function(){ /* do something on hover */
$(this).css({ /*set css value */
'width': '100%',
'height': '100%'
});
});
});
});
you need to move the :hover selector to the parent and apply the styles to that states children. I'm not completely clear on your goal but this is how you would style it. Good luck and let me know if you need further help :)
div#photo:hover > div{
height:305px;
}
DEMO
http://jsfiddle.net/59Uph/
EDIT
Try something along the lines of this
http://jsfiddle.net/59Uph/2/
I want to hover 3 item at a time. when i will put cursor one of them. It should hover other two item.
please can help me anyone. i want to do this with javascript. I have make a model but it is not good. i want to use with function so i can use this again and again. please help me.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.boxes {
float: left;
display: inline;
width:150px;
height:100px
}
.box1 {
width:50px;
padding:10px;
border:1px solid gray;
margin:0px;
height: 20px;
}
.box4 {
display: inline-block;
width:150px;
padding:10px;
border:1px solid gray;
height: 100px;
}
</style>
<script>
$(document).ready(function(){
// box 1
$('.box1').mouseover(function(){
$('.box1').css('background-color', '#F7FE2E');
$('.box4').css('background-color', '#F7FE2E');
$('.hov').css('color', '#0f0');
});
$('.box1').mouseout(function(){
$('.box1').css('background-color', '#FFF');
$('.box4').css('background-color', '#FFF');
$('.hov').css('color', '#fff');
});
$('.box4').mouseover(function(){
$('.box4').css('background-color', '#F7FE2E');
$('.box1').css('background-color', '#F7FE2E');
$('.hov').css('color', '#0f0');
});
$('.box4').mouseout(function(){
$('.box4').css('background-color', '#FFF');
$('.box1').css('background-color', '#FFF');
$('.hov').css('color', '#fff');
});
});
</script>
</head>
<div class="boxes">
<div class="box1">Box 1</div>
</div>
<div class="box4">box4 </div>
<br/>
<div class="boxes">
<div class="box1">Box 1</div>
</div>
<div class="box4">box4 </div>
</body>
</html>
If you group your divs by parent divs, you can use the HTML structure to determine what to highlight. I don't know your exact usage model, but something like this:
<div class="boxgroup">
<div class="box1 hover"></div>
<div class="box2 hover">Link</div>
</div>
<div class="boxgroup">
<div class="box1 hover"></div>
<div class="box2 hover">Link</div>
</div>
And then in your jQuery:
$(document).on('mouseover', '.hover', function () {
var boxgroup = $(this).closest('.boxgroup');
boxgroup.find('.hover').addClass('hovercolor');
boxgroup.find('.hov').css('color', '#0f0');
}).on('mouseout', '.hover', function () {
var boxgroup = $(this).closest('.boxgroup');
boxgroup.find('.hover').removeClass('hovercolor');
boxgroup.find('.hov').css('color', '#000');
});
Here, I use .closest() to find what group the div is in, and then highlight all of the other .hover items in that group.
Example:
http://jsfiddle.net/jtbowden/HZtVP/3/
If you want your divs to not be physically grouped, there are other ways to do what you want.
use a mapping javascript object.
and use class 'like' selector to bind functions to elements which have class starting with ".box"
eg :
$(document).ready(function(){
var mapping = { 'box1':'box4','box4':'box1' };
$("[class^=box]").mouseover(function(){
.........
});