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
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>
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');
});
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
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/
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/