display different div when click buttons - javascript

I am trying to accomplish a page which has two buttons on the bottom. Clicking each of these buttons will bring out different content.
For example:
<div id="page1">...some content...</div>
<div id="page2">...some content...</div>
My css:
#page1 { display: block;}
#page2 { display: none;}
And the buttons are images:
<div id="button1"><img src="images/button1.png"/></div>
<div id="button2"><img src="images/button2.png"/></div>
I am using javascript to make the buttons work. #block is an object that moves when the buttons are clicked:
<script language="javascript">
$(document).ready(function () {
$("#button1").click(function () {
$("#block").animate({
left: "10px"
});
$("#page1").attr("display", "block");
$("#page2").attr("display", "none");
});
$("#button2").click(function () {
$("#block").animate({
left: "100px"
});
$("#page1").attr("display", "none");
$("#page2").attr("display", "block");
});
});
</script>
So when #button1 is clicked:
#page1 will be changed to display:block;
#page2 will be changed to display:none; - hidden
When #button2 is clicked:
#page1 will be changed to display:none; - hidden
#page2 will be changed to display:block;
This means it will show the content on page2

display is not an attribute, it's a property of the style attribute/object. But jQuery has its own show, hide and toggle methods, so you can simply use this:
<script language="javascript">
$(document).ready(function()
{
$("#button1").click(function(){
$("#block").animate({left:"10px"});
$("#page1, #page2").toggle();
});
$("#button2").click(function(){
$("#block").animate({left:"100px"});
$("#page1, #page2").toggle();
});
});
</script>

