I'm trying to make a kind of menu: a global div, inside 5 pictures to click and when you click on one, the content appear below, but all in the same area. Here is a picture (the content is hidden when no pictures are clicked).
http://img844.imageshack.us/img844/6359/divy.jpg
Here is what I've done, but without success:
http://jsfiddle.net/zL7Gn/
See code in jsfiddle
My problem is when you click on a picture, the content appear but all the other pictures are moved on the right...
Thanks a lot
Related
I have a popup on my page, it display on clicking any div on the page.
There are multiple divs, with which this popup is associated.
Now the issue is if i click on div, popup gets open, but if i scroll, popup also scroll and come to wrong div.
How to make it fixed to its associated div after click?
Here is a quick example. I'm hoping this is something like what you're talking about. When the first box is clicked, an alert pops up and stays with the first box when scrolling.
I used simple jQuery to create the popup.
$('.box').click(function() {
$('.alert').css('display', 'block');
});
http://jsfiddle.net/d8xwev9o/
I am using anchor tags with div id's assigned to them so the user is moved around the page.
Now my problem is when the user clicks the button, they are successfully transferred but I'm trying to make it so that div its brought to appears at the top of the page, not middle... you can see my progress and what i've tried by visiting the link i'm working on, all code is visible there.. you can see what I mean by clicking the home button.
http://eclipse-developers.com/v2/eclipse-developers.com/
This is because there is no enough space at the bottom of the page. try adding some br at the bottom of the page.
How can I reload the page from Middle, I have 5,6 links showing images and First Image is without a link. So when I click on below links, it always show the top image.
1. Register
2. Show
Your question is exceptionally difficult to understand... but if my guess is correct, you want to place an anchor (with a name) at the position where you want to scroll to. For example:
<a name="mymiddle">...</a>
Then you can call your page thus, and this will scroll to that position:
mypage.htm#mymiddle
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.