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
Related
Rather than putting exact code down, i wish to ask a conceptual html/css/js question.
Normally a lightbox works by being placed on top of everything on the page using a z-index. What if you didnt want the lightbox on top of everything else? But instead push the footer down to make room for the new content. My gut feeling tells me that if you create the same z-index, and make the positioning relative, it should push all the other div's down. However this is not quite working.
I am trying to achieve the following: The user clicks a thumbnail, which pushes the footer down and opens a new div on the centre of the page with some content. If they decide to press an 'X', it closes the div, return back to the original thumbnail, moving the footer back up the page.
I thought using a lightbox, and modifying the code would be the quickest and easiest way. However i might be going about this all wrong. Any thoughts?
Thank You.
z-index is used only for elements that are stacked on top of each other. This doesn't seem to be the case for what you're trying to achieve.
You need to place the lightbox between the footer and content and set it to be hidden initially and whenever user clicks on the thumnail show the modal with javascript/jquery:
$(".thumb").click(function(){
$(".modal").slideToggle()
})
Here's a simple demonstration:
fiddle
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
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)
I am building a website with a banner and a search bar at the top of the page. The bottom of the banner, by design, is supposed to go behind the search bar. I did this by using z-indexes (The banner is 0, the search bar is 1). I also want the banner to serve as a link to the home page from anywhere on the site.
My problem is that, due to the z-indexing, the banner is unclickable. When I place banner in front of the search bar, the banner is clickable and fine; but when placed behind, it is as if the tag "followed" it and is now unusable.
Is there a way to make my banner z-index to 0, my link z-index to 1, and my search bar z-index to 2? I have tried to assign a z-index to the link (the ) separately from the image using the "style" parameter, but it does not seem to work.
Does the entire banner need to be clickable, or just the area not behind the search bar? If the entire thing doesn't need to be, you could always add a transparent layer over that portion of the banner (though this isn't really something I'd suggest and seems like a hack).
From my understanding, a negative z-index always results in an unclickable link, but that doesn't seem to be your issue. Any chance you could post some source code so we could examine it?
I figured it out. All elements that use the z-index parameter must also be positioned with the position parameter in CSS. My search bar was not positioned.
Source: http://www.w3schools.com/jsref/prop_style_zindex.asp
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}