hid one div if another is showing else the opposite? - javascript

im trying to keep div 1 hidden if div 2 is on display, but when div 2 is hidden i want div 1 to show. im trying to do this in javascript but its not working for me :(
can someone please show me where im going wrong thanks.
<script>
$(".profile-banner2").hide();
$(document).ready(function(){
if ($('.infobox-profile').is(":visible")) {
$(".profile-banner2").hide();
} else if ($('.infobox-profile').is(":hidden")) {
$('.profile-banner2').show();
}
});
</script>

Try like this:
<div id="div1"> this is first div </div>
<div style="display:none"> this is second div</div>
<input type="submit" value="toggle" id="toggle"/>
and the script:
$(function(){
$("#toggle").click(function(){
$("div").toggle();
});
});
Here is the fiddle
EDIT
check the updated fiddle,which works if the anywhere in the html is clicked

Related

Click link and Show Div then Hide the previous Div

Please help me, i'm having a hard time with this one. I already search for this one on google and here in stackoverflow but I wasn't able to find the specific answer to this one. I hope you can help me. Thanks!
Here's my code:
$(document).ready(function() {
$(".link").click(function() {
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
});
The previous div is still showing. :( I want to hide it once clicked the link and scroll down to the specific div within the page. :(
Since you didn't specify what your exact expectation, this one would help i guess
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Click to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>

How to bring a dragable div to front when clicked?

I would like to bring a jQuery dragable div to the front when clicked. I read this post, and build the JsFiddle here, but it did not work. Am I missing something? Thanks!
Here is the jsfiddle I created, the elements are dragable and will be brought to front while dragging, but i could not bring them to front while just being clicked. Is there a conflict between z-index?
JSfiddle
Here is the code:
HTML
<div>
<div id="box1" class="front-on-click"></div>
<div id="box2" class="front-on-click"></div>
<div id="box3" class="front-on-click"></div>
<div id="box4" class="front-on-click"></div>
Here is the javascript:
$(document).ready(function() {
$('#box1,#box2,#box3,#box4').draggable({stack: "div"});
$('.front-on-click').click(function(){
$('.front').removeClass('front');
$(this).addClass('front');
});
});
Thanks!
I couldn't figure out the reason why it won't work, but I got it working by changing your code with the following-
$('.front-on-click').click(function() {
$('.front').css('z-index','0').removeClass('front');
$(this).addClass('front').css('z-index','100');
});
use this
$('.front-on-click').click(function(){
$(".front-on-click").each(function(){
$(this).css("z-index", "1");
$(this).removeClass('front');
});
$(this).css("z-index", "10");
$(this).addClass('front');
});

javascript 2 popup windows in one document

i try to use This code.
It works good with 1 window, but i need 2 popup window.
i try to modified it like this
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$("#popup2").show();
}
function PopUpHide(){
$("#popup1").hide();
$("#popup2").hide();
}
And HTML
<div class="b-container">
Sample Text
Show popup
</div>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
Text in Popup
Hide popup
</div>
</div>
<div class="b-container">
Sample Text
Show popup
</div>
<div class="b-popup" id="popup2">
<div class="b-popup-content">
Text in Popup
Hide popup
</div>
</div>
Where i make mistake?
You're most probably showing two popups above each others, give one of them different position and class and use different Javascript function to show each, or send a variable to the function to decide which one to view.
Would be something like that:
function popupshow(whichOne)
{
if(whichOne == 'first'){
$("#popup1").show();
$("#popup2").hide();
}
else{
$("#popup1").hide();
$("#popup2").show();
}
}
UPDATE: here's the fiddle code as you requested. http://jsfiddle.net/jBf2y/2/
Your code above is working. You just need to set a margin to #popup2 div.
They bot appear together, but as they are in the same position, you only see one of them.
$(document).ready(function(){
PopUpHide();
});
function PopUpShow1(){
$("#popup1").show();
function PopUpShow2(){
$("#popup2").show();
}
function PopUpHide(){
$("#popup1").hide();
$("#popup2").hide();
}
In the end i make like this

Display hidden object from another div

I'm having a little trouble here and hopefully someone can give me a hint on what I'm doing wrong. The object within the main div is hidden and I need it show when I click the button within the secondary div. I'm getting the secondary div to "close" after the button is clicked but I just can't seem to figure out how to make the "checked" object to show.
Here is the HTML:
<div class="separate">
<div class="main">
<h1>Mechanical Room</h1>
<object class="checked"></object>
</div>
<div class="secondary">
<div class="heading">
<h2>Mechanical Room</h2>
<button class="check-in">Check In</button>
<object></object>
</div>
</div>
</div>
And here is my jQuery code:
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").show();
});
});
If your div is set to hidden by visibility then show() method won't show demo
You need to set .css('visibility','visible'); then.
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").css('visibility','visible');
});
});
It is working just fine in my fiddle.
Did you style your object?
Did you make sure it's hidden initially?
$("object").hide();
I added [THE OBJECT] as it's content to see it.
<object class="checked">[THE OBJECT]</object>
Demo: http://jsfiddle.net/u6x84/

Use the same JavaScript code for different divs

This is my JavaScript code:
Javascript
<script> $(document).ready(function(){
$("#showButton").click(function(){ $("#showContent").toggle("slow");
}); }); </script>
The question is how I can use same code for different <div>
Like using this code to open <div id=#showContent></div> and using same code but separately open <div id=#showContentSecond></div>
I have a lot of div elements and I don't want to code something everytime I want to manipulate an element.
The button will need to be related to the div in some way, if it isn't a child of the div, example:
<button class="mybutton" data-something="1">One</button>
<button class="mybutton" data-something="2">Two</button>
<div data-something="1">first</div>
<div data-something="2">second</div>
Javascript:
$(document).ready(function(){
$('button.mybutton').click(function(){
$('div[data-something=' + $(this).data('something') + ']').toggle();
});
});
Fiddle demo: http://jsfiddle.net/vcAtb/
You can use the document.getElementsByTagName element to get all divs.
document.getElementsByTagName("div")
Apply a CSS class to each element you want to have the same behavior
HTML
<div id="div1" class="toggleDiv"></div>
<div id="div2" class="toggleDiv"></div>
<div id="div3" class="toggleDiv"></div>
JavaScript
$(document).ready(function(){
$(".toggleDiv").click(function()
{
$(this).toggle("slow");
});
});
http://jsfiddle.net/gDG6n/

Categories