i really need help, i can't see something that is obvious, and usually then it is the best to ask for help.
I have 4 divs in a 12 column grid.Each div is clickable, and when clicked should display the corresponding div beneath it, that is initially set to display:none.
Everything is fine as long as i click on them in order from first to last, but if i first click, let's say on third div, it shows its corresponding div, but not beneath it, it shows it in place of the first corresponding div.
I am using simple slideToggle here, and really can't understand what is wrong.If i put the corresponding divs(the hidden ones) to visible, they are all displayed correctly, so it is not a CSS error.
I can provide the code, but i put it online, just click on methods tab, and you will see what i mean.
Here is the link
Sorry if i didn't explain it better, english is not my native language.Thanks!
You need to keep space for these div's. Use visibility:hidden and animation but do not use display:none which doesn't keep space for hidden element. All built-in effect functions like hide(), slideToggle() etc. will set display:none to your element.
Related
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/
I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?
I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}
I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.
There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.
All I want is, at the example which can be found here, is the grey box which appears when you click on the 'how to' box to remain ABOVE the elements below. I have been trying to play with z-index but it doesn't seem to work.
I don't really want it to push the other elements out of position when opened, which happens if I remove the height attribute from the parent li, just to expand out as it does, but above everything else.
Must be a z-index solution but I couldn't seem to find it.
Add position: relative to the acitem class which should do the trick
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I got the script from another post on here, but for some reason it isn't working quite correctly on my implementation of it. Everything works fine except for stripping of the "selected" class, therefore the thumbnails all stay highlighted after being clicked. Easiest way is to show in context:
http://www.studioimbrue.com/beta
I changed it around a bit trying to figure out the problem but I couldn't find anything.
On click, get all other thumbnails of group (by parent element fo example) and remove "selected" classname