I'm creating an angularjs and asp.net site that uses angular material, and when you scroll on the page and click an mdDialog or an md-menu the top nav will go up the body or "disappear". Here's the css for the top nav
.sidebar-header {
position: fixed;
width: 100%;
height: 50px;
background: #ffffff;
padding: 0 10px;
box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.05);
z-index: 998;}
and here's the html code when the top nav disappears
any suggestions would help, I have no idea how to fix this bug at the moment.
EDIT
The js fiddle: here
Okay so for anyone who has the same bug as me this is my fix:
in jquery:
$(document).ready(function () {
$(window).scroll(function () {
console.log($(window).scrollTop());
var topPixel = $(window).scrollTop();
var sideNavHeaderPixelCount = topPixel - topPixel;
$("<enter top nav identifier here>").css("top", sideNavHeaderPixelCount);
});
});
in css:
#menu_container_0{
top: 52px !important;
}
so I just played around with it until I Found a pattern. if the top offset of the body after clicking on an md-menu is -137.5px then you just need to get the decimal and use that as the top for your top nav (top: .5px). also the #menu_container_0 is the Id of the md-menu I used in my top nav, I didn't want it to overlap.
Related
I have a fixed anchor tag linked to a heading on my website. This anchor tag has an arrow icon that is meant to be a quick way to get to the top of the page. I wanted to position it at the bottom right, but the link is taking up full width at the bottom of the page unless I use "width: fit-content;'. I tried all the display options and float only works on the icon and not the link. It makes the arrow icon float to the position I want but the link width is still taking up all the pages width. Does anyone know how I can fix the width of the link and position it to the bottom right side of the page? Thank you in advance.
NOTE-
I am using bootstrap 5
#quick-anchor-top {
font-size: 25px;
padding: 15px 25px 15px 25px;
border-radius: 50px;
color: rgb(0, 0, 0);
background-color: rgba(182, 20, 20, 0.800);
transition: all 0.4s ease;
margin: 20px;
}
#quick-anchor-top:hover {
transition-duration: 0.4s;
color: white;
background-color: rgba(0, 0, 0, 0.800);
}
<a id="quick-anchor-top" href="#header-title-1" class="fixed-bottom float-end"> <i class="fa-solid fa-arrow-up"></i></a>
You can use predefined bootstrap 5 classes to position elements on the site. Use position-fixed and bottom-0, end-0 to set your element to the bottom right corner.
Just change your classes in the anchor element like this:
<a id="quick-anchor-top" href="#header-title-1" class="position-fixed bottom-0 end-0"><i class="fa-solid fa-arrow-up"></i></a>
Here is an example: https://jsfiddle.net/5j7do14t/
More: https://getbootstrap.com/docs/5.0/utilities/position/
Always try to share your full code so others can understand better and help you in a faster way. As I can see your code is missing an important point which is the position.
Since you didn't share the full code I will try to explain to you how to do a Scroll back to top button in a very easy way.
First of all, you need the button itself, and secondly, do your style, and finally, the JavaScript code that will handle the scroll.
So let's start.
1. Create the button that will take you to the top of the page when clicked on.
<button id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
For the naming, it's better to use the camelCase since you will use its ID in the CSS and in the JS code, so we can call your button (quickAnchorTop instead of quick-anchor-top).
2. Now the most important part, is the CSS to style your button.
#quickAnchorTop {
display: none; /* It should be hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 20px; /* Place the button 20px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: blue; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 16px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Font size */
}
#quickAnchorTop:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
3. Finally, use JavaScript to handle the scroll and show your button.
// Get the button from the current page:
let myBackToTopButton = document.getElementById("quickAnchorTop");
// When you scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
myBackToTopButton .style.display = "block"; // To show your button
} else {
myBackToTopButton .style.display = "none"; // To hidd your button
}
}
// When you click on the button, scroll to the top of the document
function topPageFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
In the above JS code, first, you will get your button by the ID you used which is (quickAnchorTop), then you will have a function to handle the scroll and to show or hide your button.
Now make sure to update your button code and use this final form as you added the onclick event to your button:
<button onclick="topPageFunction()" id="quickAnchorTop" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
Hopefully this will help you.
I usually find answers here for every problem, but couldn't find this:
I'm trying to make a div to be fixed to top:50px.
However, when I scroll the page, this Div is scrolling up and the mentioned position is only applied as sort of a minimum scrolling position...
html:
<div class="homepage-hugger">
<div class="home-box" id="home-box-1">
--- Div's Content ---
</div>
--- some more stuff ---
</div>
JavaScript successfully adds the following css to the #home-box-1 Div:
$("#home-box-1").css({"position": "fixed", "top" : "50px"});
The result css is of course:
position: fixed; top: 50px;
Thanks for reading.
EDIT
Maybe more of my code will help...
So this is the css (scss) for .homepage-hugger and .home-box:
.homepage-hugger{
width: 100%;
background-color: #fff;
position: relative;
z-index: 50;
box-shadow: 0 0px 30px rgba(0,0,0,0.4);
.home-box{
position: relative;
height: 150px;
box-shadow: 0 -10px 20px -5px rgba(0,0,0,0.1) inset;
width: 100%;
max-width: 100%;
}
}
And the full related JavaScript that works as expected (it includes some unrelated code for other scrolling behavior) :
$(document).ready(function(){
function mobileCats(){
var catOffset = $("#home-box-1").offset().top;
var winScroll = $(window).scrollTop();
var boxPos = catOffset - winScroll;
console.log(boxPos <= 50);
if (boxPos <= 50){
$("#home-box-1").css({"position": "fixed", "top" : "50px", "left" : "0px"});
}
}
mobileCats();
$(window).scroll(function()
{
mobileCats();
var x = $(this).scrollTop(); /* scroll pos */
var y = $("html").height();
var z = x / y;
curTop = ((z*500));
$(".main-banners").css("top", (curTop)+"px");
});
});
After further investigation, I was able to find that position: fixed and transform: translate() could not be stacked due to mathematical reasons behind the scenes.
A class added by an add-on to a parent Div has added a transform: translate() style to it which made the position: fixed of the child Div impossible to compute.
To issue was resolved by taking the fixed Div out of all containers, putting it directly under body and repositioning it.
Thank you all for trying to help. appreciated.
I have a header in my webpage which i need to fix it so that the user can see it from every position of the webpage but have tried to put position:fixed but its not working in my case.
Here is my HTML for the header.Inside this HTML tag i have putted Header Menus.
<div class="header-wrapper">
//Menu item HTML
</div>
Here is the css for the Header div..
.header-wrapper {
position:fixed;
top: 0px;
left:0px;
background: url("../img/new_images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 10000;
width: 100%;
height: 77px;
}
I have posted the basic HTML and Css involved .If anything else is need for more clarity of the post.Please let me know it.
Please help me.
If your other content is behind the header you can solve it like this:
body { padding-top: 77px; }
This adds 77px to the top <body>, the rest of your content is lower but your header is still at its original position. Alternatively you can lower the next element 77px lower using:
#next.element.selector { position:relative; top:77px; } /* OR */
#next.element.selector { margin-top:77px; } /* OR */
#next.element.selector { padding-top:77px; }
If you want to know more about the box model and positioning, you can read about it here and here
i am using opencart i installed a custom footer as it preview my Facebook page and so on .. the problem is that i am using Arabic language so it is an RTL format so my icon in the title is not correct as it is in English it is suppose to be in the right of the text but it is not ...
i tried background-position: 100% 0; but it put the image below the text ...
so any ideas
my website is : www.egy-smoke.com
Update your custom style sheet, so this:
footer #custom-footer > div > div > div h3.facebook {
padding-left: 34px;
background: url(../img/icon-facebook.png) 0px 9px no-repeat;
}
becomes like this:
footer #custom-footer > div > div > div h3.facebook {
padding-right: 34px;
background: url(../img/icon-facebook.png) 100% 9px no-repeat;
}
Repeat the above for other custom items like 'اتصل بنا' and 'احنا مين'
I'm wondering if there is a way to have a div, absolutely positioned, hover over the border of the iframe that div is in. Can this be done?
My case:
I have an iframe with a list of files in it, on the right end of each file there is a button. I want to have a div-popup with some functions like a contextmenu. But because this button is at the edge of the iframe the absolutely positioned div is put behind/outside the iframe viewport. I want it to overlay in the rest of my document, outside the iframe.
<iframe width="100" height="100">
div would be in here, say 300 x 100 px.
</iframe>
overlayed div should be visible here as well, basically the div should overlay the iframe.
Well, technically you can't do that. However, if you hijack the events in the iframe, you can recreate the context menu in the main window and use the relative position of the div within the iframe + the absolute position of the iframe itself.
So, to sum up, the context menu can be outside the iframe, and manipulated by the events from within the iframe.
Let me show you how it can be done. I don't have your code, so I'm just making a very crude proof of concept. :)
Example | Code
HTML
<iframe id='my_frame'></iframe>
<div id='copy_to_frame'>
<ul id='files_list'>
<li>data.dat</li>
<li>manual.html</li>
<li>readme.txt</li>
<li>model1.obj</li>
<li>human_model.obj</li>
</ul>
</div>
<div class='context_menu'>
<ul>
<li>Delete</li><li>Open</li><li>Move</li><li>Copy</li>
</ul>
</div>
Javascript
//Declare the necessary variables, good practice
var frame = $("#my_frame"),
frame_contents = frame.contents(),
frame_body = frame_contents .find("body"),
copy_list = $("#copy_to_frame"),
context_menu = $(".context_menu");
var bInside = false;
//Fill the iframe with a list
frame_body.html(copy_list.html());
copy_list.hide();
paint();
//Attach event handler for context menu popup etc.
$("#files_list li", frame_body).click(function(e){
var $this = $(this);
var rel_x = $this.position().left + $this.outerWidth() + 5,
rel_y = $this.position().top + $this.outerHeight()/2 - context_menu.outerHeight()/2 - frame_body.scrollTop(),
abs_x = frame.offset().left,
abs_y = frame.offset().top;
e.stopPropagation();
context_menu.css({
top: rel_y + abs_y,
left: rel_x + abs_x
});
//Show the context menu in this window
context_menu.show();
paint($this);
});
//Hide when clicking outside the context menu
$(document).add(frame_body).click(function(){
if(!bInside){
context_menu.hide();
paint();
}
});
//Determine if mouse is inside context menu
context_menu.mouseenter(function(){
bInside = true;
}).mouseleave(function(){
bInside = false;
});
function paint(el){
$("#files_list li", frame_body).css({
"background-color": "white",
"border": "1px solid transparent"
});
if(el){
el.css({
"background-color": "#ddecfd",
"border": "1px solid #7da2ce"
});
}
}
CSS
#my_frame{
position: absolute;
border: 1px solid gray;
width: 200px;
height: 100px;
top: 50%; left: 50%;
margin-top: -62.5px;
margin-left: -100px;
z-index: 1;
}
.context_menu{
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
z-index: 2;
}
.context_menu ul{
border: 1px solid black;
border-right: 0;
display: inline-block;
}
.context_menu li{
display: inline-block;
border-right: 1px solid black;
padding: 2px;
text-align: center;
margin: 0px;
cursor: default;
}
.context_menu li:hover{
background-color: lightgray;
}
This is a bit of a guess based on the minimal information that was provided, but...
You can manipulate the contents of an <iframe> from within the parent document using jQuery, like so:
$('#myFrame').contents().find('a').click(function() { /*...*/ });
This allows you to detect when the user has clicked inside the <iframe>. Then you can work out where to position your overlay <div>.
Your overlay <div> will need to have position: fixed set. You can use jQuery's .offset() method to get the coordinates of the <iframe> and the link that was clicked inside the <iframe>. You can use these two values to calculate where to position the overlay <div> in the parent document. For example, to position the overlay to the left of the <iframe> and on the same vertical level as the link that was clicked you can do this:
$('#overlayDiv')
.offset({
left: $('#myFrame').offset().left - $('#overlayDiv').width(),
top: $('#myFrame').offset().top + $(this).offset().top
})
See this fiddle for a basic example of how it could work: http://jsfiddle.net/Gxd3M/2/
(Note that this assumes that the contents of the parent document and the iframe both come from the same server, i.e. they have the same origin.)