I am trying to retract my div, then show it with new content based on which link they clicked.
HTML:
<div id="menu">
<ul>
<li>about</li>
<li>contact</li>
<li>cv</li>
</ul>
</div>
<div class="content">
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$(".content").hide('slide', {direction: 'right'}, 1000);
$("#"+clicked).show('slide', {direction: 'left'}, 1000);
});
});
</script>
CSS:
.content {
position: absolute;
left:303px;
top: 200px;
width: 100%;
margin-top: 200px;
background: #6c7373;
}
#content_1, #content_2, #content_3 {
display: none;
}
What happens is: the div retracts, but does not reappear at all, what is going wrong here?
Thanks.
First, notice that the container for all of the potential DIVs has the content class so it's being hidden as well. Since the container is hidden, it won't matter if you "show" one of the contained elements. Second, note that the "hide" statement and the "show" statement will have a race condition since they will both apply to the element that's being hidden. It would be better to show the item in the callback to the hide operation or exclude it from being hidden.
<div class="content_wrapper"> <!-- give it a different class -->
test
<div id="content_1" class="content">
content1
</div>
<div id="content_2" class="content">
content2
</div>
<div id="content_3" class="content">
content3
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("a.menu").click(function() {
var clickedID = '#' + $(this).attr('title');
$(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000);
$(clickedID).show('slide', {direction: 'left'}, 1000);
});
});
</script>
Change the outer .content to .content-wrapper.
Show and hide are both working at the same time. To avoid the conflict (and not hide then show the content that's visible if the user clicks the same item twice), show the one you want and hide the others by selecting them using siblings()
Working demo
$("a.menu").click(function() {
var clicked = $(this).attr('title');
$("#"+clicked).show(1000).siblings().hide(1000);
});
This will also solve the problem you have that you have given the wrapper div the class of .content too.
Also your ul li structure is wrong. You need the a tags inside the li. li must come directly after ul.
Related
[Accordion open after refresh] (https://i.stack.imgur.com/a4Qwr.png)
If I refresh my browser the accordion is expanding automatically, If I click any one accordion it shrinks.
Jquery Code:
$(document).ready(function(){
$(".accordion h1").click(function(){
var id = this.id; /* getting heading id */
/* looping through all elements which have class .accordion-content */
$(".accordion-content").each(function(){
if($("#"+id).next()[0].id != this.id){
$(this).slideUp();
}
});
$(this). next(). toggle(); /* Selecting div after h1 */
});
});
Expectation is, If I refresh all the accordions should shrink.
I do not know your html logic, but I suggest that you use jQuery toggleClass.
$(document).ready(function(){
$(".accordion h1").click(function(){
$(this). next(). toggleClass("accordion-content"); /* Selecting div after h1 */
});
});
.accordion-content {
width: 500px;
height: 500px;
background: #ccc;
}
<div class="accordion">
<h1 id="tab_1">tab 1</h1>
<div attr_id="tab_1" class="accordion-content1">
</div>
</div>
<div class="accordion">
<h1 id="tab_1">tab 2</h1>
<div attr_id="tab_1" class="accordion-content1">
</div>
</div>
What I am trying to achieve is the following
There are two DIVS with dropdown. I need to close one while opening the other on click function.
I am also trying to mouseout once the event is out of the dropdown box.
I would like to close the DIV once the click even happens outside the dropdown box.
Following is the HTML
<div class="first-div" style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<h6>REGISTER</h6>
<div class="second-div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
CSS is following
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
JS is following
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
Is there any way to use this as a function to control multiple DOMs in the HTML? If so could someone assist me with the current example ?
Thanks
The path to follow here is use a common class on your items, you don't need to create new classnames if all will have the same styles and will perform the same action. Check this:
$(document).ready(function() {
$('.cont-div').on('click', 'a', function(e) {
e.preventDefault();
$('.div-dropdown').slideUp(300);
$(this).next('.div-dropdown').stop().slideToggle(300);
});
//To close if you click outside the container divs
$('body').on('click', function(e) {
if (!$(e.target).parents('.cont-div').length) {
$('.div-dropdown').slideUp(300);
}
})
});
body {
height: 600px;
background: #e1e1e1;
}
.cont-div {
display: inline-block;
vertical-align: top;
width: 50%;
}
.div-dropdown {
background-color: #555;
color: white;
height: 100px;
width: 200px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-div">
<h6>REGION</h6>
<div class="div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div><!--
--><div class="cont-div">
<h6>REGISTER</h6>
<div class="div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
If you want to get more specific, you could assign a similar class to both menus, in the case below, I added 'dropdown-div' to the class for both menus and then simply added a trigger whenever you click on something that is not a link, it will hide the menus by calling $('.dropdown-div').hide();
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
$(document).on('click', function(event) {
if (!$(event.target).closest('a').length) {
$(".dropdown-div").hide();
}
});
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="first-div " style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown dropdown-div">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<h6>REGISTER</h6>
<div class="second-div-dropdown dropdown-div">
<p>Drop down test from second DIV</p>
</div>
</div>
You're dealing with state management within a collection. You have 2 dropdowns, but 3 states: dropdown one's state, dropdown two's state, and the collection of dropdowns' state.
Using jQuery, the most common way of handling this I've seen is to start by "resetting" the collection's state each time, by hiding all dropdowns on click.
Then, open the dropdown that is being targeted by the client. This can also be a bit easier if you use a single class to target the collection which also lends itself to be reusable across an infinite number of dropdowns.
<div class="first-div" style="display:inline-block">
<a class="dropdown-trigger"><h6>REGION</h6></a>
<div class="dropdown-menu">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<a class="dropdown-trigger"><h6>REGION</h6></a>
<div class="dropdown-menu">
<p>Drop down test from second DIV</p>
</div>
</div>
JS:
$('.dropdown-trigger').click(function (event) {
event.stopPropagation();
var $menu = $(this).siblings('.dropdown-menu');
$('.dropdown-menu').not($menu).slideUp(300);
$menu.slideToggle(300);
});
$(document).click(closeDropdowns);
function closeDropdowns () {
$('.dropdown-menu').slideUp(300);
}
Working codepen: http://codepen.io/amishstripclub/pen/wzbEVo
You could try using toggle like this:
$(document).ready(function(){
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').toggle();
$('.second-div-dropdown').toggle();
});
$('.second-div-link').on('click', function (event){
$('.first-div-dropdown').toggle();
$('.second-div-dropdown').toggle();
});
});
I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}
Basically I am looking for a code that makes a div visible on a certain location on the webpage. when you scroll trough the website you get at certain headings when you are at a specific heading the div needs to get visible in the navbar.
The div #greybar is the div that needs to get visible only on a certain location while scrolling, the whole navbar is fixed
HTML:
<div class="navbar">
<div class="container">
<div class="logo">
<img src="images/logotekst.png">
</div>
<div id="menubutton"><a onclick="playclip();" href="#homejump">Home</div>
<div id="menubutton"><a onclick="playclip();" href="#aboutjump">About</div>
<div id="menubutton"><a onclick="playclip();" href="#infojump">Info</div>
<div id="menubutton"><a onclick="playclip();" >test</div>
</div>
<div id="greybar"></div>
</div>
CSS:
#greybar {
width: 100%;
height: 5px;
background-color: #A4A4A4;
}
If you are using javascript and jQuery, you can have a look at jQuery functions
hover, show, hide, text. At the end of all pages, there are good examples.
EDIT: You should rather use class="menubutton" and not id="menubutton".
After that, you can use script like
<script>
$( "div.menubutton" ).hover(
function() {
$( "#greybar" ).text( $( this ).text());
$( "#greybar" ).show();
}, function() {
$( "#greybar" ).hide();
$( "#greybar" ).text("");
}
);
</script>
EDIT 2:
add to greybar class position: fixed;
I'm having an issue with trying to get divs to occupy the same space, and to also have a show/hide ability on them when clicking their respective links.
Can anybody please let me know the proper jQuery to put in to make this happen? Below is the code without jQuery.
The idea is that when I click on Print 1, then the piece #1 will show up, and when I click Print 2, #1 will disappear and #2 will take it's place.
Current HTML looks something vaguely like this:
<div id="content">
<div id="SideNav">
<ul>
<li>
<a>Print 1</a>
</li>
<li>
<a>Print 2</a>
</li>
</ul>
</div>
<div id="pieces">
<div id="1">
</div>
<div id="2">
</div>
</div>
</div>
CSS is basically this:
#content {
width:848px;
position:relative;
}
#SideNav {
width:169px;
float:left;
}
#pieces {
width:678px;
top:0px;
float:right;
position:relative;
}
#1 {
position:absolute;
top: 0px;
right: 0px;
z-index:1;
}
#2 {
position:absolute;
top: 0px;
right: 0px;
z-index:2;
}
JSFIDDLE
a Basic example of what you want to achieve :
JS :
$('a').on("click",function(){
alert($(this).text());
if($(this).text() == "Print 1"){
$('#1').show();
$('#2').hide();
}else{
$('#2').show();
$('#1').hide();
}
});
putting an event on click of your anchors and then checking the value of the clicked anchor.
Assuming the first link toggles the visibility of the first div and the second link toggles the second div
$('a').click(function() {
var index = $(this).closest('li').index();
$('#pieces div').eq(index).toggle();
}
And set display:none on the the second div
The trick is to make your markup structure a little more meaningful, and your CSS styling a little more generalized. This allows you to leverage common indexes between the links and the tabs below, as well as to define the style using a single CSS class. Then you can easily scale the solution for any number of links and panels:
jsFiddle
HTML
<div id="content">
<div id="SideNav">
<ul>
<li> Print 1
</li>
<li> Print 2
</li>
</ul>
</div>
<div id="pieces">
<div id="panel1" class="panel">First Div</div>
<div id="panel2" class="panel">Second Div</div>
</div>
</div>
CSS
/*
#content, #SideNav, #pieces
Same As Before
*/
.panel {
display: none;
position:absolute;
top: 0px;
right: 0px;
}
JS
$(function () {
$("a[id^='link']").click(function (e) {
e.preventDefault();
var index = this.id.replace("link", "");
$(".panel").hide();
$("#panel" + index).show();
});
});
You setup the click function for each of the anchors within the #sideNav container, prevent the default anchor tag function(preventDefault(), in case an href attribute is provided) and then execute what you want to do.
$('#sideNav a').click(function(e){
// prevent default link event
e.preventDefault();
// use show()/hide() or toggle()
});