My open mmenu button is located in the centered div (width: 1300px; margin: 0 auto;).
When open mmenu button is clicked, dropdown mmenu container shows up absolute at top: 0, left: 0; and jumps to the calculated position after half a second delay.
How to prevent this behaviour?
Working example https://jsfiddle.net/xpvt214o/118622/
Related
I have this jsfiddle script that I am having trouble to do the following:
Respond to button click.
To show the box drawn on the canvas
I know that I could make this work if I add "z-index: -1" to
var sss = `
.container:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: url("${url}") 50% 50% no-repeat;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;
}
`;
$(`<style id="dynastyle" type='text/css'>${sss}</style>`).appendTo("head");
But I don't want to do that for a peculiar reason that is too complicated to explain here.
Does anyone know how to get this to work? To be honest, I have no idea why the button is not clickable. enter link description here
Also, I need to be able to draw on top of the canvas. BTW, I don't want to draw the image in the canvas.
After tweaking it for a few hours, I finally got it working. Basically I needed to do the following:
enclosing the buttons in a div that has the position attribute and z-index'd (I used 1, I believe that the default value is 0, giving 1 to the buttons makes it bigger than the 0 for the background image).
place the canvas in a different div and use absolute position to overlay it on top of the div that has the background image and use z-index 1.
When all these two things are done, I can remove the z-index on the dynamic style for the background image. What has giving me a lot of trouble during this was that I keep forgetting to add the position attribute on the elements involved in the layering.
I have problem with fullpage js, situation is:
in full page content there is element with styling for example:
.element{
left: auto;
right: 5vw;
width: 50%;
bottom: 15vh;
transform: none;
}
When page is load (with this section anchor or no ) div looks like for about 100px more to bottom as it should be. When this first section is scrolled down and then back to top position of this element looks as it should be.
I know that element is in same position as in code, but don't know why looks more to bottom before first scroll.
I was also try with min-height and padding:15vh 0 but usucessfuly:/
Thanks for help
solution was to adding height 100vh to parent element of this absolute element. In my case slick slider.
I have a new window with undefined size. How to place it into right bottom corner in the page? The getWidth() and getHeight() functions return -1, because I didnt set them by setWidth() and setHeight(). I dont want to set them to keep the size depending on the content.
You can use Window.setPositionX() to change the horizontal offset from the LEFT border, and setPositionY() for offset from TOP. Unfortunately there is no way to set offset from RIGHT/BOTTOM. So unless you know the width/height of both your window and the main window, this is not possible through Vaadin server calls (as far as I know).
However you can solve it through CSS: define a style name e.g. mywindow using addStyleName("mywindow") and then make a CSS rule like this:
.v-window.v-widget.mywindow {
right: 0;
bottom: 0;
left: auto !important;
top: auto !important;
}
So my image is 1920px x 150px
all I want is the image should remain at the center of the screen when the browser screen bocomes lessthan 1920px, it should auto hide an equal amount of pixels from left and right sides of the image.
eg., if the browser total width is 1520px, then 200px from left and 200px from right should be hidden (I don't want the image to be at the center allways)
Is there some way i can do this?
Thanks in advance
Instead of using the image in an <IMG> tag, use it as the background of a div, give it a class imgBG, and include these styles:
.imgBG{
background: url(images/imagename.jpg) no-repeat 50% top;
width: 100%;
height: 150px;
margin: auto;
}
I have a problem with IE.
I have a fixed div like this:
#fixed {
position: fixed;
top: 0px;
left: 0px;
z-index: 9998;
width: 100%;
height: 40px;
}
Inside this div I want to place another div that has a height that is higher than its holder (higher than 40px). So I put a relative or an absolute div inside it and it works splendid in all browsers except IE, at least IE8.
But in IE8 the child div gets cut because of the height of 40px specified for it's holder.
Is there any workaround to this problem? I'm starting to get gray hairs..
Quick reply: have you tried setting the clip property of the contained div to it's own size?
Another workaround would be (if, say you have a container div with left/right margins auto and position: relative) to have the second div outside the fixed div in your HTML, then position it fixed within the container div instead - since it's also fixed, you can then set top/bottom and left/right positions to suit.