I'm trying to build fixed html toolbar for my sites network. i'm using css's position:fixed and top:0 and push all elements using body:margin-top.
problem is when a specific site already have a fixed to top element.
is there a way (using css or js) to push down all elements including the fixed ones by a given value of pixels, considering that i don't know if there is one or what is its id/class/top value.
for example, if one site is using HelloBar (www.hellobar.com), i need my bar to push it and all the page content down instead of float over it.
Hope my question is clear enough.
Thanks in advance.
You need to get the height of the toolbar with jquery. Then give the container which is holding the content a margin-top = height of the toolbar.
var toolbar_height = $('.toolbar').height();
$('.container').css({'margin-top':toolbar_height});
Related
I want to generate html code automatically getting input as list of html controls with set of properties such as x,y,value etc (getting those values from hand made sketch of the html page). I have used bootstrap row classes and col-md-* classes for each control by using set of algorithms. Therefore I have added margin-left style for each col-md-* div based on x value of control. Then I could not get responsibility of the page when it is varying screen size. Please help me to solve this problem.
Don't use margin. Use padding.
Also if all fails, just add an inner container.
I'm trying to replicate jQuery slideDown() in GSAP and I'm having trouble working out how jQuery calculates the height of an item which is currently hidden as if it was set to height:auto.
I've tried trawling the code on GitHub but can't find any code which seems to be doing this in jQuery.fn.slideDown or jQuery.fn.animate which it calls.
There are several similar questions on SO and several solutions proposed, all of which seem to have their own problems:
Clone the element, position it off screen and calculate its height. This won't work if the element or any of its child elements have a height set by CSS styles which require the element to be in its original place in the DOM (e.g. an .accordianItem might only be styled if it's inside its .accordian).
Display the item, remove height:0 and quickly calculate the height before hiding the element again and then stating the animation. This might flash the content quickly while calculating the height.
Use visibility:true to show it in place while calculating the height. This would stop the flash and still keep the element in the same position in the DOM for correct height calculation, but it would still push other items below it down because visibility:false items still have a height.
Calculate the height of an item before it's hidden and store it in a data attribute so we know it when we want to open the item later. This won't work if any dynamic content changes the height of the item whilst it's hidden.
jQuery slideDown() "just works" every time so I'd be really interested to know how it works, but I just can't work out where it's doing this. I'm also surprised that GSAP can't do this out of the box, or that nobody has shared a proper solution to this before.
Any help would really be appreciated.
It turns out that if you use $.height() to get the height of an element with display:none it doesn't return 0 as you would expect, it actually sets visibility:hidden, position:absolute etc. and sets display to block to give you the correct height back. I assume this is what's being used internally when doing a slidedown.
This answer helped me a lot.
jQuery: height()/width() and "display:none"
Just to be clear about how this seems to avoid all the problems in my original question. It's basically doing number (3) but avoiding the problem of pushing lower content down the page because it's also set to position:absolute while the height is being calculated. A very simple elegant solution
So I'm working on a website where jcarousel was implemented.
I'm trying to convert the website to responsive and I have a problem with jcarousel plugin.
Problem is:
The jcarousel below 961px has a media queries both in CSS and in JS, where the width and height of the containers is set in order to fit the screen.
However, only the first slide shows, as the rest are blank.
Could you please tell me, whether it's a JavaScript/jQuery problem or purely CSS?
Thanks for any answers!
You have a width: 100% (and in media query width: 1030px;) set on #large-banners li. With these widths they can't float next to each other, instead they will line next under each other.
I managed to solve my own problem which was caused by both, CSS and JS.
I simply had to remove the width:100% form #large-banners li and set its width (with the use of jQuery) to match the width of the parent container.
Apparently, width in pixels allowed the content to be shown.
Here is the website I've been working on: Comotional - test site
I am using flipping cards within "Who we are" section and have problems with z-index. Whichever z-index and css combination I tried (even added additional divs on the back side), I can't fix the flipped content appearing below other cards. If you hover over these, you will see what happens and will see where the problems happens. Is there anyway to get this working via js?
It's limited by your container height, not the z-index. Set the height auto and find another way to set up the grid - perhaps making something like a row container along with a clear div while setting height to the front side of the card.
i think the problem is that you have lots of nested elements so changing the z-index of a nested element does not make them appear above on the stack unless until you make the z-index of the parent container greater than other parent containers that are blocking the view.
you can use hover event to change/increase the z-index of parent container on mouse-in and default on mouse-out
link to justify what I am saying
I would like to create screenshots automatically from a browser window and annotate some elements on the website.
I am having in mind to write something like this: (pseudo code)
Place note right of element "#login": "This is the login button"
And the note should be added.
I obviously have to do this directly inside of CSS and/or Javascript because after taking the screenshot the element information would be lost.
What are possible approaches on this?
I am interested in
Relative positioning of notes, arrows and such next to certain HTML elements
Auto Positioning of boxes to avoid overlaps
and anything else which could be useful in this case.
I post one possible draft solution and hope for alternative and better ones
I am also interested in already existing modules (jQuery or others) to help here.
Concerning relative positioning:
We want to add a note right to the element "#login":
Insert a new element, with absolute positioning, as a child of the <body> node.
Obtain the absolute position of the element by iterating from the element back to the <body> and adding up the relative positions. (jQuery's position() would help)
Set left/top for the note-element to the calculated absolute position of #login plus it's current width
Not answered: Auto positioning