Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
Improve this question
I have a link on homepage to id. I have a fixed navigation, so I add "scroll-margin-top" to that link, so it wouldn't land behind the navigation, and it works ok. But when i go to that id link from another page, it disregards that "scroll-margin-top" , and lands my section under the navigation.
How can i solve this?
<a href="#column"
<span id="column"> text </span>
I tried "scroll-margin-top"
It's probably caused because your "scroll-margin-top" uses some JavaScript/JQuery function to scroll to the element with a specific offset.
When you navigate from another page to your element with this anchor (id/#) so it's the default browser behavior that it navigates directly to the element.
I'd propose setting the element's id to some wrapper element and giving that element some top padding at the height of the navigation or higher.
link
<div id="column" style="padding-top:80px;">
<span> text </span>
</div>
Another solution is using a smooth scroll written in JavaScript. This function has to be loaded on dom/window ready and then to navigate to the element.
E.g.
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working in a CMS based project where I have a left side navigation and content area.
While I click on the menu for first time, it works as expected i.e clickable but If I click for the second time,it(i.e the link) did not work as expected.
Let me give you the link ,
visit sandbox
Note: In index2.html there is a class called main-wrapper, now when I remove that class , the navigation works perfectly.
Please tell me how to fix this problem.
Include the below css in your css file or in inside head tag and your sidebar will now work.
.main-wrapper-dashboard .sidebar {
z-index: 9999;
}
Your main sidebar had been overlapped by the secondary sidebar in index2.html thats why you were not able to click the links.
By looking at your page I observed that main-wrapper main-wrapper-pages come over main-wrapper main-wrapper-dashboard so you can not click on main-wrapper main-wrapper-dashboard so try to add z-index to that:
.main-wrapper.main-wrapper-dashboard {
z-index: 100; //any value more than 10
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm trying to find out how to write this function but I'm not sure what it is called and where I can find one for an example. I'm a beginner so I'm only familiar with HTML and CSS.
It's NOT a dropdown bar. It's a text that you could click and when you click it, it immediately shows another body of text right underneath it. It does not involve loading anything, as if it is already there. It is immediate. I want to have something in my website where if I have a name of something, there is an arrow by it that says "details" and when you click it, it shows a whole body of text with details. This button typically seems to have a small arrow next to it. Again, it is not any type of menus or bars, it shows a whole body of texts or images.
It sounds like you want to show a hidden element. This is a very basic example, look into jQuery show() & hide(). You're essentially setting the display:none CSS rule on the hidden text to something like `display:block'.
$('#foo').on('click', function(){
$('#text').show();
});
#text {
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Details
<div id="text">This is a test message for the text.</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have button on my website. But it is clickable not only on the button itself but anywhere to the right outside of the button border. What should I do?
You have an <a> tag around the <div> tag of the button, which is very large. This <a> tag is the reason, such a large area is clickable. It would be best to format your button in an <a> tag instead of the <div>. This would resolve your problem. In general, it is best to avoid wrapping semantically block elements like div, p etc. inside inline elements like a or span.
<a href="#show-works" class="works">
Make sure, that the <a> tag is properly marked as display: block or display: inline-block, to prevent having it inline.
Here is a screenshot of your website's inspected elements and the reason of your problem:
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so I just began with doing HTML/CSS/PHP for school. I made a webpage by just adding one image (made in Photoshop) and putting it in an image map. I have 2 buttons and they both are clickable and need to redirect to another page. All my webpages contain only one image. Now my question is, how to jump to another page and reaching the bottom of this image (bottom of the page) when clicking on one of the buttons? (If I click on one of the buttons it automatically loads the next page at the top)
Hope one of you guys can help me out here!
EDIT:
added images from comments because they contains the code:
and
You have to add an element with an id below that image and then add the id to the link.
This is the link:
Link to image
This is the other page:
<img src="img/yourimage.png" /><div id="bottom"></div>
Under your image, just add a element with an id property and add an anchor in the button url.
Page1.php :
Go to bottom
Page2.php :
<img src="image.png" alt="image">
<span id="image-bottom"></span>
If im understanding you correctly, you want your link to go to a specific
scroll point down the target page.
So instead of loading target.html and being at the top of the page
you want to be somewhere lower on the page. or have some lower content
be at the top of the screen when loaded.
in the starting_page.html your link currently looks like this
<a href='target_page.html'>click here</a>
change that to
<a href='target_page.html#Position_1_on_page'>click here</a>
and then edit your target_page.html and put
<div id='Position_1_on_page'></div>
now when someone clicks that link it will load the target_page.html and scroll
it down so that the div called Position_1_on_page will be the topmost element
on the page once it loads
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am not sure how to fix this and I know this question is kind of basic. A random object that is blocking my navigation bar is appearing on the browser side but not in the code, here:
image http://img571.imageshack.us/img571/9861/s4oa.png
But then in the code:
Please help me rectify this.
The issue on your page is that the following element seems to be created automatically and it is altering the spacing for you:
<a original-title=""></a>
If you can use a style sheet you should be able to adjust just the home link as follows:
<a class="home-link" href="/index.php">...</a>
And add the following style rule:
a.home-link {
margin-top: -18px;
}
This isn't particularly pretty or flexible so I would still strongly consider trying to determine where the element is injected and see if you can prevent it from happening. Good luck!
try moving the clearfix above <ul> tag as a separate div.
<div class="clearfix"></div>
<ul>
<!--- all list -->
</ul>
EDIT
Though i doubt it would affect, but still, your <a> tag is not closed in below line :
<a heref="cashcapacity.com"><center><img src="{$theme['logo']}"/></center><a>
and
<div class="navigation_menu">
<div> <!-- either this div is uselessly mentioned or you forgot to close this div -->