Rotation of CSS arrow and javascript toggling - javascript

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

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;
}

Side by side fixed divs - one is overriding the other

http://codepen.io/justinturner/pen/VjyWJE
The linked codepen has a fixed header div.
I'm using javascript to add a menu div on the left when the hamburger icon is clicked. This is also a fixed div.
When the menu div is added, the header div seems to revert to relative positioning, and jumps to the top of the main content div. Scroll down just a hair and then click the hamburger, you'll see what I mean.
What issue am I running into here? When a user clicks the hamburger, I want the header to remain fixed and translate directly to the right like the rest of the content.
<em>too much code to paste</em>
According to the spec and other similar questions here on SO, fixed elements and translates don't "play" well together.
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
Following the first suggestions from above (using left instead of translateX), edit your code to the following and the issue should no longer persist.
.o-wrapper.has-push-left {
left: 300px;
}
.o-wrapper {
position: relative;
transition: left 0.3s;
}
#header-wrapper {
transition: left 0.3s;
}
.has-push-left #header-wrapper {
left: 300px;
}
DEMO

scroll and position: fixed inside overflow: scroll div

I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/
Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18

Keeping images in place after others are removed?

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>

Slide Background with AnythingSlider

I need to slide a background when clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...
What i need is that the background will be slider as much as the liinside the slider...
Any suggestions on how to do that ?
You can see the project here: http://www.i-creative.dk/Slider/
thx
I've built something like what you're asking for, and it's a total pain.
The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.
2 options are:
1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big.
Problems are: you see all the other images if you jump multiple steps at once;
it requires that you use a fixed width;
it's a pain if you want to change the background for just one slide;
Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side.
The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.
Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.
Also, you'll need to spend a hell of a lot of time on optimisation.
Try this css...
#slider {
width: 472px; /* divided the width of the background image by 4 (# of panels) */
height: 570px;
list-style: none;
/* start background after the initial cloned panel: 472px to match panel width */
background: transparent url(../images/background.png) 472px 0 repeat-x;
}
/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
background: transparent url(../images/background.png) 0 0 repeat-x !important;
}
/* Make the background visible */
div.anythingSlider .anythingWindow {
overflow: visible !important;
}
The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.

Categories

Resources