Keeping images in place after others are removed? - javascript

I am working on a memory matching game. Right now, when the user clicks on two identical images, they are removed. This part of the game works fine. When the images are removed, I want the other images to stay in place. However, they are shifting towards each other and not leaving space.
Demo: http://jsfiddle.net/kevinferri/bCP4G/
For example, click on the two flowers in the middle column. You will see that the the two outer columns will shift towards each other and fill that empty space. How can I change it so the images will stay in place after others are removed?

You probably don't want to be .remove()-ing elements if you want to the DOM to remember their original layout spacing and sizes. You want to just chuck those elements into hidden visibility so that they're hidden, but they maintain their size and position.
$(element).css('visibility', 'hidden');
That's visibility:hidden in CSS. Do take note of the difference between that and .show() / .hide() or even CSS display:none.

You'll want to give your tds some fixed sizes:
<style>
#playCards td { width: 200px; height: 200px; margin: 0; padding: 0 }
</style>

Related

Vertically aligning animated divs

I have three buttons that set different output text when clicked and I'm trying to use W3.CSS animations to "slide" the text in and out. I almost have it working using two separate divs but cannot get them to align correctly under the buttons; the div for every other button click displays lower than the previous one.
I've tried float, vertical-align: top, display: inline-block, and a few other things so far but either used them incorrectly or something else (a conflicting parent div style, maybe?) is causing problems.
Image with a button's output displaying right under the buttons (as it should)
Image with the next button's output displaying lower than the first
I trimmed code that wasn't relevant while also leaving what was necessary to show the div structure for this particular section.
HTML: The divs with IDs old_output and new_output are what I'm trying to align below the buttons
CSS: div.button_output_container and div.button_output are used for the output divs and their container
JS: Handles button clicks, decides which animation should be used, and sets the output text (aside from demonstrating the issue I think it's mostly irrelevant)
JSFiddle link
I am not sure I totally understand your alignment requirement,
but if you just want your divs to render on the same height, you could opt for position:absolute like so:
div.button_output_container {
position: relative;
}
div.button_output {
margin: 16px 24px;
width: 450px;
position: absolute;
}

Images placed with .append() / .load() not taking on the styles they should be

My website has a few sort of "display containers", into which content is loaded using .load(), depending on which item is selected. These display containers can be a few different states, depending on wether your viewing on a mobile device etc, such as all the containers having word spacing to give the images in them a bit of breathing room, or setting the content to justify.
Now, if I include the images in these containers from the start—that is to say, they are part of the initial DOM—everything shows up fine. The images will be spaced apart using word-spacing if that's the state the containers are told to be in, or the content will be justified if you're on mobile.
The problem is, once content is added to these containers, whether it be using .load() to take it from a different document where it is being stored, or .append(), it is not taking on these properties.
I've made a fiddle to demonstrate here. Unfortunately, I can't demonstrate the .load() function due to only being able to use it on pages from the same domain (at least that's what the jQuery documentation tells me), but you can still see exactly what I'm talking about from the .append() side of things.
In short;
Images in DOM initially work
Images appended / loaded into DOM do not
When mixing (some elements initial, some elements appended), this still holds true for the images placed in each of their separate ways.
If you examine the source of the mixture of initial/loaded, all elements look the same. The first 2 imgs here are the ones with proper word-spacing, while the rest do not have it.
If you add some spaces between the images when appending them it will treat the images like "words" and apply the spacing.
The word-spacing property increases or decreases the white space between words. It's not good for the image. Below should be fine for you:
.projectPagePieces {
width: 100%;
text-align: right;
border: 1px dotted blue;
line-height: 0;
}
.projectPagePieces img {
vertical-align: top;
display: inline-block;
margin-left: 25px;
}

What changes when appending a relative element?

I've noticed that when I append a relative element to another element something changes and the subsequent elements are always added to the right of the previous, so it seems that at some point during the append a left value is changed but I can't figure out which?
A small example would be adding 5 spans to a div and placing them all at left:10 and top:10
To have them on top of each other you'd have to take the amount of items added from the left value. i.e once you add 5 items the following item's left will be 10-5*10
Are there any other ways to find out what the left value of the appended item should be so it goes on top of the previous?
Here's some code examples and a jsfiddle link
Html
<div id="container"></div>
<span id="el" class="drag"></span>
Javascript
for(var i=0;i<5;i++)
{
var element=$('#el').clone();
$(element).html(i);
$(element).attr("id","el"+i);
$('#container').append(element);
$(element).css({
left: 10,
top: 10,
position: 'relative',
marginRight: 0
});
}
$('.drag').draggable();
Update:
I'm not so much looking for a "fix" as I have it working I'd just like to know if there's a value change in the element once a relative element is appended or removed from it
I'm not so much looking for a "fix" as I have it working I'd just like
to know if there's a value change in the element once a relative
element is appended or removed from it
The css from an element doesn't change if you add another element to it if that is what you are asking. The behaviour you see is caused by the browser fitting the elements like you asked it to. Since 'left: 10; top: 10;' is already occupied, it tries to fit it somewhere near there. That said, there is nothing stopping you from counting the amount of elements that a certain element contains. ($('#container').children().length), or the offset of an element on the page (the actual position; $('#el4').offset().left or $('#container .drag:last-child').offset().left). Because relative elements position themselves always relative to other elements, this is most likely not going to help you much.
To have them on top of each other you'd have to take the amount of
items added from the left value. i.e once you add 5 items the
following item's left will be 10-5*10
Are there any other ways to find out what the left value of the
appended item should be so it goes on top of the previous?
If you want the elements to actually stack, you probably need to alter the code so they are properly displayed next to each other, then use margin-left to move the left border into the element, so they are displayed over each other. .draggable() will calculate the position from there, and as long as you don't alter the DOM after you've made the elements draggable you should be fine.
Example jsfiddle: http://jsfiddle.net/LmW8T/2/
for(var i=0;i<80;i++)
{
var element=$('#el').clone();
$(element).html(i);
$(element).attr("id","el"+i);
//$element.addClass('element');
$('#container').append(element);
}
$('#el').remove();
$('.drag').draggable();
With CSS:
.drag {
width: 40px;
height: 40px;
border: 1px dotted blue;
background: #FEEFEF;
display: block;
float: left;
margin-left: -25px;
}
#container {
padding-left: 25px;
width: 200px;
}
This happens because when you use position:relative the element still occupies its space on the page, affecting the other elements. That's why each 10px left property you add, pushes the next element to the left also.
As already pointed out on the comments, using position:absolute solves the issue, as the "absolute" value makes the element float out from the page, and it doesn't occupies its space anymore, also it does not affect other elements.

Rotation of CSS arrow and javascript toggling

I have two div banners that have corresponding CSS arrows. When the banners are clicked, the javascript toggles between revealing and hiding the text underneath. Likewise, the respective arrows rotate down when the text is revealed and back up when the text is hidden.
Now, I want my first div banner to be revealed automatically when the page first loads. However, when I drew my CSS arrows, due to the padding of the div, I can't get the arrow in the first div to be the same as the arrow in the subsequent div(s) and line up properly.
http://jsfiddle.net/nVuQ2/1/
I've tried messing with the placement of the arrow:
.tri0 {
margin-left: 20px;
margin-top: 5px;
}
but the best I can do is push the tri0 arrow up to the padding of the h3 tag and it won't go any farther.
Is there a way that I can set a toggle flag in the toggleClass to make it say that the first div banner is already toggled and subsequent clicks make it un-toggle?
Your issue happens because of the border of your tris elements. You are displaying different borders in each one of your elements, this will make them appear in different ways.
So basically I set them with the same borders values, the same rotation, and when your page first load it toggles your div and show your first message.
Note that is not necessary to have two different classes to toggle your element state, once that they are equal.
Check in the Fiddle.
Not sure if this is the solution that you wanted. But I hope that helps you.
Thanks.
Try using absolute positioning instead of floating, this way you can ensure the arrows are always aligned in the middle. You'd set parent div to position:relative, and arrows to position:absolute;
The code will look like this -
.slide0, .slide1 {
position:relative;
}
.tri0, .tri1 {
position:absolute;
top:0;
bottom:0;
margin:auto 0;
}
.tri0 {
right:5px;
}
.tri1 {
right:10px;
}
EDIT: Whoops, I realised I didn't compensate for the rotated arrow. Because the 10px border makes it effectively 10px wide, position .tri1 with right:10px instead. Updated code above, and update fiddle here.
Updated Fiddle

overflow: hidden on the left side too?

could one use overflow:hidden for both sides?
cause i want the row to be centered.
EDIT: ive got a row of link elements. i want it to be like: http://jqueryfordesigners.com/coda-popup-bubbles/
the row will stick out both to the left and right. not just on the right side. with other words: i want to center a very long row within a div which is styled with overflow:hidden and white-space: nowrap.
here is my code:
http://jsbin.com/afuni/edit
if the row is too long the right elements wont be shown. i want the left elements to not be shown too so that the center link will always be in center.
overflow: hidden will hide content that doesn't fit inside it's box model. Based on the question asked, I believe there is a different CSS solution for you. Can you post the HTML/CSS and your objective?
edit: to center a row that may extend outside its boundaries, I would use z-index: 100, position: relative, and text-align: center. I need to check your markup, however. Hope that helps!
Nope, you can't make the text clip from both edges using overflow: hidden, you need additional markup with negative margins etc. Not worth the trouble I think.

Categories

Resources