as described in the title I would like to add a class to the parent element of one element if I have several of the parents.
To explain it in more detail what I mean, I'll give you a quick overview of the initial situation.
The markup:
<div class="box">
<h3>Title</h3>
<p>Some text</p>
<span class="iconfont more"></span>
<div class="slide">
<p>some more text</p>
<span class="iconfont close"></span>
</div>
</div>
As you see I've created a div "box" with some content, a span and also another div "slide" with some content and a span too.
The CSS:
.box {
width: 300px;
height: 500px;
position: relative;
}
.slide {
width: 300px;
height: 500px;
position: absolute;
top: -500px;
left: 0;
transition: all 500 ease-in-out
}
Let's add a bit of styling. The divs now have a width, height and position plus the slide box has received a transition to make the hole thing smooth. You may already know where the journey will end.
So let's do it by bringing up a new player:
.box.slided .slide {
top: 0;
}
For now the rest is pure routine. Add/remove the class .slided to .box by clicking the span. It works fantastic and everyone is happy except me. Because what if I have more of these boxes? Of course using IDs instead of classes to make them unique will solve this too. But what if I don't know how many of them I'll have? And that's exactly the point.
How can I add or remove the class .slided to exact this div.box that contains the span I'm clicking on?
Thanks for your help
Edit: code I've tried
$('div span').stop().click(function(event) {
$('box').addClass('slided');
});
Use $(this) and closest() to traverse the DOM in a relative fashion:
$('.more').click(function () {
$(this).closest('.box').toggleClass('slid');
});
Demo
Note that I've added a negative z-index to your slider div to prevent it from covering the 'more' link, rendering it inaccessible. This is probably not a viable production solution.
Here's an updated version with the transition working properly.
You can find your closest parent that matches your selector like this:
$('div span').stop().click(function(event) {
$(this).closest('.box').addClass('slided');
});
This code will now find its box parent in the context of the span that was clicked.
Related
I have an img on the page with class .ff-og-image-inserted. I need a script to insert an other class .container-closed to hide part of this image with class .ff-og-image-inserted
What i've tried:
$(".ff-og-image-inserted").addClass("container-closed");
.ff-og-image-inserted {
overflow: auto;
height: auto;
}
.ff-og-image-inserted>container-closed {
overflow: hidden;
width: 470px;
height: 80px;
background-color: black;
}
<div><img src="link.jpg" class="ff-og-image-inserted" /></div>
My question:
Why this code is not working? I understand that there might be other solutions but i really need to know first of all why this solution is not working so please suggestions related to this solution and not other solutions.
More info: i can see that the image gets the class .container-closed but the css is not applied at all. I want to add class to the image itself because the parent div of the image has no class or id and i can't change that since these are automated posted images.
Thnx
You're using the > selector, which means 'direct descendent (reference)' :
.ff-og-image-inserted > container-closed {
It should simply be:
.ff-og-image-inserted.container-closed {
As you want to apply the overflow attribute to the parent container, not the image itself.
//
What OP wanted was add a class to the img's parent instead:
$('.ff-og-image-inserted').parent().addClass('container-closed');
I'm having an Issue that I'm trying to apply draggable to some a popup element of an external library (I can't modify them).
The problem is that, the most outer div of this popup is actually slightly outside it and has 0 height (its an arrow shaped div, its kinda like a dialog balloon), so it doesn't properly works with the containment.
I could just chose the inner element as a selector (which is the actual popup bounding box), but then the arrow element will not move with the popup.
As stated, I can't modify these elements in a way of grouping them togheter (Actually I don't even have access to the source, doing it in developer console), so how can I solve this? I would like to keep using JQuery UI, but if not possible I'm open to alternatives.
I've tried multiple selectors, but it won't move the arrow div :
$( ".dialogArrow, #popupDiv" ).draggable({ scroll: false });
Example code :
<div class="dialogArrow" style="height:0; width: 100%; background: red">I'm the parent but my hitbox is wrong
<div id="popupDiv" style="height: 200px; width: 200px; background: green">actual hitbox</div>
<div>i need to move togheter too</div>
</div>
JSFiddle : https://jsfiddle.net/hvkh7mmq/5/
You can make use of the handle option (demo). Like so:
$(function() {
$(".dialogArrow").draggable({
handle: "div#popupDiv",
scroll: false
});
});
Working example: https://jsfiddle.net/Twisty/hvkh7mmq/3/
I did not see a point to your selector, since you want to drag the parent element, not assign .draggable() to both elements. Since the parent has no render-able HTML, it can't be clicked upon in essence. So using the handle option, we can specify something that can be clicked.
Additional
If you inspect the element after dragging, you will see something like:
<div class="dialogArrow ui-draggable" style="height: 0px; width: 100%; background: red none repeat scroll 0% 0%; position: relative; left: 107px; top: 30px;">
<div id="popupDiv" style="height: 200px; width: 200px; background: green; cursor: inherit;" class="ui-draggable-handle">actual hitbox</div>
<div id="other div that needs to move togheter"></div>
</div>
The structure is not changed. All 3 elements are moved.
On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)
this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.
You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">
I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}
As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}
Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.
I'm using this to show/hide the div's on click
function ikesClick() {
filler.style.display='none';
FrontDeskDesc.style.display='none';
LoungeDesc.style.display='none';
StudyDesc.style.display='none';
IkesDesc.style.display='inline';
};
If you view the page source, you can see the entirety of the Javascript there.
My question is, what do I do to make the link clickable?
I'm almost certain this is happening because of the way it's displaying none/inline.
You can observe the HTML here:
<section id="roomInfo">
<section id="filler" style="display:inline">
Hover over or select a colored area for details about individual rooms and locations in the library.
</section>
<section id="IkesDesc" style="display:none;">
<h1>Ike's - Late Night Diner</h1>
<p>
In the hub of President’s Park, Ike’s provides a late night dining option. Visit dining.gmu.edu for hours of operation.
</p>
<img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
</section>
<section id = "FrontDeskDesc" style="display:none;">
Get your temporary keys and stuff here!
</section>
<section id ="LoungeDesc" style="display:none;">
loungin'
</section>
<section id ="StudyDesc" style="display:none;">
Studying for finals yo
</section>
</section><!--end room info-->
The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.
First of all, your link is incomplete:
dining.gmu.edu
So this should be something like:
dining.gmu.edu
Also, since you have jQuery already running on the page, you might want to simplify your code to:
$("#Ikes").click(function() {
$(".objects").hide();
$(this).show();
});
Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.
Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.
UPDATE
What seems to be causing the problem is your layout:
you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.
For example:
#svg {
display: block;
left: 0;
margin: -55px 0 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#roomInfo {
background-color: #CCCCCC;
margin-top: 75%;
outline: 1px solid gray;
padding: 5px;
width: 100%;
}
Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.
I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.
I helped you a bit in this jsFiddle, but I'll leave the rest for you.
Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:
$(document).ready(function() {
$("#area1").click(function() {
$(".extra").hide();
$("#IkesDesc").show();
});
$("#area2").click(function() {
$(".extra").hide();
$("#FrontDeskDesc").show();
});
$("#area3").click(function() {
$(".extra").hide();
$("#LoungeDesc").show();
});
$("#area4").click(function() {
$(".extra").hide();
$("#StudyDesc").show();
});
});
I made the example working so you can copy/paste as you please.
Also, I added the following:
var position = $("#IkesDesc").position();
scroll(0,position.top);
This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).
You can check it as a working example HERE.
I hope that helped you out!
Good luck!
I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)
http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/
Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>
If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">
display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..
Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.
When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.