you really should have a css class called page and another called page-invisible. Then you just do
$('#page1').addClass("page-invisible");
$('#page2').removeClass("page-invisible");
the class page-invisible just is {display:none}, or it can be something like {opacity:.3; z-index:0} etc to have it kind of "behind" the other one (you would have to set position absolute etc to put the divs on top of eachother.

Related

How To Make visible a button only when a div clicked

$(document).ready(function () {
$(".col-sm-4.righPanelRobotIcons").click(function () {
$("#Schedule").show();
});
});
Here .col-sm-4.righPanelRobotIcons is A generic div class.When I click the div I want to show a button which has Schedule as Button id and initially hidden visibility. Can anyone help me out?
You have to use display: none; on your css to hide your button.
$(".col-sm-4.righPanelRobotIcons").click(function() {
$("#Schedule").show();
});
.righPanelRobotIcons {
width: 100px;
height: 100px;
background-color: red;
}
#Schedule {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 righPanelRobotIcons"></div>
<button type="button" id="Schedule">Click Me!</button>
if you have class "hide" attached to that button, then do this
$(".col-sm-4.righPanelRobotIcons").click(function () {
$("#Schedule").removeClass("hide");
});
.show() works only when you give css property display:none, for visibility:hidden, you have to change css to visibility:visible on click
$(".col-sm-4.righPanelRobotIcons").click(function () {
$("#Schedule").css("visibility", "visible");
});
If you have HTML getting generated dynamically, you might have to use jquery on event.
Can you try something like the snippet below :
$(".col-sm-4.righPanelRobotIcons").on("click",function () {
$("#Schedule").show();
});
$(".col-sm-4.righPanelRobotIcons").on("click", function() {
$("#Schedule").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-sm-4 righPanelRobotIcons"> Click Me!
<button type="Button" id="Schedule" style="display:none">Schedule</button>
</div>

jQuery slideDown not functioning correctly

I wish to animate a div to make it appear and slide down with jQuery.
I have got my script to work where you hover over an image and another div slides in, should the user leave the mouse hover, the div will slide up and disappear.
Problem:
The first time i hover over the image, nothing happens. I have to leave my mouse and hover over it a second time for the effect to start working, I dont get why this is???
jQuery:
function show_action(){
$(function(){
$(".action").hide();
$(".logo").hover(
function(){ $(".action").slideDown(); },
function(){ $(".action").slideUp(); }
);
});
}
CSS:
#action_text{
display:none;
}
HTML:
<div class="center_container">
<div class="action" id="action_text"><span>Click To Upload</span></div>
<img src="images/logo.png" class="logo" onmouseover="show_action();">
</div>
No need to call .hide() on the .action element. Just give it display: none in your css, so that it will not show when the page loads. That way, you don't need the .stop() to clear the animation queue, and it also prevents a 'flicker' effect where your .action element will show up when the page loads for a brief moment until .hide() gets called.
$(document).ready(function() {
$('.logo').hover(
function() {
$(".action").slideDown();
},
function() {
$(".action").slideUp();
}
);
});
.action {
width: 100%;
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="logo">LOGO</span>
</div>
<div class="action">
<span>Action</span>
</div>
I think you are calling function show_action as onhover="show_action() remove that and move the rest code outside function wrapping, otherwise the hover() event handler will only bind after the first hover. additionally use stop() to clear the animation queue
$(function() {
$(".action").hide();
$(".logo").hover(
function() {
$(".action").stop().slideDown();
},
function() {
$(".action").stop().slideUp();
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=logo>Hover here</div>
<div class=action>content<br>here</div>
Update : You can remove $(".action").hide(); by adding following css
.action {
display: none;
}

js Find Class Within Div + toggle CSS/Hide One Show Other

I have 2 divs and each div has a span. By default each span class is set to display: none. I am trying to display: inline the span within whichever div is clicked. If the span is already display: inline then I am trying to revert back to display: none. In other words,
click div1 and span1 shows,
then click div2, span1 hides and span2 shows,
then click div2 again and span2 hides, span1 stays hidden.
How can I achieve this? I am currently stuck on selecting the correct div then I will move on to showing and hiding correctly.
Here is what I currently have:
<html>
<div class="button">foo</div>
<span class='inner'>hey</span> <div class="button">bar</div>
<span class='inner'>hey again</span> </html>
<style>
.inner {
display: none;
}
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
} </style>
<script>
$(document).ready(function() {
$('.button').click(function() {
//first off, I am not able to find the span class='inner' within my div.button so this is not correct to find my .inner within $(this)
//alert($(this).find('.inner').html());
//alert($('.inner',this).html());
//then should I do something like this(sorry for the bad syntax, I'm not sure exactly how to write it yet):
//if $(this).('.inner').css('display', 'inline'); { //this span is visible
$(this).('.inner').css('display', 'none'); //so hide this span
else { //span is not visible
$('.inner').hide(); //hide other span
$(this).find('.inner').css('display', 'inline'); //show this span
});
}); </script>
Thank you
Use this,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
next.toggle();
$('.inner').not(next).hide();
});
});
Demo Fiddle
Or CSS method,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
var cssState = (next.css('display') === 'none')?'inline':'none';
next.css('display',cssState);
$('.inner').not(next).css('display','none');
});
});
Demo Fiddle
.next() - next <span> element.
.toggle() - show/hide based on current state.
You can use jQuery accordian to fix this
All you need to do is import below mentioned lib file
http://code.jquery.com/ui/1.10.4/jquery-ui.js
HTML
<div id="accordion">
<div class="button">foo</div> <span>hey</span>
<div class="button">bar</div> <span>hey again</span>
</div>
JavaScript/jQuery
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true,
active: false
});
})
Please check this demo to get a clear idea
Demo Here
Try,
$('.button').click(function() {
var inner = $(this).next('.inner');
var display = inner.css('display');
inner.css('display',(display === 'none')?'inline':'none');
});
DEMO
Try this :
$(document).ready(function() {
$('.button').click(function() {
$('.inner').hide(); // hide all inner span
$(this).next('.inner').show(); // show next inner span
});
});
Here is the JSFiddle Demo
working code below,please check commenting to understand coding
<script>
$(document).ready(function() {
$(".inner").hide(); //hide all spans
$('.button:first').click(function() {//click on first div
var span1 = $('span:first').show(); // first span will show
});
$('.button:last').click(function() {//click on second div
var span1 = $('span:last').toggle();
var span2 = $('span:first').hide();
});
}); </script>
Test you view this code
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
padding:20px;
cursor:pointer;
}
http://jsfiddle.net/kisspa/24jTa/

how to change focus of (this) from .box > .overlay (child)

<div class="box" id="box1">
<div class="overlay" id="ovlay1">
</div>
</div>
<style>
.box{
height:200px; width:200px;
}
.overlay{
height:50px; width:200px; position:absolite; top:-50px;
}
</style>
<script>
$(".box").mouseover(function(){
// $(".overlay").animate({
// $(this).animate({
top: "+=50px",
});
});
</script>
assuming i have about 5 of the .box divs, each with ascending id from box1 -> box5 etc.
the overlay should slide in on mouseover, but just on the hovered box.. i can't figure out the jquery function for this. runing animate on (".overlay") shows the overlay on every box, using (this) does not work because its obviously referring to (".box")...
how can i focus (this) on the overlay?
You can use the find method of jQuery:
$(".box").mouseover(function(){
$(this).find(".overlay").animate({
top: "+=50px",
});
});
Target the .overlay inside the currently hovered .box
$(".box").on('mouseover', function(){
$(".overlay", this).animate({
top: "+=50px",
});
});
This jQuery will select the overlay that is the child of $(this):
$(this).children('.overlay').animate({
top:"+=50px"
});
So the final piece looks like this:
$(".box").mouseover(function(){
$(this).children('.overlay').animate({
top:"+=50px"
});
});

Slide div down when hover over other div, with timer

I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.
Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/
I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>
CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});

Categories