this is an odd one, that has eaten a lot of hours of my time. Here's a photo since i can only put 1 link: http://www.screencast.com/t/byVmPE6H . Explanations follow.
Basically, what i need to achieve is point 1 in the photo.
Please notice that the left padding is larger than the right one. The initial padding property is:
padding: 12px 15px; (i.e. 12px vertical padding, 15px horizontal).
Then, via jquery, on page load, i set the left padding to some value like so:
$(links[0]).attr("style","padding-left : "+padding+"px;"); (i could've used .css(), the effect and problem remain the same)
This works beautifully in all browsers, you guessed right, except IE. I'm not talking about versions 6 or 7, but only IE 8. So, in IE 8, on page load, i get point 2 from the photo above.
Remember, that happens only on page load. After i go with the pointer over the link (i.e. triggering the mouseover event), the right padding jumps back into place and it looks perfect, just like in the first link (actually that first photo is from IE8!).
Eliminating the jquery line above doesn't trigger the same behavior, the 15px paddings are ok. There's no event handler registered for "mouseover" on the links. There's only this css property for mouseover:
#navigation li.first:hover a{
background: transparent url(../images/menu_on_left.png) left top no-repeat;
}
(i.e. only a background image change, absolutely nothing else)
So, when page loads, if i use jquery to change the left padding, the right one dissapears. On mouse over, the right padding pops back into view. I cannot explain myself why this happens. If i can't find a solution i'm actually thinking of computing the position of all the menu items and arranging them with position: absolute. Sounds really bad, i know.
Can anyone enlighten me please?
I finally solved it, and beware:
IE is so dumb, that if you have a list of floated elements, and you change the right padding of the first one, the other don't react by moving right, they just stand there. So what i did was:
remove all other menu items (via clone() then remove() unfortunately, i didn't have jquery 1.4 available or i would've used detach(), but it works just fine),
change padding via css()
re-insert the other menu items. Now they sense the new padding on the first item and are positioned correctly.
Crazy, isn't it? just another IE hate reason for me...
I hope this helps anyone, have a nice day!
Related
I have a background image as can be seen here https://www.nova969.com.au/win/novas-sending-you-ed-sheeran
The image is background image to the body.
When the off-canvas menu is opened, the background image shifts.
I will like to keep the background image to stay in the exact location where it was before opening the background image.
You will notice the following css is there for the body
body.has-background {
background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}
When the off-canvas opens, it causes background position shift. I need to ensure that the background does not shift. Can someone help me in getting this resolved?
Combining the two images into one is not an option for our case at this moment.
Also, to replicate,
Go to the link using any browser in Desktop
scroll a bit down the page.
Open the off-canvas menu (the one on the left-hand top side)
You will notice the shift of the background
If i've understood your problem correctly then the following should fix it.
Edit: it seems to only be an issue on devices over 1200px wide? If so, then apply these changes using #media (min-width: 1200px).
Make the following declaration additions to the following selectors:
.disabledInteraction {
position: relative;
}
(or delete the position: fixed; from .disabledInteraction)
and then:
.header-fixed .site-wrapper {
margin-top: 0 !important;
}
The problem lies with fixing the position of body. If you remove this declaration or change it to position: relative, you can see this stops the image moving around problem.
The problem then is that the text moves up the screen, which is caused by some JS changing the margin to -268px. Adding margin: 0 !important overrides this, but if you can you should stop the JS from adding this negative margin.
Hope this helps!
As you might of figured out, this is a standard behavior of a website. Content shifts as your available area shifts (scroll is part of visible area) causing your whole content of the page to shift 17 pixels? (Whatever the scroll is).
What you need to do is append a scroll once the sidebar is open.
I had a play with your website and it works, however there must be some javascript which removes the scroll bar.
I was going to fine the file for you, but you're returning too many files and I don't have time to go through all of them.
Selector:
body > div.site-wrapper.off-canvas-menu-overlay
Add overflow-y: scroll to that div using javascript, on sidebar open event, or when you add it in CSS make sure whatever is manipulating that Element once the sidebar is open that it stops as currently it seems to append styles on open event.
I guess you mean the "hidden" menu on the left side of the page.
The background shifts because the scrollbar is removed when you open the menu.
You could change your code so the scrollbar stays visible, or shift the background image to accomodate for this change. I'm not sure if you can do that so it will work without a flicker in every browser, so your best bet is to keep that scrollbar visible.
What I'm trying to do is have a block(let's call it .top) that is fixed and another block(let's call this one .content), that, when scrolling, goes over .top, this all while retaining everything that .top contains clickable.
Now there are some obvious setups
this
http://jsbin.com/rucifuzu/1/edit?html,css,output
or this
http://jsbin.com/hufomaxu/1/edit?html,css,output
problem with both is a) you have to account for scrollbar width b) scrolling/swiping on .top won't do anything with the element with overflow: auto underneath it
I have thought about a couple of solutions.
First would be pointer-events: none on .top, which would make it "transparent" for mouse events, thus triggering scroll on whavever is under it, the problem with is that click events won't work either, and since I plan on having clickable and selectable thing inside .top, it's a problem. I could reset pointer-events back to auto just for those click/selectable thing, but considering one of those clickable things is gonna be big ass headline, I'm gonna have a problem with scroll not working with mouse position on it again.
Second was what I call scroll delegation, using JS I would catch mousewheel events and change scrollTop on the overflow: auto element. This would work fine, except that it might result in different scroll "feel" while this delegation is happening and while native scroll on .content kicks in. It's also pain in the arse to get this behaving correctly on touch devices.
So neither is ideal. Have I missed any genious and simple solution to this problem?
TL;DR Goal is to have the .top element BOTH clickable and "scroll-thru-able"
this way .top is clickable, but element under it won't scroll - http://jsbin.com/hufomaxu/1/edit?output
this way element under it will scroll, but .top is not clickable - http://jsbin.com/tuluwili/1/edit?output
Not sure I understand 100% - you want to visually cover up a fixed element while scrolling but still be able to click on it?
One simple solution might be using 3 layers instead of 2.
Bottom layer contains your links and is fixed.
Middle layer is the one that will scroll over it and cover it up.
Top layer is fixed and is identical to Bottom layer except clear all the background colors and set opacity to 0.
When you scroll it would look like the bottom is being covered up but you could still click on the top invisible layer.
Might not work if you need to do things like drag to copy text or interact in other ways with the middle layer.
First off, just want to thank the author for making this great bit of code available for free, and the community for helping java-illiterate folks such as myself.
Anywho, here is my issue: When I click a thumbnail to enlarge it, it enlarges just fine. However, when it's enlarged, the only way I can shrink it is by placing the cursor on the very thin ~1px border. I do not get the magnifying glass shrink cursor when over the image itself. If you wish to view the problem, the code is live at http://www.coloradocanopyclub.com/photos.html.
*EDIT TO ADD* This issue seems to be affecting the first photo ONLY. (tallison.JPG)
Thanks for any help!
The universal selector at the top of your style.css file causes this problem:
* {margin:0px;padding:0px;top:0px;left: 0}
It’s ok to set margin and padding to 0 for all elements, but the problem starts when you sets top/left position for all relative/absolute positioned elements 0.
You’ve probably noticed the Highslide full-expand button. This button is placed in an overlay on top of the image. Standard position for the full-expand button is bottom right corner: http://screencast.com/t/WPP4iwwCI9dq Your universal selector moves it to upper left corner: http://screencast.com/t/maXl9rzveH When the button is moved like this with CSS, it will result in an overlay that covers the entire image – colored red in this screenshot: http://screencast.com/t/6pdDnxaMRQ - which makes it impossible to close the image.
You need to change your universal selector to this:
* {margin:0px;padding:0px;}
And add top:0px;left:0px; only to the selectors where you need it, which are (as far as I can see) #navlist li a span and #content
I have an overflow: hidden div which I am scrolling by allowing the user to click and drag the background. There are also links and buttons in this space.
This is what I do for the CSS:
#div-grabscroll {
cursor: url(../img/openhand.cur), move;
}
#div-grabscroll:active {
cursor: url(../img/closedhand.cur), n-resize;
}
This works great but what happens is that while dragging, if the mouse ends up moving (due to reaching scroll limits) over a button the pointer cursor overrides my closedhand cursor.
The desired behavior is that for the entire duration that the div is being controlled by the mouse, I want the cursor to remain the closedhand.
Is there a way to override the cursor without modifying CSS for everything that the mouse might move over? I tried !important on the :active style but that didn't do it.
Answer / Question: What would happen if you had a duplicate div which sat on top of the grabscroll div, but which had no background or content of any type so as to not hide anything behind it, and then set the cursor hand on this.
Does z-index overwrite importance this way?
Does this make sense?
Effectively you have grabscroll - button - opaque grabscroll in that layered order.
This is a very similar problem to creating "modal" dialog boxes, and it will probably have a similar solution: I think you'll have to create an iframe positioned over the content you're scrolling, making it higher up in the z-index order than the content, for the duration of the scroll. This is because on IE (at least) form controls tend not to obey z-index well, which is why "lightbox"-style things do this iframe shim thing.
Here's an answer I gave to another question here on SO which demonstrates the basics of the iframe shim. In that case it's for modal purposes, but the concept and most of the code would apply.
I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.